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

@@ -7,7 +7,7 @@ import DomainsModel from '../models/DomainsModel.js';
import MailModel from '../models/MailModel.js';
import MailboxesModel from '../models/MailboxesModel.js';
const props = defineProps([ 'domainConfig' ]);
const props = defineProps([ 'domainConfig', 'disabled' ]);
const domainsModel = DomainsModel.create();
const mailModel = MailModel.create();
@@ -75,8 +75,8 @@ onMounted(async () => {
</FormGroup>
<div style="display: flex; gap: 6px; align-items: center;">
<InputGroup>
<MultiSelect v-model="addresses" :options="allAddresses" option-label="label" option-key="id" />
<Button @click="onSubmit()" tool :disabled="busy || !hasChanged" :loading="busy">{{ $t('email.incoming.catchall.saveAction') }}</Button>
<MultiSelect v-model="addresses" :options="allAddresses" option-label="label" option-key="id" :disabled="disabled"/>
<Button @click="onSubmit()" tool :disabled="disabled || busy || !hasChanged" :loading="busy">{{ $t('email.incoming.catchall.saveAction') }}</Button>
</InputGroup>
</div>
</SettingsItem>

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;*/

View File

@@ -66,7 +66,7 @@ onMounted(async () => {
</script>
<template>
<Section :title="$t('settings.privateDockerRegistry.title')">
<Section :title="$t('settings.privateDockerRegistry.title')" :title-badge="features.privateDockerRegistry ? 'Pro' : ''">
<InputDialog ref="inputDialog" />
<DockerRegistryDialog ref="dialog" @success="refresh()"/>