[pve-manager.git] / www / manager6 / window / Settings.js

Ext.define('PVE.window.Settings', {
    extend: 'Ext.window.Window',

    width: '800px',
    title: gettext('My Settings'),
    iconCls: 'fa fa-gear',
    modal: true,
    bodyPadding: 10,
    resizable: false,

    buttons: [
	{
	    xtype: 'proxmoxHelpButton',
	    onlineHelp: 'gui_my_settings',
	    hidden: false,
	},
	'->',
	{
	    text: gettext('Close'),
	    handler: function() {
		this.up('window').close();
	    },
	},
    ],

    layout: 'hbox',

    controller: {
	xclass: 'Ext.app.ViewController',

	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'));
	    me.lookup('editNotesOnDoubleClick').setValue(sp.get('edit-notes-on-double-click', false));

	    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',
	    },
	    '#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() {
		    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
		    if (selected.length > 0) {
			sp.set('dash-storages', Ext.Array.pluck(selected, 'id').join(','));
		    } else {
			sp.clear('dash-storages');
		    }
		},
		afterrender: function(grid) {
		    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);
			    }
			}
		    });
		    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),
	    },
	    'field[reference=editNotesOnDoubleClick]': {
		change: (e, v) => Ext.state.Manager.getProvider().set('edit-notes-on-double-click', v),
	    },
	},
    },

    items: [{
	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',
		},
		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',
		    }],
		    sorters: ['node', 'storage'],
		},
	    },
	    {
		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: 125,
		stateId: 'summarycolumns',
		reference: 'summarycolumns',
		comboItems: [
		    ['auto', 'auto'],
		    ['1', '1'],
		    ['2', '2'],
		    ['3', '3'],
		],
	    },
	    {
		xtype: 'proxmoxKVComboBox',
		fieldLabel: gettext('Guest Notes') + ':',
		labelWidth: 125,
		stateId: 'guest-notes-collapse',
		reference: 'guestNotesCollapse',
		comboItems: [
		    ['never', 'Show by default'],
		    ['always', 'Collapse by default'],
		    ['auto', 'auto (Collapse if empty)'],
		],
	    },
	    {
		xtype: 'checkbox',
		fieldLabel: gettext('Notes'),
		labelWidth: 125,
		boxLabel: gettext('Open editor on double-click'),
		reference: 'editNotesOnDoubleClick',
		inputValue: true,
		uncheckedValue: false,
	    },
	],
    },
    {
	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);
				}
			    },
			},
		    },
		],
	    },
	],
    }],
});
Commit	Line	Data
ce11a8af DC	1	Ext.define('PVE.window.Settings', {
	2	extend: 'Ext.window.Window',
	3
d9ace13c	4	width: '800px',
ce11a8af DC	5	title: gettext('My Settings'),
	6	iconCls: 'fa fa-gear',
	7	modal: true,
	8	bodyPadding: 10,
	9	resizable: false,
	10
75ceae78 DL	11	buttons: [
	12	{
	13	xtype: 'proxmoxHelpButton',
	14	onlineHelp: 'gui_my_settings',
f6710aac	15	hidden: false,
75ceae78 DL	16	},
	17	'->',
	18	{
	19	text: gettext('Close'),
	20	handler: function() {
	21	this.up('window').close();
f6710aac TL	22	},
f6710aac TL	23	},
75ceae78	24	],
ce11a8af	25
d27a44a6	26	layout: 'hbox',
ce11a8af DC	27
	28	controller: {
	29	xclass: 'Ext.app.ViewController',
	30
d9ace13c DC	31	init: function(view) {
	32	var me = this;
	33	var sp = Ext.state.Manager.getProvider();
	34
	35	var username = sp.get('login-username') \|\| Proxmox.Utils.noneText;
1011b569	36	me.lookupReference('savedUserName').setValue(Ext.String.htmlEncode(username));
758690bf	37	var vncMode = sp.get('novnc-scaling') \|\| 'auto';
07195aa0	38	me.lookupReference('noVNCScalingGroup').setValue({ noVNCScalingField: vncMode });
d9ace13c	39
6b6cd0e4 TL	40	let summarycolumns = sp.get('summarycolumns', 'auto');
6b6cd0e4 TL	41	me.lookup('summarycolumns').setValue(summarycolumns);
f973c5b2	42
300c0f73	43	me.lookup('guestNotesCollapse').setValue(sp.get('guest-notes-collapse', 'never'));
2a5fd75d	44	me.lookup('editNotesOnDoubleClick').setValue(sp.get('edit-notes-on-double-click', false));
300c0f73	45
d9ace13c	46	var settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
d9ace13c DC	47	settings.forEach(function(setting) {
	48	var val = localStorage.getItem('pve-xterm-' + setting);
	49	if (val !== undefined && val !== null) {
	50	var field = me.lookup(setting);
	51	field.setValue(val);
2b0bdc46	52	field.resetOriginalValue();
d9ace13c DC	53	}
d9ace13c DC	54	});
2b0bdc46 DC	55	},
	56
	57	set_button_status: function() {
cb139584 TL	58	let me = this;
cb139584 TL	59	let form = me.lookup('xtermform');
d9ace13c	60
cb139584 TL	61	let valid = form.isValid(), dirty = form.isDirty();
cb139584 TL	62	let hasValues = Object.values(form.getValues()).some(v => !!v);
2b0bdc46 DC	63
2b0bdc46 DC	64	me.lookup('xtermsave').setDisabled(!dirty \|\| !valid);
cb139584	65	me.lookup('xtermreset').setDisabled(!hasValues);
d9ace13c DC	66	},
d9ace13c DC	67
ce11a8af	68	control: {
2b0bdc46 DC	69	'#xtermjs form': {
2b0bdc46 DC	70	dirtychange: 'set_button_status',
f6710aac	71	validitychange: 'set_button_status',
d9ace13c DC	72	},
	73	'#xtermjs button': {
	74	click: function(button) {
	75	var me = this;
	76	var settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
	77	settings.forEach(function(setting) {
	78	var field = me.lookup(setting);
	79	if (button.reference === 'xtermsave') {
	80	var value = field.getValue();
	81	if (value) {
	82	localStorage.setItem('pve-xterm-' + setting, value);
	83	} else {
	84	localStorage.removeItem('pve-xterm-' + setting);
	85	}
	86	} else if (button.reference === 'xtermreset') {
	87	field.setValue(undefined);
	88	localStorage.removeItem('pve-xterm-' + setting);
	89	}
2b0bdc46	90	field.resetOriginalValue();
d9ace13c	91	});
2b0bdc46	92	me.set_button_status();
f6710aac	93	},
ce11a8af DC	94	},
ce11a8af DC	95	'button[name=reset]': {
8058410f	96	click: function() {
cb139584 TL	97	let blacklist = ['GuiCap', 'login-username', 'dash-storages'];
	98	let sp = Ext.state.Manager.getProvider();
	99	for (const state of Object.keys(sp.state)) {
	100	if (!blacklist.includes(state)) {
ce11a8af DC	101	sp.clear(state);
	102	}
	103	}
ce11a8af	104	window.location.reload();
f6710aac	105	},
ce11a8af DC	106	},
ce11a8af DC	107	'button[name=clear-username]': {
8058410f	108	click: function() {
cb139584 TL	109	let me = this;
	110	me.lookupReference('savedUserName').setValue(Proxmox.Utils.noneText);
	111	Ext.state.Manager.getProvider().clear('login-username');
f6710aac	112	},
2488c226 DC	113	},
	114	'grid[reference=dashboard-storages]': {
	115	selectionchange: function(grid, selected) {
	116	var me = this;
	117	var sp = Ext.state.Manager.getProvider();
	118
cb139584	119	// saves the selected storageids as "id1,id2,id3,..." or clears the variable
2488c226	120	if (selected.length > 0) {
cb139584	121	sp.set('dash-storages', Ext.Array.pluck(selected, 'id').join(','));
2488c226 DC	122	} else {
	123	sp.clear('dash-storages');
	124	}
	125	},
	126	afterrender: function(grid) {
cb139584 TL	127	let store = grid.getStore();
	128	let storages = Ext.state.Manager.getProvider().get('dash-storages') \|\| '';
	129
	130	let items = [];
	131	storages.split(',').forEach(storage => {
	132	if (storage !== '') { // we have to get the records to be able to select them
	133	let item = store.getById(storage);
2488c226 DC	134	if (item) {
	135	items.push(item);
	136	}
	137	}
	138	});
cb139584 TL	139	grid.suspendEvent('selectionchange');
	140	grid.getSelectionModel().select(items);
	141	grid.resumeEvent('selectionchange');
f6710aac	142	},
f973c5b2 DC	143	},
f973c5b2 DC	144	'field[reference=summarycolumns]': {
cb139584	145	change: (el, newValue) => Ext.state.Manager.getProvider().set('summarycolumns', newValue),
300c0f73 TL	146	},
300c0f73 TL	147	'field[reference=guestNotesCollapse]': {
cb139584	148	change: (e, v) => Ext.state.Manager.getProvider().set('guest-notes-collapse', v),
300c0f73	149	},
2a5fd75d TL	150	'field[reference=editNotesOnDoubleClick]': {
	151	change: (e, v) => Ext.state.Manager.getProvider().set('edit-notes-on-double-click', v),
	152	},
f6710aac	153	},
ce11a8af DC	154	},
	155
	156	items: [{
26fcae33	157	xtype: 'fieldset',
d27a44a6	158	flex: 1,
26fcae33 DJ	159	title: gettext('Webinterface Settings'),
	160	margin: '5',
	161	layout: {
	162	type: 'vbox',
f6710aac	163	align: 'left',
26fcae33 DJ	164	},
	165	defaults: {
	166	width: '100%',
f6710aac	167	margin: '0 0 10 0',
26fcae33 DJ	168	},
	169	items: [
	170	{
	171	xtype: 'displayfield',
	172	fieldLabel: gettext('Dashboard Storages'),
	173	labelAlign: 'left',
f6710aac	174	labelWidth: '50%',
ce11a8af	175	},
26fcae33 DJ	176	{
	177	xtype: 'grid',
	178	maxHeight: 150,
	179	reference: 'dashboard-storages',
	180	selModel: {
f6710aac	181	selType: 'checkboxmodel',
2488c226	182	},
26fcae33 DJ	183	columns: [{
	184	header: gettext('Name'),
	185	dataIndex: 'storage',
f6710aac TL	186	flex: 1,
f6710aac TL	187	}, {
26fcae33 DJ	188	header: gettext('Node'),
26fcae33 DJ	189	dataIndex: 'node',
f6710aac	190	flex: 1,
26fcae33 DJ	191	}],
	192	store: {
	193	type: 'diff',
	194	field: ['type', 'storage', 'id', 'node'],
	195	rstore: PVE.data.ResourceStore,
	196	filters: [{
	197	property: 'type',
f6710aac	198	value: 'storage',
2488c226	199	}],
8058410f	200	sorters: ['node', 'storage'],
f6710aac	201	},
26fcae33 DJ	202	},
	203	{
	204	xtype: 'box',
8058410f	205	autoEl: { tag: 'hr' },
26fcae33 DJ	206	},
26fcae33 DJ	207	{
bd7aef86	208	xtype: 'container',
8058410f	209	layout: 'hbox',
bd7aef86 DJ	210	items: [
	211	{
	212	xtype: 'displayfield',
94666c47	213	fieldLabel: gettext('Saved User Name') + ':',
ad8b37fa	214	labelWidth: 150,
bd7aef86 DJ	215	stateId: 'login-username',
	216	reference: 'savedUserName',
	217	flex: 1,
f6710aac	218	value: '',
bd7aef86 DJ	219	},
	220	{
	221	xtype: 'button',
	222	cls: 'x-btn-default-toolbar-small proxmox-inline-button',
	223	text: gettext('Reset'),
	224	name: 'clear-username',
	225	},
f6710aac	226	],
26fcae33 DJ	227	},
	228	{
	229	xtype: 'box',
8058410f	230	autoEl: { tag: 'hr' },
26fcae33 DJ	231	},
26fcae33 DJ	232	{
bd7aef86 DJ	233	xtype: 'container',
bd7aef86 DJ	234	layout: 'hbox',
9a08bd8a TL	235	items: [
	236	{
	237	xtype: 'displayfield',
94666c47	238	fieldLabel: gettext('Layout') + ':',
bd7aef86	239	flex: 1,
9a08bd8a TL	240	},
	241	{
	242	xtype: 'button',
	243	cls: 'x-btn-default-toolbar-small proxmox-inline-button',
bd7aef86	244	text: gettext('Reset'),
9a08bd8a TL	245	tooltip: gettext('Reset all layout changes (for example, column widths)'),
9a08bd8a TL	246	name: 'reset',
9a08bd8a	247	},
f6710aac	248	],
26fcae33	249	},
f973c5b2 DC	250	{
f973c5b2 DC	251	xtype: 'box',
8058410f	252	autoEl: { tag: 'hr' },
f973c5b2 DC	253	},
	254	{
	255	xtype: 'proxmoxKVComboBox',
	256	fieldLabel: gettext('Summary columns') + ':',
2a5fd75d	257	labelWidth: 125,
f973c5b2 DC	258	stateId: 'summarycolumns',
	259	reference: 'summarycolumns',
	260	comboItems: [
	261	['auto', 'auto'],
	262	['1', '1'],
	263	['2', '2'],
	264	['3', '3'],
	265	],
	266	},
300c0f73 TL	267	{
	268	xtype: 'proxmoxKVComboBox',
	269	fieldLabel: gettext('Guest Notes') + ':',
2a5fd75d	270	labelWidth: 125,
300c0f73 TL	271	stateId: 'guest-notes-collapse',
	272	reference: 'guestNotesCollapse',
	273	comboItems: [
	274	['never', 'Show by default'],
	275	['always', 'Collapse by default'],
	276	['auto', 'auto (Collapse if empty)'],
	277	],
	278	},
2a5fd75d TL	279	{
	280	xtype: 'checkbox',
	281	fieldLabel: gettext('Notes'),
	282	labelWidth: 125,
	283	boxLabel: gettext('Open editor on double-click'),
	284	reference: 'editNotesOnDoubleClick',
	285	inputValue: true,
	286	uncheckedValue: false,
	287	},
f6710aac	288	],
9d6d8d86 TL	289	},
9d6d8d86 TL	290	{
26fcae33 DJ	291	xtype: 'container',
26fcae33 DJ	292	layout: 'vbox',
d27a44a6	293	flex: 1,
d9ace13c	294	margin: '5',
26fcae33 DJ	295	defaults: {
	296	width: '100%',
	297	// right margin ensures that the right border of the fieldsets
	298	// is shown
f6710aac	299	margin: '0 2 10 0',
26fcae33	300	},
8058410f	301	items: [
26fcae33 DJ	302	{
	303	xtype: 'fieldset',
	304	itemId: 'xtermjs',
	305	title: gettext('xterm.js Settings'),
	306	items: [{
	307	xtype: 'form',
	308	reference: 'xtermform',
	309	border: false,
2b0bdc46	310	layout: {
26fcae33	311	type: 'vbox',
f6710aac	312	algin: 'left',
26fcae33 DJ	313	},
	314	defaults: {
	315	width: '100%',
	316	margin: '0 0 10 0',
d9ace13c	317	},
2b0bdc46 DC	318	items: [
2b0bdc46 DC	319	{
26fcae33 DJ	320	xtype: 'textfield',
	321	name: 'fontFamily',
	322	reference: 'fontFamily',
	323	emptyText: Proxmox.Utils.defaultText,
f6710aac	324	fieldLabel: gettext('Font-Family'),
26fcae33 DJ	325	},
	326	{
	327	xtype: 'proxmoxintegerfield',
	328	emptyText: Proxmox.Utils.defaultText,
	329	name: 'fontSize',
	330	reference: 'fontSize',
	331	minValue: 1,
f6710aac	332	fieldLabel: gettext('Font-Size'),
26fcae33 DJ	333	},
	334	{
	335	xtype: 'numberfield',
	336	name: 'letterSpacing',
	337	reference: 'letterSpacing',
	338	emptyText: Proxmox.Utils.defaultText,
f6710aac	339	fieldLabel: gettext('Letter Spacing'),
26fcae33 DJ	340	},
	341	{
	342	xtype: 'numberfield',
	343	name: 'lineHeight',
	344	minValue: 0.1,
	345	reference: 'lineHeight',
	346	emptyText: Proxmox.Utils.defaultText,
f6710aac	347	fieldLabel: gettext('Line Height'),
2b0bdc46 DC	348	},
2b0bdc46 DC	349	{
26fcae33 DJ	350	xtype: 'container',
	351	layout: {
	352	type: 'hbox',
f6710aac	353	pack: 'end',
26fcae33	354	},
a3c30fbc TL	355	defaults: {
	356	margin: '0 0 0 5',
	357	},
26fcae33 DJ	358	items: [
	359	{
	360	xtype: 'button',
	361	reference: 'xtermreset',
	362	disabled: true,
f6710aac	363	text: gettext('Reset'),
26fcae33 DJ	364	},
	365	{
	366	xtype: 'button',
	367	reference: 'xtermsave',
	368	disabled: true,
f6710aac TL	369	text: gettext('Save'),
	370	},
	371	],
	372	},
	373	],
	374	}],
	375	}, {
26fcae33 DJ	376	xtype: 'fieldset',
	377	title: gettext('noVNC Settings'),
	378	items: [
26fcae33 DJ	379	{
26fcae33 DJ	380	xtype: 'radiogroup',
b89a26bc	381	fieldLabel: gettext('Scaling mode'),
26fcae33 DJ	382	reference: 'noVNCScalingGroup',
	383	height: '15px', // renders faster with value assigned
	384	layout: {
	385	type: 'hbox',
	386	},
	387	items: [
758690bf DC	388	{
	389	xtype: 'radiofield',
	390	name: 'noVNCScalingField',
	391	inputValue: 'auto',
	392	boxLabel: 'Auto',
	393	},
26fcae33 DJ	394	{
	395	xtype: 'radiofield',
	396	name: 'noVNCScalingField',
	397	inputValue: 'scale',
	398	boxLabel: 'Local Scaling',
758690bf	399	margin: '0 0 0 10',
f6710aac	400	}, {
26fcae33 DJ	401	xtype: 'radiofield',
	402	name: 'noVNCScalingField',
	403	inputValue: 'off',
	404	boxLabel: 'Off',
	405	margin: '0 0 0 10',
f6710aac	406	},
26fcae33 DJ	407	],
26fcae33 DJ	408	listeners: {
cb139584	409	change: function(el, { noVNCScalingField }) {
758690bf DC	410	let provider = Ext.state.Manager.getProvider();
	411	if (noVNCScalingField === 'auto') {
	412	provider.clear('novnc-scaling');
	413	} else {
	414	provider.set('novnc-scaling', noVNCScalingField);
	415	}
f6710aac	416	},
26fcae33 DJ	417	},
26fcae33 DJ	418	},
f6710aac	419	],
26fcae33	420	},
f6710aac	421	],
ce11a8af	422	}],
ce11a8af	423	});