[pve-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} 0/4] replace Proxmox logo with SVG version

[pve-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} 0/4] replace Proxmox logo with SVG version

[Lukas Wagner]

proxmox-widget-toolkit:

Lukas Wagner (1):
  add Proxmox logo as SVG

 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


proxmox-backup:

Lukas Wagner (1):
  ui: replace Proxmox logo with SVG version

 www/LoginView.js | 4 ++--
 www/MainView.js  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)


pve-manager:

Lukas Wagner (2):
  ui: replace Proxmox logo with SVG version
  ui: add 5px of padding between Proxmox logo and product name

 www/manager6/Workspace.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)


Summary over all repositories:
  6 files changed, 55 insertions(+), 5 deletions(-)

-- 
Generated by murpp 0.9.0


_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

[pve-devel] [PATCH proxmox-widget-toolkit 1/1] add Proxmox logo as SVG

[Lukas Wagner]

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



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

[pve-devel] [PATCH proxmox-backup 1/1] ui: replace Proxmox logo with SVG version

[Lukas Wagner]

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

[pve-devel] [PATCH manager 1/2] ui: replace Proxmox logo with SVG version

[Lukas Wagner]

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

[pve-devel] [PATCH manager 2/2] ui: add 5px of padding between Proxmox logo and product name

[Lukas Wagner]

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

Re: [pve-devel] [pbs-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} 0/4] replace Proxmox logo with SVG version

[Christian Ebner]

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?


_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

Re: [pve-devel] [pbs-devel] [PATCH manager/proxmox{-widget-toolkit, -backup} 0/4] replace Proxmox logo with SVG version

[Lukas Wagner]

On Mon Aug 4, 2025 at 9:46 AM CEST, Christian Ebner wrote:
> 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?

Worked fine here on my end, I'll investigate what could be going on...


_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

[pve-devel] superseded: [PATCH manager/proxmox{-widget-toolkit, -backup} 0/4] replace Proxmox logo with SVG version

[Lukas Wagner]

superseded by v2:

https://lore.proxmox.com/all/20250804090228.192088-2-l.wagner@proxmox.com/T/#t



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel