LP#1746824 - WebStaff egGrid styling

This allows egGrid to receive CSS selector strings via egGridField
declarations in templates, or else auto-generates them based on the
path of the field. Also, sets the DOM id of the grid to its declared
persistKey, unless an id is explicitly given.

For example, due dates could be displayed in purple
as follows by adding the following CSS:

grid-due_date {
   color: purple;
}

The above example uses the autog-enerated class name. One could also
set an explicit one in the eg-grid-field element, e.g.,

<eg-grid-field label="[% l('Due Date') %]" path='due_date' css-selector="purple" ...

In this case, the grid-due_date class would /not/ be generated, and the
developer would be expected to supply CSS for the purple class. (But
with semantic class names :) )

Signed-off by: Cesar Velez <cesar.velez@equinoxinitiative.org>
Signed-off-by: Mike Rylander <mrylander@gmail.com>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
Signed-off-by: Kathy Lussier <klussier@masslnc.org>

diff --git a/Open-ILS/src/templates/staff/share/t_autogrid.tt2 b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
index 12d2fb6..c23a72a 100644 (file)
--- a/Open-ILS/src/templates/staff/share/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
@@ -322,6 +322,7 @@
           ng-click="handleRowClick($event, item)"
           ng-dblclick="gridControls.activateItem(item)"
           ng-repeat="col in columns"
+          ng-class="col.cssSelector"
           style="text-align:{{col.align}}; flex:{{col.flex}}"
           ng-show="col.visible">
 

diff --git a/Open-ILS/web/js/ui/default/staff/services/grid.js b/Open-ILS/web/js/ui/default/staff/services/grid.js
index 62a4719..47690ca 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/services/grid.js
+++ b/Open-ILS/web/js/ui/default/staff/services/grid.js
@@ -119,6 +119,11 @@ angular.module('egGridMod',
             scope.collect();
 
             scope.grid_element = element;
+
+            if(!attrs.id){
+                $(element).attr('id', attrs.persistKey);
+            }
+
             $(element)
                 .find('.eg-grid-content-body')
                 .bind('contextmenu', scope.showActionContextMenu);
@@ -1360,7 +1365,11 @@ angular.module('egGridMod',
             // optional hash of functions that can be imported into
             // the directive's scope; meant for cases where the "compiled"
             // attribute is set
-            handlers : '='
+            handlers : '=',
+
+            // optional: CSS class name that we want to have for this field.
+            // Auto generated from path if nothing is passed in via eg-grid-field declaration
+            cssSelector : "@"
         },
         link : function(scope, element, attrs, egGridCtrl) {
 
@@ -1382,6 +1391,16 @@ angular.module('egGridMod',
                 }
             );
 
+            scope.cssSelector = attrs['cssSelector'] ? attrs['cssSelector'] : "";
+
+            // auto-generate CSS selector name for field if none declared in tt2 and there's a path
+            if (scope.path && !scope.cssSelector){
+                var cssClass = 'grid' + "." + scope.path;
+                cssClass = cssClass.replace(/\./g,'-');
+                element.addClass(cssClass);
+                scope.cssSelector = cssClass;
+            }
+
             // any HTML content within the field is its custom template
             var tmpl = element.html();
             if (tmpl && !tmpl.match(/^\s*$/))
@@ -1648,7 +1667,8 @@ angular.module('egGridMod',
                 datecontext      : colSpec.datecontext,
                 datefilter      : colSpec.datefilter,
                 dateonlyinterval : colSpec.dateonlyinterval,
-                parentIdlClass   : colSpec.parentIdlClass
+                parentIdlClass   : colSpec.parentIdlClass,
+                cssSelector      : colSpec.cssSelector
             };
         }