mainview/quarantine: add theme switcher

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@proxmox.com>
Reviewed-by: Dominik Csapak <d.csapak@proxmox.com>
Tested-by:  Dominik Csapak <d.csapak@proxmox.com>

diff --git a/js/MainView.js b/js/MainView.js
index 311b8c7595e6c7369a46451c89388a1be415bf1e..2cc140c1eceba870da226d25980638f8df322d2f 100644 (file)
--- 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 149f5810d8f2acc24e65ff4ff6aecb2ca812d8f5..b3315cf4f525a60024ebc464f88b82b8ac5dcecd 100644 (file)
--- 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 4e9f1afb1197b00b20a1836f51d6b42fd04e2e60..12c18d3410f0da7f3f6999dbd282a2a8b66df778 100644 (file)
--- 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 %]