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

[Thomas Lamprecht]

On 1/14/20 10:53 AM, Stefan Reiter wrote:
> 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)
> 

that was the idea but the layouting was pretty broken, i.e., it did not expand
correctly anymore. As I did not turned off animCollapse that could have been the
cause - I'll try your followup and apply this if it works OK. Thanks for taking
a look!

> 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 || '';