proxmox-mirrors/proxmox-widget-toolkit
1
0
Fork 1
mirror of https://git.proxmox.com/git/proxmox-widget-toolkit synced 2025-06-26 20:45:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

gauge widget: add support for a dark theme and dynamic theme switching

Browse Source 
the gauges in the data center overview should use a dark style if the
relevant css variables are set. this also makes it possible to switch
the colors dynamically by adding an event listener

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
This commit is contained in:
Stefan Sterz 2023-03-08 17:36:57 +01:00 committed by Thomas Lamprecht
parent fbe9ee7210
commit f111efa4fd
1 changed files with 45 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/panel/GaugeWidget.js
View File

@ -61,6 +61,36 @@ Ext.define('Proxmox.panel.GaugeWidget', {
initialValue: 0, initialValue: 0,
checkThemeColors: function() {
let me = this;
let rootStyle = getComputedStyle(document.documentElement);
// get colors
let panelBg = rootStyle.getPropertyValue("--pwt-panel-background").trim() || "#ffffff";
let textColor = rootStyle.getPropertyValue("--pwt-text-color").trim() || "#000000";
me.defaultColor = rootStyle.getPropertyValue("--pwt-gauge-default").trim() || '#c2ddf2';
me.criticalColor = rootStyle.getPropertyValue("--pwt-gauge-crit").trim() || '#ff6c59';
me.warningColor = rootStyle.getPropertyValue("--pwt-gauge-warn").trim() || '#fc0';
me.backgroundColor = rootStyle.getPropertyValue("--pwt-gauge-back").trim() || '#f5f5f5';
// set gauge colors
let value = me.chart.series[0].getValue() / 100;
let color = me.defaultColor;
if (value >= me.criticalThreshold) {
color = me.criticalColor;
} else if (value >= me.warningThreshold) {
color = me.warningColor;
}
me.chart.series[0].setColors([color, me.backgroundColor]);
// set text and background colors
me.chart.setBackground(panelBg);
me.valueSprite.setAttributes({ fillStyle: textColor }, true);
me.chart.redraw();
},
updateValue: function(value, text) { updateValue: function(value, text) {
let me = this; let me = this;
@ -100,5 +130,20 @@ Ext.define('Proxmox.panel.GaugeWidget', {
me.text = me.getComponent('text'); me.text = me.getComponent('text');
me.chart = me.getComponent('chart'); me.chart = me.getComponent('chart');
me.valueSprite = me.chart.getSurface('chart').get('valueSprite'); me.valueSprite = me.chart.getSurface('chart').get('valueSprite');
me.checkThemeColors();
// switch colors on media query changes
me.mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
me.themeListener = (e) => { me.checkThemeColors(); };
me.mediaQueryList.addEventListener("change", me.themeListener);
},
doDestroy: function() {
let me = this;
me.mediaQueryList.removeEventListener("change", me.themeListener);
me.callParent();
}, },
}); });