From fa59b15a5f55f120bb2b2ce31de25e1e5f229291 Mon Sep 17 00:00:00 2001
From: Galen Charlton <gmc@equinoxinitiative.org>
Date: Wed, 23 May 2018 10:55:24 -0400
Subject: [PATCH] highlighting of selected rows

This adds highlighting of selected rows in the results table.

New CSS class: result_table_row_selected
New color variable: item_selected

Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
---
 Open-ILS/src/templates/opac/css/style.css.tt2       |  4 ++++
 Open-ILS/src/templates/opac/parts/css/colors.tt2    |  1 +
 Open-ILS/src/templates/opac/parts/result/table.tt2  |  7 +++----
 Open-ILS/web/js/ui/default/opac/record_selectors.js | 17 +++++++++++++++++
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index e176ed712a..bc5248fc92 100644
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -1030,6 +1030,10 @@ tr.result_table_row > td.result_table_pic_header {
     width: 78px;
 }
 
+.result_table_row_selected {
+    background-color: [% css_colors.item_selected %];
+}
+
 .result_number {
     [% IF rtl == 't' -%]
     padding-right: 1em;
diff --git a/Open-ILS/src/templates/opac/parts/css/colors.tt2 b/Open-ILS/src/templates/opac/parts/css/colors.tt2
index 85e00bdaf7..b8c5ca8712 100644
--- a/Open-ILS/src/templates/opac/parts/css/colors.tt2
+++ b/Open-ILS/src/templates/opac/parts/css/colors.tt2
@@ -32,6 +32,7 @@
         button_text_shadow = "#555555", # medium grey
         table_heading = "#d8d8d8", # grey-blue
         mobile_header_text = "#fff", # white
+        item_selected = "#ddd", # grey (lighter)
     };
     
 %]
diff --git a/Open-ILS/src/templates/opac/parts/result/table.tt2 b/Open-ILS/src/templates/opac/parts/result/table.tt2
index 01965c4a32..9c2d9e97ca 100644
--- a/Open-ILS/src/templates/opac/parts/result/table.tt2
+++ b/Open-ILS/src/templates/opac/parts/result/table.tt2
@@ -88,12 +88,11 @@
 				    add_parms.import(
 					 {query => ctx.naive_query_scrub(ctx.user_query)} );
                             END;
+                            is_selected = ctx.mylist.grep(rec.id).size;
                         %]
-                        <tr class="result_table_row">
+                        <tr class="result_table_row [% IF is_selected %]result_table_row_selected[% END %]">
                                             <td class="results_row_count" name="results_row_count">
-                                                [% IF !ctx.is_meta;
-                                                       is_selected = ctx.mylist.grep(rec.id).size;
-                                                %]
+                                                [% IF !ctx.is_meta; %]
                                                 <input type="checkbox" id="select-[% rec.bre_id %]" name="selected_record"
                                                     [% IF is_selected %] checked="checked" [% END %]
                                                     class="result_record_selector hidden" value="[% rec.bre_id %]"></input>
diff --git a/Open-ILS/web/js/ui/default/opac/record_selectors.js b/Open-ILS/web/js/ui/default/opac/record_selectors.js
index a04ec697d2..5f58dbfb7b 100644
--- a/Open-ILS/web/js/ui/default/opac/record_selectors.js
+++ b/Open-ILS/web/js/ui/default/opac/record_selectors.js
@@ -44,6 +44,20 @@
         }
     }
 
+    function findAncestorWithClass(el, cls) {
+        while ((el = el.parentElement) && !el.classList.contains(cls));
+        return el;
+    }
+    function toggleRowHighlighting(el) {
+        var row = findAncestorWithClass(el, "result_table_row");
+        if (!row) return;
+        if (el.checked) {
+            row.classList.add('result_table_row_selected');
+        } else {
+            row.classList.remove('result_table_row_selected');
+        }
+    }
+
     if (rec_selector_block) rec_selector_block.classList.remove("hidden");
     var all_checked = true;
     [].forEach.call(rec_selectors, function(el) {
@@ -55,6 +69,7 @@
                 mungeList('delete', this.value);
                 adjustLegacyControlsVis('delete', this.value);
             }
+            toggleRowHighlighting(this);
         }, false);
         el.classList.remove("hidden");
         if (!el.checked) all_checked = false;
@@ -71,6 +86,7 @@
                 if (!el.checked) {
                     el.checked = true;
                     adjustLegacyControlsVis('add', el.value);
+                    toggleRowHighlighting(el);
                     to_add.push(el.value);
                 }
             });
@@ -84,6 +100,7 @@
                 if (el.checked) {
                     el.checked = false;
                     adjustLegacyControlsVis('delete', el.value);
+                    toggleRowHighlighting(el);
                     to_del.push(el.value);
                 }
             });
-- 
2.11.0