From 38229fc877c8b27bd16664c41b1a86e665382075 Mon Sep 17 00:00:00 2001
From: Thomas Lamprecht <t.lamprecht@proxmox.com>
Date: Mon, 7 Nov 2022 12:25:23 +0100
Subject: [PATCH] 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>
---
 js/AttachmentGrid.js                  |  6 ++++++
 js/AttachmentQuarantine.js            | 10 ++++++----
 js/SpamQuarantine.js                  | 21 +++++++--------------
 js/VirusQuarantine.js                 | 21 +++++++--------------
 js/controller/QuarantineController.js | 10 ++--------
 5 files changed, 28 insertions(+), 40 deletions(-)

diff --git a/js/AttachmentGrid.js b/js/AttachmentGrid.js
index 6ef54cc..f86b126 100644
--- 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 4e2b036..09406e7 100644
--- 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 0012bd4..388fc02 100644
--- 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 69331af..ff349ba 100644
--- 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 afc04be..5058300 100644
--- 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',
-- 
2.39.2