[pve-devel] [PATCH manager 4/4] add xterm.js settings

[Dominik Csapak]

this adds font-settings to the 'My Settings'
window and makes that bigger

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/window/Settings.js | 84 +++++++++++++++++++++++++++++++++++------
 1 file changed, 72 insertions(+), 12 deletions(-)

diff --git a/www/manager6/window/Settings.js b/www/manager6/window/Settings.js
index 9a33850f..ce805365 100644
--- a/www/manager6/window/Settings.js
+++ b/www/manager6/window/Settings.js
@@ -1,7 +1,7 @@
 Ext.define('PVE.window.Settings', {
     extend: 'Ext.window.Window',
 
-    width: '400px',
+    width: '800px',
     title: gettext('My Settings'),
     iconCls: 'fa fa-gear',
     modal: true,
@@ -16,21 +16,39 @@ Ext.define('PVE.window.Settings', {
     }],
 
     layout: {
-	type: 'vbox',
-	align: 'center'
+	type: 'hbox',
+	align: 'top'
     },
 
     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(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 = view.down('#xtermjs field[name='+ setting + ']');
+		    field.setValue(val);
+		}
+	    });
+	},
 
-		    var username = sp.get('login-username') || Proxmox.Utils.noneText;
-		    me.lookupReference('savedUserName').setValue(username);
+	control: {
+	    '#xtermjs field': {
+		change: function(field, value) {
+		    var setting = field.name;
+		    if (localStorage && value) {
+			localStorage.setItem('pve-xterm-' + setting, value);
+		    } else if (localStorage) {
+			localStorage.removeItem('pve-xterm-' + setting);
+		    }
 		}
 	    },
 	    'button[name=reset]': {
@@ -102,8 +120,9 @@ Ext.define('PVE.window.Settings', {
 
     items: [{
 	    xtype: 'fieldset',
-	    width: '90%',
-	    title: gettext('Browser Settings'),
+	    width: '50%',
+	    title: gettext('Webinterface Settings'),
+	    margin: '5',
 	    layout: {
 		type: 'vbox',
 		align: 'left'
@@ -184,6 +203,47 @@ Ext.define('PVE.window.Settings', {
 		    name: 'reset'
 		}
 	    ]
+    },{
+	xtype: 'fieldset',
+	itemId: 'xtermjs',
+	width: '50%',
+	margin: '5',
+	    title: gettext('xterm.js Settings'),
+	layout: {
+	    type: 'vbox',
+	    algin: 'left'
+	},
+	defaults: {
+	    width: '100%',
+	    margin: '0 0 10 0'
+	},
+	items: [
+	    {
+		xtype: 'textfield',
+		name: 'fontFamily',
+		emptyText: Proxmox.Utils.defaultText,
+		fieldLabel: gettext('Font-Family')
+	    },
+	    {
+		xtype: 'proxmoxintegerfield',
+		emptyText: Proxmox.Utils.defaultText,
+		name: 'fontSize',
+		minValue: 1,
+		fieldLabel: gettext('Font-Size')
+	    },
+	    {
+		xtype: 'numberfield',
+		name: 'letterSpacing',
+		emptyText: Proxmox.Utils.defaultText,
+		fieldLabel: gettext('Letter Spacing')
+	    },
+	    {
+		xtype: 'numberfield',
+		name: 'lineHeight',
+		emptyText: Proxmox.Utils.defaultText,
+		fieldLabel: gettext('Line Height')
+	    }
+	]
     }],
 
     onShow: function() {
-- 
2.11.0