diff --git a/www/themes/new/css/datatables_custom.css b/www/themes/new/css/datatables_custom.css index fa50a08c5..659fa7184 100644 --- a/www/themes/new/css/datatables_custom.css +++ b/www/themes/new/css/datatables_custom.css @@ -495,3 +495,49 @@ 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; +} + +/* Zebra striping for table readability: + * - 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,...) + * + * 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. + * + * 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):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; +} diff --git a/www/themes/new/js/scripts.js b/www/themes/new/js/scripts.js index 22a3f86c2..1a5d590e2 100644 --- a/www/themes/new/js/scripts.js +++ b/www/themes/new/js/scripts.js @@ -133,9 +133,76 @@ $(function() { $("body").css("overflow", "visible"); }); - -}); + /* Toggle background for rows that are marked via checkboxes */ + var markedRowTableIds = [ + "angebote", + "angeboteinbearbeitung", + "auftraege", + "auftraegeoffene", + "auftraegeoffeneauto", + "auftraegeinbearbeitung", + "rechnungen", + "rechnungenoffene", + "rechnungeninbearbeitung", + "lieferscheine", + "lieferscheineoffene", + "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 isMarkedTable($table){ + var id = $table.attr("id"); + return id && markedRowTableIds.indexOf(id) !== -1; + } + + function bindMarkedRowHighlight(selector) { + var $table = selector instanceof jQuery ? selector : $(selector); + + if(!$table.length || !isMarkedTable($table)){ + 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(){ + 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); + }); + +});