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

ImagePicker: introduce 'mode' - simple/editable

Browse Source 
We have two cases for the picker:
* in normal pages: here the image upload/reset happens automatically. this is
  the editable mode with action buttons.

* in dialogs: here you just upload images . this is simple mode.
This commit is contained in:
Girish Ramakrishnan
2025-09-11 16:22:01 +02:00
parent f3c0e8a835
commit 23012fbb5c
6 changed files with 33 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dashboard/src/views/AppearanceView.vue
View File

@@ -92,12 +92,12 @@ onMounted(async () => {
<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"/>
<ImagePicker mode="editable" :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"/>
<ImagePicker mode="editable" :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>

2
dashboard/src/views/ProfileView.vue
View File

@@ -212,7 +212,7 @@ onMounted(async () => {
<div style="display: flex; flex-wrap: wrap; gap: 20px">
<div style="width: 128px;">
<ImagePicker :src="profile.avatarUrl" fallback-src="/img/avatar-default-symbolic.svg" :disabled="config.profileLocked" :size="512" :unset-handler="onAvatarUnset" :save-handler="onAvatarSubmit" display-width="128px"/>
<ImagePicker mode="editable" :src="profile.avatarUrl" fallback-src="/img/avatar-default-symbolic.svg" :disabled="config.profileLocked" :size="512" :unset-handler="onAvatarUnset" :save-handler="onAvatarSubmit" display-width="128px"/>
</div>
<div style="flex-grow: 1;">
<SettingsItem>