From e0dd296a588ac2feaa20c4a58f58b992a513f5b5 Mon Sep 17 00:00:00 2001 From: uncol Date: Thu, 13 Sep 2018 20:03:58 +0300 Subject: [PATCH 1/4] move addition button to left --- ui/web/core/ModelApplication.js | 66 +++++++++++++++++++++++++++------ 1 file changed, 54 insertions(+), 12 deletions(-) diff --git a/ui/web/core/ModelApplication.js b/ui/web/core/ModelApplication.js index 9f3d2305b2..b489aa0cb9 100644 --- a/ui/web/core/ModelApplication.js +++ b/ui/web/core/ModelApplication.js @@ -40,6 +40,7 @@ Ext.define("NOC.core.ModelApplication", { helpId: undefined, listHelpId: undefined, formHelpId: undefined, + iconSize: 26, // navTooltipTemplate: new Ext.XTemplate( '', @@ -187,8 +188,7 @@ Ext.define("NOC.core.ModelApplication", { } gridToolbar = gridToolbar.concat(me.gridToolbar); gridToolbar.push("->"); - me.totalField = Ext.create("Ext.button.Button", { - }); + me.totalField = Ext.create("Ext.button.Button", {}); gridToolbar.push(me.totalField); if(NOC.settings.enableHelp && (me.helpId || me.listHelpId)) { me.listHelpButton = Ext.create("Ext.button.Button", { @@ -472,6 +472,7 @@ Ext.define("NOC.core.ModelApplication", { createForm: function() { var me = this, focusField = null, + formToolbar = [], autoFocusFields; // me.saveButton = Ext.create("Ext.button.Button", { @@ -528,7 +529,19 @@ Ext.define("NOC.core.ModelApplication", { }); // // Default toolbar items - var formToolbar = [ + if(me.formToolbar && me.formToolbar.length) { + me.menuButton = Ext.create("Ext.button.Button", { + tooltip: __("Show/Hide button"), + glyph: NOC.glyph.bars, + scope: me, + handler: me.toggleLeftToolbar + }); + formToolbar = [ + me.menuButton, + "-" + ]; + } + formToolbar = formToolbar.concat([ me.saveButton, me.closeButton, "-", @@ -536,7 +549,7 @@ Ext.define("NOC.core.ModelApplication", { me.deleteButton, "-", me.cloneButton - ]; + ]); // Add View button if(me.onPreview) { formToolbar.push({ @@ -551,10 +564,6 @@ Ext.define("NOC.core.ModelApplication", { } }); } - if(me.formToolbar && me.formToolbar.length) { - formToolbar.push("-"); - } - formToolbar = formToolbar.concat(me.formToolbar); // if(NOC.settings.enableHelp && (me.helpId || me.formHelpId)) { me.formHelpButton = Ext.create("Ext.button.Button", { @@ -619,7 +628,7 @@ Ext.define("NOC.core.ModelApplication", { handler: function() { var grid = this.up("panel"), position = grid.store.data.length, - rowEditing = grid.plugins[0]; + rowEditing = grid.plugins[0]; rowEditing.cancelEdit(); grid.store.insert(position, {}); rowEditing.startEdit(position, 0); @@ -692,7 +701,7 @@ Ext.define("NOC.core.ModelApplication", { itemId: "form", layout: "fit", items: { - xtype: 'form', + xtype: "form", layout: me.formLayout, border: true, padding: 4, @@ -709,19 +718,29 @@ Ext.define("NOC.core.ModelApplication", { } }, items: formFields, - dockedItems: { + dockedItems: [{ xtype: "toolbar", dock: "top", layout: { overflowHandler: "Menu" }, items: me.applyPermissions(formToolbar) - } + }, me.formButtonToolbar] }, getDefaultFocus: function() { return focusField; } }); + if(me.formToolbar && me.formToolbar.length) { + me.formButtonToolbar = Ext.create({ + xtype: "toolbar", + dock: "left", + width: me.iconSize, + items: me.alignButton(me.applyPermissions(me.formToolbar)) + }); + console.log("open"); + me.formPanel.getRefItems()[0].addDocked(me.formButtonToolbar); + } me.form = me.formPanel.items.first().getForm(); // detect autofocus field autoFocusFields = Ext.ComponentQuery.query("[autoFocus=true]", me.formPanel); @@ -1956,5 +1975,28 @@ Ext.define("NOC.core.ModelApplication", { html: element.tooltip }); } + }, + // + toggleLeftToolbar: function() { + var me = this; + if(me.formButtonToolbar.getWidth() === me.iconSize) { + me.formButtonToolbar.setWidth("100%"); + } else { + me.formButtonToolbar.setWidth(me.iconSize); + } + }, + // + alignButton: function(buttons) { + var acc = []; + Ext.each(buttons, function(btn) { + if(Ext.isFunction(btn.setTextAlign)) { + btn.setTextAlign("left"); + } + if(Ext.isFunction(btn.setTooltip) && !btn.tooltip && btn.getText()) { + btn.setTooltip(btn.getText()); + } + acc.push(btn); + }); + return acc; } }); -- GitLab From e1e18b068939b70226c0b135bd3fa3999ee49699 Mon Sep 17 00:00:00 2001 From: uncol Date: Thu, 13 Sep 2018 20:06:32 +0300 Subject: [PATCH 2/4] remove debug print --- ui/web/core/ModelApplication.js | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/web/core/ModelApplication.js b/ui/web/core/ModelApplication.js index b489aa0cb9..5d04589680 100644 --- a/ui/web/core/ModelApplication.js +++ b/ui/web/core/ModelApplication.js @@ -738,7 +738,6 @@ Ext.define("NOC.core.ModelApplication", { width: me.iconSize, items: me.alignButton(me.applyPermissions(me.formToolbar)) }); - console.log("open"); me.formPanel.getRefItems()[0].addDocked(me.formButtonToolbar); } me.form = me.formPanel.items.first().getForm(); -- GitLab From 702ba1167bf059bf9e17db5bc568653ddacc930e Mon Sep 17 00:00:00 2001 From: uncol Date: Fri, 28 Sep 2018 15:57:56 +0300 Subject: [PATCH 3/4] save --- ui/web/core/ModelApplication.js | 44 +++++++++++++++++++++++++-------- 1 file changed, 34 insertions(+), 10 deletions(-) diff --git a/ui/web/core/ModelApplication.js b/ui/web/core/ModelApplication.js index 5d04589680..33f0100e9e 100644 --- a/ui/web/core/ModelApplication.js +++ b/ui/web/core/ModelApplication.js @@ -40,7 +40,7 @@ Ext.define("NOC.core.ModelApplication", { helpId: undefined, listHelpId: undefined, formHelpId: undefined, - iconSize: 26, + // iconSize: 26, // navTooltipTemplate: new Ext.XTemplate( '', @@ -735,7 +735,7 @@ Ext.define("NOC.core.ModelApplication", { me.formButtonToolbar = Ext.create({ xtype: "toolbar", dock: "left", - width: me.iconSize, + // width: me.iconSize, items: me.alignButton(me.applyPermissions(me.formToolbar)) }); me.formPanel.getRefItems()[0].addDocked(me.formButtonToolbar); @@ -1977,12 +1977,33 @@ Ext.define("NOC.core.ModelApplication", { }, // toggleLeftToolbar: function() { - var me = this; - if(me.formButtonToolbar.getWidth() === me.iconSize) { - me.formButtonToolbar.setWidth("100%"); - } else { - me.formButtonToolbar.setWidth(me.iconSize); - } + var me = this, text; + Ext.each(me.formButtonToolbar.items.items, function(btn) { + text = btn.getText(); + if(btn._hideText) { + btn.setText(btn._text); + btn._hideText = false; + console.log('show'); + } else { + // btn.setText(); + btn._hideText = true; + console.log('hide'); + } + }); + // for(var i = 0; i < me.formButtonToolbar.items.items; i++) { + // if(!me.formButtonToolbar.items.items[i]._text){ + // me.formButtonToolbar.items.items[i].setText(); + // } else { + // me.formButtonToolbar.items.items[i].setText(btn._text); + // } + // } + + // quickly by time + // if(me.formButtonToolbar.getWidth() === me.iconSize) { + // me.formButtonToolbar.setWidth("100%"); + // } else { + // me.formButtonToolbar.setWidth(me.iconSize); + // } }, // alignButton: function(buttons) { @@ -1990,9 +2011,12 @@ Ext.define("NOC.core.ModelApplication", { Ext.each(buttons, function(btn) { if(Ext.isFunction(btn.setTextAlign)) { btn.setTextAlign("left"); + btn._text = btn.getText(); + btn._hideText = true; + btn.setText(); } - if(Ext.isFunction(btn.setTooltip) && !btn.tooltip && btn.getText()) { - btn.setTooltip(btn.getText()); + if(Ext.isFunction(btn.setTooltip) && !btn.tooltip && btn._text) { + btn.setTooltip(btn._text); } acc.push(btn); }); -- GitLab From 08c911137ac0fa645724e25b4da1bdcd2ae18d56 Mon Sep 17 00:00:00 2001 From: uncol Date: Mon, 1 Oct 2018 11:51:57 +0300 Subject: [PATCH 4/4] refactoring --- ui/web/core/Application.js | 32 ++++++++++++++++++ ui/web/core/ModelApplication.js | 59 ++++----------------------------- 2 files changed, 38 insertions(+), 53 deletions(-) diff --git a/ui/web/core/Application.js b/ui/web/core/Application.js index 9ce460d198..a08838998e 100644 --- a/ui/web/core/Application.js +++ b/ui/web/core/Application.js @@ -152,5 +152,37 @@ Ext.define("NOC.core.Application", { // clearNavTabTooltip: function() { NOC.app.app.clearActiveNavTabTooltip(); + }, + // + toggleLeftToolbar: function() { + var me = this; + + me.formLeftToolbar.removeAll(false); + if(me.small) { + Ext.each(me.additionButtons, function(btn) { + btn.setText(btn.config.text); + }); + } else { + Ext.each(me.additionButtons, function(btn) { + btn.setText(); + }); + } + me.formLeftToolbar.add(me.additionButtons); + me.small = !me.small; + }, + // + alignButtons: function(buttons) { + var acc = []; + Ext.each(buttons, function(btn) { + if(Ext.isFunction(btn.setTextAlign)) { + btn.setTextAlign("left"); + btn.setText(); + } + if(Ext.isFunction(btn.setTooltip) && !btn.tooltip && btn.config.text) { + btn.setTooltip(btn.config.text); + } + acc.push(btn); + }); + return acc; } }); diff --git a/ui/web/core/ModelApplication.js b/ui/web/core/ModelApplication.js index 33f0100e9e..bf1b84beb5 100644 --- a/ui/web/core/ModelApplication.js +++ b/ui/web/core/ModelApplication.js @@ -40,7 +40,6 @@ Ext.define("NOC.core.ModelApplication", { helpId: undefined, listHelpId: undefined, formHelpId: undefined, - // iconSize: 26, // navTooltipTemplate: new Ext.XTemplate( '', @@ -725,20 +724,21 @@ Ext.define("NOC.core.ModelApplication", { overflowHandler: "Menu" }, items: me.applyPermissions(formToolbar) - }, me.formButtonToolbar] + }, me.formLeftToolbar] }, getDefaultFocus: function() { return focusField; } }); if(me.formToolbar && me.formToolbar.length) { - me.formButtonToolbar = Ext.create({ + me.additionButtons = me.alignButtons(me.applyPermissions(me.formToolbar), true); + me.formLeftToolbar = Ext.create({ xtype: "toolbar", dock: "left", - // width: me.iconSize, - items: me.alignButton(me.applyPermissions(me.formToolbar)) + items: me.additionButtons }); - me.formPanel.getRefItems()[0].addDocked(me.formButtonToolbar); + me.formPanel.getRefItems()[0].addDocked(me.formLeftToolbar); + me.small = true; } me.form = me.formPanel.items.first().getForm(); // detect autofocus field @@ -1974,52 +1974,5 @@ Ext.define("NOC.core.ModelApplication", { html: element.tooltip }); } - }, - // - toggleLeftToolbar: function() { - var me = this, text; - Ext.each(me.formButtonToolbar.items.items, function(btn) { - text = btn.getText(); - if(btn._hideText) { - btn.setText(btn._text); - btn._hideText = false; - console.log('show'); - } else { - // btn.setText(); - btn._hideText = true; - console.log('hide'); - } - }); - // for(var i = 0; i < me.formButtonToolbar.items.items; i++) { - // if(!me.formButtonToolbar.items.items[i]._text){ - // me.formButtonToolbar.items.items[i].setText(); - // } else { - // me.formButtonToolbar.items.items[i].setText(btn._text); - // } - // } - - // quickly by time - // if(me.formButtonToolbar.getWidth() === me.iconSize) { - // me.formButtonToolbar.setWidth("100%"); - // } else { - // me.formButtonToolbar.setWidth(me.iconSize); - // } - }, - // - alignButton: function(buttons) { - var acc = []; - Ext.each(buttons, function(btn) { - if(Ext.isFunction(btn.setTextAlign)) { - btn.setTextAlign("left"); - btn._text = btn.getText(); - btn._hideText = true; - btn.setText(); - } - if(Ext.isFunction(btn.setTooltip) && !btn.tooltip && btn._text) { - btn.setTooltip(btn._text); - } - acc.push(btn); - }); - return acc; } }); -- GitLab