quarantines: add support for a theme toggle

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@proxmox.com>
Reviewed-by: Dominik Csapak <d.csapak@proxmox.com>
Tested-by:  Dominik Csapak <d.csapak@proxmox.com>

diff --git a/js/AttachmentQuarantine.js b/js/AttachmentQuarantine.js
index 4e9bb80ab40e3bc6734baf4677ec598a9e69ce95..6e9e5463a5cbbf895346655ae58ed34f27e03f1a 100644 (file)
--- 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 1608f18be1c4a7bbb2e50dc3b9702ac527d9071d..093413dc0dc332d71a53d7e5df83badec7f0262b 100644 (file)
--- 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 65c4fda6cacc4bb435d690b66c9902a6b7b0594b..08bd7d9edc9138483a8ee6528f9ef03896ae3984 100644 (file)
--- 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 5058300f120638e8e929dbb30309dd7ebf4cbb7b..15e69fa60aaa2e2299ea35a6f25f1a28d1a57733 100644 (file)
--- 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',