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

[Stefan Reiter]

On 1/10/20 4:12 PM, Thomas Lamprecht wrote:
> 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>
> ---
>   www/manager6/panel/NotesView.js | 19 ++++++++++++++++++-
>   www/manager6/window/Settings.js | 21 ++++++++++++++++++++-
>   2 files changed, 38 insertions(+), 2 deletions(-)
> 

Tested, and I like the patch, but the animation doesn't work great (in 
both FF and Chromium). I find it a bit unnecessary anyway, so how about 
disabling it? This also makes it possible to set the default state in 
'auto' mode to collapsed, which avoids the constant closing animation 
when clicking through VMs without notes. (with animCollapse: true, ExtJS 
doesn't like setting the collapsed state that quickly, since the 
animation is still playing)

i.e. something like this on top of your patch:

diff --git a/www/manager6/panel/NotesView.js 
b/www/manager6/panel/NotesView.js
index 9135898c..53b45b11 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',
@@ -34,11 +35,17 @@ Ext.define('PVE.panel.NotesView', {
      load: function() {
  	var me = this;

+	// in 'auto' mode, start collapsed and only expand on data or error msg
+	if (me.collapsible && me.collapseMode === 'auto') {
+	    me.setCollapsed(true);
+	}
+
  	Proxmox.Utils.API2Request({
  	    url: me.url,
  	    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 || '';