proxmox-mirrors/pve-manager
1
0
Fork 0
mirror of https://git.proxmox.com/git/pve-manager synced 2025-08-16 11:04:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

improve xtermjs settings button behaviour

Browse Source 
we now put a form around the fields/buttons and can track
the valid/dirty state, and use this for setting the button states

now the buttons are correctly enabled/disabled when the form
is dirty/valid/empty

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
This commit is contained in:
Dominik Csapak 2018-04-25 08:12:21 +02:00 committed by Thomas Lamprecht
parent 4dab82e39a
commit 2b0bdc4652
1 changed files with 88 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
www/manager6/window/Settings.js
View File

@ -31,27 +31,40 @@ Ext.define('PVE.window.Settings', {
me.lookupReference('savedUserName').setValue(username); me.lookupReference('savedUserName').setValue(username);
var settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight']; var settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
var defaultSettings = true;
settings.forEach(function(setting) { settings.forEach(function(setting) {
var val = localStorage.getItem('pve-xterm-' + setting); var val = localStorage.getItem('pve-xterm-' + setting);
if (val !== undefined && val !== null) { if (val !== undefined && val !== null) {
var field = me.lookup(setting); var field = me.lookup(setting);
field.setValue(val); field.setValue(val);
defaultSettings = false; field.resetOriginalValue();
}
});
},
set_button_status: function() {
var me = this;
var form = me.lookup('xtermform');
var valid = form.isValid();
var dirty = form.isDirty();
var hasvalues = false;
var values = form.getValues();
Ext.Object.eachValue(values, function(value) {
if (value) {
hasvalues = true;
return false;
} }
}); });
me.lookup('xtermsave').setDisabled(true); me.lookup('xtermsave').setDisabled(!dirty || !valid);
me.lookup('xtermreset').setDisabled(defaultSettings); me.lookup('xtermreset').setDisabled(!hasvalues);
}, },
control: { control: {
'#xtermjs field': { '#xtermjs form': {
change: function(field) { dirtychange: 'set_button_status',
var me = this; validitychange: 'set_button_status'
me.lookup('xtermsave').setDisabled(false);
me.lookup('xtermreset').setDisabled(false);
}
}, },
'#xtermjs button': { '#xtermjs button': {
click: function(button) { click: function(button) {
@ -70,8 +83,9 @@ Ext.define('PVE.window.Settings', {
field.setValue(undefined); field.setValue(undefined);
localStorage.removeItem('pve-xterm-' + setting); localStorage.removeItem('pve-xterm-' + setting);
} }
field.resetOriginalValue();
}); });
button.setDisabled(true); me.set_button_status();
} }
}, },
'button[name=reset]': { 'button[name=reset]': {
@ -232,6 +246,10 @@ Ext.define('PVE.window.Settings', {
width: '50%', width: '50%',
margin: '5', margin: '5',
title: gettext('xterm.js Settings'), title: gettext('xterm.js Settings'),
items: [{
xtype: 'form',
reference: 'xtermform',
border: false,
layout: { layout: {
type: 'vbox', type: 'vbox',
algin: 'left' algin: 'left'
@ -293,6 +311,7 @@ Ext.define('PVE.window.Settings', {
] ]
} }
] ]
}]
}], }],
onShow: function() { onShow: function() {