ImagePicker: introduce 'mode' - simple/editable

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
+2 -2
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>