[pve-devel] [PATCH manager v2 2/2] add 'my settings' to top bar

[Dominik Csapak]

this adds a menu right to the username with an entry 'my settings',
this opens a window with (for now) browser specific settings
and a place to reset them

the plan would be to add password change, 2fa setup etc here

one remark: the reset layout button reloads the window,
to really apply the reset

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
changes to v1:
 * moved menu from logout button to the username
 www/css/ext6-pve.css            |   5 ++
 www/manager6/Makefile           |   1 +
 www/manager6/Workspace.js       |  18 +++++-
 www/manager6/window/Settings.js | 122 ++++++++++++++++++++++++++++++++++++++++
 4 files changed, 145 insertions(+), 1 deletion(-)
 create mode 100644 www/manager6/window/Settings.js

diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index c050aca..172c667 100644
--- a/www/css/ext6-pve.css
+++ b/www/css/ext6-pve.css
@@ -431,3 +431,8 @@ div.right-aligned {
 .x-treelist-row-over > * > .x-treelist-item-text{
     color: #000;
 }
+
+/* some icons have to be color manually */
+.black {
+    color: #000;
+}
diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 8005867..06fbd45 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -86,6 +86,7 @@ JSSRC= 				                 	\
 	window/Restore.js				\
 	window/SafeDestroy.js				\
 	window/BackupConfig.js				\
+	window/Settings.js				\
 	panel/NotesView.js				\
 	grid/SelectFeature.js				\
 	grid/ObjectGrid.js				\
diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index 4769d66..87d3633 100644
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -396,11 +396,27 @@ Ext.define('PVE.StdWorkspace', {
 			},
 			{
 			    pack: 'end',
-			    margin: '0 10 0 0',
 			    id: 'userinfo',
 			    stateful: false
 			},
 			{
+			    xtype: 'button',
+			    margin: '0 10 0 0',
+			    iconCls: 'fa black fa-caret-down',
+			    menuAlign: 'tr-br?',
+			    menu: {
+				showSeparator: false,
+				items: [{
+				    text: gettext('My Settings'),
+				    iconCls: 'fa fa-fw fa-gear',
+				    handler: function() {
+					var win = Ext.create('PVE.window.Settings');
+					win.show();
+				    }
+				}]
+			    }
+			},
+			{
 			    xtype: 'pveHelpButton',
 			    hidden: false,
 			    iconCls: 'fa fa-info-circle x-btn-icon-el-default-toolbar-small ',
diff --git a/www/manager6/window/Settings.js b/www/manager6/window/Settings.js
new file mode 100644
index 0000000..d7b37e3
--- /dev/null
+++ b/www/manager6/window/Settings.js
@@ -0,0 +1,122 @@
+Ext.define('PVE.window.Settings', {
+    extend: 'Ext.window.Window',
+
+    width: '400px',
+    title: gettext('My Settings'),
+    iconCls: 'fa fa-gear',
+    modal: true,
+    bodyPadding: 10,
+    resizable: false,
+
+    buttons: [{
+	text: gettext('Close'),
+	handler: function() {
+	    this.up('window').close();
+	}
+    }],
+
+    layout: {
+	type: 'vbox',
+	align: 'center'
+    },
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	control: {
+	    '#': {
+		show: function() {
+		    var me = this;
+		    var sp = Ext.state.Manager.getProvider();
+
+		    var username = sp.get('login-username') || PVE.Utils.noneText;
+		    me.lookupReference('savedUserName').setValue(username);
+		}
+	    },
+	    'button[name=reset]': {
+		click: function () {
+		    var blacklist = ['GuiCap', 'login-username'];
+		    var sp = Ext.state.Manager.getProvider();
+		    var state;
+		    for (state in sp.state) {
+			if (sp.state.hasOwnProperty(state)) {
+			    if (blacklist.indexOf(state) !== -1) {
+				continue;
+			    }
+
+			    sp.clear(state);
+			}
+		    }
+
+		    window.location.reload();
+		}
+	    },
+	    'button[name=clear-username]': {
+		click: function () {
+		    var me = this;
+		    var usernamefield = me.lookupReference('savedUserName');
+		    var sp = Ext.state.Manager.getProvider();
+
+		    usernamefield.setValue(PVE.Utils.noneText);
+		    sp.clear('login-username');
+		}
+	    }
+	}
+    },
+
+    items: [{
+	    xtype: 'fieldset',
+	    width: '90%',
+	    title: gettext('Browser Settings'),
+	    layout: {
+		type: 'vbox',
+		align: 'right'
+	    },
+	    defaults: {
+		width: '100%',
+		margin: '0 0 10 0'
+	    },
+	    items: [
+		{
+		    xtype: 'displayfield',
+		    fieldLabel: gettext('Saved User name'),
+		    labelAlign: 'left',
+		    labelWidth: '50%',
+		    fieldStyle: {
+			'text-align':'right'
+		    },
+		    stateId: 'login-username',
+		    reference: 'savedUserName',
+		    value: ''
+		},
+		{
+		    xtype: 'button',
+		    text: gettext('Clear User name'),
+		    width: 'auto',
+		    name: 'clear-username'
+		},
+		{
+		    xtype: 'box',
+		    autoEl: { tag: 'hr'}
+		},
+		{
+		    xtype: 'displayfield',
+		    fieldLabel: gettext('Layout'),
+		    labelAlign: 'left',
+		    labelWidth: '50%'
+		},
+		{
+		    xtype: 'button',
+		    text: gettext('Reset Layout'),
+		    width: 'auto',
+		    name: 'reset'
+		}
+	    ]
+    }],
+
+    onShow: function() {
+	var me = this;
+	me.callParent();
+
+    }
+});
-- 
2.1.4