[pbs-devel] [PATCH proxmox-backup v1 1/3] proxy/ui: implement theme switcher

Wed Mar 8 17:41:39 CET 2023

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 at 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




