57 lines
1.9 KiB
Vue
57 lines
1.9 KiB
Vue
<template>
|
|
<h2 class="outside-card-header mb-1">
|
|
{{ $gettext('Custom Branding') }}
|
|
</h2>
|
|
|
|
<card-page
|
|
class="mb-3"
|
|
header-id="hdr_upload_custom_assets"
|
|
:title="$gettext('Upload Custom Assets')"
|
|
>
|
|
<div class="card-body">
|
|
<ul class="list-unstyled">
|
|
<custom-asset-form
|
|
id="asset_background"
|
|
class="mb-3"
|
|
:api-url="backgroundApiUrl"
|
|
:caption="$gettext('Public Page Background')"
|
|
/>
|
|
<custom-asset-form
|
|
id="asset_album_art"
|
|
class="mb-3"
|
|
:api-url="albumArtApiUrl"
|
|
:caption="$gettext('Default Album Art')"
|
|
/>
|
|
<custom-asset-form
|
|
id="asset_browser_icon"
|
|
:api-url="browserIconApiUrl"
|
|
:caption="$gettext('Browser Icon')"
|
|
/>
|
|
</ul>
|
|
</div>
|
|
</card-page>
|
|
|
|
<branding-form :api-url="settingsApiUrl" />
|
|
|
|
<lightbox ref="$lightbox" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import CustomAssetForm from "./Branding/CustomAssetForm.vue";
|
|
import BrandingForm from "./Branding/BrandingForm.vue";
|
|
import CardPage from "~/components/Common/CardPage.vue";
|
|
import Lightbox from "~/components/Common/Lightbox.vue";
|
|
import {ref} from "vue";
|
|
import {LightboxTemplateRef, useProvideLightbox} from "~/vendor/lightbox";
|
|
import {getApiUrl} from "~/router";
|
|
|
|
const settingsApiUrl = getApiUrl('/admin/settings/branding');
|
|
const browserIconApiUrl = getApiUrl('/admin/custom_assets/browser_icon');
|
|
const backgroundApiUrl = getApiUrl('/admin/custom_assets/background');
|
|
const albumArtApiUrl = getApiUrl('/admin/custom_assets/album_art');
|
|
|
|
const $lightbox = ref<LightboxTemplateRef>(null);
|
|
useProvideLightbox($lightbox);
|
|
</script>
|
|
|