X-Git-Url: https://git.proxmox.com/?a=blobdiff_plain;f=www%2Fmanager6%2Fwindow%2FSettings.js;h=5cf7a70f8aa63387cff9ca56639099e266131253;hb=c7f66bd038bb8e15ba43575801c960ddef870c59;hp=953e6604f59fd8c728eeeac5954e25141829e17a;hpb=61516423adf0cfd0b82fec81b469be23c73743cc;p=pve-manager.git diff --git a/www/manager6/window/Settings.js b/www/manager6/window/Settings.js index 953e6604..5cf7a70f 100644 --- a/www/manager6/window/Settings.js +++ b/www/manager6/window/Settings.js @@ -1,194 +1,410 @@ Ext.define('PVE.window.Settings', { extend: 'Ext.window.Window', - width: '400px', + width: '800px', title: gettext('My Settings'), iconCls: 'fa fa-gear', modal: true, bodyPadding: 10, resizable: false, - buttons: [{ - text: gettext('Close'), - handler: function() { - this.up('window').close(); - } - }], + buttons: [ + { + xtype: 'proxmoxHelpButton', + onlineHelp: 'gui_my_settings', + hidden: false, + }, + '->', + { + text: gettext('Close'), + handler: function() { + this.up('window').close(); + }, + }, + ], - layout: { - type: 'vbox', - align: 'center' - }, + layout: 'hbox', controller: { xclass: 'Ext.app.ViewController', - control: { - '#': { - show: function() { - var me = this; - var sp = Ext.state.Manager.getProvider(); + init: function(view) { + var me = this; + var sp = Ext.state.Manager.getProvider(); + + var username = sp.get('login-username') || Proxmox.Utils.noneText; + me.lookupReference('savedUserName').setValue(Ext.String.htmlEncode(username)); + var vncMode = sp.get('novnc-scaling') || 'auto'; + me.lookupReference('noVNCScalingGroup').setValue({ noVNCScalingField: vncMode }); + + let summarycolumns = sp.get('summarycolumns', 'auto'); + me.lookup('summarycolumns').setValue(summarycolumns); + + me.lookup('guestNotesCollapse').setValue(sp.get('guest-notes-collapse', 'never')); - var username = sp.get('login-username') || PVE.Utils.noneText; - me.lookupReference('savedUserName').setValue(username); + var settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight']; + settings.forEach(function(setting) { + var val = localStorage.getItem('pve-xterm-' + setting); + if (val !== undefined && val !== null) { + var field = me.lookup(setting); + field.setValue(val); + field.resetOriginalValue(); } + }); + }, + + set_button_status: function() { + let me = this; + let form = me.lookup('xtermform'); + + let valid = form.isValid(), dirty = form.isDirty(); + let hasValues = Object.values(form.getValues()).some(v => !!v); + + me.lookup('xtermsave').setDisabled(!dirty || !valid); + me.lookup('xtermreset').setDisabled(!hasValues); + }, + + control: { + '#xtermjs form': { + dirtychange: 'set_button_status', + validitychange: 'set_button_status', }, - 'button[name=reset]': { - click: function () { - var blacklist = ['GuiCap', 'login-username', 'dash-storages']; - var sp = Ext.state.Manager.getProvider(); - var state; - for (state in sp.state) { - if (sp.state.hasOwnProperty(state)) { - if (blacklist.indexOf(state) !== -1) { - continue; + '#xtermjs button': { + click: function(button) { + var me = this; + var settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight']; + settings.forEach(function(setting) { + var field = me.lookup(setting); + if (button.reference === 'xtermsave') { + var value = field.getValue(); + if (value) { + localStorage.setItem('pve-xterm-' + setting, value); + } else { + localStorage.removeItem('pve-xterm-' + setting); } - + } else if (button.reference === 'xtermreset') { + field.setValue(undefined); + localStorage.removeItem('pve-xterm-' + setting); + } + field.resetOriginalValue(); + }); + me.set_button_status(); + }, + }, + 'button[name=reset]': { + click: function() { + let blacklist = ['GuiCap', 'login-username', 'dash-storages']; + let sp = Ext.state.Manager.getProvider(); + for (const state of Object.keys(sp.state)) { + if (!blacklist.includes(state)) { 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'); - } + click: function() { + let me = this; + me.lookupReference('savedUserName').setValue(Proxmox.Utils.noneText); + Ext.state.Manager.getProvider().clear('login-username'); + }, }, 'grid[reference=dashboard-storages]': { selectionchange: function(grid, selected) { var me = this; var sp = Ext.state.Manager.getProvider(); - // saves the selected storageids as - // "id1,id2,id3,..." - // or clears the variable + // saves the selected storageids as "id1,id2,id3,..." or clears the variable if (selected.length > 0) { - sp.set('dash-storages', - Ext.Array.pluck(selected, 'id').join(',')); + sp.set('dash-storages', Ext.Array.pluck(selected, 'id').join(',')); } else { sp.clear('dash-storages'); } }, afterrender: function(grid) { - var me = grid; - var sp = Ext.state.Manager.getProvider(); - var store = me.getStore(); - var items = []; - me.suspendEvent('selectionchange'); - var storages = sp.get('dash-storages') || ''; - storages.split(',').forEach(function(storage){ - // we have to get the records - // to be able to select them - if (storage !== '') { - var item = store.getById(storage); + let store = grid.getStore(); + let storages = Ext.state.Manager.getProvider().get('dash-storages') || ''; + + let items = []; + storages.split(',').forEach(storage => { + if (storage !== '') { // we have to get the records to be able to select them + let item = store.getById(storage); if (item) { items.push(item); } } }); - me.getSelectionModel().select(items); - me.resumeEvent('selectionchange'); - } - } - } + grid.suspendEvent('selectionchange'); + grid.getSelectionModel().select(items); + grid.resumeEvent('selectionchange'); + }, + }, + 'field[reference=summarycolumns]': { + change: (el, newValue) => Ext.state.Manager.getProvider().set('summarycolumns', newValue), + }, + 'field[reference=guestNotesCollapse]': { + change: (e, v) => Ext.state.Manager.getProvider().set('guest-notes-collapse', v), + }, + }, }, items: [{ - xtype: 'fieldset', - width: '90%', - title: gettext('Browser Settings'), - layout: { - type: 'vbox', - align: 'left' - }, - defaults: { - width: '100%', - margin: '0 0 10 0' - }, - items: [ - { - xtype: 'displayfield', - fieldLabel: gettext('Dashboard Storages'), - labelAlign: 'left', - labelWidth: '50%' + xtype: 'fieldset', + flex: 1, + title: gettext('Webinterface Settings'), + margin: '5', + layout: { + type: 'vbox', + align: 'left', + }, + defaults: { + width: '100%', + margin: '0 0 10 0', + }, + items: [ + { + xtype: 'displayfield', + fieldLabel: gettext('Dashboard Storages'), + labelAlign: 'left', + labelWidth: '50%', + }, + { + xtype: 'grid', + maxHeight: 150, + reference: 'dashboard-storages', + selModel: { + selType: 'checkboxmodel', }, - { - xtype: 'grid', - maxHeight: 150, - reference: 'dashboard-storages', - selModel: { - selType: 'checkboxmodel' - }, - columns: [{ - header: gettext('Name'), - dataIndex: 'storage', - flex: 1 - },{ - header: gettext('Node'), - dataIndex: 'node', - flex: 1 + columns: [{ + header: gettext('Name'), + dataIndex: 'storage', + flex: 1, + }, { + header: gettext('Node'), + dataIndex: 'node', + flex: 1, + }], + store: { + type: 'diff', + field: ['type', 'storage', 'id', 'node'], + rstore: PVE.data.ResourceStore, + filters: [{ + property: 'type', + value: 'storage', }], - store: { - type: 'diff', - field: ['type', 'storage', 'id', 'node'], - rstore: PVE.data.ResourceStore, - filters: [{ - property: 'type', - value: 'storage' - }], - sorters: [ 'node','storage'] - } - }, - { - xtype: 'box', - autoEl: { tag: 'hr'} + sorters: ['node', 'storage'], }, - { - xtype: 'displayfield', - fieldLabel: gettext('Saved User name'), - labelAlign: 'left', - labelWidth: '50%', - stateId: 'login-username', - reference: 'savedUserName', - value: '' - }, - { - xtype: 'button', - cls: 'x-btn-default-toolbar-small pve-inline-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', - cls: 'x-btn-default-toolbar-small pve-inline-button', - text: gettext('Reset Layout'), - width: 'auto', - name: 'reset' - } - ] + }, + { + xtype: 'box', + autoEl: { tag: 'hr' }, + }, + { + xtype: 'container', + layout: 'hbox', + items: [ + { + xtype: 'displayfield', + fieldLabel: gettext('Saved User Name') + ':', + labelWidth: 150, + stateId: 'login-username', + reference: 'savedUserName', + flex: 1, + value: '', + }, + { + xtype: 'button', + cls: 'x-btn-default-toolbar-small proxmox-inline-button', + text: gettext('Reset'), + name: 'clear-username', + }, + ], + }, + { + xtype: 'box', + autoEl: { tag: 'hr' }, + }, + { + xtype: 'container', + layout: 'hbox', + items: [ + { + xtype: 'displayfield', + fieldLabel: gettext('Layout') + ':', + flex: 1, + }, + { + xtype: 'button', + cls: 'x-btn-default-toolbar-small proxmox-inline-button', + text: gettext('Reset'), + tooltip: gettext('Reset all layout changes (for example, column widths)'), + name: 'reset', + }, + ], + }, + { + xtype: 'box', + autoEl: { tag: 'hr' }, + }, + { + xtype: 'proxmoxKVComboBox', + fieldLabel: gettext('Summary columns') + ':', + labelWidth: 150, + stateId: 'summarycolumns', + reference: 'summarycolumns', + comboItems: [ + ['auto', 'auto'], + ['1', '1'], + ['2', '2'], + ['3', '3'], + ], + }, + { + xtype: 'proxmoxKVComboBox', + fieldLabel: gettext('Guest Notes') + ':', + labelWidth: 150, + stateId: 'guest-notes-collapse', + reference: 'guestNotesCollapse', + comboItems: [ + ['never', 'Show by default'], + ['always', 'Collapse by default'], + ['auto', 'auto (Collapse if empty)'], + ], + }, + ], + }, + { + xtype: 'container', + layout: 'vbox', + flex: 1, + margin: '5', + defaults: { + width: '100%', + // right margin ensures that the right border of the fieldsets + // is shown + margin: '0 2 10 0', + }, + items: [ + { + xtype: 'fieldset', + itemId: 'xtermjs', + title: gettext('xterm.js Settings'), + items: [{ + xtype: 'form', + reference: 'xtermform', + border: false, + layout: { + type: 'vbox', + algin: 'left', + }, + defaults: { + width: '100%', + margin: '0 0 10 0', + }, + items: [ + { + xtype: 'textfield', + name: 'fontFamily', + reference: 'fontFamily', + emptyText: Proxmox.Utils.defaultText, + fieldLabel: gettext('Font-Family'), + }, + { + xtype: 'proxmoxintegerfield', + emptyText: Proxmox.Utils.defaultText, + name: 'fontSize', + reference: 'fontSize', + minValue: 1, + fieldLabel: gettext('Font-Size'), + }, + { + xtype: 'numberfield', + name: 'letterSpacing', + reference: 'letterSpacing', + emptyText: Proxmox.Utils.defaultText, + fieldLabel: gettext('Letter Spacing'), + }, + { + xtype: 'numberfield', + name: 'lineHeight', + minValue: 0.1, + reference: 'lineHeight', + emptyText: Proxmox.Utils.defaultText, + fieldLabel: gettext('Line Height'), + }, + { + xtype: 'container', + layout: { + type: 'hbox', + pack: 'end', + }, + defaults: { + margin: '0 0 0 5', + }, + items: [ + { + xtype: 'button', + reference: 'xtermreset', + disabled: true, + text: gettext('Reset'), + }, + { + xtype: 'button', + reference: 'xtermsave', + disabled: true, + text: gettext('Save'), + }, + ], + }, + ], + }], + }, { + xtype: 'fieldset', + title: gettext('noVNC Settings'), + items: [ + { + xtype: 'radiogroup', + fieldLabel: gettext('Scaling mode'), + reference: 'noVNCScalingGroup', + height: '15px', // renders faster with value assigned + layout: { + type: 'hbox', + }, + items: [ + { + xtype: 'radiofield', + name: 'noVNCScalingField', + inputValue: 'auto', + boxLabel: 'Auto', + }, + { + xtype: 'radiofield', + name: 'noVNCScalingField', + inputValue: 'scale', + boxLabel: 'Local Scaling', + margin: '0 0 0 10', + }, { + xtype: 'radiofield', + name: 'noVNCScalingField', + inputValue: 'off', + boxLabel: 'Off', + margin: '0 0 0 10', + }, + ], + listeners: { + change: function(el, { noVNCScalingField }) { + let provider = Ext.state.Manager.getProvider(); + if (noVNCScalingField === 'auto') { + provider.clear('novnc-scaling'); + } else { + provider.set('novnc-scaling', noVNCScalingField); + } + }, + }, + }, + ], + }, + ], }], - - onShow: function() { - var me = this; - me.callParent(); - - } });