* [pve-devel] [PATCH proxmox-widget-toolkit v2 1/1] add Proxmox logo as SVG
2025-08-04 9:02 [pve-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} v2 0/4] replace Proxmox logo with SVG version Lukas Wagner
@ 2025-08-04 9:02 ` Lukas Wagner
2025-08-04 9:02 ` [pve-devel] [PATCH proxmox-backup v2 1/1] ui: replace Proxmox logo with SVG version Lukas Wagner
` (3 subsequent siblings)
4 siblings, 0 replies; 7+ messages in thread
From: Lukas Wagner @ 2025-08-04 9:02 UTC (permalink / raw)
To: pbs-devel, 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 <l.wagner@proxmox.com>
---
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 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 384 64" xmlns="http://www.w3.org/2000/svg">
+ <style type="text/css">
+ path { fill: #000; }
+ .st0 { fill:#E57000; }
+ </style>
+ <g transform="matrix(.65882 0 0 .65882 -12.696 -13.986)">
+ <g id="_x31_">
+ <path class="st0" d="m100.6 69.8 24.9 27.3c-2.7 2.8-6.6 4.6-10.7 4.6s-8.4-1.9-11.1-4.9l-13.7-15.1-10.7-11.8 10.7-11.7 13.7-15.1c2.7-3 6.6-4.9 11.1-4.9s8 1.7 10.7 4.5l-24.9 27.3z"/>
+ <path class="st0" d="m52.1 69.8-24.9 27.3c2.7 2.8 6.6 4.6 10.7 4.6s8.4-1.9 11.1-4.9l13.7-15.1 10.7-11.8-10.7-11.7-13.7-15.1c-2.7-3-6.6-4.9-11.1-4.9s-8 1.7-10.7 4.5l24.9 27.3z"/>
+ <path d="m86.2 83.3-9.8-10.8-9.8 10.8-22.7 24.9c2.5 2.5 6 4.1 9.8 4.1s7.5-1.7 10.1-4.5l12.6-13.8 12.5 13.8c2.5 2.7 6.1 4.5 10.1 4.5s7.3-1.6 9.8-4.1l-22.7-24.9z"/>
+ <path d="m86.2 56.3-9.8 10.8-9.8-10.8-22.7-24.9c2.5-2.5 6-4.1 9.8-4.1s7.5 1.7 10.1 4.5l12.6 13.8 12.5-13.8c2.5-2.7 6.1-4.5 10.1-4.5s7.3 1.6 9.8 4.1l-22.7 24.9z"/>
+ <path d="m176.5 71.5c3.4 0 3.4-3.4 3.4-3.4v-8.5c0-3.4-3.4-3.4-3.4-3.4h-23.9v15.3zm17.1-15.3v13.6c0 7.6-6.2 13.6-13.7 13.6h-27.3c0 7.6-6.1 13.6-13.6 13.6v-49.4c0-2.8 2.3-5.1 5.1-5.1h35.8c7.6 0 13.7 6.2 13.7 13.7"/>
+ <path d="m238.9 68.1c3.4 0 3.4-3.4 3.4-3.4v-5.1c0-3.4-3.4-3.4-3.4-3.4h-23.8v11.8zm6.1 11.8 11 15.7c-1.9 1-4.1 1.6-6.3 1.6-4.7 0-8.7-2.3-11.2-5.8l-7.9-11.2h-15.5v3.4c0 7.6-6.2 13.6-13.7 13.6v-49.4c0-2.8 2.3-5.1 5.1-5.1h35.8c7.6 0 13.7 6.2 13.7 13.7v10.2c0 6.6-4.8 12.2-11 13.3"/>
+ <path d="m304.6 59.6c0-3.4-3.4-3.4-3.4-3.4h-20.4c-3.4 0-3.4 3.4-3.4 3.4v20.4c0 3.4 3.4 3.4 3.4 3.4h20.4c3.4 0 3.4-3.4 3.4-3.4zm13.7-3.4v27.2c0 7.6-6.1 13.6-13.7 13.6h-27.2c-7.6 0-13.7-6.1-13.7-13.6v-27.2c0-7.6 6.1-13.7 13.7-13.7h27.2c7.6 0 13.7 6.2 13.7 13.7"/>
+ <path class="st0" d="m365.8 69.8 21.3 23.4c-2.3 2.4-5.6 3.9-9.2 3.9s-7.2-1.6-9.5-4.2l-11.8-12.9-11.8 12.9c-2.3 2.6-5.8 4.2-9.5 4.2s-6.9-1.5-9.2-3.9l21.3-23.4-21.3-23.4c2.3-2.3 5.6-3.8 9.2-3.8s7 1.6 9.4 4.2l11.9 12.9 11.8-12.9c2.3-2.6 5.7-4.2 9.5-4.2s6.9 1.5 9.2 3.8z"/>
+ <path d="m463.1 47.7v49.4c-7.5 0-13.7-6.1-13.7-13.6v-26.1c0-0.7-0.5-1.2-1.1-1.2s-0.9 0.3-1.1 0.6l-15.1 33.4c-0.6 1.2-1.8 1.9-3.1 1.9s-2.6-0.9-3.1-2l-15.1-33.4c-0.2-0.3-0.6-0.6-1-0.6-0.7 0-1.2 0.5-1.2 1.2v26.1c0 7.6-6.2 13.6-13.7 13.6v-49.4c0-2.8 2.3-5.1 5.1-5.1h8.5c5.5 0 10.4 3.4 12.5 8.2v-0.2l8 17.6 8-17.6v0.2c2.1-4.8 6.9-8.2 12.4-8.2h8.6c2.8 0 5.1 2.3 5.1 5.2"/>
+ <path d="m511.7 59.6c0-3.4-3.4-3.4-3.4-3.4h-20.4c-3.4 0-3.4 3.4-3.4 3.4v20.4c0 3.4 3.4 3.4 3.4 3.4h20.4c3.4 0 3.4-3.4 3.4-3.4zm13.7-3.4v27.2c0 7.6-6.1 13.6-13.7 13.6h-27.2c-7.6 0-13.7-6.1-13.7-13.6v-27.2c0-7.6 6.1-13.7 13.7-13.7h27.2c7.6 0 13.7 6.2 13.7 13.7"/>
+ <path class="st0" d="m572.9 69.8 21.3 23.4c-2.3 2.4-5.6 3.9-9.2 3.9s-7.2-1.6-9.5-4.2l-11.8-12.9-11.8 12.9c-2.3 2.6-5.8 4.2-9.5 4.2s-6.9-1.5-9.2-3.9l21.3-23.4-21.3-23.4c2.3-2.3 5.6-3.8 9.2-3.8s7 1.6 9.4 4.2l11.9 12.9 11.8-12.9c2.3-2.6 5.7-4.2 9.5-4.2s6.9 1.5 9.2 3.8z"/>
+ </g>
+ </g>
+</svg>
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
^ permalink raw reply [flat|nested] 7+ messages in thread* [pve-devel] [PATCH proxmox-backup v2 1/1] ui: replace Proxmox logo with SVG version
2025-08-04 9:02 [pve-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} v2 0/4] replace Proxmox logo with SVG version Lukas Wagner
2025-08-04 9:02 ` [pve-devel] [PATCH proxmox-widget-toolkit v2 1/1] add Proxmox logo as SVG Lukas Wagner
@ 2025-08-04 9:02 ` Lukas Wagner
2025-08-04 9:02 ` [pve-devel] [PATCH manager v2 1/2] " Lukas Wagner
` (2 subsequent siblings)
4 siblings, 0 replies; 7+ messages in thread
From: Lukas Wagner @ 2025-08-04 9:02 UTC (permalink / raw)
To: pbs-devel, pve-devel
The old PNG was quite small and looked blurry when using >100% scaling.
Signed-off-by: Lukas Wagner <l.wagner@proxmox.com>
---
www/LoginView.js | 4 ++--
www/MainView.js | 4 ++--
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/www/LoginView.js b/www/LoginView.js
index 9c1ac38a3..ef422200d 100644
--- a/www/LoginView.js
+++ b/www/LoginView.js
@@ -241,8 +241,8 @@ Ext.define('PBS.LoginView', {
height: 38,
items: [
{
- xtype: 'proxmoxlogo',
- prefix: '',
+ xtype: 'proxmoxLogoSvg',
+ prefix: 'widgettoolkit',
},
{
xtype: 'versioninfo',
diff --git a/www/MainView.js b/www/MainView.js
index a617b6191..18e93b31f 100644
--- a/www/MainView.js
+++ b/www/MainView.js
@@ -222,8 +222,8 @@ Ext.define('PBS.MainView', {
height: 38,
items: [
{
- xtype: 'proxmoxlogo',
- prefix: '',
+ xtype: 'proxmoxLogoSvg',
+ prefix: 'widgettoolkit',
},
{
padding: '0 0 0 5',
--
2.47.2
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 7+ messages in thread* [pve-devel] [PATCH manager v2 1/2] ui: replace Proxmox logo with SVG version
2025-08-04 9:02 [pve-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} v2 0/4] replace Proxmox logo with SVG version Lukas Wagner
2025-08-04 9:02 ` [pve-devel] [PATCH proxmox-widget-toolkit v2 1/1] add Proxmox logo as SVG Lukas Wagner
2025-08-04 9:02 ` [pve-devel] [PATCH proxmox-backup v2 1/1] ui: replace Proxmox logo with SVG version Lukas Wagner
@ 2025-08-04 9:02 ` Lukas Wagner
2025-08-04 9:02 ` [pve-devel] [PATCH manager v2 2/2] ui: add 5px of padding between Proxmox logo and product name Lukas Wagner
2025-08-04 9:27 ` [pve-devel] [pbs-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} v2 0/4] replace Proxmox logo with SVG version Christian Ebner
4 siblings, 0 replies; 7+ messages in thread
From: Lukas Wagner @ 2025-08-04 9:02 UTC (permalink / raw)
To: pbs-devel, pve-devel
The old PNG was quite small and looked blurry when using >100% scaling.
Signed-off-by: Lukas Wagner <l.wagner@proxmox.com>
---
www/manager6/Workspace.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index c4bbfccc..03628b5a 100644
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -343,7 +343,8 @@ Ext.define('PVE.StdWorkspace', {
margin: '2 0 2 5',
items: [
{
- xtype: 'proxmoxlogo',
+ xtype: 'proxmoxLogoSvg',
+ prefix: 'pwt',
},
{
minWidth: 150,
--
2.47.2
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 7+ messages in thread* [pve-devel] [PATCH manager v2 2/2] ui: add 5px of padding between Proxmox logo and product name
2025-08-04 9:02 [pve-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} v2 0/4] replace Proxmox logo with SVG version Lukas Wagner
` (2 preceding siblings ...)
2025-08-04 9:02 ` [pve-devel] [PATCH manager v2 1/2] " Lukas Wagner
@ 2025-08-04 9:02 ` Lukas Wagner
2025-08-04 9:27 ` [pve-devel] [pbs-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} v2 0/4] replace Proxmox logo with SVG version Christian Ebner
4 siblings, 0 replies; 7+ messages in thread
From: Lukas Wagner @ 2025-08-04 9:02 UTC (permalink / raw)
To: pbs-devel, pve-devel
PBS uses 5px padding here as well.
Signed-off-by: Lukas Wagner <l.wagner@proxmox.com>
---
Notes:
Looks a tiny bit nicer with the added padding, but no hard feelings
here.
www/manager6/Workspace.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index 03628b5a..3d2334e2 100644
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -350,6 +350,7 @@ Ext.define('PVE.StdWorkspace', {
minWidth: 150,
id: 'versioninfo',
html: 'Virtual Environment',
+ padding: '0 0 0 5',
style: {
'font-size': '14px',
'line-height': '18px',
--
2.47.2
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 7+ messages in thread* Re: [pve-devel] [pbs-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} v2 0/4] replace Proxmox logo with SVG version
2025-08-04 9:02 [pve-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} v2 0/4] replace Proxmox logo with SVG version Lukas Wagner
` (3 preceding siblings ...)
2025-08-04 9:02 ` [pve-devel] [PATCH manager v2 2/2] ui: add 5px of padding between Proxmox logo and product name Lukas Wagner
@ 2025-08-04 9:27 ` Christian Ebner
2025-08-04 9:31 ` Lukas Wagner
4 siblings, 1 reply; 7+ messages in thread
From: Christian Ebner @ 2025-08-04 9:27 UTC (permalink / raw)
To: Proxmox Backup Server development discussion, Lukas Wagner, pve-devel
Looks crisp and works as intended now. The logos colors are switched
correctly also if the preferred color scheme is set to dark in the browser.
And the extra padding to the right of the logo in PVE looks good to me.
One thing came to mind: this should maybe also be included for the PMG
ui were the old component is still in use? But that can be a followup.
In the long run we should also replace some of the icons which do not
render well, e.g. the edit dashboard settings gear icon in PBS.
Other than that, consider:
Tested-by: Christian Ebner <c.ebner@proxmox.com>
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 7+ messages in thread* Re: [pve-devel] [pbs-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} v2 0/4] replace Proxmox logo with SVG version
2025-08-04 9:27 ` [pve-devel] [pbs-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} v2 0/4] replace Proxmox logo with SVG version Christian Ebner
@ 2025-08-04 9:31 ` Lukas Wagner
0 siblings, 0 replies; 7+ messages in thread
From: Lukas Wagner @ 2025-08-04 9:31 UTC (permalink / raw)
To: Proxmox VE development discussion,
Proxmox Backup Server development discussion, Christian Ebner
On Mon Aug 4, 2025 at 11:27 AM CEST, Christian Ebner wrote:
> One thing came to mind: this should maybe also be included for the PMG
> ui were the old component is still in use? But that can be a followup.
Yes, absolutely, but I will do that in a separate patch. I did this for
PVE and PBS first to get it included in the major release, if possible.
>
> In the long run we should also replace some of the icons which do not
> render well, e.g. the edit dashboard settings gear icon in PBS.
>
> Other than that, consider:
>
> Tested-by: Christian Ebner <c.ebner@proxmox.com>
>
Thanks a lot!
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 7+ messages in thread
