From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) by lore.proxmox.com (Postfix) with ESMTPS id 649051FF185 for ; Mon, 4 Aug 2025 11:01:15 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id C3CCA1BB46; Mon, 4 Aug 2025 11:02:43 +0200 (CEST) From: Lukas Wagner To: pbs-devel@lists.proxmox.com, pve-devel@lists.proxmox.com Date: Mon, 4 Aug 2025 11:02:25 +0200 Message-ID: <20250804090228.192088-2-l.wagner@proxmox.com> X-Mailer: git-send-email 2.47.2 In-Reply-To: <20250804090228.192088-1-l.wagner@proxmox.com> References: <20250804090228.192088-1-l.wagner@proxmox.com> MIME-Version: 1.0 X-Bm-Milter-Handled: 55990f41-d878-4baa-be0a-ee34c49e34d2 X-Bm-Transport-Timestamp: 1754298141543 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.021 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 SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pve-devel] [PATCH proxmox-widget-toolkit v2 1/1] add Proxmox logo as SVG 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: , Reply-To: Proxmox VE development discussion Content-Type: text/plain; charset="us-ascii" Content-Transfer-Encoding: 7bit Errors-To: pve-devel-bounces@lists.proxmox.com Sender: "pve-devel" The SVG is based on the one from PDM, but with the `width` and `height` properties removed - apparently that is needed so that the SVG properly resizes with the parent container. Also the media query which changes the fill color for the dark theme support was removed - since that happens on the CSS level now, same as for old PNG logo. Signed-off-by: Lukas Wagner --- Notes: Created a new component because I did not want to mess with the old one. Technically I could have reused the old one and just overridde the 'src' config where it is used, but as a new component it is a bit more self-contained. Changes since v1 (thx @Chris): - adapt stylesheet to invert the logo when in dark mode, same as with the PNG logo - remove dark theme support from the SVG itself src/Logo.js | 22 +++++++++++++++++++++ src/images/Makefile | 1 + src/images/proxmox_logo.svg | 22 +++++++++++++++++++++ src/proxmox-dark/scss/proxmox/_general.scss | 4 ++++ 4 files changed, 49 insertions(+) create mode 100644 src/images/proxmox_logo.svg diff --git a/src/Logo.js b/src/Logo.js index e8c8fe5..b88f724 100644 --- a/src/Logo.js +++ b/src/Logo.js @@ -19,3 +19,25 @@ Ext.define('PMX.image.Logo', { me.callParent(); }, }); + +Ext.define('PMX.image.LogoSVG', { + extend: 'Ext.Img', + xtype: 'proxmoxLogoSvg', + + height: 30, + width: 172, + src: '/images/proxmox_logo.svg', + alt: 'Proxmox', + autoEl: { + tag: 'a', + href: 'https://www.proxmox.com', + target: '_blank', + }, + + initComponent: function () { + let me = this; + let prefix = me.prefix !== undefined ? me.prefix : '/pve2'; + me.src = prefix + me.src; + me.callParent(); + }, +}); diff --git a/src/images/Makefile b/src/images/Makefile index 61395b4..9fec695 100644 --- a/src/images/Makefile +++ b/src/images/Makefile @@ -5,6 +5,7 @@ IMAGES=pmx-clear-trigger.png \ icon-cpu.svg \ icon-ram.svg \ debian-swirl-openlogo.svg \ + proxmox_logo.svg \ proxmox-symbol-x.svg \ all: diff --git a/src/images/proxmox_logo.svg b/src/images/proxmox_logo.svg new file mode 100644 index 0000000..192aa04 --- /dev/null +++ b/src/images/proxmox_logo.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/proxmox-dark/scss/proxmox/_general.scss b/src/proxmox-dark/scss/proxmox/_general.scss index 1342f02..3e22ebc 100644 --- a/src/proxmox-dark/scss/proxmox/_general.scss +++ b/src/proxmox-dark/scss/proxmox/_general.scss @@ -3,6 +3,10 @@ img[id^="proxmoxlogo-"][id$="-img"] { filter: invert(1) hue-rotate(180deg); } +img[id^="proxmoxLogoSvg-"][id$="-img"] { + filter: invert(1) hue-rotate(180deg); +} + // removes the gray line in the header of the mail gateway div[id^="versioninfo-"] + div[id^="panel-"] > div[id^="panel-"][id$="-bodyWrap"] > div, div.eol-notice + div[id^="panel-"] > div[id^="panel-"][id$="-bodyWrap"] > div { -- 2.47.2 _______________________________________________ pve-devel mailing list pve-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel