From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id 6B719906E8 for ; Thu, 9 Mar 2023 09:02:23 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 4E52A705A for ; Thu, 9 Mar 2023 09:01:53 +0100 (CET) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS for ; Thu, 9 Mar 2023 09:01:52 +0100 (CET) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 4690241DD4 for ; Thu, 9 Mar 2023 09:01:52 +0100 (CET) From: Stefan Sterz To: pmg-devel@lists.proxmox.com Date: Thu, 9 Mar 2023 09:01:41 +0100 Message-Id: <20230309080141.30124-1-s.sterz@proxmox.com> X-Mailer: git-send-email 2.30.2 In-Reply-To: <20230308161840.2396113-1-s.sterz@proxmox.com> References: <20230308161840.2396113-1-s.sterz@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL -0.075 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pmg-devel] [PATCH pmg-gui v1 6/6] quarantines: add support for a theme toggle X-BeenThere: pmg-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox Mail Gateway development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Thu, 09 Mar 2023 08:02:23 -0000 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 --- 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(`

${gettext('Multiple E-Mails selected')} (${selection.length})

`); }, + 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