* [pbs-devel] [PATCH proxmox-widget-toolkit 1/1] add Proxmox logo as SVG
2025-08-01 14:36 [pbs-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} 0/4] replace Proxmox logo with SVG version Lukas Wagner
@ 2025-08-01 14:36 ` Lukas Wagner
2025-08-01 14:36 ` [pbs-devel] [PATCH proxmox-backup 1/1] ui: replace Proxmox logo with SVG version Lukas Wagner
` (3 subsequent siblings)
4 siblings, 0 replies; 6+ messages in thread
From: Lukas Wagner @ 2025-08-01 14:36 UTC (permalink / raw)
To: pve-devel, pbs-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.
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.
src/Logo.js | 22 ++++++++++++++++++++++
src/images/Makefile | 1 +
src/images/proxmox_logo.svg | 25 +++++++++++++++++++++++++
3 files changed, 48 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..593a399
--- /dev/null
+++ b/src/images/proxmox_logo.svg
@@ -0,0 +1,25 @@
+<?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; }
+ @media (prefers-color-scheme: dark) {
+ path { fill: #fff; }
+ }
+ .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>
--
2.47.2
_______________________________________________
pbs-devel mailing list
pbs-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel
^ permalink raw reply [flat|nested] 6+ messages in thread* [pbs-devel] [PATCH proxmox-backup 1/1] ui: replace Proxmox logo with SVG version
2025-08-01 14:36 [pbs-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} 0/4] replace Proxmox logo with SVG version Lukas Wagner
2025-08-01 14:36 ` [pbs-devel] [PATCH proxmox-widget-toolkit 1/1] add Proxmox logo as SVG Lukas Wagner
@ 2025-08-01 14:36 ` Lukas Wagner
2025-08-01 14:36 ` [pbs-devel] [PATCH manager 1/2] " Lukas Wagner
` (2 subsequent siblings)
4 siblings, 0 replies; 6+ messages in thread
From: Lukas Wagner @ 2025-08-01 14:36 UTC (permalink / raw)
To: pve-devel, pbs-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
_______________________________________________
pbs-devel mailing list
pbs-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel
^ permalink raw reply [flat|nested] 6+ messages in thread* [pbs-devel] [PATCH manager 1/2] ui: replace Proxmox logo with SVG version
2025-08-01 14:36 [pbs-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} 0/4] replace Proxmox logo with SVG version Lukas Wagner
2025-08-01 14:36 ` [pbs-devel] [PATCH proxmox-widget-toolkit 1/1] add Proxmox logo as SVG Lukas Wagner
2025-08-01 14:36 ` [pbs-devel] [PATCH proxmox-backup 1/1] ui: replace Proxmox logo with SVG version Lukas Wagner
@ 2025-08-01 14:36 ` Lukas Wagner
2025-08-01 14:36 ` [pbs-devel] [PATCH manager 2/2] ui: add 5px of padding between Proxmox logo and product name Lukas Wagner
2025-08-04 7:46 ` [pbs-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} 0/4] replace Proxmox logo with SVG version Christian Ebner
4 siblings, 0 replies; 6+ messages in thread
From: Lukas Wagner @ 2025-08-01 14:36 UTC (permalink / raw)
To: pve-devel, pbs-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
_______________________________________________
pbs-devel mailing list
pbs-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel
^ permalink raw reply [flat|nested] 6+ messages in thread* [pbs-devel] [PATCH manager 2/2] ui: add 5px of padding between Proxmox logo and product name
2025-08-01 14:36 [pbs-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} 0/4] replace Proxmox logo with SVG version Lukas Wagner
` (2 preceding siblings ...)
2025-08-01 14:36 ` [pbs-devel] [PATCH manager 1/2] " Lukas Wagner
@ 2025-08-01 14:36 ` Lukas Wagner
2025-08-04 7:46 ` [pbs-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} 0/4] replace Proxmox logo with SVG version Christian Ebner
4 siblings, 0 replies; 6+ messages in thread
From: Lukas Wagner @ 2025-08-01 14:36 UTC (permalink / raw)
To: pve-devel, pbs-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
_______________________________________________
pbs-devel mailing list
pbs-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel
^ permalink raw reply [flat|nested] 6+ messages in thread* Re: [pbs-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} 0/4] replace Proxmox logo with SVG version
2025-08-01 14:36 [pbs-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} 0/4] replace Proxmox logo with SVG version Lukas Wagner
` (3 preceding siblings ...)
2025-08-01 14:36 ` [pbs-devel] [PATCH manager 2/2] ui: add 5px of padding between Proxmox logo and product name Lukas Wagner
@ 2025-08-04 7:46 ` Christian Ebner
4 siblings, 0 replies; 6+ messages in thread
From: Christian Ebner @ 2025-08-04 7:46 UTC (permalink / raw)
To: Proxmox Backup Server development discussion, Lukas Wagner, pve-devel
Thanks for this patch, now the Logo is sharp as ever for PVE and PBS!
Especially noticeable when zooming in Firefox or Chromium!
However, this does not work for the light theme?
_______________________________________________
pbs-devel mailing list
pbs-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel
^ permalink raw reply [flat|nested] 6+ messages in thread
