From 2e24f7e43f8237f8134036dc39c7e36779e29ae1 Mon Sep 17 00:00:00 2001 From: Cesar Velez Date: Thu, 22 Feb 2018 17:01:39 -0500 Subject: [PATCH] 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. Signed-off by: Cesar Velez --- Open-ILS/src/templates/staff/share/t_autogrid.tt2 | 1 + Open-ILS/web/js/ui/default/staff/services/grid.js | 24 +++++++++++++++++++++-- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/Open-ILS/src/templates/staff/share/t_autogrid.tt2 b/Open-ILS/src/templates/staff/share/t_autogrid.tt2 index c6b45d9ddc..605d3f1ccb 100644 --- a/Open-ILS/src/templates/staff/share/t_autogrid.tt2 +++ b/Open-ILS/src/templates/staff/share/t_autogrid.tt2 @@ -310,6 +310,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 17fc743615..eb23385440 100644 --- a/Open-ILS/web/js/ui/default/staff/services/grid.js +++ b/Open-ILS/web/js/ui/default/staff/services/grid.js @@ -111,6 +111,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); @@ -1263,7 +1268,11 @@ angular.module('egGridMod', // optional: for non-IDL columns, specifying a datatype // lets the caller control which display filter is used. // datatype should match the standard IDL datatypes. - datatype : '@' + datatype : '@', + + // 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) { @@ -1284,6 +1293,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*$/)) @@ -1548,7 +1567,8 @@ angular.module('egGridMod', datecontext : colSpec.datecontext, datefilter : colSpec.datefilter, dateonlyinterval : colSpec.dateonlyinterval, - parentIdlClass : colSpec.parentIdlClass + parentIdlClass : colSpec.parentIdlClass, + cssSelector : colSpec.cssSelector }; } -- 2.11.0