public inbox for pmg-devel@lists.proxmox.com
 help / color / mirror / Atom feed
From: Stefan Sterz <s.sterz@proxmox.com>
To: pve-devel@lists.proxmox.com, pbs-devel@lists.proxmox.com,
	pmg-devel@lists.proxmox.com
Subject: [pmg-devel] [PATCH widget-toolkit v1 5/6] util/window/form: add a theme selector
Date: Wed,  8 Mar 2023 17:37:43 +0100	[thread overview]
Message-ID: <20230308163744.2456083-1-s.sterz@proxmox.com> (raw)
In-Reply-To: <20230308161840.2396113-1-s.sterz@proxmox.com>

From: Daniel Tschlatscher <d.tschlatscher@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.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>
---
 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





  parent reply	other threads:[~2023-03-08 16:38 UTC|newest]

Thread overview: 22+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2023-03-08 16:18 [pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
2023-03-08 16:25 ` Stefan Sterz
2023-03-08 16:33 ` [pmg-devel] [PATCH widget-toolkit v1 1/6] dark-theme: add initial version of the proxmox-dark theme Stefan Sterz
2023-03-08 16:36 ` [pmg-devel] [PATCH widget-toolkit v1 2/6] subscription/summary/backup: stop setting the background color Stefan Sterz
2023-03-08 16:36   ` [pmg-devel] [PATCH widget-toolkit v1 3/6] gauge widget: add support for a dark theme and dynamic theme switching Stefan Sterz
2023-03-08 16:36   ` [pmg-devel] [PATCH widget-toolkit v1 4/6] rrd chart: add support for the " Stefan Sterz
2023-03-08 16:37 ` Stefan Sterz [this message]
2023-03-08 16:37   ` [pmg-devel] [PATCH widget-toolkit v1 6/6] dark-theme: add support for the pmg quarantine theme toggle Stefan Sterz
2023-03-08 17:04 ` [pmg-devel] applied-series: [pve-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Thomas Lamprecht
2023-03-09  8:00 ` [pmg-devel] [PATCH pmg-api v1] proxy: add support for switching themes Stefan Sterz
2023-03-10 10:14   ` Dominik Csapak
2023-03-10 10:24     ` Stefan Sterz
2023-03-15 15:42   ` [pmg-devel] applied: " Thomas Lamprecht
2023-03-09  8:00 ` [pmg-devel] [PATCH pmg-gui v1 1/6] mainview/quarantine: add theme switcher Stefan Sterz
2023-03-15 15:42   ` [pmg-devel] applied: " Thomas Lamprecht
2023-03-09  8:00 ` [pmg-devel] [PATCH pmg-gui v1 2/6] spam-info-grid: style the spam info grid via css variables Stefan Sterz
2023-03-09  8:01 ` [pmg-devel] [PATCH pmg-gui v1 3/6] subscription: remove hard-coded white background Stefan Sterz
2023-03-09  8:01 ` [pmg-devel] [PATCH pmg-gui v1 4/6] hourly mail distribution chart: add dynamic color switching Stefan Sterz
2023-03-09  8:01 ` [pmg-devel] [PATCH pmg-gui v1 5/6] mobile quarantine: add dark theme support to the mobile quarantine Stefan Sterz
2023-03-09  8:01 ` [pmg-devel] [PATCH pmg-gui v1 6/6] quarantines: add support for a theme toggle Stefan Sterz
2023-03-09  8:02 ` [pmg-devel] [PATCH pmg-docs v1] docs: add dark mode support to the api viewer Stefan Sterz
2023-03-23 16:11   ` [pmg-devel] applied: " Thomas Lamprecht

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=20230308163744.2456083-1-s.sterz@proxmox.com \
    --to=s.sterz@proxmox.com \
    --cc=pbs-devel@lists.proxmox.com \
    --cc=pmg-devel@lists.proxmox.com \
    --cc=pve-devel@lists.proxmox.com \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal