Merge pull request #588 from MerginMaps/add-logo-customization

Add logic for setting custom web logos

Author: MarcelGeo

server/mergin/config.py

@@ -79,6 +79,8 @@ class Configuration(object):
     MERGIN_BASE_URL = config("MERGIN_BASE_URL", default="")
     # for link to logo in emails
     MERGIN_LOGO_URL = config("MERGIN_LOGO_URL", default="")
+    # for link to logos in EE branding
+    DASHBOARD_LOGO_URL = config("DASHBOARD_LOGO_URL", default=MERGIN_LOGO_URL)
 
     MERGIN_SUBSCRIPTIONS = config("MERGIN_SUBSCRIPTIONS", default=False, cast=bool)
     MERGIN_TESTING = config("MERGIN_TESTING", default=False, cast=bool)

web-app/packages/lib/src/common/components/AppOnboardingPage.vue

@@ -7,8 +7,16 @@
         { 'onborading-page-logo': $slots.aside }
       ]"
     >
-      <slot name="logo">
-        <img src="@/assets/mm-logo.svg" />
+      <template v-if="brandingLogoUrl && !customLogoLoadFailed">
+        <img
+          class="logo-image"
+          :src="brandingLogoUrl"
+          @error="onCustomLogoError"
+          alt="Not Found"
+        />
+      </template>
+      <slot v-else name="logo">
+        <img class="logo-image" :src="defaultLogoUrl" alt="Not Found" />
       </slot>
     </aside>
 
@@ -45,12 +53,35 @@
 </template>
 
 <script setup lang="ts">
+import { ref, computed } from 'vue'
+
+import defaultLogoUrl from '@/assets/mm-logo.svg'
+import { useInstanceStore } from '@/modules/instance/store'
+
+const customLogoLoadFailed = ref(false)
+function onCustomLogoError(): void {
+  customLogoLoadFailed.value = true
+}
+const instanceStore = useInstanceStore()
+const brandingLogoUrl = computed(
+  () => instanceStore.configData?.['dashboard_logo_url'] as string
+)
+
 withDefaults(defineProps<{ contentMaxWidth?: string }>(), {
   contentMaxWidth: '480px'
 })
 </script>
 
 <style scoped lang="scss">
+.logo-image {
+  display: block;
+  width: auto;
+  height: 24px;
+  max-width: 129px;
+  max-height: 24px;
+  object-fit: contain;
+}
+
 @media screen and (min-width: $md) {
   .onborading-page-logo {
     // reset background on tablet > screens

web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue

@@ -35,8 +35,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             />
           </div>
 
-          <div class="flex justify-content-center">
-            <img src="@/assets/mm-logo.svg" />
+          <div class="logo flex justify-content-center">
+            <img
+              class="logo-image"
+              :src="logoUrl"
+              @error="onCustomLogoError"
+              alt="Not Found"
+            />
           </div>
 
           <div
@@ -79,16 +84,32 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { SideBarItemModel } from '../types'
 
+import defaultLogoUrl from '@/assets/mm-logo.svg'
 import { DashboardRouteName, useUserStore } from '@/main'
+import { useInstanceStore } from '@/modules/instance/store'
 import SideBarItem from '@/modules/layout/components/SideBarItem.vue'
 import { useLayoutStore } from '@/modules/layout/store'
 import { ProjectRouteName } from '@/modules/project'
 
+const customLogoLoadFailed = ref(false)
+function onCustomLogoError(): void {
+  customLogoLoadFailed.value = true
+}
+const instanceStore = useInstanceStore()
+const brandingLogoUrl = computed(
+  () => instanceStore.configData?.['dashboard_logo_url'] as string
+)
+const logoUrl = computed(() =>
+  brandingLogoUrl.value && !customLogoLoadFailed.value
+    ? brandingLogoUrl.value
+    : defaultLogoUrl
+)
+
 const route = useRoute()
 const layoutStore = useLayoutStore()
 const userStore = useUserStore()
@@ -142,6 +163,18 @@ const onCloseClick = () => {
     );
   }
 }
+.logo {
+  max-width: 100%;
+
+  &-image {
+    display: block;
+    width: auto;
+    height: 24px;
+    max-width: 129px;
+    max-height: 24px;
+    object-fit: contain;
+  }
+}
 
 @media screen and (max-width: $xl) {
   .sidebar {