]> git.proxmox.com Git - proxmox-backup.git/commitdiff
projects / proxmox-backup.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: dd06b7f)
proxy/ui: implement theme switcher
authorStefan Sterz <s.sterz@proxmox.com>
Wed, 8 Mar 2023 16:41:39 +0000 (17:41 +0100)
committerThomas Lamprecht <t.lamprecht@proxmox.com>
Thu, 9 Mar 2023 07:04:18 +0000 (08:04 +0100)
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 patch | blob | blame | history
www/MainView.js patch | blob | blame | history
www/index.hbs patch | blob | blame | history

diff --git a/src/bin/proxmox-backup-proxy.rs b/src/bin/proxmox-backup-proxy.rs
index e4cb413a7712fc578777984470382f4f7ae42d0a..85b6a123ac7f260edf281b4cf66a8f924f0ec808 100644 (file)
--- 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 d8f89979bd069f46ab3fc73f5a21ea45449539de..0f09f676b0126283e9e2be178b7da49cabaf84bb 100644 (file)
--- 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 1b8ea7102d7fa27f1cb9922ae631492c55e22026..824268e389c371f89c6f076ea1975ab1e80c5058 100644 (file)
--- 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}}
Proxmox Backup Server and Client