gui: let users choose the number of columns

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

diff --git a/www/manager6/window/Settings.js b/www/manager6/window/Settings.js
index 443a8191f80e141366e96a197575e178956fe571..cb3f54467075b8ae94793e01005a14ac019511c5 100644 (file)
--- a/www/manager6/window/Settings.js
+++ b/www/manager6/window/Settings.js
@@ -24,7 +24,7 @@ Ext.define('PVE.window.Settings', {
     ],
 
     layout: {
-       type: 'hbox',
+       type: 'column',
        align: 'top'
     },
 
@@ -39,9 +39,12 @@ Ext.define('PVE.window.Settings', {
            me.lookupReference('savedUserName').setValue(username);
            var vncMode = sp.get('novnc-scaling');
            if (vncMode !== undefined) {
-               me.lookupReference('noVNCScalingGroup').setValue(vncMode);
+               me.lookupReference('noVNCScalingGroup').setValue({ noVNCScalingField: vncMode });
            }
 
+           let summarycolumns = sp.get('summarycolumns');
+           me.lookup('summarycolumns').setValue(summarycolumns || 'auto');
+
            var settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
            settings.forEach(function(setting) {
                var val = localStorage.getItem('pve-xterm-' + setting);
@@ -163,13 +166,19 @@ Ext.define('PVE.window.Settings', {
                    me.getSelectionModel().select(items);
                    me.resumeEvent('selectionchange');
                }
+           },
+           'field[reference=summarycolumns]': {
+               change: function(el, newValue) {
+                   var sp = Ext.state.Manager.getProvider();
+                   sp.set('summarycolumns', newValue);
+               }
            }
        }
     },
 
     items: [{
        xtype: 'fieldset',
-       width: '50%',
+       columnWidth: 0.5,
        title: gettext('Webinterface Settings'),
        margin: '5',
        layout: {
@@ -224,7 +233,7 @@ Ext.define('PVE.window.Settings', {
                items: [
                    {
                        xtype: 'displayfield',
-                       fieldLabel: gettext('Saved User Name:'),
+                       fieldLabel: gettext('Saved User Name') + ':',
                        labelWidth: '150',
                        stateId: 'login-username',
                        reference: 'savedUserName',
@@ -249,7 +258,7 @@ Ext.define('PVE.window.Settings', {
                items: [
                    {
                        xtype: 'displayfield',
-                       fieldLabel: gettext('Layout:'),
+                       fieldLabel: gettext('Layout') + ':',
                        flex: 1,
                    },
                    {
@@ -261,11 +270,29 @@ Ext.define('PVE.window.Settings', {
                    },
                ]
            },
+           {
+               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: 'container',
        layout: 'vbox',
-       width: '50%',
+       columnWidth: 0.5,
        margin: '5',
        defaults: {
            width: '100%',
@@ -377,7 +404,7 @@ Ext.define('PVE.window.Settings', {
                        listeners: {
                            change: function(el, newValue, undefined) {
                                var sp = Ext.state.Manager.getProvider();
-                               sp.set('novnc-scaling', newValue);
+                               sp.set('novnc-scaling', newValue.noVNCScalingField);
                            }
                        },
                    },
@@ -385,9 +412,4 @@ Ext.define('PVE.window.Settings', {
            },
        ]
     }],
-
-    onShow: function() {
-       var me = this;
-       me.callParent();
-    }
 });