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

Rework the ImagePicker component

Browse Source
This commit is contained in:
Johannes Zellner
2025-05-20 14:48:18 +02:00
parent 4615418000
commit d955f0e3d8
4 changed files with 120 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/views/BrandingView.vue
+11 -42
View File
@@ -43,44 +43,21 @@ async function onChangeNameSubmit() {
editName.value = '';
}
// Avatar
const avatarBusy = ref(false);
const avatarNew = ref(null);
function onAvatarChanged(file) {
avatarNew.value = file;
}
async function onAvatarSubmit() {
if (!avatarNew.value) return;
avatarBusy.value = true;
const [error] = await brandingModel.setAvatar(avatarNew.value);
async function onAvatarSubmit(file) {
const [error] = await brandingModel.setAvatar(file);
if (error) return console.error(error);
avatarNew.value = null;
avatarBusy.value = false;
}
// Background
const backgroundBusy = ref(false);
const backgroundNew = ref(null);
function onBackgroundChanged(file) {
backgroundNew.value = file;
}
async function onBackgroundSubmit() {
if (!backgroundNew.value) return;
backgroundBusy.value = true;
const [error] = await brandingModel.setBackground(backgroundNew.value);
async function onBackgroundSubmit(file) {
const [error] = await brandingModel.setBackground(file);
if (error) return console.error(error);
backgroundNew.value = null;
backgroundBusy.value = false;
}
async function onBackgroundUnset() {
const [error] = await brandingModel.setBackground(null);
if (error) return console.error(error);
backgroundUrl.value = '';
}
// Footer
const editingFooter = ref(false);
@@ -140,23 +117,15 @@ onMounted(async () => {
<SettingsItem>
<FormGroup>
<label>{{ $t('branding.logo') }}</label>
<ImagePicker :src="avatarUrl" @changed="onAvatarChanged" :size="512" display-height="60px" :disabled="!features.branding"/>
<ImagePicker :src="avatarUrl" :save-handler="onAvatarSubmit" :size="512" display-height="100px" :disabled="!features.branding"/>
</FormGroup>
<div v-show="avatarNew !== null" style="display: flex; position: relative; align-items: center; gap: 6px">
<Button tool @click="onAvatarSubmit()" :disabled="!avatarNew || avatarBusy" :loading="avatarBusy">{{ $t('main.dialog.save') }}</Button>
<Button tool plain secondary @click="avatarNew = null" :disabled="avatarBusy">{{ $t('main.dialog.cancel') }}</Button>
</div>
</SettingsItem>
<SettingsItem>
<FormGroup>
<label>{{ $t('branding.backgroundImage') }}</label>
<ImagePicker :src="backgroundUrl" @changed="onBackgroundChanged" :disabled="!features.branding" fallback-src="/img/background-image-placeholder.svg" display-height="200px" :max-size="1280"/>
<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>
<div v-show="backgroundNew !== null" style="display: flex; position: relative; align-items: center; gap: 6px">
<Button tool @click="onBackgroundSubmit()" :disabled="!backgroundNew || backgroundBusy" :loading="backgroundBusy">{{ $t('main.dialog.save') }}</Button>
<Button tool plain secondary @click="backgroundNew = null" :disabled="backgroundBusy">{{ $t('main.dialog.cancel') }}</Button>
</div>
</SettingsItem>
<SettingsItem>
dashboard/src/views/ProfileView.vue
+4 -4
View File
@@ -106,7 +106,7 @@ async function onChangeFallbackEmail(currentFallbackEmail) {
await refreshProfile();
}
async function onAvatarChanged(file) {
async function onAvatarSubmit(file) {
await profileModel.setAvatar(file);
await refreshProfile();
}
@@ -268,9 +268,9 @@ onMounted(async () => {
<Button @click="profileModel.logout()" icon="fa fa-sign-out">{{ $t('main.logout') }}</Button>
</template>
<div style="display: flex; flex-wrap: wrap">
<div style="width: 150px; display: flex; flex-direction: column; justify-content: space-between;">
<ImagePicker :src="user.avatarUrl" fallback-src="/img/background-image-placeholder.svg" :size="512" @changed="onAvatarChanged" display-width="128px"/>
<div style="display: flex; flex-wrap: wrap; gap: 20px">
<div style="width: 128px;">
<ImagePicker :src="user.avatarUrl" fallback-src="/img/background-image-placeholder.svg" :size="512" :save-handler="onAvatarSubmit" display-width="128px"/>
</div>
<div style="flex-grow: 1;">
<SettingsItem>