[pmg-devel] [PATCH widget-toolkit v1] Proxmox Dark Theme

[Stefan Sterz <s.sterz@proxmox.com>]

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