[pmg-devel] [PATCH pmg-gui v1 6/6] quarantines: add support for a theme toggle

[Stefan Sterz]

this allows toggling the presentation of the email previews depending
on the current theme. in the default "light" mode the toggle is hidden
to avoid clutter. enable the toggle in other themes to allow switching
back to the original way the email was rendered.

this requires a bump of the widget toolkit. the toolkit provides the
styles necessary for the toggle to work.

Signed-off-by: Stefan Sterz <s.sterz at proxmox.com>
---
i'm not a hundred percent certain about this commit, as i outlined in
the cover letter there is a potentially better solution. however,
handling the "theming" in the api endpoint would mean handling the
theme cookie there as well to properly detect the current theme and
could then not be easily toggled from the gui.

there are ways of injecting addtional css into an iframe, but i
personally find that a bit "hacky". so im happy for further
suggestions for this part of the series.

 js/AttachmentQuarantine.js            |  7 +++
 js/SpamQuarantine.js                  |  7 +++
 js/VirusQuarantine.js                 |  7 +++
 js/controller/QuarantineController.js | 65 +++++++++++++++++++++++++++
 4 files changed, 86 insertions(+)

diff --git a/js/AttachmentQuarantine.js b/js/AttachmentQuarantine.js
index 4e9bb80..6e9e546 100644
--- a/js/AttachmentQuarantine.js
+++ b/js/AttachmentQuarantine.js
@@ -107,6 +107,13 @@ Ext.define('PMG.AttachmentQuarantine', {
 			    enableToggle: true,
 			    iconCls: 'fa fa-file-code-o',
 			},
+			{
+			    xtype: 'button',
+			    reference: 'themeToggle',
+			    text: gettext('Toggle Theme'),
+			    enableToggle: true,
+			    iconCls: 'fa fa-paint-brush',
+			},
 			'->',
 			{
 			    xtype: 'button',
diff --git a/js/SpamQuarantine.js b/js/SpamQuarantine.js
index 1608f18..093413d 100644
--- a/js/SpamQuarantine.js
+++ b/js/SpamQuarantine.js
@@ -224,6 +224,13 @@ Ext.define('PMG.SpamQuarantine', {
 			    enableToggle: true,
 			    iconCls: 'fa fa-bullhorn',
 			},
+			{
+			    xtype: 'button',
+			    reference: 'themeToggle',
+			    text: gettext('Toggle Theme'),
+			    enableToggle: true,
+			    iconCls: 'fa fa-paint-brush',
+			},
 			'->',
 			{
 			    xtype: 'button',
diff --git a/js/VirusQuarantine.js b/js/VirusQuarantine.js
index 65c4fda..08bd7d9 100644
--- a/js/VirusQuarantine.js
+++ b/js/VirusQuarantine.js
@@ -120,6 +120,13 @@ Ext.define('PMG.VirusQuarantine', {
 			    enableToggle: true,
 			    iconCls: 'fa fa-file-code-o',
 			},
+			{
+			    xtype: 'button',
+			    reference: 'themeToggle',
+			    text: gettext('Toggle Theme'),
+			    enableToggle: true,
+			    iconCls: 'fa fa-paint-brush',
+			},
 			'->',
 			{
 			    xtype: 'button',
diff --git a/js/controller/QuarantineController.js b/js/controller/QuarantineController.js
index 5058300..15e69fa 100644
--- a/js/controller/QuarantineController.js
+++ b/js/controller/QuarantineController.js
@@ -33,6 +33,36 @@ Ext.define('PMG.controller.QuarantineController', {
 	preview.update(`<h3 style="padding-left:5px;">${gettext('Multiple E-Mails selected')} (${selection.length})</h3>`);
     },
 
+    toggleTheme: function(button) {
+	let preview = this.lookup('preview');
+	this.themed = !this.themed;
+
+	if (this.themed) {
+	    preview.addCls("pmg-mail-preview-themed");
+	} else {
+	    preview.removeCls("pmg-mail-preview-themed");
+	}
+    },
+
+    hideThemeToggle: function(argument) {
+	let me = this;
+	let themeButton = me.lookup("themeToggle");
+	themeButton.disable();
+	themeButton.hide();
+	me.themed = true;
+	me.toggleTheme();
+    },
+
+    showThemeToggle: function(argument) {
+	let me = this;
+	let themeButton = me.lookup("themeToggle");
+	me.themed = false;
+	me.toggleTheme();
+	themeButton.setPressed(true);
+	themeButton.enable();
+	themeButton.show();
+    },
+
     toggleRaw: function(button) {
 	let me = this;
 	let list = me.lookupReference('list');
@@ -160,10 +190,45 @@ Ext.define('PMG.controller.QuarantineController', {
 	}
     },
 
+    beforeRender: function() {
+	let me = this;
+	let currentTheme = Ext.util.Cookies.get("PMGThemeCookie");
+
+	if (currentTheme === "auto") {
+	    me.mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+
+	    me.themeListener = (e) => {
+		if (e.matches) {
+		    me.showThemeToggle();
+		} else {
+		    me.hideThemeToggle();
+		}
+	    };
+
+	    me.themeListener(me.mediaQueryList);
+	    me.mediaQueryList.addEventListener("change", me.themeListener);
+	} else if (currentTheme === "__default__") {
+	    me.hideThemeToggle();
+	} else {
+	    me.showThemeToggle();
+	}
+    },
+
+    destroy: function() {
+	let me = this;
+
+	me.mediaQueryList?.removeEventListener("change", me.themeListener);
+
+	me.callParent();
+    },
+
     control: {
 	'button[reference=raw]': {
 	    click: 'toggleRaw',
 	},
+	'button[reference=themeToggle]': {
+	    click: 'toggleTheme',
+	},
 	'pmgQuarantineList': {
 	    selectionChange: 'onSelectMail',
 	    itemkeypress: 'keyPress',
-- 
2.30.2