custom logo: propagate changes from the backend ? though dunno what to do for SVG

This commit is contained in:
Alexandre Aubin 2024-02-03 21:18:42 +01:00
parent e3bb1f5113
commit 3fd3e24891

View file

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
type CustomLogo = Partial<Record<'is' | 'content', string>> const settings = await useSettings()
type CustomLogo = Partial<Record<'is' | 'src', string>>
let customLogo: Ref<CustomLogo> | ComputedRef<CustomLogo> let customLogo: Ref<CustomLogo> | ComputedRef<CustomLogo>
try { try {
@ -10,17 +11,16 @@ try {
if (!logo) return {} if (!logo) return {}
const [mimetype, base64Content] = logo.split(':') if (logo.substr(-4) === '.svg') {
if (mimetype === 'image/svg+xml') {
// Will render as inline SVG so that CSS "currentColor" can cascade to it // Will render as inline SVG so that CSS "currentColor" can cascade to it
return { return {
is: 'svg', is: 'svg',
content: atob(base64Content), src: `//${settings.value.domain}/yunohost/sso/customassets/${logo}`,
} }
} else { } else {
return { return {
is: 'img', is: 'img',
content: `data:${mimetype};base64, ${base64Content}`, src: `//${settings.value.domain}/yunohost/sso/customassets/${logo}`,
} }
} }
}) })
@ -35,11 +35,11 @@ try {
v-if="customLogo.is === 'svg'" v-if="customLogo.is === 'svg'"
aria-hidden="true" aria-hidden="true"
class="svg-div" class="svg-div"
v-html="customLogo.content" v-html="customLogo.src"
/> />
<img <img
v-else-if="customLogo.is === 'img'" v-else-if="customLogo.is === 'img'"
:src="customLogo.content" :src="customLogo.src"
alt="" alt=""
aria-hidden="true" aria-hidden="true"
/> />