From: Daniel Tschlatscher <d.tschlatsc...@proxmox.com>
add a widget that implements a theme selector and sets a cookie to
load the appropriate theme.
Co-authored-by: Daniel Tschlatscher <d.tschlatsc...@proxmox.com>
Co-authored-by: Stefan Sterz <s.st...@proxmox.com>
Signed-off-by: Daniel Tschlatscher <d.tschlatsc...@proxmox.com>
Signed-off-by: Stefan Sterz <s.st...@proxmox.com>
---
src/Makefile | 2 ++
src/Utils.js | 25 ++++++++++++++++++++
src/form/ThemeSelector.js | 6 +++++
src/window/ThemeEdit.js | 49 +++++++++++++++++++++++++++++++++++++++
4 files changed, 82 insertions(+)
create mode 100644 src/form/ThemeSelector.js
create mode 100644 src/window/ThemeEdit.js
diff --git a/src/Makefile b/src/Makefile
index 54727f6..11790a0 100644
--- 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 8a97487..2ab1d0a 100644
--- 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
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
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',
+ },
+ ],
+});
--
2.30.2
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
