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.csa...@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() {
>
_______________________________________________
pve-devel mailing list
pve-devel@pve.proxmox.com
https://pve.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
