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

Fix size props in ImagePicker

Browse Source
This commit is contained in:
Johannes Zellner
2025-11-07 12:04:48 +01:00
parent 27f975f3c5
commit 232bce0a2d
4 changed files with 11 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dashboard/src/components/ApplinkDialog.vue
View File

@@ -172,7 +172,7 @@ defineExpose({
<div>
<label for="previewIcon">{{ $t('app.display.icon') }}</label>
<ImagePicker ref="imagePicker" mode="simple" :src="iconUrl" :fallback-src="`${API_ORIGIN}/img/appicon_fallback.png`" @changed="onIconChanged" size="512" display-height="80px" style="width: 80px"/>
<ImagePicker ref="imagePicker" mode="simple" :src="iconUrl" :fallback-src="`${API_ORIGIN}/img/appicon_fallback.png`" @changed="onIconChanged" :size="512" display-height="80px" style="width: 80px"/>
</div>
<FormGroup>

2
dashboard/src/components/Branding.vue
View File

@@ -77,7 +77,7 @@ 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 mode="editable" :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" fallback-src="/api/v1/cloudron/avatar"/>
</div>
<div style="display: flex; flex-direction: column; align-content: stretch; align-items: center;">

19
dashboard/src/components/ImagePicker.vue
View File

@@ -10,8 +10,8 @@ const props = defineProps({
mode: { type: String, default: 'editable', required: true },
src: { type: String, required: true },
fallbackSrc: { type: String, required: true },
size: { type: String, required: true },
maxSize: { type: String, required: false },
size: { type: Number, required: false, default: 512 },
maxSize: { type: Number, required: false, default: 0 },
displayHeight: { type: String, required: false },
displayWidth: { type: String, required: false },
disabled: { type: Boolean, required: false },
@@ -109,22 +109,19 @@ function onChanged(event) {
fr.onload = function () {
const image = new Image();
image.onload = function () {
const size = props.size ? parseInt(props.size) : 512;
const maxSize = props.maxSize ? parseInt(props.maxSize) : 0;
const canvas = document.createElement('canvas');
if (maxSize) {
if (image.naturalWidth > maxSize) {
canvas.width = maxSize;
canvas.height = (image.naturalHeight / image.naturalWidth) * maxSize;
if (props.maxSize) {
if (image.naturalWidth > props.maxSize) {
canvas.width = props.maxSize;
canvas.height = (image.naturalHeight / image.naturalWidth) * props.maxSize;
} else {
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
}
} else {
canvas.width = size;
canvas.height = size;
canvas.width = props.size;
canvas.height = props.size;
}
const imageDimensionRatio = image.width / image.height;

2
dashboard/src/components/app/Display.vue
View File

@@ -89,7 +89,7 @@ onMounted(() => {
<div>
<div style="display: inline-block;">
<label>{{ $t('app.display.icon') }}</label>
<ImagePicker ref="imagePicker" mode="simple" :src="iconUrl" fallback-src="/img/appicon_fallback.png" @changed="onIconChanged" size="512" display-height="96px"/>
<ImagePicker ref="imagePicker" mode="simple" :src="iconUrl" fallback-src="/img/appicon_fallback.png" @changed="onIconChanged" :size="512" display-height="96px"/>
</div>
<form @submit.prevent="onSubmit()" autocomplete="off">