Admin: Enable logo changes with custom styles - refs #5578

assets/vue/components/layout/PlatformLogo.vue

@@ -1,40 +1,69 @@
 <script setup>
-import { ref } from "vue"
+import { computed, ref, watch } from "vue"
+import BaseAppLink from "../basecomponents/BaseAppLink.vue"
 import { usePlatformConfig } from "../../store/platformConfig"
 import { useSecurityStore } from "../../store/securityStore"
-import { useVisualTheme } from "../../composables/theme"
 
 const platformConfigStore = usePlatformConfig()
 const securityStore = useSecurityStore()
 
-const { getThemeAssetUrl } = useVisualTheme()
-
 const siteName = platformConfigStore.getSetting("platform.site_name")
 
-const sources = [getThemeAssetUrl("images/header-logo.svg"), getThemeAssetUrl("images/header-logo.png")]
+const theme = computed(() => platformConfigStore.visualTheme || "chamilo")
+const DEFAULT_THEME = "chamilo"
+const bust = ref(Date.now())
+
+function themeUrl(name, path, { strict = false } = {}) {
+  const base = `/themes/${encodeURIComponent(name)}/${path}`
+  const qs = []
+  if (strict) qs.push("strict=1")
+  qs.push(`t=${bust.value}`)
+  return `${base}?${qs.join("&")}`
+}
 
-const currentSrc = ref(sources[0])
+const sources = computed(() => [
+  themeUrl(theme.value, "images/header-logo.svg", { strict: true }),
+  themeUrl(theme.value, "images/header-logo.png", { strict: true }),
+  themeUrl(theme.value, "images/header-logo.svg"),
+  themeUrl(theme.value, "images/header-logo.png"),
+  themeUrl(DEFAULT_THEME, "images/header-logo.svg"),
+  themeUrl(DEFAULT_THEME, "images/header-logo.png"),
+])
 
-const onError = () => {
-  const currentIndex = sources.indexOf(currentSrc.value)
+const idx = ref(0)
+const currentSrc = computed(() => sources.value[idx.value] || "")
 
-  if (currentIndex < sources.length - 1) {
-    currentSrc.value = sources[currentIndex + 1]
+watch(
+  () => platformConfigStore.visualTheme,
+  () => {
+    idx.value = 0
+    bust.value = Date.now()
+  }
+)
+
+const onError = () => {
+  if (idx.value < sources.value.length - 1) {
+    idx.value++
   } else {
-    console.error("All image sources failed to load.")
+    idx.value = sources.value.length
   }
 }
 </script>
-
 <template>
   <div class="platform-logo">
     <BaseAppLink :to="securityStore.user ? { name: 'Home' } : { name: 'Index' }">
       <img
+        v-if="currentSrc"
         :alt="siteName"
         :src="currentSrc"
         :title="siteName"
+        decoding="async"
+        fetchpriority="high"
         @error="onError"
       />
+      <span v-else class="font-semibold text-primary" aria-label="logo">
+        {{ siteName }}
+      </span>
     </BaseAppLink>
   </div>
 </template>

assets/vue/router/admin.js

@@ -16,6 +16,12 @@ export default {
       meta: { requiresAdmin: true, requiresSessionAdmin: true, showBreadcrumb: true },
       component: () => import("../views/admin/AdminConfigureColors.vue"),
     },
+    {
+      path: "configuration/branding",
+      name: "AdminBranding",
+      meta: { requiresAdmin: true, requiresSessionAdmin: true, showBreadcrumb: true },
+      component: () => import("../views/admin/AdminBranding.vue"),
+    },
     {
       path: "gdpr/third-parties",
       name: "ThirdPartyManager",

assets/vue/services/themeLogoService.js

@@ -0,0 +1,33 @@
+async function upload(slug, { headerSvg, headerPng, emailSvg, emailPng }) {
+  const fd = new FormData()
+  if (headerSvg) fd.append("header_svg", headerSvg)
+  if (headerPng) fd.append("header_png", headerPng)
+  if (emailSvg) fd.append("email_svg", emailSvg)
+  if (emailPng) fd.append("email_png", emailPng)
+
+  const res = await fetch(`/themes/${encodeURIComponent(slug)}/logos`, {
+    method: "POST",
+    body: fd,
+    credentials: "same-origin",
+  })
+
+  if (!res.ok) {
+    const text = await res.text().catch(() => "")
+    throw new Error(text || `Upload failed (${res.status})`)
+  }
+  return res.json()
+}
+
+async function remove(slug, type) {
+  const res = await fetch(`/themes/${encodeURIComponent(slug)}/logos/${type}`, {
+    method: "DELETE",
+    credentials: "same-origin",
+  })
+  if (!res.ok) {
+    const text = await res.text().catch(() => "")
+    throw new Error(text || `Delete failed (${res.status})`)
+  }
+  return res.json()
+}
+
+export default { upload, remove }