add 'my settings' to top bar

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@proxmox.com>
This commit is contained in:
Dominik Csapak 2016-10-24 13:54:01 +02:00 committed by Dietmar Maurer
parent e789b5f212
commit f17fb5f1c8
4 changed files with 145 additions and 1 deletions

View File

@ -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;
}

View File

@ -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 \

View File

@ -396,10 +396,26 @@ 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,

View File

@ -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();
}
});