From e2e2cc7ea086b4c760c9412b25ae81384401f755 Mon Sep 17 00:00:00 2001 From: Avatarsia Date: Thu, 11 Dec 2025 23:08:17 +0100 Subject: [PATCH 1/6] Highlight marked rows in document overviews --- www/themes/new/css/datatables_custom.css | 11 +++++ www/themes/new/js/scripts.js | 59 +++++++++++++++++++++++- 2 files changed, 69 insertions(+), 1 deletion(-) diff --git a/www/themes/new/css/datatables_custom.css b/www/themes/new/css/datatables_custom.css index fa50a08c5..973704430 100644 --- a/www/themes/new/css/datatables_custom.css +++ b/www/themes/new/css/datatables_custom.css @@ -495,3 +495,14 @@ color: #DDD; background-color: #222; } + +/* Highlight rows that are marked via the checkbox column */ +table.dataTable tbody tr.row-marked, +table.display tbody tr.row-marked { + background-color: #e8f2ff !important; +} + +table.dataTable tbody tr.row-marked td, +table.display tbody tr.row-marked td { + background-color: #e8f2ff !important; +} diff --git a/www/themes/new/js/scripts.js b/www/themes/new/js/scripts.js index 22a3f86c2..f50edde67 100644 --- a/www/themes/new/js/scripts.js +++ b/www/themes/new/js/scripts.js @@ -133,9 +133,66 @@ $(function() { $("body").css("overflow", "visible"); }); + /* Toggle background for rows that are marked via checkboxes */ + var markedRowTables = [ + "#angebote", + "#angeboteinbearbeitung", + "#auftraege", + "#auftraegeoffene", + "#auftraegeinbearbeitung", + "#rechnungen", + "#rechnungenoffene", + "#rechnungeninbearbeitung", + "#lieferscheine", + "#lieferscheineinbearbeitung", + "#mahnwesen_list" + ]; + + function markSelectedRows($table) { + $table.find("tbody tr").each(function(){ + var $row = $(this); + var isChecked = $row.find('input[type="checkbox"]:checked').length > 0; + $row.toggleClass("row-marked", isChecked); + }); + } + + function bindMarkedRowHighlight(selector) { + var $table = $(selector); + + if(!$table.length){ + return; + } + + if($table.data("rowMarkedBound")){ + markSelectedRows($table); + return; + } + + $table.data("rowMarkedBound", true); + + var refresh = function(){ + markSelectedRows($table); + }; + + $table.on("change", "tbody input[type=\"checkbox\"]", refresh); + $table.on("draw.dt", refresh); + refresh(); + } + + function refreshMarkedRowTables(){ + markedRowTables.forEach(function(selector){ + bindMarkedRowHighlight(selector); + }); + } + + refreshMarkedRowTables(); + + $(document).on("change", "#auswahlalle", function(){ + window.setTimeout(refreshMarkedRowTables, 0); + }); + }); - From 47fbb902b687e5cd2e34a5d1edcd7f5c233613c5 Mon Sep 17 00:00:00 2001 From: Avatarsia Date: Thu, 11 Dec 2025 23:22:48 +0100 Subject: [PATCH 2/6] Ensure marked rows highlight after DataTables init --- www/themes/new/js/scripts.js | 44 ++++++++++++++++++++++-------------- 1 file changed, 27 insertions(+), 17 deletions(-) diff --git a/www/themes/new/js/scripts.js b/www/themes/new/js/scripts.js index f50edde67..1a5d590e2 100644 --- a/www/themes/new/js/scripts.js +++ b/www/themes/new/js/scripts.js @@ -134,18 +134,20 @@ $(function() { }); /* Toggle background for rows that are marked via checkboxes */ - var markedRowTables = [ - "#angebote", - "#angeboteinbearbeitung", - "#auftraege", - "#auftraegeoffene", - "#auftraegeinbearbeitung", - "#rechnungen", - "#rechnungenoffene", - "#rechnungeninbearbeitung", - "#lieferscheine", - "#lieferscheineinbearbeitung", - "#mahnwesen_list" + var markedRowTableIds = [ + "angebote", + "angeboteinbearbeitung", + "auftraege", + "auftraegeoffene", + "auftraegeoffeneauto", + "auftraegeinbearbeitung", + "rechnungen", + "rechnungenoffene", + "rechnungeninbearbeitung", + "lieferscheine", + "lieferscheineoffene", + "lieferscheineinbearbeitung", + "mahnwesen_list" ]; function markSelectedRows($table) { @@ -156,10 +158,15 @@ $(function() { }); } + function isMarkedTable($table){ + var id = $table.attr("id"); + return id && markedRowTableIds.indexOf(id) !== -1; + } + function bindMarkedRowHighlight(selector) { - var $table = $(selector); + var $table = selector instanceof jQuery ? selector : $(selector); - if(!$table.length){ + if(!$table.length || !isMarkedTable($table)){ return; } @@ -180,13 +187,17 @@ $(function() { } function refreshMarkedRowTables(){ - markedRowTables.forEach(function(selector){ - bindMarkedRowHighlight(selector); + markedRowTableIds.forEach(function(id){ + bindMarkedRowHighlight("#" + id); }); } refreshMarkedRowTables(); + $(document).on("init.dt", function(e, settings){ + bindMarkedRowHighlight($(settings.nTable)); + }); + $(document).on("change", "#auswahlalle", function(){ window.setTimeout(refreshMarkedRowTables, 0); }); @@ -195,4 +206,3 @@ $(function() { }); - From 7ce0ae4731afe38e28cfc508d7132c4a324ddaa1 Mon Sep 17 00:00:00 2001 From: Avatarsia Date: Thu, 7 May 2026 23:18:24 +0200 Subject: [PATCH 3/6] feat(theme): add subtle zebra striping (every 2nd + every 4th row) Two new rules at the end of datatables_custom.css: - tbody tr:nth-child(even) -> #f7f9fb (very light blue tint) - tbody tr:nth-child(4n) -> #eef3f8 (slightly deeper, since 4n is also even; later definition wins) Improves readability on long DataTables-rendered lists. Marked rows (.row-marked) keep priority via the existing !important rules above, so the manual checkbox highlight stays visible regardless of stripe position. --- www/themes/new/css/datatables_custom.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/www/themes/new/css/datatables_custom.css b/www/themes/new/css/datatables_custom.css index 973704430..618b86823 100644 --- a/www/themes/new/css/datatables_custom.css +++ b/www/themes/new/css/datatables_custom.css @@ -506,3 +506,17 @@ table.dataTable tbody tr.row-marked td, table.display tbody tr.row-marked td { background-color: #e8f2ff !important; } + +/* Zebra striping for table readability: + * - every 2nd row: very light blue tint + * - every 4th row: a touch deeper (4n is also even, but defined later so it wins) + * .row-marked above keeps authority via !important and overrides both. */ +table.dataTable tbody tr:nth-child(even) td, +table.display tbody tr:nth-child(even) td { + background-color: #f7f9fb; +} + +table.dataTable tbody tr:nth-child(4n) td, +table.display tbody tr:nth-child(4n) td { + background-color: #eef3f8; +} From 4290389d2f5175638f18585e9e1125ee4ab1291b Mon Sep 17 00:00:00 2001 From: Avatarsia Date: Fri, 8 May 2026 08:25:24 +0200 Subject: [PATCH 4/6] fix(theme): add !important to zebra-striping rules so theme CSS does not override User reported the striping had no visible effect. Cause: the OpenXE theme stylesheet (themes/new/css/styles.css) sets explicit white backgrounds on table tr/td which beats the nth-child selectors without !important. Added !important to both stripe rules and added a third selector (.dataTables_wrapper tbody tr) to cover tables that DataTables wraps but doesn't directly class as .dataTable. .row-marked still wins because its selector specificity is higher, and CSS rules at equal !important fall back to specificity. --- www/themes/new/css/datatables_custom.css | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/www/themes/new/css/datatables_custom.css b/www/themes/new/css/datatables_custom.css index 618b86823..eae2b1a50 100644 --- a/www/themes/new/css/datatables_custom.css +++ b/www/themes/new/css/datatables_custom.css @@ -510,13 +510,21 @@ table.display tbody tr.row-marked td { /* Zebra striping for table readability: * - every 2nd row: very light blue tint * - every 4th row: a touch deeper (4n is also even, but defined later so it wins) - * .row-marked above keeps authority via !important and overrides both. */ + * + * !important is required because the OpenXE theme stylesheet sets a hard + * white background on tr/td which would otherwise win over the nth-child + * selectors here. .row-marked above keeps authority because its + * specificity (table.dataTable tbody tr.row-marked td) is higher than + * the nth-child selectors (table.dataTable tbody tr:nth-child(...) td) + * — at equal !important, higher specificity wins. */ table.dataTable tbody tr:nth-child(even) td, -table.display tbody tr:nth-child(even) td { - background-color: #f7f9fb; +table.display tbody tr:nth-child(even) td, +.dataTables_wrapper tbody tr:nth-child(even) td { + background-color: #f7f9fb !important; } table.dataTable tbody tr:nth-child(4n) td, -table.display tbody tr:nth-child(4n) td { - background-color: #eef3f8; +table.display tbody tr:nth-child(4n) td, +.dataTables_wrapper tbody tr:nth-child(4n) td { + background-color: #eef3f8 !important; } From 2b060572267005171204acb401279adc7facd830 Mon Sep 17 00:00:00 2001 From: Avatarsia Date: Fri, 8 May 2026 08:38:39 +0200 Subject: [PATCH 5/6] fix(theme): zebra-striping selector matches OpenXE styles.css specificity MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Earlier attempt used 'table.dataTable tbody tr:nth-child(even) td' which loses the cascade against the OpenXE theme rule '.dataTables_wrapper table.dataTable.display > tbody > tr > td' (more classes + combinators). Even !important does not help because at equal importance, specificity decides. Verified directly against the live tree (Avatarsia 192.168.0.150) via DOM/getComputedStyle: DataTables sets class='odd' / class='even' on the data rows. Targeting tr.even with the same wrapper-prefix as the theme rule wins specificity; the 4n stripe matches DOM 4n-positions (.even rows at indexes 3, 7, 11, ... → effectively every 4th data row). --- www/themes/new/css/datatables_custom.css | 27 ++++++++++++------------ 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/www/themes/new/css/datatables_custom.css b/www/themes/new/css/datatables_custom.css index eae2b1a50..f8de30d83 100644 --- a/www/themes/new/css/datatables_custom.css +++ b/www/themes/new/css/datatables_custom.css @@ -508,23 +508,22 @@ table.display tbody tr.row-marked td { } /* Zebra striping for table readability: - * - every 2nd row: very light blue tint - * - every 4th row: a touch deeper (4n is also even, but defined later so it wins) + * - every 2nd row: very light blue tint (tr.even = rows 2,4,6,...) + * - every 4th row: a touch deeper (tr.even at nth-child(4n) = rows 4,8,12,...) * - * !important is required because the OpenXE theme stylesheet sets a hard - * white background on tr/td which would otherwise win over the nth-child - * selectors here. .row-marked above keeps authority because its - * specificity (table.dataTable tbody tr.row-marked td) is higher than - * the nth-child selectors (table.dataTable tbody tr:nth-child(...) td) - * — at equal !important, higher specificity wins. */ -table.dataTable tbody tr:nth-child(even) td, -table.display tbody tr:nth-child(even) td, -.dataTables_wrapper tbody tr:nth-child(even) td { + * Selector matches the OpenXE styles.css rule + * ".dataTables_wrapper table.dataTable.display > tbody > tr > td" + * exactly to win the specificity battle (3 classes + 2 combinators, plus + * .even adds another class -> beats the white-background rule). DataTables + * sets class="odd"/"even" on each tr via JS, so we use that directly + * instead of pure nth-child which the cascade overrides. + * + * .row-marked above still wins because tr.row-marked has equal class count + * but is defined later AND uses !important. */ +.dataTables_wrapper table.dataTable.display > tbody > tr.even > td { background-color: #f7f9fb !important; } -table.dataTable tbody tr:nth-child(4n) td, -table.display tbody tr:nth-child(4n) td, -.dataTables_wrapper tbody tr:nth-child(4n) td { +.dataTables_wrapper table.dataTable.display > tbody > tr.even:nth-child(4n) > td { background-color: #eef3f8 !important; } From 7c502130992e474708fd609e091977f5140723f2 Mon Sep 17 00:00:00 2001 From: Avatarsia Date: Sat, 9 May 2026 19:58:05 +0200 Subject: [PATCH 6/6] fix(theme): row-marked Highlight ueber Zebra-Stripes erzwingen Bug-Reports vom User auf Avatarsia/192.168.0.150: 1. Markieren funktioniert auf "dunkleren" Zeilen (jede 4.) nicht. 2. Manche markierte Zeilen sehen aus wie "zwei Hintergruende". Diagnose (verifiziert mit Codex): - Spezifitaet table.dataTable tbody tr.row-marked td = (0,2,4) - Spezifitaet .dataTables_wrapper table.dataTable.display > tbody > tr.even > td = (0,4,4) - Spezifitaet .dataTables_wrapper ... > tr.even:nth-child(4n) > td = (0,5,4) Bei gleichem !important entscheidet die Spezifitaet -> Stripe-Regeln gewinnen ueber .row-marked. Der bisherige Code-Kommentar ("equal class count + later defined") war falsch. Zusaetzlich: DataTables setzt eigene td.sorting_1/_2/_3 Klassen auf der sortierten Spalte mit Spezifitaet (0,4,4) und eigener Hintergrundfarbe, wodurch die sortierte Zelle in markierten Zeilen aus der Reihe taenzt ("zwei Hintergruende"-Effekt). Fix: - Stripe-Regeln per :not(.row-marked) ausschliessen, sodass markierte Zeilen gar nicht erst gestriped werden. Damit muss .row-marked nicht mehr im Spezifitaets-Wettbewerb gewinnen. - Override-Regel fuer td.sorting_1/_2/_3 in .row-marked Zeilen mit Wrapper-Pfad (Spezifitaet 0,5,4), damit die sortierte Spalte den einheitlichen Highlight bekommt. --- www/themes/new/css/datatables_custom.css | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/www/themes/new/css/datatables_custom.css b/www/themes/new/css/datatables_custom.css index f8de30d83..659fa7184 100644 --- a/www/themes/new/css/datatables_custom.css +++ b/www/themes/new/css/datatables_custom.css @@ -518,12 +518,26 @@ table.display tbody tr.row-marked td { * sets class="odd"/"even" on each tr via JS, so we use that directly * instead of pure nth-child which the cascade overrides. * - * .row-marked above still wins because tr.row-marked has equal class count - * but is defined later AND uses !important. */ -.dataTables_wrapper table.dataTable.display > tbody > tr.even > td { + * Markierte Zeilen (.row-marked) werden ueber :not(.row-marked) explizit + * vom Striping ausgeschlossen -- ohne diesen Filter wuerde die Stripe- + * Regel mit hoeherer Spezifitaet (0,4,4 bzw. 0,5,4) den .row-marked- + * Highlight (0,2,4) gewinnen, obwohl beide !important nutzen. */ +.dataTables_wrapper table.dataTable.display > tbody > tr.even:not(.row-marked) > td { background-color: #f7f9fb !important; } -.dataTables_wrapper table.dataTable.display > tbody > tr.even:nth-child(4n) > td { +.dataTables_wrapper table.dataTable.display > tbody > tr.even:nth-child(4n):not(.row-marked) > td { background-color: #eef3f8 !important; } + +/* DataTables faerbt die aktuell sortierte Spalte (td.sorting_1/_2/_3) mit + * eigener Spezifitaet (0,4,4). In markierten Zeilen wuerde diese Regel + * sonst sichtbar bleiben und einen "doppelten Hintergrund" erzeugen + * (sortierte Spalte hat andere Farbe als der Rest der Row). Override mit + * explizitem Wrapper-Pfad (Spezifitaet 0,5,4) erzwingt einheitlichen + * Highlight ueber alle Spalten der markierten Zeile. */ +.dataTables_wrapper table.dataTable.display > tbody > tr.row-marked > td.sorting_1, +.dataTables_wrapper table.dataTable.display > tbody > tr.row-marked > td.sorting_2, +.dataTables_wrapper table.dataTable.display > tbody > tr.row-marked > td.sorting_3 { + background-color: #e8f2ff !important; +}