[pve-devel] applied: [PATCH manager v2] fix #2552: ui: allow to collapse notes panel from guest summary

[Thomas Lamprecht]

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 at proxmox.com>
Co-developed-by: Stefan Reiter <s.reiter at proxmox.com>
---

changes v2:
* disable collapse/expand animation, makes it snappier and ...
* .. allows to avoid a expand/collapse flicker in the auto mode by starting off
  as collapsed and only expand on data. Previously this broke the layout,
  which got fixed with disabling the animation.

 www/manager6/panel/NotesView.js | 25 ++++++++++++++++++++++++-
 www/manager6/window/Settings.js | 21 ++++++++++++++++++++-
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/www/manager6/panel/NotesView.js b/www/manager6/panel/NotesView.js
index 23f4b6e9..edf38e5d 100644
--- 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 2ea1f8b3..2fa01ef0 100644
--- 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)'],
+		],
+	    },
 	]
     },
     {
-- 
2.20.1