[pmg-devel] [PATCH pmg-{api, gui} 0/3] Proxmox Dark Theme Fixes - PMG

[pmg-devel] [PATCH pmg-{api, gui} 0/3] Proxmox Dark Theme Fixes - PMG

[Stefan Sterz]

this series fixes several aspects of the dark theme for pmg:

1. remove a warning about the uninitialized `$theme` variable in the
   pmgproxy
2. fix the default behavior of the dark-mode filter toggle in the
   quarantines
3. refactor the quarantines dark-mode filter toggle into a checkbox
   and add a separator

Stefan Sterz (1) @ pmg-api:
  fix: initialize the theme variable with an empty string

 src/PMG/Service/pmgproxy.pm | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

Stefan Sterz (2) @ pmg-gui:
  quarantines: fix the default behavior of the theme toggle button
  quarantines: use a check mark for the dark mode filter

 js/AttachmentQuarantine.js            | 12 ++++++++----
 js/SpamQuarantine.js                  | 12 ++++++++----
 js/VirusQuarantine.js                 | 12 ++++++++----
 js/controller/QuarantineController.js | 16 +++++++++-------
 4 files changed, 33 insertions(+), 19 deletions(-)

-- 
2.30.2

[pmg-devel] [PATCH pmg-api 1/3] proxy: initialize the theme variable with an empty string

[Stefan Sterz]

this removes a warning that was previously present due to using an
uninitialized variable.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/PMG/Service/pmgproxy.pm | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/PMG/Service/pmgproxy.pm b/src/PMG/Service/pmgproxy.pm
index 310519a..5bd9de2 100755
--- a/src/PMG/Service/pmgproxy.pm
+++ b/src/PMG/Service/pmgproxy.pm
@@ -199,7 +199,7 @@ sub get_index {
 	$mobile = $args->{mobile} ? 1 : 0;
     }
 
-    my $theme;
+    my $theme = "";
 
     if (my $cookie = $r->header('Cookie')) {
 	if (my $newlang = ($cookie =~ /(?:^|\s)PMGLangCookie=([^;]*)/)[0]) {
-- 
2.30.2

[pmg-devel] [PATCH pmg-gui 2/3] quarantines: fix the default behavior of the theme toggle button

[Stefan Sterz]

since the default theme is "auto" now, the behavior of the dark theme
toggle needs to be adjust accordingly.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
checking for null here explicitly as that is the documented behavior
if the cookie does not exist [1].

https://docs-devel.sencha.com/extjs/6.0.0/classic/Ext.util.Cookies.html#method-get

 js/controller/QuarantineController.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/controller/QuarantineController.js b/js/controller/QuarantineController.js
index 15e69fa..3135e2b 100644
--- a/js/controller/QuarantineController.js
+++ b/js/controller/QuarantineController.js
@@ -194,7 +194,7 @@ Ext.define('PMG.controller.QuarantineController', {
 	let me = this;
 	let currentTheme = Ext.util.Cookies.get("PMGThemeCookie");
 
-	if (currentTheme === "auto") {
+	if (currentTheme === "__default__" || currentTheme === null) {
 	    me.mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
 
 	    me.themeListener = (e) => {
@@ -207,7 +207,7 @@ Ext.define('PMG.controller.QuarantineController', {
 
 	    me.themeListener(me.mediaQueryList);
 	    me.mediaQueryList.addEventListener("change", me.themeListener);
-	} else if (currentTheme === "__default__") {
+	} else if (currentTheme === "crisp") {
 	    me.hideThemeToggle();
 	} else {
 	    me.showThemeToggle();
-- 
2.30.2

[pmg-devel] [PATCH pmg-gui 3/3] quarantines: use a check mark for the dark mode filter

[Stefan Sterz]

...instead of a toggle button. also adjusts the wording and adds a
separator.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 js/AttachmentQuarantine.js            | 12 ++++++++----
 js/SpamQuarantine.js                  | 12 ++++++++----
 js/VirusQuarantine.js                 | 12 ++++++++----
 js/controller/QuarantineController.js | 12 +++++++-----
 4 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/js/AttachmentQuarantine.js b/js/AttachmentQuarantine.js
index 6e9e546..52bda4c 100644
--- a/js/AttachmentQuarantine.js
+++ b/js/AttachmentQuarantine.js
@@ -108,10 +108,14 @@ Ext.define('PMG.AttachmentQuarantine', {
 			    iconCls: 'fa fa-file-code-o',
 			},
 			{
-			    xtype: 'button',
-			    reference: 'themeToggle',
-			    text: gettext('Toggle Theme'),
-			    enableToggle: true,
+			    xtype: 'tbseparator',
+			    reference: 'themeCheckSep',
+			},
+			{
+			    xtype: 'proxmoxcheckbox',
+			    reference: 'themeCheck',
+			    checked: true,
+			    boxLabel: gettext('Dark-mode filter'),
 			    iconCls: 'fa fa-paint-brush',
 			},
 			'->',
diff --git a/js/SpamQuarantine.js b/js/SpamQuarantine.js
index 093413d..a390dcf 100644
--- a/js/SpamQuarantine.js
+++ b/js/SpamQuarantine.js
@@ -225,10 +225,14 @@ Ext.define('PMG.SpamQuarantine', {
 			    iconCls: 'fa fa-bullhorn',
 			},
 			{
-			    xtype: 'button',
-			    reference: 'themeToggle',
-			    text: gettext('Toggle Theme'),
-			    enableToggle: true,
+			    xtype: 'tbseparator',
+			    reference: 'themeCheckSep',
+			},
+			{
+			    xtype: 'proxmoxcheckbox',
+			    reference: 'themeCheck',
+			    checked: true,
+			    boxLabel: gettext('Dark-mode filter'),
 			    iconCls: 'fa fa-paint-brush',
 			},
 			'->',
diff --git a/js/VirusQuarantine.js b/js/VirusQuarantine.js
index 08bd7d9..9e5a4fb 100644
--- a/js/VirusQuarantine.js
+++ b/js/VirusQuarantine.js
@@ -121,10 +121,14 @@ Ext.define('PMG.VirusQuarantine', {
 			    iconCls: 'fa fa-file-code-o',
 			},
 			{
-			    xtype: 'button',
-			    reference: 'themeToggle',
-			    text: gettext('Toggle Theme'),
-			    enableToggle: true,
+			    xtype: 'tbseparator',
+			    reference: 'themeCheckSep',
+			},
+			{
+			    xtype: 'proxmoxcheckbox',
+			    reference: 'themeCheck',
+			    checked: true,
+			    boxLabel: gettext('Dark-mode filter'),
 			    iconCls: 'fa fa-paint-brush',
 			},
 			'->',
diff --git a/js/controller/QuarantineController.js b/js/controller/QuarantineController.js
index 3135e2b..2a24389 100644
--- a/js/controller/QuarantineController.js
+++ b/js/controller/QuarantineController.js
@@ -46,21 +46,23 @@ Ext.define('PMG.controller.QuarantineController', {
 
     hideThemeToggle: function(argument) {
 	let me = this;
-	let themeButton = me.lookup("themeToggle");
+	let themeButton = me.lookup('themeCheck');
 	themeButton.disable();
 	themeButton.hide();
+	me.lookup('themeCheckSep').hide();
 	me.themed = true;
 	me.toggleTheme();
     },
 
     showThemeToggle: function(argument) {
 	let me = this;
-	let themeButton = me.lookup("themeToggle");
+	let themeButton = me.lookup('themeCheck');
 	me.themed = false;
 	me.toggleTheme();
-	themeButton.setPressed(true);
+	themeButton.setValue(true);
 	themeButton.enable();
 	themeButton.show();
+	me.lookup('themeCheckSep').show();
     },
 
     toggleRaw: function(button) {
@@ -226,8 +228,8 @@ Ext.define('PMG.controller.QuarantineController', {
 	'button[reference=raw]': {
 	    click: 'toggleRaw',
 	},
-	'button[reference=themeToggle]': {
-	    click: 'toggleTheme',
+	'proxmoxcheckbox[reference=themeCheck]': {
+	    change: 'toggleTheme',
 	},
 	'pmgQuarantineList': {
 	    selectionChange: 'onSelectMail',
-- 
2.30.2

[pmg-devel] applied-series: [PATCH pmg-{api, gui} 0/3] Proxmox Dark Theme Fixes - PMG

[Thomas Lamprecht]

Am 23/03/2023 um 16:44 schrieb Stefan Sterz:
> this series fixes several aspects of the dark theme for pmg:
> 
> 1. remove a warning about the uninitialized `$theme` variable in the
>    pmgproxy
> 2. fix the default behavior of the dark-mode filter toggle in the
>    quarantines
> 3. refactor the quarantines dark-mode filter toggle into a checkbox
>    and add a separator
> 
> Stefan Sterz (1) @ pmg-api:
>   fix: initialize the theme variable with an empty string
> 
>  src/PMG/Service/pmgproxy.pm | 2 +-
>  1 file changed, 1 insertion(+), 1 deletion(-)
> 
> Stefan Sterz (2) @ pmg-gui:
>   quarantines: fix the default behavior of the theme toggle button
>   quarantines: use a check mark for the dark mode filter
> 
>  js/AttachmentQuarantine.js            | 12 ++++++++----
>  js/SpamQuarantine.js                  | 12 ++++++++----
>  js/VirusQuarantine.js                 | 12 ++++++++----
>  js/controller/QuarantineController.js | 16 +++++++++-------
>  4 files changed, 33 insertions(+), 19 deletions(-)
> 


applied series, thanks!