From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9]) by lore.proxmox.com (Postfix) with ESMTPS id 096911FF191 for ; Tue, 9 Sep 2025 15:17:03 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 42D8DA54C; Tue, 9 Sep 2025 15:17:06 +0200 (CEST) Message-ID: <9cfa23fc-2a8b-4cf1-9fb3-2a4135285d04@proxmox.com> Date: Tue, 9 Sep 2025 15:16:32 +0200 MIME-Version: 1.0 User-Agent: Mozilla Thunderbird Beta To: Proxmox Datacenter Manager development discussion , Stefan Hanreich References: <20250909100838.234778-1-s.hanreich@proxmox.com> <20250909100838.234778-6-s.hanreich@proxmox.com> Content-Language: en-US From: Dominik Csapak In-Reply-To: <20250909100838.234778-6-s.hanreich@proxmox.com> X-Bm-Milter-Handled: 55990f41-d878-4baa-be0a-ee34c49e34d2 X-Bm-Transport-Timestamp: 1757423768958 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.022 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment KAM_SHORT 0.001 Use of a URL Shortener for very short URL RCVD_IN_VALIDITY_CERTIFIED_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. RCVD_IN_VALIDITY_RPBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. RCVD_IN_VALIDITY_SAFE_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: Re: [pdm-devel] [PATCH proxmox-datacenter-manager 4/5] ui: images: add sdn icon X-BeenThere: pdm-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox Datacenter Manager development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Reply-To: Proxmox Datacenter Manager development discussion Content-Transfer-Encoding: 7bit Content-Type: text/plain; charset="us-ascii"; Format="flowed" Errors-To: pdm-devel-bounces@lists.proxmox.com Sender: "pdm-devel" while this is good enough for now imho we should really think about creating our own font with the missing icons, or think about changing to an iconset that includes the ones we need/want. The approach here fixes the color issue, but we still have a scaling problem, as in, the svg does not scale with the set font-size, like the rest of the font-awesome icons. This is ok for the uses we have now, but might not always work out (e.g. the font-size in panel headers is 20px for desktop and 14px for crisp, so the 16px here sit somewhere in between, so it does not stand out that much) On 9/9/25 12:08 PM, Stefan Hanreich wrote: > Add the icon used for SDN in Proxmox VE manually, since it isn't > included in our distribution of font awesome. SVG icons have the issue > that their color cannot be simply changed via the CSS color > attribute. This is problematic when showing an icon in the navigation > or on the dashboard, where we use the color attribute to change their > color. To work around that, use the icon as a mask and fill the > background with the desired color. In the future it would make sense > to ship our own custom font with those icons to circumvent those > issues completely. > > Signed-off-by: Stefan Hanreich > --- > ui/Makefile | 1 + > ui/css/pdm.scss | 27 ++++++++++++++-- > ui/images/icon-sdn.svg | 70 ++++++++++++++++++++++++++++++++++++++++++ > 3 files changed, 95 insertions(+), 3 deletions(-) > create mode 100644 ui/images/icon-sdn.svg > > diff --git a/ui/Makefile b/ui/Makefile > index 7d2e654..61e5c77 100644 > --- a/ui/Makefile > +++ b/ui/Makefile > @@ -60,6 +60,7 @@ install: $(COMPILED_OUTPUT) index.hbs > install -m0644 images/icon-cpu.svg $(DESTDIR)$(UIDIR)/images > install -m0644 images/icon-memory.svg $(DESTDIR)$(UIDIR)/images > install -m0644 images/icon-sdn-vnet.svg $(DESTDIR)$(UIDIR)/images > + install -m0644 images/icon-sdn.svg $(DESTDIR)$(UIDIR)/images > install -m0644 images/proxmox_logo.svg $(DESTDIR)$(UIDIR)/images > install -m0644 images/proxmox_logo_white.svg $(DESTDIR)$(UIDIR)/images > > diff --git a/ui/css/pdm.scss b/ui/css/pdm.scss > index 6d87b1c..63095c3 100644 > --- a/ui/css/pdm.scss > +++ b/ui/css/pdm.scss > @@ -59,15 +59,36 @@ > > .fa-sdn-vnet::before { > content: " "; > - background-image: url(./images/icon-sdn-vnet.svg); > - background-size: 16px 16px; > - background-repeat: no-repeat; > + mask-image: url(./images/icon-sdn-vnet.svg); > + mask-size: 16px 16px; > + mask-repeat: no-repeat; > + background-color: var(--pwt-color); > width: 16px; > height: 16px; > vertical-align: bottom; > display: inline-block; > } > > +.fa-sdn:before { > + content: " "; > + mask-image: url(../images/icon-sdn.svg); > + mask-size: 16px 16px; > + mask-repeat: no-repeat; > + background-color: var(--pwt-color); > + width: 16px; > + height: 16px; > + vertical-align: middle; > + display: inline-block; > +} > + > +.pwt-nav-menu .pwt-nav-link.active .fa-sdn:before { > + background-color: var(--pwt-accent-color); > +} > + > +.pwt-panel-header-text .fa-sdn:before { > + background-color: var(--pwt-accent-color-background); > +} > + > :root.pwt-dark-mode { > .fa-memory, > .fa-cpu, > diff --git a/ui/images/icon-sdn.svg b/ui/images/icon-sdn.svg > new file mode 100644 > index 0000000..9782e8b > --- /dev/null > +++ b/ui/images/icon-sdn.svg > @@ -0,0 +1,70 @@ > + > + + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> > + > + > + + viewBox="0.00 0.00 142.00 140.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> > + > + > +sdn > + > + > +a > + > + > + > + > +b > + > + > + > + > +a--b > + > + > + > + > +d > + > + > + > + > +a--d > + > + > + > + > +c > + > + > + > + > +a--c > + > + > + > + > +e > + > + > + > + > +a--e > + > + > + > + > +b--d > + > + > + > + > +c--d > + > + > + > + _______________________________________________ pdm-devel mailing list pdm-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel