From: Stefan Sterz <s.sterz@proxmox.com>
To: pmg-devel@lists.proxmox.com
Subject: [pmg-devel] [PATCH pmg-gui v1 6/6] quarantines: add support for a theme toggle
Date: Thu, 9 Mar 2023 09:01:41 +0100 [thread overview]
Message-ID: <20230309080141.30124-1-s.sterz@proxmox.com> (raw)
In-Reply-To: <20230308161840.2396113-1-s.sterz@proxmox.com>
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>
---
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
next prev parent reply other threads:[~2023-03-09 8:02 UTC|newest]
Thread overview: 22+ messages / expand[flat|nested] mbox.gz Atom feed top
2023-03-08 16:18 [pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
2023-03-08 16:25 ` Stefan Sterz
2023-03-08 16:33 ` [pmg-devel] [PATCH widget-toolkit v1 1/6] dark-theme: add initial version of the proxmox-dark theme Stefan Sterz
2023-03-08 16:36 ` [pmg-devel] [PATCH widget-toolkit v1 2/6] subscription/summary/backup: stop setting the background color Stefan Sterz
2023-03-08 16:36 ` [pmg-devel] [PATCH widget-toolkit v1 3/6] gauge widget: add support for a dark theme and dynamic theme switching Stefan Sterz
2023-03-08 16:36 ` [pmg-devel] [PATCH widget-toolkit v1 4/6] rrd chart: add support for the " Stefan Sterz
2023-03-08 16:37 ` [pmg-devel] [PATCH widget-toolkit v1 5/6] util/window/form: add a theme selector Stefan Sterz
2023-03-08 16:37 ` [pmg-devel] [PATCH widget-toolkit v1 6/6] dark-theme: add support for the pmg quarantine theme toggle Stefan Sterz
2023-03-08 17:04 ` [pmg-devel] applied-series: [pve-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Thomas Lamprecht
2023-03-09 8:00 ` [pmg-devel] [PATCH pmg-api v1] proxy: add support for switching themes Stefan Sterz
2023-03-10 10:14 ` Dominik Csapak
2023-03-10 10:24 ` Stefan Sterz
2023-03-15 15:42 ` [pmg-devel] applied: " Thomas Lamprecht
2023-03-09 8:00 ` [pmg-devel] [PATCH pmg-gui v1 1/6] mainview/quarantine: add theme switcher Stefan Sterz
2023-03-15 15:42 ` [pmg-devel] applied: " Thomas Lamprecht
2023-03-09 8:00 ` [pmg-devel] [PATCH pmg-gui v1 2/6] spam-info-grid: style the spam info grid via css variables Stefan Sterz
2023-03-09 8:01 ` [pmg-devel] [PATCH pmg-gui v1 3/6] subscription: remove hard-coded white background Stefan Sterz
2023-03-09 8:01 ` [pmg-devel] [PATCH pmg-gui v1 4/6] hourly mail distribution chart: add dynamic color switching Stefan Sterz
2023-03-09 8:01 ` [pmg-devel] [PATCH pmg-gui v1 5/6] mobile quarantine: add dark theme support to the mobile quarantine Stefan Sterz
2023-03-09 8:01 ` Stefan Sterz [this message]
2023-03-09 8:02 ` [pmg-devel] [PATCH pmg-docs v1] docs: add dark mode support to the api viewer Stefan Sterz
2023-03-23 16:11 ` [pmg-devel] applied: " Thomas Lamprecht
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20230309080141.30124-1-s.sterz@proxmox.com \
--to=s.sterz@proxmox.com \
--cc=pmg-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox