Add a gear icon to all grids by default to access the context menu [#…

…14806] Merge remote-tracking branch 'upstream/pr/14806' into 3.x
modxcms · Nov 29, 2019 · df8d2e9 · df8d2e9
2 parents ee001e8 + d708d0c
commit df8d2e9
Show file tree

Hide file tree

Showing 10 changed files with 208 additions and 2 deletions.
diff --git a/_build/templates/default/sass/index.scss b/_build/templates/default/sass/index.scss
@@ -537,6 +537,21 @@ a.x-grid-link:focus {
   text-decoration: underline;
 }
 
+.x-grid-buttons {
+  text-align: center;
+}
+.x-grid-buttons li {
+  cursor: pointer;
+  display: inline-block;
+  font-size: 1.1em;
+  line-height: .7;
+  margin-right: 10px;
+}
+
+.x-grid-buttons li:last-child {
+  margin-right: 0;
+}
+
 /* panel stylings */
 .modx-page-header,
 .modx-page-header div {

diff --git a/core/docs/changelog.txt b/core/docs/changelog.txt
@@ -110,6 +110,7 @@ MODX Revolution 3.0.0-beta1  (TBD)
 - Rename "Top Menu" to "Main Menu" now that it is no longer at the top [#14852]
 - Change styling of resources in the tree: unpublished resources are now dimmed, with italics indicating menu visibility [#13969]
 - Add name of edited media source, form customisation profile, dashboard, and dashboard widget to the title in the browser [#14830]
+- Add a gear icon to all grids by default to access the context menu [#14806]
 
 MODX Revolution 2.7.2-pl (TBD)
 ====================================

diff --git a/core/lexicon/en/default.inc.php b/core/lexicon/en/default.inc.php
@@ -534,6 +534,7 @@
 $_lang['newest'] = 'Newest';
 $_lang['oldest'] = 'Oldest';
 $_lang['constraints'] = 'Constraints';
+$_lang['context_menu'] = 'Context Menu';
 
 $_lang['january'] = 'January';
 $_lang['february'] = 'February';

diff --git a/manager/assets/modext/modx.jsgrps-min.js b/manager/assets/modext/modx.jsgrps-min.js
diff --git a/manager/assets/modext/widgets/core/modx.grid.js b/manager/assets/modext/widgets/core/modx.grid.js
@@ -21,6 +21,9 @@ MODx.grid.Grid = function(config) {
         ,preventSaveRefresh: true
         ,showPerPage: true
         ,stateful: false
+        ,showActionsColumn: true
+        ,actionsColumnWidth: 50
+        ,disableContextMenuAction: false
         ,menuConfig: {
             defaultAlign: 'tl-b?'
             ,enableScrolling: false
@@ -91,6 +94,23 @@ MODx.grid.Grid = function(config) {
             if (!itm.scope) { itm.scope = this; }
         }
     }
+
+    if (config.showActionsColumn) {
+        if (config.columns && Array.isArray(config.columns)) {
+            config.columns.push({
+                width: config.actionsColumnWidth || 50
+                ,renderer: this.actionsColumnRenderer.bind(this)
+            });
+        }
+
+        if (config.cm && config.cm.columns && Array.isArray(config.cm.columns)) {
+            config.cm.columns.push({
+                width: config.actionsColumnWidth || 50
+                ,renderer: this.actionsColumnRenderer.bind(this)
+            });
+        }
+    }
+
     MODx.grid.Grid.superclass.constructor.call(this,config);
     this._loadMenu(config);
     this.addEvents('beforeRemoveRow','afterRemoveRow','afterAutoSave');
@@ -574,6 +594,63 @@ Ext.extend(MODx.grid.Grid,Ext.grid.EditorGridPanel,{
 
         return plugins[index];
     }
+
+    ,_getActionsColumnTpl: function () {
+        return new Ext.XTemplate('<tpl for=".">'
+            + '<tpl if="actions !== null">'
+            + '<ul class="x-grid-buttons">'
+            + '<tpl for="actions">'
+            + '<li><i class="x-grid-action icon icon-{icon:htmlEncode}" title="{text:htmlEncode}" data-action="{action:htmlEncode}"></i></li>'
+            + '</tpl>'
+            + '</ul>'
+            + '</tpl>'
+            + '</tpl>', {
+            compiled: true
+        });
+    }
+
+    ,actionsColumnRenderer: function(value, metaData, record, rowIndex, colIndex, store) {
+        var actions = this.getActions.apply(this, [record, rowIndex, colIndex, store]);
+        if (this.config.disableContextMenuAction !== true) {
+            actions.push({
+                text: _('context_menu'),
+                action: 'contextMenu',
+                icon: 'gear'
+            });
+        }
+
+        return this._getActionsColumnTpl().apply({
+            actions: actions
+        });
+    }
+
+    ,getActions: function(record, rowIndex, colIndex, store) {
+        return [];
+    }
+
+    ,onClick: function(e) {
+        var target = e.getTarget();
+        if (!target.classList.contains('x-grid-action')) return;
+        if (!target.dataset.action) return;
+
+        var actionHandler = 'action' + target.dataset.action.charAt(0).toUpperCase() + target.dataset.action.slice(1);
+        if (!this[actionHandler] || (typeof this[actionHandler] !== 'function')) {
+            actionHandler = target.dataset.action;
+            if (!this[actionHandler] || (typeof this[actionHandler] !== 'function')) {
+                return;
+            }
+        }
+
+        var record = this.getSelectionModel().getSelected();
+        var recordIndex = this.store.indexOf(record);
+        this.menu.record = record.data;
+
+        this[actionHandler](record, recordIndex, e);
+    },
+
+    actionContextMenu: function(record, recordIndex, e) {
+        this._showMenu(this, recordIndex, e);
+    }
 });
 
 /* local grid */
@@ -611,6 +688,9 @@ MODx.grid.LocalGrid = function(config) {
         ,enableColumnMove: true
         ,header: false
         ,cls: 'modx-grid'
+        ,showActionsColumn: true
+        ,actionsColumnWidth: 50
+        ,disableContextMenuAction: false
         ,viewConfig: {
             forceFit: true
             ,enableRowBody: true
@@ -625,6 +705,17 @@ MODx.grid.LocalGrid = function(config) {
     this.menu = new Ext.menu.Menu(config.menuConfig);
     this.config = config;
     this._loadColumnModel();
+
+    if (config.showActionsColumn && config.columns && Array.isArray(config.columns)) {
+        config.columns.push({
+            width: config.actionsColumnWidth || 50
+            ,renderer: {
+                fn: this.actionsColumnRenderer,
+                scope: this
+            }
+        });
+    }
+
     MODx.grid.LocalGrid.superclass.constructor.call(this,config);
     this.addEvents({
         beforeRemoveRow: true
@@ -910,6 +1001,64 @@ Ext.extend(MODx.grid.LocalGrid,Ext.grid.EditorGridPanel,{
         }
         return z;
     }
+
+    ,_getActionsColumnTpl: function () {
+        return new Ext.XTemplate('<tpl for=".">'
+            + '<tpl if="actions !== null">'
+            + '<ul class="x-grid-buttons">'
+            + '<tpl for="actions">'
+            + '<li><i class="x-grid-action icon icon-{icon:htmlEncode}" title="{text:htmlEncode}" data-action="{action:htmlEncode}"></i></li>'
+            + '</tpl>'
+            + '</ul>'
+            + '</tpl>'
+            + '</tpl>', {
+            compiled: true
+        });
+    }
+
+    ,actionsColumnRenderer: function(value, metaData, record, rowIndex, colIndex, store) {
+        var actions = this.getActions.apply(this, arguments);
+
+        if (this.config.disableContextMenuAction !== true) {
+            actions.push({
+                text: _('context_menu'),
+                action: 'contextMenu',
+                icon: 'gear'
+            });
+        }
+
+        return this._getActionsColumnTpl().apply({
+            actions: actions
+        });
+    }
+
+    ,getActions: function(value, metaData, record, rowIndex, colIndex, store) {
+        return [];
+    }
+
+    ,onClick: function(e) {
+        var target = e.getTarget();
+        if (!target.classList.contains('x-grid-action')) return;
+        if (!target.dataset.action) return;
+
+        var actionHandler = 'action' + target.dataset.action.charAt(0).toUpperCase() + target.dataset.action.slice(1);
+        if (!this[actionHandler] || (typeof this[actionHandler] !== 'function')) {
+            actionHandler = target.dataset.action;
+            if (!this[actionHandler] || (typeof this[actionHandler] !== 'function')) {
+                return;
+            }
+        }
+
+        var record = this.getSelectionModel().getSelected();
+        var recordIndex = this.store.indexOf(record);
+        this.menu.record = record.data;
+
+        this[actionHandler](record, recordIndex, e);
+    },
+
+    actionContextMenu: function(record, recordIndex, e) {
+        this._showMenu(this, recordIndex, e);
+    }
 });
 Ext.reg('grid-local',MODx.grid.LocalGrid);
 Ext.reg('modx-grid-local',MODx.grid.LocalGrid);

diff --git a/manager/assets/modext/widgets/system/modx.grid.context.js b/manager/assets/modext/widgets/system/modx.grid.context.js
@@ -134,12 +134,14 @@ Ext.extend(MODx.grid.Context,MODx.grid.Grid,{
                 ,scope: this
             });
         }
+
         if (p.indexOf('pedit') != -1) {
             m.push({
                 text: _('context_update')
                 ,handler: this.updateContext
             });
         }
+
         if (p.indexOf('premove') != -1) {
             m.push('-');
             m.push({
@@ -236,6 +238,29 @@ Ext.extend(MODx.grid.Context,MODx.grid.Grid,{
         this.getSelectionModel().clearSelections(true);
         this.refresh();
     }
+
+    ,getActions: function(record, rowIndex, colIndex, store) {
+        var permissions = record.data.perm;
+        var actions = [];
+
+        if (~permissions.indexOf('pedit')) {
+            actions.push({
+                action: 'updateContext',
+                icon: 'pencil-square-o',
+                text: _('context_update')
+            });
+        }
+
+        if (~permissions.indexOf('premove')) {
+            actions.push({
+                action: 'remove',
+                icon: 'trash-o',
+                text: _('context_remove')
+            });
+        }
+
+        return actions;
+    }
 });
 Ext.reg('modx-grid-contexts',MODx.grid.Context);
 

diff --git a/manager/assets/modext/widgets/system/modx.grid.system.event.js b/manager/assets/modext/widgets/system/modx.grid.system.event.js
@@ -22,6 +22,7 @@ MODx.grid.SystemEvent = function(config) {
         ,groupBy: 'groupname'
         ,singleText: _('system_event')
         ,pluralText: _('system_events')
+        ,showActionsColumn: false
         ,columns: [{
             header: _('name')
             ,dataIndex: 'name'

diff --git a/manager/assets/modext/workspace/package.grid.js b/manager/assets/modext/workspace/package.grid.js
@@ -89,6 +89,7 @@ MODx.grid.Package = function(config) {
                  ,'install','textaction','iconaction','updateable']
         ,plugins: [this.exp]
         ,pageSize: Math.min(parseInt(MODx.config.default_per_page), 25)
+        ,disableContextMenuAction: true
         ,columns: cols
         ,primaryKey: 'signature'
         ,paging: true

diff --git a/manager/templates/default/css/index-min.css b/manager/templates/default/css/index-min.css
diff --git a/manager/templates/default/css/index.css b/manager/templates/default/css/index.css
@@ -21903,6 +21903,19 @@ a.x-grid-link:hover,
 a.x-grid-link:focus {
   text-decoration: underline; }
 
+.x-grid-buttons {
+  text-align: center; }
+
+.x-grid-buttons li {
+  cursor: pointer;
+  display: inline-block;
+  font-size: 1.1em;
+  line-height: .7;
+  margin-right: 10px; }
+
+.x-grid-buttons li:last-child {
+  margin-right: 0; }
+
 /* panel stylings */
 .modx-page-header,
 .modx-page-header div {