public inbox for pmg-devel@lists.proxmox.com
 help / color / mirror / Atom feed
From: Stefan Sterz <s.sterz@proxmox.com>
To: pmg-devel@lists.proxmox.com
Subject: [pmg-devel] [PATCH pmg-gui v1 1/6] mainview/quarantine: add theme switcher
Date: Thu,  9 Mar 2023 09:00:36 +0100	[thread overview]
Message-ID: <20230309080036.28996-1-s.sterz@proxmox.com> (raw)
In-Reply-To: <20230308161840.2396113-1-s.sterz@proxmox.com>

adds a theme switcher to the main view and quarantine so that users
can choose a theme.

this requires a bump to the widget toolkit so the necessary widget are
present.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 js/MainView.js       |  8 ++++++++
 js/QuarantineView.js | 12 ++++++++++++
 pmg-index.html.tt    |  7 +++++++
 3 files changed, 27 insertions(+)

diff --git a/js/MainView.js b/js/MainView.js
index 311b8c7..2cc140c 100644
--- a/js/MainView.js
+++ b/js/MainView.js
@@ -208,6 +208,14 @@ Ext.define('PMG.MainView', {
 			    text: gettext('My Settings'),
 			    handler: () => Ext.create('PMG.window.Settings').show(),
 			},
+			{
+			    iconCls: 'fa fa-paint-brush',
+			    text: gettext('Theme'),
+			    handler: () => Ext.create('Proxmox.window.ThemeEditWindow', {
+				cookieName: 'PMGThemeCookie',
+				autoShow: true,
+			    }),
+			},
 			{
 			    iconCls: 'fa fa-language',
 			    text: gettext('Language'),
diff --git a/js/QuarantineView.js b/js/QuarantineView.js
index 149f581..b3315cf 100644
--- a/js/QuarantineView.js
+++ b/js/QuarantineView.js
@@ -141,6 +141,10 @@ Ext.define('PMG.QuarantineView', {
 	    }).show();
 	},
 
+	changeTheme: () => Ext.create('Proxmox.window.ThemeEditWindow', {
+		cookieName: 'PMGThemeCookie',
+		autoShow: true,
+	}),
 	navigate: function(treelist, item) {
 	    this.redirectTo(item.get('path'));
 	},
@@ -156,6 +160,9 @@ Ext.define('PMG.QuarantineView', {
 	    '[reference=languageButton]': {
 		click: 'changeLanguage',
 	    },
+	    '[reference=themeButton]': {
+		click: 'changeTheme',
+	    },
 	},
 
 	init: function(view) {
@@ -233,6 +240,11 @@ Ext.define('PMG.QuarantineView', {
 		    margin: '0 5 0 0',
 		    iconCls: 'fa fa-user',
 		    menu: [
+			{
+			    reference: 'themeButton',
+			    iconCls: 'fa fa-paint-brush',
+			    text: gettext('Theme'),
+			},
 			{
 			    iconCls: 'fa fa-language',
 			    text: gettext('Language'),
diff --git a/pmg-index.html.tt b/pmg-index.html.tt
index 4e9f1af..12c18d3 100644
--- a/pmg-index.html.tt
+++ b/pmg-index.html.tt
@@ -13,6 +13,13 @@
     <link rel="stylesheet" type="text/css" href="/fontawesome/css/font-awesome.css" />
     <link rel="stylesheet" type="text/css" href="/pve2/css/ext6-pmg.css?ver=[% version %]" />
     <link rel="stylesheet" type="text/css" href="/pwt/css/ext6-pmx.css?ver=[% wtversion %]" />
+    [%- IF theme %]
+      [%- IF theme == 'auto' %]
+    <link rel="stylesheet" type="text/css" media="(prefers-color-scheme: dark)" href="/pwt/themes/theme-proxmox-dark.css?ver=[% wtversion %]" />
+      [%- ELSE %]
+    <link rel="stylesheet" type="text/css" href="/pwt/themes/theme-[% theme %].css?ver=[% wtversion %]" />
+      [%- END -%]
+    [%- END -%]  
     [% IF langfile %]
     <script type='text/javascript' src='/pve2/locale/pmg-lang-[% lang %].js'></script>
     [% ELSE %]
-- 
2.30.2





  parent reply	other threads:[~2023-03-09  8:01 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 ` [pmg-devel] [PATCH widget-toolkit v1 5/6] util/window/form: add a theme selector Stefan Sterz
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 ` Stefan Sterz [this message]
2023-03-15 15:42   ` [pmg-devel] applied: [PATCH pmg-gui v1 1/6] mainview/quarantine: add theme switcher 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=20230309080036.28996-1-s.sterz@proxmox.com \
    --to=s.sterz@proxmox.com \
    --cc=pmg-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