util/window/form: add a theme selector

add a widget that implements a theme selector and sets a cookie to
load the appropriate theme.

Co-authored-by: Daniel Tschlatscher <d.tschlatscher@proxmox.com>
Co-authored-by: Stefan Sterz <s.sterz@proxmox.com>
Signed-off-by: Daniel Tschlatscher <d.tschlatscher@proxmox.com>
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>

diff --git a/src/Makefile b/src/Makefile
index 54727f620804da5edc17fdb71dac7a70459b78db..11790a071ce780a7a0b09be87ed085bf2ea2c99a 100644 (file)
--- a/src/Makefile
+++ b/src/Makefile
@@ -44,6 +44,7 @@ JSSRC=                                        \
        form/TaskTypeSelector.js        \
        form/ACME.js                    \
        form/UserSelector.js            \
+       form/ThemeSelector.js           \
        button/Button.js                \
        button/AltText.js               \
        button/HelpButton.js            \
@@ -90,6 +91,7 @@ JSSRC=                                        \
        window/AddYubico.js             \
        window/TfaEdit.js               \
        window/NotesEdit.js             \
+       window/ThemeEdit.js             \
        node/APT.js                     \
        node/APTRepositories.js         \
        node/NetworkEdit.js             \

diff --git a/src/Utils.js b/src/Utils.js
index 8a974870540b6d5e428267a2f59c27da62b04170..2ab1d0ae272e26cc5d2514ae57842ae019749e59 100644 (file)
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -109,6 +109,31 @@ utilities: {
        return data;
     },
 
+    theme_map: {
+       auto: 'auto',
+       "proxmox-dark": 'Proxmox Dark',
+    },
+
+    render_theme: function(value) {
+       if (!value || value === '__default__') {
+           return Proxmox.Utils.defaultText + ' (Light theme)';
+       }
+       let text = Proxmox.Utils.theme_map[value];
+       if (text) {
+           return text;
+       }
+       return value;
+    },
+
+    theme_array: function() {
+       let data = [['__default__', Proxmox.Utils.render_theme('')]];
+       Ext.Object.each(Proxmox.Utils.theme_map, function(key, value) {
+           data.push([key, Proxmox.Utils.render_theme(value)]);
+       });
+
+       return data;
+    },
+
     bond_mode_gettext_map: {
        '802.3ad': 'LACP (802.3ad)',
        'lacp-balance-slb': 'LACP (balance-slb)',

diff --git a/src/form/ThemeSelector.js b/src/form/ThemeSelector.js
new file mode 100644 (file)
index 0000000..fa5ddb7
--- /dev/null
+++ b/src/form/ThemeSelector.js
@@ -0,0 +1,6 @@
+Ext.define('Proxmox.form.ThemeSelector', {
+    extend: 'Proxmox.form.KVComboBox',
+    xtype: 'proxmoxThemeSelector',
+
+    comboItems: Proxmox.Utils.theme_array(),
+});

diff --git a/src/window/ThemeEdit.js b/src/window/ThemeEdit.js
new file mode 100644 (file)
index 0000000..aec7082
--- /dev/null
+++ b/src/window/ThemeEdit.js
@@ -0,0 +1,49 @@
+Ext.define('Proxmox.window.ThemeEditWindow', {
+    extend: 'Ext.window.Window',
+    alias: 'widget.pmxThemeEditWindow',
+
+    viewModel: {
+       parent: null,
+       data: {
+           language: '__default__',
+       },
+    },
+    controller: {
+       xclass: 'Ext.app.ViewController',
+       init: function(view) {
+           let theme = Ext.util.Cookies.get(view.cookieName) || '__default__';
+           this.getViewModel().set('theme', theme);
+       },
+       applyTheme: function(button) {
+           let view = this.getView();
+           let vm = this.getViewModel();
+
+           let expire = Ext.Date.add(new Date(), Ext.Date.YEAR, 10);
+           Ext.util.Cookies.set(view.cookieName, vm.get('theme'), expire);
+           view.mask(gettext('Please wait...'), 'x-mask-loading');
+           window.location.reload();
+       },
+    },
+
+    cookieName: 'PVEThemeCookie',
+
+    title: gettext('Theme'),
+    modal: true,
+    bodyPadding: 10,
+    resizable: false,
+    items: [
+       {
+           xtype: 'proxmoxThemeSelector',
+           fieldLabel: gettext('Theme'),
+           bind: {
+               value: '{theme}',
+           },
+       },
+    ],
+    buttons: [
+       {
+           text: gettext('Apply'),
+           handler: 'applyTheme',
+       },
+    ],
+});