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

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

[Lukas Wagner]

The existing PNG logo is rather small and becomes blurry when the page is
zoomed or when using >100% scaling on a HiDPI monitor.

Changes since v1: 
  - for the dark mode invert logo colors in CSS, not in the SVG
    itself (similar to how we did it with the PNG)

proxmox-widget-toolkit:

Lukas Wagner (1):
  add Proxmox logo as SVG

 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


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:
  7 files changed, 56 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 v2 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. 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

[pve-devel] [PATCH proxmox-backup v2 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 v2 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 v2 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} v2 0/4] replace Proxmox logo with SVG version

[Christian Ebner]

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

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

[Lukas Wagner]

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