quarantines: dock attachement grid to bottom, avoid toggle button

A separate header and docked at the bottom reduces crowding at the
top and make the whole view(s) a bit clearer.

This also better mirrors where most mail clients show attachments
(e.g., thunderbird) and allows to avoid the extra button (UX benefits
most of the time from reduced inputs, if it doesn't takes away
features).

Make the panel collapsible for the spam and virus quarantine, and
hide the download button there; note that this isn't done for
security purpose but just wasn't requested and some users may do
better if they only decide deliver/delete here and let their MUA
handle attachements.

Disable collapsing in the Attachement quarantine, it doesn't really
makes sense there and we got a maxHeight already anyway.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

diff --git a/js/AttachmentGrid.js b/js/AttachmentGrid.js
index 6ef54cc7ed729140bdc69b72bf7abe5bfab50d68..f86b1260d6417027149ec9fe6e874478d7a0a1d9 100644 (file)
--- a/js/AttachmentGrid.js
+++ b/js/AttachmentGrid.js
@@ -5,10 +5,16 @@ Ext.define('PMG.grid.AttachmentGrid', {
 
     showDownloads: true,
 
+    title: gettext('Attachments'),
+    iconCls: 'fa fa-paperclip',
+
     minHeight: 50,
     maxHeight: 250,
     scrollable: true,
 
+    collapsible: true,
+    titleCollapse: true,
+
     store: {
        autoDestroy: true,
        fields: ['name', 'content-type', 'size'],

diff --git a/js/AttachmentQuarantine.js b/js/AttachmentQuarantine.js
index 4e2b03634944062aec45480069ce4231ce5839a9..09406e7bda3c830ad81265da2b7e8bb805808100 100644 (file)
--- a/js/AttachmentQuarantine.js
+++ b/js/AttachmentQuarantine.js
@@ -135,15 +135,17 @@ Ext.define('PMG.AttachmentQuarantine', {
                        },
                    ],
                },
-               {
-                   xtype: 'pmgAttachmentGrid',
-                   reference: 'attachmentlist',
-               },
                {
                    xtype: 'pmgMailInfo',
                    hidden: true,
                    reference: 'mailinfo',
                },
+               {
+                   xtype: 'pmgAttachmentGrid',
+                   reference: 'attachmentlist',
+                   dock: 'bottom',
+                   collapsible: false,
+               },
            ],
        },
     ],

diff --git a/js/SpamQuarantine.js b/js/SpamQuarantine.js
index 0012bd4c579499075753f6d6df32dd494a7aa0dc..388fc025e8e807d40420378593cc5439c8401436 100644 (file)
--- a/js/SpamQuarantine.js
+++ b/js/SpamQuarantine.js
@@ -225,14 +225,6 @@ Ext.define('PMG.SpamQuarantine', {
                            enableToggle: true,
                            iconCls: 'fa fa-bullhorn',
                        },
-                       {
-                           xtype: 'button',
-                           reference: 'attachments',
-                           text: gettext('Toggle Attachments'),
-                           enableToggle: true,
-                           pressed: true,
-                           iconCls: 'fa fa-paperclip',
-                       },
                        '->',
                        {
                            xtype: 'button',
@@ -279,18 +271,19 @@ Ext.define('PMG.SpamQuarantine', {
                    reference: 'spaminfo',
                    border: false,
                },
-               {
-                   xtype: 'pmgAttachmentGrid',
-                   reference: 'attachmentlist',
-                   showDownloads: false,
-                   border: false,
-               },
                {
                    xtype: 'pmgMailInfo',
                    hidden: true,
                    reference: 'mailinfo',
                    border: false,
                },
+               {
+                   xtype: 'pmgAttachmentGrid',
+                   reference: 'attachmentlist',
+                   showDownloads: false,
+                   border: false,
+                   dock: 'bottom',
+               },
            ],
        },
     ],

diff --git a/js/VirusQuarantine.js b/js/VirusQuarantine.js
index 69331af7c21c0c28230e1cbaa0f252e06ecf9206..ff349bac345b4eb8063df9bfaa934c7b616c43c6 100644 (file)
--- a/js/VirusQuarantine.js
+++ b/js/VirusQuarantine.js
@@ -120,14 +120,6 @@ Ext.define('PMG.VirusQuarantine', {
                            enableToggle: true,
                            iconCls: 'fa fa-file-code-o',
                        },
-                       {
-                           xtype: 'button',
-                           reference: 'attachments',
-                           text: gettext('Toggle Attachments'),
-                           enableToggle: true,
-                           pressed: true,
-                           iconCls: 'fa fa-paperclip',
-                       },
                        '->',
                        {
                            xtype: 'button',
@@ -156,18 +148,19 @@ Ext.define('PMG.VirusQuarantine', {
                        },
                    ],
                },
-               {
-                   xtype: 'pmgAttachmentGrid',
-                   reference: 'attachmentlist',
-                   showDownloads: false,
-                   border: false,
-               },
                {
                    xtype: 'pmgMailInfo',
                    hidden: true,
                    reference: 'mailinfo',
                    border: false,
                },
+               {
+                   xtype: 'pmgAttachmentGrid',
+                   reference: 'attachmentlist',
+                   showDownloads: false,
+                   border: false,
+                   dock: 'bottom',
+               },
            ],
        },
     ],

diff --git a/js/controller/QuarantineController.js b/js/controller/QuarantineController.js
index afc04be38f751cb70c577268d7e67c8963de9bf6..5058300f120638e8e929dbb30309dd7ebf4cbb7b 100644 (file)
--- a/js/controller/QuarantineController.js
+++ b/js/controller/QuarantineController.js
@@ -26,6 +26,7 @@ Ext.define('PMG.controller.QuarantineController', {
        me.lookupReference('raw').setDisabled(true);
        me.lookupReference('download').setDisabled(true);
        me.lookupReference('mailinfo').setVisible(false);
+       me.lookup('attachmentlist')?.setVisible(false);
 
        let preview = me.lookupReference('preview');
        preview.setDisabled(false);
@@ -41,11 +42,6 @@ Ext.define('PMG.controller.QuarantineController', {
        me.updatePreview(me.raw, rec);
     },
 
-    toggleAttachments: function(button) {
-       var grid = this.lookup('attachmentlist');
-       grid?.setVisible(!grid?.isVisible());
-    },
-
     btnHandler: function(button, e) {
        let me = this;
        let action = button.reference;
@@ -126,6 +122,7 @@ Ext.define('PMG.controller.QuarantineController', {
        let rec = selection[0] || {};
        me.lookup('spaminfo')?.setID(rec);
        me.lookup('attachmentlist')?.setID(rec);
+       me.lookup('attachmentlist')?.setVisible(!!rec.data);
 
        me.getViewModel().set('mailid', rec.data ? rec.data.id : '');
        me.updatePreview(me.raw || false, rec);
@@ -167,9 +164,6 @@ Ext.define('PMG.controller.QuarantineController', {
        'button[reference=raw]': {
            click: 'toggleRaw',
        },
-       'button[reference=attachments]': {
-           click: 'toggleAttachments',
-       },
        'pmgQuarantineList': {
            selectionChange: 'onSelectMail',
            itemkeypress: 'keyPress',