public inbox for pbs-devel@lists.proxmox.com
 help / color / mirror / Atom feed
* [pbs-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme
@ 2023-03-08 16:18 Stefan Sterz
  2023-03-08 16:25 ` Stefan Sterz
                   ` (7 more replies)
  0 siblings, 8 replies; 15+ messages in thread
From: Stefan Sterz @ 2023-03-08 16:18 UTC (permalink / raw)
  To: pve-devel, pbs-devel, pmg-devel

this patch series aims to add support for a dark theme to all current
proxmox products. including:

* proxmox virtual environment web gui & api viewer
* proxmox backup server gui & api viewer
* proxmox mail gateway gui, api viewer & (mobile) quarantine

this patch series is split into several parts. the first concerns the
widget toolkit and adds the necessary files and adaptions needed
accross all three products. the other three parts integrate the new
dark theme into pve, pbs and pmg and also adds changes needed by each
product.

part 1: widget toolkit

the first commit adds styles that give the main gui a "dark"
appearance. this includes adjusting the icons and other images as
well as all backgrounds text and link colors. the second commit
removes certain hard-coded background colors that are set via js.
these don't behave properly in the dark theme and the gui behaves
properly without them, so they are removed.

the third and fourth commit make it possible for charts and gauges to
switch their colors based on the current theme. the fifth commit adds
a theme switcher widget that allows switching the current theme and
then sets a cookie accordingly.

the last commit is only relevant for the proxmox mail gateway and
enables the proposed "theme switcher" function. this allows users to
enable or disable a filter over the email preview in the quarantine.
if the filter is enabled the email will have it's brightness reduced
and the colors will be inverted. thus, plain text emails shouldn't
appear too bright

part 2: proxmox virtual environment

the first commit for pve adds the theme switcher to the gui, the
second adjusts the pveproxy template to properly handle the cookie
set by the theme switcher. the third removes unnecessary hard-coded
background colors and the forth add support for the charts used in
pve only.

the fifth commit concern pve-docs and adds support for the dark theme
in the api viewer.

part 3: proxmox backup server

the commits for proxmox backup server first add the theme switcher,
then removes hard-coded backgrounds and finally add dark theme support
to the api viewer.

part 4: proxmox mail gateway

the first commit concerns the api and let's it handle cookie properly.
the next five commits adjust gui to first add a theme switcher, then
style the spam info grid, remove hard-coded white backgrounds, style
the hourly mail chart, and enable the dark mode in the mobile
quarantine.

the second-to-last commit enables the theme switching mechanism for
the quarantine mail preview. this part could be dropped in favor of
extending the preview endpoint to add some styles to the preview that
handle a dark theme. this would have the added benefit of also working
in the mobile quarantine.

the last commit for the mail gateway enables the dark theme in the api
viewer.

Daniel Tschlatscher (2):
  dark-theme: add initial version of the proxmox-dark theme
  util/window/form: add a theme selector

Stefan Sterz (4):
  subscription/summary/backup: stop setting the background color
  gauge widget: add support for a dark theme and dynamic theme switching
  rrd chart: add support for the dark theme and dynamic theme switching
  dark-theme: add support for the pmg quarantine theme toggle

 debian/control                                |   1 +
 src/Makefile                                  |   4 +-
 src/Utils.js                                  |  25 +++
 src/defines.mk                                |   1 +
 src/form/ThemeSelector.js                     |   6 +
 src/node/APT.js                               |   1 -
 src/panel/GaugeWidget.js                      |  45 ++++
 src/panel/RRDChart.js                         |  37 ++++
 src/proxmox-dark/Makefile                     |  47 ++++
 src/proxmox-dark/scss/ProxmoxDark.scss        |  37 ++++
 src/proxmox-dark/scss/abstracts/_mixins.scss  |  12 ++
 .../scss/abstracts/_variables.scss            |  67 ++++++
 src/proxmox-dark/scss/extjs/_body.scss        |  23 ++
 src/proxmox-dark/scss/extjs/_grid.scss        | 146 +++++++++++++
 src/proxmox-dark/scss/extjs/_menu.scss        |  39 ++++
 src/proxmox-dark/scss/extjs/_panel.scss       |  25 +++
 .../scss/extjs/_presentation.scss             |  14 ++
 src/proxmox-dark/scss/extjs/_progress.scss    |  19 ++
 src/proxmox-dark/scss/extjs/_splitter.scss    |  18 ++
 src/proxmox-dark/scss/extjs/_tabbar.scss      |  43 ++++
 src/proxmox-dark/scss/extjs/_tip.scss         |  18 ++
 src/proxmox-dark/scss/extjs/_toolbar.scss     |  21 ++
 src/proxmox-dark/scss/extjs/_treepanel.scss   |  24 +++
 src/proxmox-dark/scss/extjs/_window.scss      |  39 ++++
 src/proxmox-dark/scss/extjs/form/_button.scss |  57 +++++
 .../scss/extjs/form/_combobox.scss            |  23 ++
 .../scss/extjs/form/_formfield.scss           |  40 ++++
 src/proxmox-dark/scss/other/_charts.scss      |  39 ++++
 src/proxmox-dark/scss/other/_icons.scss       | 200 ++++++++++++++++++
 .../scss/proxmox/_datepicker.scss             |  61 ++++++
 src/proxmox-dark/scss/proxmox/_general.scss   |  56 +++++
 .../scss/proxmox/_helpbutton.scss             |  16 ++
 .../scss/proxmox/_loadingindicator.scss       |  14 ++
 src/proxmox-dark/scss/proxmox/_markdown.scss  |  31 +++
 src/proxmox-dark/scss/proxmox/_nodes.scss     |   9 +
 .../scss/proxmox/_quarantine.scss             |  53 +++++
 src/proxmox-dark/scss/proxmox/_storages.scss  |  19 ++
 src/proxmox-dark/scss/proxmox/_tags.scss      |  14 ++
 src/window/AddTotp.js                         |   1 -
 src/window/DiskSmart.js                       |   1 -
 src/window/PackageVersions.js                 |   1 -
 src/window/ThemeEdit.js                       |  49 +++++
 42 files changed, 1391 insertions(+), 5 deletions(-)
 create mode 100644 src/form/ThemeSelector.js
 create mode 100644 src/proxmox-dark/Makefile
 create mode 100644 src/proxmox-dark/scss/ProxmoxDark.scss
 create mode 100644 src/proxmox-dark/scss/abstracts/_mixins.scss
 create mode 100644 src/proxmox-dark/scss/abstracts/_variables.scss
 create mode 100644 src/proxmox-dark/scss/extjs/_body.scss
 create mode 100644 src/proxmox-dark/scss/extjs/_grid.scss
 create mode 100644 src/proxmox-dark/scss/extjs/_menu.scss
 create mode 100644 src/proxmox-dark/scss/extjs/_panel.scss
 create mode 100644 src/proxmox-dark/scss/extjs/_presentation.scss
 create mode 100644 src/proxmox-dark/scss/extjs/_progress.scss
 create mode 100644 src/proxmox-dark/scss/extjs/_splitter.scss
 create mode 100644 src/proxmox-dark/scss/extjs/_tabbar.scss
 create mode 100644 src/proxmox-dark/scss/extjs/_tip.scss
 create mode 100644 src/proxmox-dark/scss/extjs/_toolbar.scss
 create mode 100644 src/proxmox-dark/scss/extjs/_treepanel.scss
 create mode 100644 src/proxmox-dark/scss/extjs/_window.scss
 create mode 100644 src/proxmox-dark/scss/extjs/form/_button.scss
 create mode 100644 src/proxmox-dark/scss/extjs/form/_combobox.scss
 create mode 100644 src/proxmox-dark/scss/extjs/form/_formfield.scss
 create mode 100644 src/proxmox-dark/scss/other/_charts.scss
 create mode 100644 src/proxmox-dark/scss/other/_icons.scss
 create mode 100644 src/proxmox-dark/scss/proxmox/_datepicker.scss
 create mode 100644 src/proxmox-dark/scss/proxmox/_general.scss
 create mode 100644 src/proxmox-dark/scss/proxmox/_helpbutton.scss
 create mode 100644 src/proxmox-dark/scss/proxmox/_loadingindicator.scss
 create mode 100644 src/proxmox-dark/scss/proxmox/_markdown.scss
 create mode 100644 src/proxmox-dark/scss/proxmox/_nodes.scss
 create mode 100644 src/proxmox-dark/scss/proxmox/_quarantine.scss
 create mode 100644 src/proxmox-dark/scss/proxmox/_storages.scss
 create mode 100644 src/proxmox-dark/scss/proxmox/_tags.scss
 create mode 100644 src/window/ThemeEdit.js

-- 
2.30.2





^ permalink raw reply	[flat|nested] 15+ messages in thread

end of thread, other threads:[~2023-03-14 16:57 UTC | newest]

Thread overview: 15+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
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 ` [pbs-devel] [PATCH proxmox-backup v1 1/3] proxy/ui: implement theme switcher Stefan Sterz
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

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