From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id 36EB194D2 for ; Wed, 8 Mar 2023 17:40:14 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 20C8D95E5 for ; Wed, 8 Mar 2023 17:40:14 +0100 (CET) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS for ; Wed, 8 Mar 2023 17:40:13 +0100 (CET) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 13BC3462FD for ; Wed, 8 Mar 2023 17:40:13 +0100 (CET) From: Stefan Sterz To: pve-devel@lists.proxmox.com Date: Wed, 8 Mar 2023 17:40:09 +0100 Message-Id: <20230308164010.2463409-4-s.sterz@proxmox.com> X-Mailer: git-send-email 2.30.2 In-Reply-To: <20230308164010.2463409-1-s.sterz@proxmox.com> References: <20230308161840.2396113-1-s.sterz@proxmox.com> <20230308164010.2463409-1-s.sterz@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL -0.093 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record URIBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to URIBL was blocked. See http://wiki.apache.org/spamassassin/DnsBlocklists#dnsbl-block for more information. [status.health] Subject: [pve-devel] [PATCH manager v1 4/4] ui: make ceph charts change color more dynamically X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Wed, 08 Mar 2023 16:40:14 -0000 add support for setting the background and text color via css. also allows for dynamically switching the color when a theme change is detected. Signed-off-by: Stefan Sterz --- www/manager6/ceph/StatusDetail.js | 35 +++++++++++++++++++++++++++++- www/manager6/panel/RunningChart.js | 29 +++++++++++++++++++++++++ 2 files changed, 63 insertions(+), 1 deletion(-) diff --git a/www/manager6/ceph/StatusDetail.js b/www/manager6/ceph/StatusDetail.js index 88b1775c..d6c0763b 100644 --- a/www/manager6/ceph/StatusDetail.js +++ b/www/manager6/ceph/StatusDetail.js @@ -199,6 +199,18 @@ Ext.define('PVE.ceph.StatusDetail', { }, ], + checkThemeColors: function() { + let me = this; + let rootStyle = getComputedStyle(document.documentElement); + + // get color + let background = rootStyle.getPropertyValue("--pwt-panel-background").trim() || "#ffffff"; + + // set the colors + me.chart.setBackground(background); + me.chart.redraw(); + }, + updateAll: function(metadata, status) { let me = this; me.suspendLayout = true; @@ -257,7 +269,7 @@ Ext.define('PVE.ceph.StatusDetail', { me.statecategories[result].states.push(state); }); - me.getComponent('pgchart').getStore().setData(me.statecategories); + me.chart.getStore().setData(me.statecategories); me.getComponent('pgs').update({ states: pgs_by_state }); let health = status.health || {}; @@ -303,5 +315,26 @@ Ext.define('PVE.ceph.StatusDetail', { me.suspendLayout = false; me.updateLayout(); }, + + initComponent: function() { + var me = this; + me.callParent(); + + me.chart = me.getComponent('pgchart'); + 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(); + }, }); diff --git a/www/manager6/panel/RunningChart.js b/www/manager6/panel/RunningChart.js index 19db8b50..d89a6ecb 100644 --- a/www/manager6/panel/RunningChart.js +++ b/www/manager6/panel/RunningChart.js @@ -98,6 +98,20 @@ Ext.define('PVE.widget.RunningChart', { // show the last x seconds default is 5 minutes timeFrame: 5*60, + checkThemeColors: function() { + let me = this; + let rootStyle = getComputedStyle(document.documentElement); + + // get color + let background = rootStyle.getPropertyValue("--pwt-panel-background").trim() || "#ffffff"; + let text = rootStyle.getPropertyValue("--pwt-text-color").trim() || "#000000"; + + // set the colors + me.chart.setBackground(background); + me.chart.valuesprite.setAttributes({ fillStyle: text }, true); + me.chart.redraw(); + }, + addDataPoint: function(value, time) { let view = this.chart; let panel = view.up(); @@ -156,5 +170,20 @@ Ext.define('PVE.widget.RunningChart', { stroke: me.color, }); } + + 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(); }, }); -- 2.30.2