pieter/eveAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improvement of the color scheme of the table editor.

Browse Source
This commit is contained in:
Josako
2025-05-30 05:20:25 +02:00
parent 73647e4795
commit d290b46a0c
1 changed files with 123 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
eveai_app/templates/eveai_ordered_list_editor.html
View File

@@ -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 */
}
</style>