From d290b46a0cb1629b226cb1c8192d8b3dffe74d46 Mon Sep 17 00:00:00 2001 From: Josako Date: Fri, 30 May 2025 05:20:25 +0200 Subject: [PATCH] Improvement of the color scheme of the table editor. --- .../templates/eveai_ordered_list_editor.html | 137 ++++++++++++++++-- 1 file changed, 123 insertions(+), 14 deletions(-) diff --git a/eveai_app/templates/eveai_ordered_list_editor.html b/eveai_app/templates/eveai_ordered_list_editor.html index f8cb989..ac86025 100644 --- a/eveai_app/templates/eveai_ordered_list_editor.html +++ b/eveai_app/templates/eveai_ordered_list_editor.html @@ -48,7 +48,7 @@ window.EveAI.OrderedListEditors = { columns: columns, layout: "fitColumns", // Changed to fitColumns to ensure columns display horizontally movableRows: true, - {#rowHeader: {headerSort:false, resizable: false, minWidth:30, width:30, rowHandle:true, formatter:"handle"},#} + rowHeader: {headerSort:false, resizable: false, minWidth:30, width:30, rowHandle:true, formatter:"handle"}, maxHeight: "50%", // Auto height to display all rows placeholder: "No Data Available", autoResize: false, @@ -372,9 +372,10 @@ document.addEventListener('DOMContentLoaded', function() { height: auto; /* Auto height to display all rows */ min-height: 200px; /* Minimum height */ width: 100%; - border: 1px solid #dee2e6; - border-radius: 0.25rem; + border: 1px solid var(--bs-primary); /* Primary color for border */ + border-radius: 0.375rem; /* Match application's border-radius */ margin-bottom: 0.5rem; + box-shadow: 0 4px 8px rgba(118, 89, 154, 0.2); /* Match application's shadow style */ } /* Ensure the table holder has a scrollbar */ @@ -396,8 +397,14 @@ document.addEventListener('DOMContentLoaded', function() { /* Style for the handle column */ .ordered-list-editor .tabulator-row-handle { cursor: move; - background-color: #f8f9fa; - border-right: 1px solid #dee2e6; + background-color: var(--bs-light, #f8f9fa); + border-right: 1px solid var(--bs-gray-300, #dee2e6); + transition: background-color 0.3s ease; /* Smooth transition for hover effect */ +} + +/* Hover effect for handle column */ +.ordered-list-editor .tabulator-row:hover .tabulator-row-handle { + background-color: var(--bs-secondary); /* Secondary color on hover */ } /* Style for the handle bars to make them more visible */ @@ -410,11 +417,17 @@ document.addEventListener('DOMContentLoaded', function() { } .ordered-list-editor .tabulator-row-handle-bar { - background: #666; + background: var(--bs-primary); /* Primary color for handle bars */ display: inline-block; width: 10px; height: 2px; margin: 1px 0; + transition: background-color 0.3s ease; /* Smooth transition for hover effect */ +} + +/* Change handle bar color on hover */ +.ordered-list-editor .tabulator-row:hover .tabulator-row-handle-bar { + background: #ffffff; /* White handle bars on hover */ } /* Style for the delete button */ @@ -428,10 +441,27 @@ document.addEventListener('DOMContentLoaded', function() { text-align: center; } +/* Style for boolean cell icons */ +.ordered-list-editor .tabulator-cell .material-icons { + font-size: 1.2rem; + vertical-align: middle; +} + +/* Style for true/checked icons */ +.ordered-list-editor .tabulator-cell[aria-checked="true"] .material-icons { + color: var(--bs-primary); /* Primary color for checked state */ +} + +/* Style for false/unchecked icons */ +.ordered-list-editor .tabulator-cell[aria-checked="false"] .material-icons { + color: var(--bs-danger); /* Danger color for unchecked state */ +} + /* Style for the table header */ .ordered-list-editor .tabulator-header { - background-color: #f8f9fa; - border-bottom: 2px solid #dee2e6; + background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-secondary) 100%); /* Match JSE gradient */ + border-bottom: 2px solid var(--bs-secondary); /* Secondary color for border */ + color: #ffffff; /* White text for better contrast on gradient */ } /* Style for the headers container */ @@ -441,13 +471,14 @@ document.addEventListener('DOMContentLoaded', function() { /* Style for the header cells */ .ordered-list-editor .tabulator-col { - background-color: #f8f9fa; + background: transparent; /* Let the header gradient show through */ padding: 8px; font-weight: bold; text-align: center; display: table-cell !important; /* Force display as table cell */ box-sizing: border-box !important; /* Include padding in width calculation */ position: relative !important; /* Ensure proper positioning */ + color: #ffffff; /* White text for better contrast on gradient */ } /* Override any inline styles that might hide column headers */ @@ -466,15 +497,43 @@ document.addEventListener('DOMContentLoaded', function() { white-space: normal; /* Allow header text to wrap */ word-break: break-word; /* Break words to prevent horizontal overflow */ font-weight: bold; - color: #333; + color: #ffffff; /* White text for better contrast on gradient */ } /* Style for the table rows */ .ordered-list-editor .tabulator-row { - border-bottom: 1px solid #dee2e6; + border-bottom: 1px solid var(--bs-gray-300, #dee2e6); /* Match application's row border color */ display: table-row !important; /* Force display as table row */ } +/* Hover effect for rows */ +.ordered-list-editor .tabulator-row:hover { + background-color: var(--bs-secondary) !important; /* Secondary color on hover */ + color: #ffffff !important; /* White text on hover */ +} + +/* Ensure all text in hovered rows changes to white */ +.ordered-list-editor .tabulator-row:hover .tabulator-cell, +.ordered-list-editor .tabulator-row:hover .tabulator-cell * { + color: #ffffff !important; /* White text for all elements in hovered rows */ +} + +/* Style for even rows */ +.ordered-list-editor .tabulator-row-even { + background-color: #f8f9fa; /* Light gray for even rows */ +} + +/* Style for odd rows */ +.ordered-list-editor .tabulator-row-odd { + background-color: #ffffff; /* White for odd rows */ +} + +/* Style for selected rows */ +.ordered-list-editor .tabulator-row.tabulator-selected { + background-color: var(--bs-primary) !important; /* Primary color for selected rows */ + color: #ffffff !important; /* White text for contrast */ +} + /* Style for the table cells */ .ordered-list-editor .tabulator-cell { padding: 8px; @@ -504,8 +563,13 @@ document.addEventListener('DOMContentLoaded', function() { right: 0; top: 50%; transform: translateY(-50%); - color: #007bff; + color: var(--bs-primary); /* Use primary color for the show more indicator */ cursor: pointer; + transition: color 0.3s ease; /* Smooth transition for hover effect */ +} + +.ordered-list-editor .show-more:hover { + color: var(--bs-secondary); /* Use secondary color on hover */ } /* Style for the visible cells */ @@ -523,18 +587,59 @@ document.addEventListener('DOMContentLoaded', function() { min-height: 60px; resize: vertical; width: 100%; /* Ensure textarea fills the cell */ + border: 1px solid var(--bs-gray-300, #dee2e6); /* Match application's input border */ + border-radius: 0.375rem; /* Match application's border-radius */ + padding: 0.625rem 0.75rem; /* Match application's input padding */ + transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus effect */ +} + +/* Focus state for textarea */ +.ordered-list-editor .tabulator-cell textarea:focus { + border-color: var(--bs-primary); /* Primary color for focus state */ + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(118, 89, 154, 0.25); /* Subtle glow with primary color */ } /* Style for the placeholder */ .ordered-list-editor .tabulator-placeholder { padding: 20px; text-align: center; - color: #6c757d; + color: var(--bs-secondary); /* Secondary color for placeholder text */ + font-style: italic; + background-color: var(--bs-light, #f8f9fa); /* Light background for placeholder */ + border-radius: 0.375rem; /* Match application's border-radius */ + margin: 10px; + border: 1px dashed var(--bs-gray-300, #dee2e6); /* Dashed border for empty state */ } /* Style for the Add Row button */ .ordered-list-editor + .btn-primary { margin-top: 0.5rem; + background-color: var(--bs-primary) !important; + border-color: var(--bs-primary) !important; + color: #ffffff !important; + transition: background-color 0.3s ease, border-color 0.3s ease; +} + +/* Hover effect for primary button */ +.ordered-list-editor + .btn-primary:hover { + background-color: var(--bs-secondary) !important; + border-color: var(--bs-secondary) !important; +} + +/* Style for the Expand button */ +.ordered-list-editor + .btn-primary + .btn-secondary { + margin-top: 0.5rem; + background-color: var(--bs-secondary) !important; + border-color: var(--bs-secondary) !important; + color: #ffffff !important; + transition: background-color 0.3s ease, border-color 0.3s ease; +} + +/* Hover effect for secondary button */ +.ordered-list-editor + .btn-primary + .btn-secondary:hover { + background-color: var(--bs-primary) !important; + border-color: var(--bs-primary) !important; } /* Fullscreen mode styles */ @@ -545,15 +650,19 @@ document.addEventListener('DOMContentLoaded', function() { width: 100vw; height: 100vh; z-index: 9999; - background: white; + background: var(--bs-light, #f8f9fa); /* Use light background color */ padding: 20px; margin: 0; overflow: auto; box-sizing: border-box; + border: 2px solid var(--bs-primary); /* Primary color border */ + box-shadow: 0 0 20px rgba(118, 89, 154, 0.3); /* Larger shadow for modal effect */ } .ordered-list-editor.fullscreen-mode .tabulator { height: calc(100vh - 100px) !important; width: 100% !important; + border: 1px solid var(--bs-primary); /* Consistent border */ + box-shadow: 0 4px 8px rgba(118, 89, 154, 0.2); /* Consistent shadow */ }