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

[Thomas Lamprecht]

On 4/13/18 9:50 AM, Dominik Csapak wrote:
> 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')
> +	    }

not sure if we should allow negative numbers here.

Another thing I noticed is that the saving behaviour may be a bit
confusing for the user.
You save on field change events but without feedback, a user may
not be sure if the 'close' vs (X) window button then saves or resets
the values.

Maybe an actual [reset] [save] button would be better?

Line Height and Letter Spacing is a setting which a really small set
may find useful, maybe move it to an advanced section?

A live preview of what the settings do if a xterm.js is open in the
background would be really nice, but probably not to easy :)

> +	]
>      }],
>  
>      onShow: function() {
>