From: Stefan Sterz <s.sterz@proxmox.com>
To: pbs-devel@lists.proxmox.com
Subject: [pbs-devel] [PATCH proxmox-backup v1 1/3] proxy/ui: implement theme switcher
Date: Wed, 8 Mar 2023 17:41:39 +0100 [thread overview]
Message-ID: <20230308164141.2468914-1-s.sterz@proxmox.com> (raw)
In-Reply-To: <20230308161840.2396113-1-s.sterz@proxmox.com>
adds a theme switcher to the ui and handles the necessary cookies in
the backend.
this requires a bump of the widget toolkit so the necessary widgets
are present.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
src/bin/proxmox-backup-proxy.rs | 19 +++++++++++++++++++
www/MainView.js | 8 ++++++++
www/index.hbs | 7 +++++++
3 files changed, 34 insertions(+)
diff --git a/src/bin/proxmox-backup-proxy.rs b/src/bin/proxmox-backup-proxy.rs
index e4cb413a..85b6a123 100644
--- a/src/bin/proxmox-backup-proxy.rs
+++ b/src/bin/proxmox-backup-proxy.rs
@@ -94,6 +94,21 @@ fn get_language(headers: &http::HeaderMap) -> String {
}
}
+fn get_theme(headers: &http::HeaderMap) -> String {
+ let exists = |t: &str| {
+ Path::new(&format!(
+ "/usr/share/javascript/proxmox-widget-toolkit/themes/theme-{t}.css"
+ ))
+ .exists()
+ };
+
+ match cookie_from_header(headers, "PBSThemeCookie") {
+ Some(theme) if theme == "auto" => theme,
+ Some(theme) if theme != "__default__" && exists(&theme) => theme,
+ _ => String::from(""),
+ }
+}
+
async fn get_index_future(env: RestEnvironment, parts: Parts) -> Response<Body> {
let auth_id = env.get_auth_id();
let api = env.api_config();
@@ -133,11 +148,15 @@ async fn get_index_future(env: RestEnvironment, parts: Parts) -> Response<Body>
}
}
+ let theme = get_theme(&parts.headers);
+
let data = json!({
"NodeName": nodename,
"UserName": user,
"CSRFPreventionToken": csrf_token,
"language": get_language(&parts.headers),
+ "theme": theme,
+ "auto": theme == "auto",
"debug": debug,
});
diff --git a/www/MainView.js b/www/MainView.js
index d8f89979..0f09f676 100644
--- a/www/MainView.js
+++ b/www/MainView.js
@@ -247,6 +247,14 @@ Ext.define('PBS.MainView', {
text: gettext('My Settings'),
handler: () => Ext.create('PBS.window.Settings').show(),
},
+ {
+ iconCls: 'fa fa-paint-brush',
+ text: gettext('Theme'),
+ handler: () => Ext.create('Proxmox.window.ThemeEditWindow', {
+ cookieName: 'PBSThemeCookie',
+ autoShow: true,
+ }),
+ },
{
iconCls: 'fa fa-language',
text: gettext('Language'),
diff --git a/www/index.hbs b/www/index.hbs
index 1b8ea710..824268e3 100644
--- a/www/index.hbs
+++ b/www/index.hbs
@@ -12,6 +12,13 @@
<link rel="stylesheet" type="text/css" href="/fontawesome/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="/widgettoolkit/css/ext6-pmx.css" />
<link rel="stylesheet" type="text/css" href="/css/ext6-pbs.css" />
+ {{~#if theme}}
+ {{~#if auto}}
+ <link rel="stylesheet" type="text/css" media="(prefers-color-scheme: dark)" href="/widgettoolkit/themes/theme-proxmox-dark.css" />
+ {{~else}}
+ <link rel="stylesheet" type="text/css" href="/widgettoolkit/themes/theme-{{ theme }}.css" />
+ {{~/if}}
+ {{~/if}}
{{#if language}}
<script type='text/javascript' src='/locale/pbs-lang-{{ language }}.js'></script>
{{else}}
--
2.30.2
next prev parent reply other threads:[~2023-03-08 16:42 UTC|newest]
Thread overview: 15+ messages / expand[flat|nested] mbox.gz Atom feed top
2023-03-08 16:18 [pbs-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme Stefan Sterz
2023-03-08 16:25 ` Stefan Sterz
2023-03-08 16:33 ` [pbs-devel] [PATCH widget-toolkit v1 1/6] dark-theme: add initial version of the proxmox-dark theme Stefan Sterz
2023-03-08 16:36 ` [pbs-devel] [PATCH widget-toolkit v1 2/6] subscription/summary/backup: stop setting the background color Stefan Sterz
2023-03-08 16:36 ` [pbs-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 ` [pbs-devel] [PATCH widget-toolkit v1 4/6] rrd chart: add support for the " Stefan Sterz
2023-03-08 16:37 ` [pbs-devel] [PATCH widget-toolkit v1 5/6] util/window/form: add a theme selector Stefan Sterz
2023-03-08 16:37 ` [pbs-devel] [PATCH widget-toolkit v1 6/6] dark-theme: add support for the pmg quarantine theme toggle Stefan Sterz
2023-03-08 16:41 ` Stefan Sterz [this message]
2023-03-08 16:41 ` [pbs-devel] [PATCH proxmox-backup v1 2/3] ui: remove white backgrounds from package versions and system report Stefan Sterz
2023-03-14 16:56 ` [pbs-devel] applied: [PATCH proxmox-backup v1 1/3] proxy/ui: implement theme switcher Thomas Lamprecht
2023-03-08 16:43 ` [pbs-devel] [PATCH proxmox-backup v1 2/3] ui: remove white backgrounds from package versions and system report Stefan Sterz
2023-03-08 16:45 ` [pbs-devel] From 39998aadbf833c19a83fea3549105e625b029c50 Mon Sep 17 00:00:00 2001 Stefan Sterz
2023-03-08 16:51 ` Stefan Sterz
2023-03-08 17:04 ` [pbs-devel] applied-series: [pve-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme 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=20230308164141.2468914-1-s.sterz@proxmox.com \
--to=s.sterz@proxmox.com \
--cc=pbs-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