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>

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index e176ed7..bc5248f 100644 (file)
--- 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 85e00bd..b8c5ca8 100644 (file)
--- 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 01965c4..9c2d9e9 100644 (file)
--- 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 a04ec69..5f58dbf 100644 (file)
--- 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);
                 }
             });