fix #2552: ui: allow to collapse notes panel from guest summary

Allow to collapse and expand the "Notes" panel on the virtual guests
summary panel.

Further add a browser setting to control the default behavior, one
can chose from:
 * expand on show (default)
 * collapse on show
 * collapse if there are no notes

This way users can make slightly better use of the available screen
space for the guest status.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
Co-developed-by: Stefan Reiter <s.reiter@proxmox.com>

diff --git a/www/manager6/panel/NotesView.js b/www/manager6/panel/NotesView.js
index 23f4b6e916836a6e1ab83f6dc6e15f746ce6be0c..edf38e5d219daca998a745456a7d41be5b29c861 100644 (file)
--- a/www/manager6/panel/NotesView.js
+++ b/www/manager6/panel/NotesView.js
@@ -6,6 +6,7 @@ Ext.define('PVE.panel.NotesView', {
     bodyStyle: 'white-space:pre',
     bodyPadding: 10,
     scrollable: true,
+    animCollapse: false,
 
     tbar: {
        itemId: 'tbar',
@@ -39,10 +40,15 @@ Ext.define('PVE.panel.NotesView', {
            waitMsgTarget: me,
            failure: function(response, opts) {
                me.update(gettext('Error') + " " + response.htmlStatus);
+               me.setCollapsed(false);
            },
            success: function(response, opts) {
                var data = response.result.data.description || '';
                me.update(Ext.htmlEncode(data));
+
+               if (me.collapsible && me.collapseMode === 'auto') {
+                   me.setCollapsed(data === '');
+               }
            }
        });
     },
@@ -51,7 +57,14 @@ Ext.define('PVE.panel.NotesView', {
        render: function(c) {
            var me = this;
            me.getEl().on('dblclick', me.run_editor, me);
-       }
+       },
+       afterlayout: function() {
+           let me = this;
+           if (me.collapsible && !me.getCollapsed() && me.collapseMode === 'always') {
+               me.setCollapsed(true);
+               me.collapseMode = ''; // only once, on initial load!
+           }
+       },
     },
 
     tools: [{
@@ -92,6 +105,16 @@ Ext.define('PVE.panel.NotesView', {
        me.callParent();
        if (type === 'node') {
            me.down('#tbar').setVisible(true);
+       } else {
+           me.setCollapsible(true);
+           me.collapseDirection = 'right';
+
+           let sp = Ext.state.Manager.getProvider();
+           me.collapseMode = sp.get('guest-notes-collapse', 'never');
+
+           if (me.collapseMode === 'auto') {
+               me.setCollapsed(true);
+           }
        }
        me.load();
     }

diff --git a/www/manager6/window/Settings.js b/www/manager6/window/Settings.js
index 2ea1f8b34100ac1470ea6724eaa98c42e982b451..2fa01ef08c41da87bba4a20a78e941d38798a574 100644 (file)
--- a/www/manager6/window/Settings.js
+++ b/www/manager6/window/Settings.js
@@ -45,6 +45,8 @@ Ext.define('PVE.window.Settings', {
            let summarycolumns = sp.get('summarycolumns', 'auto');
            me.lookup('summarycolumns').setValue(summarycolumns);
 
+           me.lookup('guestNotesCollapse').setValue(sp.get('guest-notes-collapse', 'never'));
+
            var settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
            settings.forEach(function(setting) {
                var val = localStorage.getItem('pve-xterm-' + setting);
@@ -172,7 +174,12 @@ Ext.define('PVE.window.Settings', {
                    var sp = Ext.state.Manager.getProvider();
                    sp.set('summarycolumns', newValue);
                }
-           }
+           },
+           'field[reference=guestNotesCollapse]': {
+               change: function(e, v) {
+                   Ext.state.Manager.getProvider().set('guest-notes-collapse', v);
+               },
+           },
        }
     },
 
@@ -287,6 +294,18 @@ Ext.define('PVE.window.Settings', {
                    ['3', '3'],
                ],
            },
+           {
+               xtype: 'proxmoxKVComboBox',
+               fieldLabel: gettext('Guest Notes') + ':',
+               labelWidth: 150,
+               stateId: 'guest-notes-collapse',
+               reference: 'guestNotesCollapse',
+               comboItems: [
+                   ['never', 'Show by default'],
+                   ['always', 'Collapse by default'],
+                   ['auto', 'auto (Collapse if empty)'],
+               ],
+           },
        ]
     },
     {