[pmg-devel] [PATCH pmg-gui v1 1/6] mainview/quarantine: add theme switcher

[Stefan Sterz]

adds a theme switcher to the main view and quarantine so that users
can choose a theme.

this requires a bump to the widget toolkit so the necessary widget are
present.

Signed-off-by: Stefan Sterz <s.sterz at proxmox.com>
---
 js/MainView.js       |  8 ++++++++
 js/QuarantineView.js | 12 ++++++++++++
 pmg-index.html.tt    |  7 +++++++
 3 files changed, 27 insertions(+)

diff --git a/js/MainView.js b/js/MainView.js
index 311b8c7..2cc140c 100644
--- a/js/MainView.js
+++ b/js/MainView.js
@@ -208,6 +208,14 @@ Ext.define('PMG.MainView', {
 			    text: gettext('My Settings'),
 			    handler: () => Ext.create('PMG.window.Settings').show(),
 			},
+			{
+			    iconCls: 'fa fa-paint-brush',
+			    text: gettext('Theme'),
+			    handler: () => Ext.create('Proxmox.window.ThemeEditWindow', {
+				cookieName: 'PMGThemeCookie',
+				autoShow: true,
+			    }),
+			},
 			{
 			    iconCls: 'fa fa-language',
 			    text: gettext('Language'),
diff --git a/js/QuarantineView.js b/js/QuarantineView.js
index 149f581..b3315cf 100644
--- a/js/QuarantineView.js
+++ b/js/QuarantineView.js
@@ -141,6 +141,10 @@ Ext.define('PMG.QuarantineView', {
 	    }).show();
 	},
 
+	changeTheme: () => Ext.create('Proxmox.window.ThemeEditWindow', {
+		cookieName: 'PMGThemeCookie',
+		autoShow: true,
+	}),
 	navigate: function(treelist, item) {
 	    this.redirectTo(item.get('path'));
 	},
@@ -156,6 +160,9 @@ Ext.define('PMG.QuarantineView', {
 	    '[reference=languageButton]': {
 		click: 'changeLanguage',
 	    },
+	    '[reference=themeButton]': {
+		click: 'changeTheme',
+	    },
 	},
 
 	init: function(view) {
@@ -233,6 +240,11 @@ Ext.define('PMG.QuarantineView', {
 		    margin: '0 5 0 0',
 		    iconCls: 'fa fa-user',
 		    menu: [
+			{
+			    reference: 'themeButton',
+			    iconCls: 'fa fa-paint-brush',
+			    text: gettext('Theme'),
+			},
 			{
 			    iconCls: 'fa fa-language',
 			    text: gettext('Language'),
diff --git a/pmg-index.html.tt b/pmg-index.html.tt
index 4e9f1af..12c18d3 100644
--- a/pmg-index.html.tt
+++ b/pmg-index.html.tt
@@ -13,6 +13,13 @@
     <link rel="stylesheet" type="text/css" href="/fontawesome/css/font-awesome.css" />
     <link rel="stylesheet" type="text/css" href="/pve2/css/ext6-pmg.css?ver=[% version %]" />
     <link rel="stylesheet" type="text/css" href="/pwt/css/ext6-pmx.css?ver=[% wtversion %]" />
+    [%- IF theme %]
+      [%- IF theme == 'auto' %]
+    <link rel="stylesheet" type="text/css" media="(prefers-color-scheme: dark)" href="/pwt/themes/theme-proxmox-dark.css?ver=[% wtversion %]" />
+      [%- ELSE %]
+    <link rel="stylesheet" type="text/css" href="/pwt/themes/theme-[% theme %].css?ver=[% wtversion %]" />
+      [%- END -%]
+    [%- END -%]  
     [% IF langfile %]
     <script type='text/javascript' src='/pve2/locale/pmg-lang-[% lang %].js'></script>
     [% ELSE %]
-- 
2.30.2