From f802eee423847bc29448fc40baf6b460d60d5303 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 27 Apr 2024 21:05:40 +0200
Subject: [PATCH] feat: add function to change SVG theme logo color

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 package-lock.json            |  6 ++++++
 package.json                 |  1 +
 src/App.vue                  |  1 +
 src/components/TheTopbar.vue | 33 +++++++++++++++++----------------
 4 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index dd7156202..fd29d230d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,7 @@
                 "vue-class-component": "^7.2.6",
                 "vue-echarts": "^6.0.2",
                 "vue-i18n": "^8.25.0",
+                "vue-inline-svg": "^2.1.3",
                 "vue-load-image": "^0.2.0",
                 "vue-meta": "^2.4.0",
                 "vue-observe-visibility": "^1.0.0",
@@ -10121,6 +10122,11 @@
                 "node": ">=10"
             }
         },
+        "node_modules/vue-inline-svg": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/vue-inline-svg/-/vue-inline-svg-2.1.3.tgz",
+            "integrity": "sha512-rLuN4NBsCkUVhEUB5L9i3aMxZ4XuBHMZk6Ga5EXtN6S415QedKN9SrcXR7Wbntyh53JtC1QaTlcDSvIjD7cRpw=="
+        },
         "node_modules/vue-load-image": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/vue-load-image/-/vue-load-image-0.2.0.tgz",
diff --git a/package.json b/package.json
index 5ab845c6a..527b48ada 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
         "vue-class-component": "^7.2.6",
         "vue-echarts": "^6.0.2",
         "vue-i18n": "^8.25.0",
+        "vue-inline-svg": "^2.1.3",
         "vue-load-image": "^0.2.0",
         "vue-meta": "^2.4.0",
         "vue-observe-visibility": "^1.0.0",
diff --git a/src/App.vue b/src/App.vue
index 0b22020c4..1200ebd1d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -160,6 +160,7 @@ export default class App extends Mixins(BaseMixin, ThemeMixin) {
     get cssVars(): { [key: string]: string } {
         return {
             '--v-btn-text-primary': this.primaryTextColor,
+            '--color-logo': this.logoColor,
             '--color-primary': this.primaryColor,
             '--color-warning': this.warningColor,
             '--panel-toolbar-icon-btn-width': panelToolbarHeight + 'px',
diff --git a/src/components/TheTopbar.vue b/src/components/TheTopbar.vue
index f24630b20..8fa913759 100644
--- a/src/components/TheTopbar.vue
+++ b/src/components/TheTopbar.vue
@@ -3,22 +3,9 @@
         <v-app-bar app elevate-on-scroll :height="topbarHeight" class="topbar pa-0" clipped-left>
             <v-app-bar-nav-icon tile @click.stop="naviDrawer = !naviDrawer" />
             <router-link to="/">
-                <template v-if="sidebarLogo">
-                    <img
-                        :src="sidebarLogo"
-                        style="height: 32px"
-                        class="nav-logo ml-4 mr-1 d-none d-sm-flex"
-                        alt="Logo" />
-                </template>
-                <template v-else>
-                    <mainsail-logo
-                        :color="logoColor"
-                        style="height: 32px"
-                        class="nav-logo ml-4 mr-1 d-none d-sm-flex"
-                        router
-                        to="/"
-                        :ripple="false" />
-                </template>
+                <inline-svg v-if="sidebarLogo && isSvgLogo" :src="'http:' + sidebarLogo" :class="logoClasses" />
+                <img v-else-if="sidebarLogo" :src="sidebarLogo" :class="logoClasses" alt="Logo" />
+                <mainsail-logo v-else :color="logoColor" :class="logoClasses" router to="/" :ripple="false" />
             </router-link>
             <v-toolbar-title class="text-no-wrap ml-0 pl-2 mr-2">{{ printerName }}</v-toolbar-title>
             <printer-selector v-if="countPrinters" />
@@ -102,6 +89,7 @@ import TheNotificationMenu from '@/components/notifications/TheNotificationMenu.
 import { topbarHeight } from '@/store/variables'
 import { mdiAlertOctagonOutline, mdiContentSave, mdiFileUpload, mdiClose, mdiCloseThick } from '@mdi/js'
 import EmergencyStopDialog from '@/components/dialogs/EmergencyStopDialog.vue'
+import InlineSvg from 'vue-inline-svg'
 
 type uploadSnackbar = {
     status: boolean
@@ -115,6 +103,7 @@ type uploadSnackbar = {
 @Component({
     components: {
         EmergencyStopDialog,
+        InlineSvg,
         Panel,
         TheSettingsMenu,
         TheTopCornerMenu,
@@ -207,10 +196,18 @@ export default class TheTopbar extends Mixins(BaseMixin) {
         return this.$store.getters['files/getSidebarLogo']
     }
 
+    get isSvgLogo() {
+        return this.sidebarLogo.includes('.svg?timestamp=')
+    }
+
     get logoColor(): string {
         return this.$store.state.gui.uiSettings.logo
     }
 
+    get logoClasses() {
+        return ['nav-logo', 'ml-2', 'mr-1', 'd-none', 'd-sm-flex']
+    }
+
     get boolShowUploadAndPrint() {
         return (
             this.klippyIsConnected &&
@@ -343,6 +340,10 @@ export default class TheTopbar extends Mixins(BaseMixin) {
     height: 100% !important;
     max-height: none;
 }
+::v-deep .topbar .nav-logo {
+    width: auto;
+    height: 32px;
+}
 /*noinspection CssUnusedSymbol*/
 .topbar .v-btn.v-btn--icon {
     /*noinspection CssUnresolvedCustomProperty*/