From 413f7bc5a2cd06ce7d98a59ce925de5a64bbb4a3 Mon Sep 17 00:00:00 2001 From: Bill Erickson Date: Fri, 4 Apr 2014 12:20:39 -0400 Subject: [PATCH] web staff : column resizing, mostly there Signed-off-by: Bill Erickson --- Open-ILS/src/templates/staff/css/style.css.tt2 | 19 ++++++ Open-ILS/src/templates/staff/parts/t_autogrid.tt2 | 14 ++++- Open-ILS/web/js/ui/default/staff/services/grid.js | 72 ++++++++++++++++++++--- 3 files changed, 94 insertions(+), 11 deletions(-) diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2 index 838f8376d7..38d31b691e 100644 --- a/Open-ILS/src/templates/staff/css/style.css.tt2 +++ b/Open-ILS/src/templates/staff/css/style.css.tt2 @@ -222,6 +222,25 @@ table.list tr.selected td { color: #fff; } +.eg-grid-column-drag-handle { + width: 1px; + margin-left: 2px; + height: 100%; +} +.eg-grid-column-drag-handle:hover { + cursor: col-resize; + width: 3px; + border: 1px dashed rgb(66, 139, 202); +} + +.eg-grid-column-drag-handle-west { + cursor: w-resize; +} +.eg-grid-column-drag-handle-east { + cursor: e-resize; +} + + /* 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 diff --git a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 index 03b3f4487c..a9726a75b3 100644 --- a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 +++ b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 @@ -128,15 +128,23 @@
- {{col.label}} + +
+
+ {{col.label}} +
+
 
+
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 9a81f3d03f..034c521b24 100644 --- a/Open-ILS/web/js/ui/default/staff/services/grid.js +++ b/Open-ILS/web/js/ui/default/staff/services/grid.js @@ -200,7 +200,7 @@ angular.module('egGridMod', // false otherwise. this is slightly more efficient that // finding the position of each then comparing them. // item1 / item2 may be an item or an item index - grid.comesBefore = function(itemOrIndex1, itemOrIndex2) { + grid.itemComesBefore = function(itemOrIndex1, itemOrIndex2) { var idx1 = grid.indexValue(itemOrIndex1); var idx2 = grid.indexValue(itemOrIndex2); @@ -251,7 +251,7 @@ angular.module('egGridMod', var selecting = false; var ascending = - grid.comesBefore(grid.lastSelectedItemIndex, item); + grid.itemComesBefore(grid.lastSelectedItemIndex, item); var startPos = grid.indexOf(grid.lastSelectedItemIndex); @@ -586,11 +586,14 @@ angular.module('egGridMod', element.bind('dragstart', function(e) { egGridCtrl.dragColumn = attrs.column; + egGridCtrl.dragType = attrs.dragType || 'move'; // or resize + egGridCtrl.colResizeDir = 0; angular.element(e.target).addClass('eg-grid-col-drag'); }); element.bind('dragend', function(e) { - angular.element(e.target).removeClass('eg-grid-col-drag'); + if (egGridCtrl.dragType == 'move') + angular.element(e.target).removeClass('eg-grid-col-drag'); }); } }; @@ -605,26 +608,79 @@ angular.module('egGridMod', element.bind('dragover', function(e) { // required for drop e.stopPropagation(); e.preventDefault(); - e.dataTransfer.dropEffect = 'copy'; + e.dataTransfer.dropEffect = 'move'; + + if (egGridCtrl.colResizeDir == 0) return; // move + + var cols = egGridCtrl.columnsProvider; + var srcCol = egGridCtrl.dragColumn; + var srcColIdx = cols.indexOf(srcCol); + + if (egGridCtrl.colResizeDir == -1) { + if (cols.indexOf(attrs.column) <= srcColIdx) { + egGridCtrl.modifyColumnFlex( + egGridCtrl.columnsProvider.findColumn( + egGridCtrl.dragColumn), -1); + if (cols.columns[srcColIdx+1]) { + // source column shrinks by one, column to the + // right grows by one. + egGridCtrl.modifyColumnFlex( + cols.columns[srcColIdx+1], 1); + } + scope.$apply(); + } + } else { + if (cols.indexOf(attrs.column) > srcColIdx) { + egGridCtrl.modifyColumnFlex( + egGridCtrl.columnsProvider.findColumn( + egGridCtrl.dragColumn), 1); + if (cols.columns[srcColIdx+1]) { + // source column grows by one, column to the + // right grows by one. + egGridCtrl.modifyColumnFlex( + cols.columns[srcColIdx+1], -1); + } + + scope.$apply(); + } + } }); element.bind('dragenter', function(e) { e.stopPropagation(); e.preventDefault(); - angular.element(e.target).addClass('eg-grid-col-hover'); + if (egGridCtrl.dragType == 'move') { + angular.element(e.target).addClass('eg-grid-col-hover'); + } else { + // resize grips are on the right side of each column. + // dragenter will either occur on the source column + // (dragging left) or the column to the right. + if (egGridCtrl.colResizeDir == 0) { + if (egGridCtrl.dragColumn == attrs.column) { + egGridCtrl.colResizeDir = -1; // west + } else { + egGridCtrl.colResizeDir = 1; // east + } + } + } }); element.bind('dragleave', function(e) { e.stopPropagation(); e.preventDefault(); - angular.element(e.target).removeClass('eg-grid-col-hover'); + if (egGridCtrl.dragType == 'move') { + angular.element(e.target).removeClass('eg-grid-col-hover'); + } }); element.bind('drop', function(e) { e.stopPropagation(); e.preventDefault(); - angular.element(e.target).removeClass('eg-grid-col-hover'); - egGridCtrl.onColumnDrop(attrs.column); // move the column + egGridCtrl.colResizeDir = 0; + if (egGridCtrl.dragType == 'move') { + angular.element(e.target).removeClass('eg-grid-col-hover'); + egGridCtrl.onColumnDrop(attrs.column); // move the column + } }); } }; -- 2.11.0