From: Bill Erickson Date: Wed, 2 Apr 2014 14:06:02 +0000 (-0400) Subject: web staff : grid column move improvements; adding column conf back in X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=588030bb91c0f188dd8a9e7073c4a5b87c31b116;p=working%2FEvergreen.git web staff : grid column move improvements; adding column conf back in Signed-off-by: Bill Erickson --- diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2 index 16ddf28cd2..46263d4bcf 100644 --- a/Open-ILS/src/templates/staff/css/style.css.tt2 +++ b/Open-ILS/src/templates/staff/css/style.css.tt2 @@ -185,21 +185,35 @@ table.list tr.selected td { padding-right: 1px; } +.eg-grid-col-drag, .eg-grid-col-drag:active { + /* similar to label-primary, sans padding */ + background-color: rgb(66, 139, 202); + color: #fff; +} + +.eg-grid-col-hover { + /* similar to label-success, sans padding */ + background-color: rgb(92, 184, 92); + color: #fff; +} + /* hack to make the header columns line up with the content columns when the scroll bar is visible along the right side of the content columns. TODO: if this varies enough by browser, we'll need to calculate the width instead. */ +/* .eg-grid-scroll > .eg-grid-header-row, .eg-grid-scroll > .eg-grid-conf-row { padding-right: 15px; } .eg-grid-scroll > .eg-grid-content-body { overflow-y:scroll; - height: 600px; /* TODO: configurable */ + height: 600px; } +*/ /* ---------------------------------------------------------------------- - * Grid + * /Grid * ---------------------------------------------------------------------- */ [%# diff --git a/Open-ILS/src/templates/staff/parts/t_autogrid2.tt2 b/Open-ILS/src/templates/staff/parts/t_autogrid2.tt2 index b0faaa07c0..b9f9499392 100644 --- a/Open-ILS/src/templates/staff/parts/t_autogrid2.tt2 +++ b/Open-ILS/src/templates/staff/parts/t_autogrid2.tt2 @@ -131,15 +131,47 @@ eg-grid-column-drag-source eg-grid-column-drag-dest column="{{col.name}}" + eg-right-click="grid.onContextMenu($event)" ng-repeat="col in grid.columnsProvider.columns" style="flex:{{col.flex}}" ng-show="grid.columnsProvider.visible[col.name]"> - {{col.label}} + {{col.label}} -
+ +
+
+
[% l('Expand') %]
+
[% l('Shrink') %]
+
[% l('Sort') %]
+
+
+
+ + + +
+
+ + + +
+
+ +
+
+
+
[% l('No Items To Display') %]
diff --git a/Open-ILS/web/js/ui/default/staff/services/grid2.js b/Open-ILS/web/js/ui/default/staff/services/grid2.js index 87455a55a8..f72278ca48 100644 --- a/Open-ILS/web/js/ui/default/staff/services/grid2.js +++ b/Open-ILS/web/js/ui/default/staff/services/grid2.js @@ -1,5 +1,5 @@ angular.module('egGridMod', - ['egCoreMod', 'ui.bootstrap']) + ['egCoreMod', 'egUiMod', 'ui.bootstrap']) .directive('egGrid', function() { return { @@ -99,6 +99,10 @@ angular.module('egGridMod', $scope.grid = grid; } + grid.onContextMenu = function($event) { + var col = angular.element($event.target).attr('column'); + } + grid.page = function() { return (grid.offset / grid.limit) + 1; } @@ -219,6 +223,13 @@ angular.module('egGridMod', return -1; } + grid.modifyColumnFlex = function(column, val) { + column.flex += val; + // prevent flex:0; use hiding instead + if (column.flex < 1) + column.flex = 1; + } + // handles click, control-click, and shift-click grid.handleRowClick = function($event, item) { var index = grid.indexValue(item); @@ -312,11 +323,6 @@ angular.module('egGridMod', } } - grid.onColumnDrag = function(col) { - // track which column we're dragging - grid.dragColumn = col; - } - grid.onColumnDrop = function(target) { if (angular.isUndefined(target)) return; if (target == grid.dragColumn) return; @@ -400,6 +406,18 @@ angular.module('egGridMod', cols.visible = {}; } + cols.indexOf = function(name) { + for (var i = 0; i < cols.columns.length; i++) { + if (cols.columns[i].name == name) + return i; + } + return -1; + } + + cols.findColumn = function(name) { + return cols.columns[cols.indexOf(name)]; + } + cols.compileAutoColumns = function() { var idl_class = egIDL.classes[cols.idlClass]; @@ -565,8 +583,15 @@ angular.module('egGridMod', require : '^egGrid', link : function(scope, element, attrs, egGridCtrl) { angular.element(element).attr('draggable', 'true'); + element.bind('dragstart', function(e) { - egGridCtrl.onColumnDrag(attrs.column); + egGridCtrl.dragColumn = attrs.column; + angular.element(e.target).addClass('eg-grid-col-drag'); + }); + + element.bind('dragend', function(e) { + console.log('dragend'); + angular.element(e.target).removeClass('eg-grid-col-drag'); }); } }; @@ -577,16 +602,30 @@ angular.module('egGridMod', restrict : 'A', require : '^egGrid', link : function(scope, element, attrs, egGridCtrl) { - element.bind('dragover', function(e) { + + element.bind('dragover', function(e) { // required for drop e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; }); + element.bind('dragenter', function(e) { + e.stopPropagation(); + e.preventDefault(); + angular.element(e.target).addClass('eg-grid-col-hover'); + }); + + element.bind('dragleave', function(e) { + e.stopPropagation(); + e.preventDefault(); + angular.element(e.target).removeClass('eg-grid-col-hover'); + }); + element.bind('drop', function(e) { e.stopPropagation(); e.preventDefault(); - egGridCtrl.onColumnDrop(attrs.column); + angular.element(e.target).removeClass('eg-grid-col-hover'); + egGridCtrl.onColumnDrop(attrs.column); // move the column }); } }; diff --git a/Open-ILS/web/js/ui/default/staff/services/ui.js b/Open-ILS/web/js/ui/default/staff/services/ui.js index 3670b53683..66c2fa132a 100644 --- a/Open-ILS/web/js/ui/default/staff/services/ui.js +++ b/Open-ILS/web/js/ui/default/staff/services/ui.js @@ -137,9 +137,9 @@ function($timeout, $parse) { /* * http://stackoverflow.com/questions/15731634/how-do-i-handle-right-click-events-in-angular-js */ -.directive('ngRightClick', function($parse) { +.directive('egRightClick', function($parse) { return function(scope, element, attrs) { - var fn = $parse(attrs.ngRightClick); + var fn = $parse(attrs.egRightClick); element.bind('contextmenu', function(event) { scope.$apply(function() { event.preventDefault();