Show subscription badge where required and disable UI elements accordingly

This commit is contained in:
Johannes Zellner
2025-05-13 18:11:10 +02:00
parent 6c115804e8
commit 16c8721d6c
8 changed files with 60 additions and 39 deletions

View File

@@ -4,7 +4,7 @@ import { useTemplateRef, ref } from 'vue';
const fileInput = useTemplateRef('fileInput');
const props = defineProps(['src', 'fallbackSrc', 'size', 'maxSize', 'displayHeight', 'displayWidth']);
const props = defineProps(['src', 'fallbackSrc', 'size', 'maxSize', 'displayHeight', 'displayWidth', 'disabled']);
const emits = defineEmits(['changed']);
defineExpose({
clear(originalSrc = '') {
@@ -113,10 +113,10 @@ function onError() {
<template>
<div>
<div class="image-picker">
<div>
<input @change="onChanged($event)" type="file" ref="fileInput" style="display: none" accept="image/*"/>
<div ref="image" class="image-picker" @click="onShowIconSelector()">
<div ref="image" :disabled="disabled || null" class="image-picker" @click="!disabled && onShowIconSelector()">
<img :src="internalSrc || src" @error="onError" :style="{ height: displayHeight || null, width: displayWidth || null }">
<i class="image-picker-edit-indicator fa fa-pencil-alt"></i>
</div>
@@ -132,6 +132,10 @@ function onError() {
cursor: pointer;
}
.image-picker[disabled] {
cursor: not-allowed;
}
.image-picker > img {
display: block;
/* height: 320px;*/