[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 at 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