partkeepr

fork of partkeepr
git clone https://git.e1e0.net/partkeepr.git
Log | Files | Refs | Submodules | README | LICENSE

commit 4626b72edbfb108642582b1d87061f166b17c4ed
parent d09eb097fc98beff89bd0dc2b5fbe9bb21b7380c
Author: Felicitus <felicitus@felicitus.org>
Date:   Mon, 12 Oct 2015 19:41:53 +0200

Refactored tree to use toolbar buttons instead of a context menu, improves usability with touch devices

Diffstat:
Msrc/PartKeepr/FrontendBundle/Resources/public/js/Components/CategoryEditor/CategoryEditorTree.js | 124+++++++++++++++++++++++++++++++++++++++++--------------------------------------
1 file changed, 64 insertions(+), 60 deletions(-)

diff --git a/src/PartKeepr/FrontendBundle/Resources/public/js/Components/CategoryEditor/CategoryEditorTree.js b/src/PartKeepr/FrontendBundle/Resources/public/js/Components/CategoryEditor/CategoryEditorTree.js @@ -27,10 +27,7 @@ Ext.define("PartKeepr.CategoryEditorTree", { this.getView().on("drop", Ext.bind(this.onCategoryDrop, this)); this.getView().on("beforedrop", Ext.bind(this.onBeforeDrop, this)); - this.getView().on("itemcontextmenu", Ext.bind(this.onItemContextMenu, this)); - - this.createMenu(); - + this.on("selectionchange", Ext.bind(this.onItemSelect, this)); }, onBeforeDrop: function (node, data, overModel, dropPosition, dropHandlers) { @@ -43,76 +40,52 @@ Ext.define("PartKeepr.CategoryEditorTree", { this.fireEvent("foreignModelDrop", draggedRecord, droppedOn); } }, - onCategoryDrop: function (node, data, overModel, dropPosition) - { - var draggedRecord = data.records[0]; + onItemSelect: function (selected) { + if (selected.getCount() === 0) { + this.toolbarAddButton.disable(); + this.toolbarDeleteButton.disable(); + this.toolbarEditButton.disable(); + } - if (!(draggedRecord instanceof PartKeepr.data.HydraTreeModel)) { - return; - } else { - var targetRecord; + this.toolbarAddButton.enable(); + this.toolbarEditButton.enable(); + this.toolbarDeleteButton.enable(); - if (dropPosition === "after" || dropPosition === "before") { - targetRecord = overModel.parentNode; - } else { - targetRecord = overModel; - } + var record = selected.getSelection()[0]; - draggedRecord.callPutAction("move", { - "parent": targetRecord.getId() - }); - } - }, - onItemContextMenu: function (view, record, item, index, event) - { if (!(record instanceof PartKeepr.data.HydraTreeModel)) { return; } - var menu = this.menu; - event.stopEvent(); - - menu.record = record; - - this.menuCategoryDelete.enable(); if (record.parentNode !== null && record.parentNode.isRoot()) { - this.menuCategoryDelete.disable(); + this.toolbarDeleteButton.disable(); } if (record.hasChildNodes()) { - this.menuCategoryDelete.disable(); + this.toolbarDeleteButton.disable(); } - menu.showAt(event.getXY()); }, - createMenu: function () + onCategoryDrop: function (node, data, overModel, dropPosition) { - this.menuCategoryDelete = Ext.create("Ext.menu.Item", { - text: i18n("Delete Category"), - handler: Ext.bind(this.confirmCategoryDelete, this), - iconCls: 'web-icon folder_delete' - }); + var draggedRecord = data.records[0]; - this.menuCategoryAdd = Ext.create("Ext.menu.Item", { - text: i18n("Add Category"), - handler: Ext.bind(this.showCategoryAddDialog, this), - iconCls: 'web-icon folder_add' - }); + if (!(draggedRecord instanceof PartKeepr.data.HydraTreeModel)) { + return; + } else { + var targetRecord; - this.menuCategoryEdit = Ext.create("Ext.menu.Item", { - text: i18n("Edit Category"), - handler: Ext.bind(this.showCategoryEditDialog, this), - iconCls: 'web-icon folder_edit' - }); + if (dropPosition === "after" || dropPosition === "before") { + targetRecord = overModel.parentNode; + } else { + targetRecord = overModel; + } - this.menu = Ext.create('widget.menu', { - items: [ - this.menuCategoryAdd, - this.menuCategoryEdit, - this.menuCategoryDelete - ] - }); + draggedRecord.callPutAction("move", { + "parent": targetRecord.getId() + }); + } }, createToolbar: function () { @@ -137,10 +110,41 @@ Ext.define("PartKeepr.CategoryEditorTree", { scope: this }); + this.toolbarAddButton = Ext.create("Ext.button.Button", { + tooltip: i18n("Add Category"), + handler: Ext.bind(this.showCategoryAddDialog, this), + iconCls: 'web-icon folder_add', + disabled: true + }); + + this.toolbarDeleteButton = Ext.create("Ext.button.Button", { + tooltip: i18n("Delete Category"), + handler: Ext.bind(this.confirmCategoryDelete, this), + iconCls: 'web-icon folder_delete', + disabled: true + }); + + this.toolbarEditButton = Ext.create("Ext.button.Button", { + tooltip: i18n("Delete Category"), + handler: Ext.bind(this.showCategoryEditDialog, this), + iconCls: 'web-icon folder_edit', + disabled: true + }); + this.toolbar = Ext.create("Ext.toolbar.Toolbar", { enableOverflow: true, dock: 'top', - items: [this.toolbarExpandButton, this.toolbarCollapseButton, this.toolbarReloadButton] + items: [ + this.toolbarExpandButton, + this.toolbarCollapseButton, + this.toolbarReloadButton, + { + xtype: 'tbseparator' + }, + this.toolbarAddButton, + this.toolbarEditButton, + this.toolbarDeleteButton + ] }); Ext.apply(this, { @@ -162,7 +166,7 @@ Ext.define("PartKeepr.CategoryEditorTree", { confirmCategoryDelete: function () { Ext.Msg.confirm(i18n("Confirm Category Delete"), - sprintf(i18n("Do you really wish to delete the category %s?"), this.menu.record.get("name")), + sprintf(i18n("Do you really wish to delete the category %s?"), this.getSelection()[0].get("name")), this.onCategoryDelete, this); }, showCategoryAddDialog: function () @@ -170,7 +174,7 @@ Ext.define("PartKeepr.CategoryEditorTree", { var j = Ext.create("PartKeepr.CategoryEditorWindow", { record: Ext.create(this.categoryModel), categoryModel: this.categoryModel, - parentRecord: this.menu.record, + parentRecord: this.getSelection()[0], listeners: { save: Ext.bind(this.onUpdateRecord, this) } @@ -181,7 +185,7 @@ Ext.define("PartKeepr.CategoryEditorTree", { showCategoryEditDialog: function () { var j = Ext.create("PartKeepr.CategoryEditorWindow", { - record: this.menu.record, + record: this.getSelection()[0], parentRecord: null, categoryModel: this.categoryModel, listeners: { @@ -198,7 +202,7 @@ Ext.define("PartKeepr.CategoryEditorTree", { onCategoryDelete: function (btn) { if (btn == "yes") { - this.menu.record.erase(); + this.getSelection()[0].erase(); } } });