jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Some polish to the branding page

Browse Source
This commit is contained in:
Johannes Zellner
2025-05-21 11:05:15 +02:00
parent 9666deca6d
commit be3696ff8c
1 changed files with 14 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/views/BrandingView.vue
+14 -17
View File
@@ -18,7 +18,6 @@ const avatarUrl = ref(`${API_ORIGIN}/api/v1/cloudron/avatar?${String(Math.random
const backgroundUrl = ref(`${API_ORIGIN}/api/v1/cloudron/background?${String(Math.random()).slice(2)}`);
const features = inject('features');
const subscriptionRequiredDialog = inject('subscriptionRequiredDialog');
// Cloudron name
const editingName = ref(false);
@@ -97,6 +96,18 @@ onMounted(async () => {
<template>
<div class="content">
<Section :title="$t('branding.title')" :title-badge="!features.branding ? 'Pro' : ''">
<div style="display: flex; justify-content: space-around; margin-bottom: 20px;">
<div style="display: flex; flex-direction: column; align-content: stretch; align-items: center;">
<label>{{ $t('branding.logo') }}</label>
<ImagePicker :src="avatarUrl" :save-handler="onAvatarSubmit" :size="512" display-height="128px" :disabled="!features.branding"/>
</div>
<div style="display: flex; flex-direction: column; align-content: stretch; align-items: center;">
<label>{{ $t('branding.backgroundImage') }}</label>
<ImagePicker :src="backgroundUrl" :save-handler="onBackgroundSubmit" :unset-handler="onBackgroundUnset" :disabled="!features.branding" fallback-src="/img/background-image-placeholder.svg" display-height="128px" :max-size="1280"/>
</div>
</div>
<SettingsItem>
<FormGroup>
<label>{{ $t('branding.cloudronName') }}</label>
@@ -114,28 +125,14 @@ onMounted(async () => {
</Transition>
</SettingsItem>
<SettingsItem>
<FormGroup>
<label>{{ $t('branding.logo') }}</label>
<ImagePicker :src="avatarUrl" :save-handler="onAvatarSubmit" :size="512" display-height="100px" :disabled="!features.branding"/>
</FormGroup>
</SettingsItem>
<SettingsItem>
<FormGroup>
<label>{{ $t('branding.backgroundImage') }}</label>
<ImagePicker :src="backgroundUrl" :save-handler="onBackgroundSubmit" :unset-handler="onBackgroundUnset" :disabled="!features.branding" fallback-src="/img/background-image-placeholder.svg" display-height="200px" :max-size="1280"/>
</FormGroup>
</SettingsItem>
<SettingsItem>
<FormGroup>
<label>{{ $t('branding.footer.title') }}</label>
<div>{{ $t('branding.footer.description') }} <sup><a href="https://docs.cloudron.io/branding/#footer" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></div>
</FormGroup>
<Transition name="slide-up" mode="out-in">
<div v-if="editingFooter" style="display: flex; position: relative; align-items: center; gap: 6px">
<TextInput v-model="editFooter" @keydown.enter="onChangeFooterSubmit()" :disabled="editFooterBusy"/>
<div v-if="editingFooter" style="display: flex; position: relative; align-items: center; gap: 6px; flex-grow: 1; justify-content: right;">
<textarea v-model="editFooter" @keydown.enter="onChangeFooterSubmit()" :disabled="editFooterBusy" style="flex-grow: 1; height: 120px;"></textarea>
<Button tool @click="onChangeFooterSubmit()" :disabled="editFooterBusy" :loading="editFooterBusy">{{ $t('main.dialog.save') }}</Button>
<Button tool plain secondary @click="editingFooter = false" :disabled="editFooterBusy">{{ $t('main.dialog.cancel') }}</Button>
</div>