diff --git a/dashboard/src/components/SaveIndicator.vue b/dashboard/src/components/SaveIndicator.vue index cc644fdc5..82a5eb77c 100644 --- a/dashboard/src/components/SaveIndicator.vue +++ b/dashboard/src/components/SaveIndicator.vue @@ -4,17 +4,29 @@ import { ref } from 'vue'; import { Icon } from '@cloudron/pankow'; const visible = ref(false); +const success = ref(false); let timeoutId; defineExpose({ success() { clearTimeout(timeoutId); + success.value = true; visible.value = true; timeoutId = setTimeout(() => { visible.value = false; - }, 3000); + }, 2000); + }, + error() { + clearTimeout(timeoutId); + + success.value = false; + visible.value = true; + + timeoutId = setTimeout(() => { + visible.value = false; + }, 2000); } }); @@ -22,7 +34,7 @@ defineExpose({ @@ -31,9 +43,16 @@ defineExpose({ .save-indicator { position: absolute; right: -10px; +} + +.save-indicator.success { color: var(--pankow-color-success); } +.save-indicator.error { + color: var(--pankow-color-danger); +} + .bounce-enter-active { animation: bounce-in 0.5s; } diff --git a/dashboard/src/views/EmailSettingsView.vue b/dashboard/src/views/EmailSettingsView.vue index dcb8fbabb..1c76a6226 100644 --- a/dashboard/src/views/EmailSettingsView.vue +++ b/dashboard/src/views/EmailSettingsView.vue @@ -4,6 +4,7 @@ import { ref, onMounted, useTemplateRef, computed } from 'vue'; import { Button, InputDialog, Dialog, FormGroup, Switch } from '@cloudron/pankow'; import { prettyDecimalSize } from '@cloudron/pankow/utils'; +import SaveIndicator from '../components/SaveIndicator.vue'; import Section from '../components/Section.vue'; import SettingsItem from '../components/SettingsItem.vue'; import MailServerLocation from '../components/MailServerLocation.vue'; @@ -68,38 +69,46 @@ async function onSubmitAcl() { dnsblZonesBusy.value = false; } - const mailboxSharingEnabled = ref(false); +const mailboxSharingSaveIndicator = useTemplateRef('mailboxSharingSaveIndicator'); async function onChangeMailboxSharing(value) { const [error] = await mailModel.setMailboxSharing(value); if (error) { mailboxSharingEnabled.value = !value; + mailboxSharingSaveIndicator.value.error(); return console.error(error); } + mailboxSharingSaveIndicator.value.success(); } const virtualAllMailEnabled = ref(false); +const virtualAllMailSaveIndicator = useTemplateRef('virtualAllMailSaveIndicator'); async function onChangeVirtualAllMail(value) { const [error] = await mailModel.setVirtualAllMail(value); if (error) { virtualAllMailEnabled.value = !value; + virtualAllMailSaveIndicator.value.error(); return console.error(error); } + virtualAllMailSaveIndicator.value.success(); } const ftsEnabled = ref(false); const hasMailServiceSufficientMemory = ref(false); +const ftsSaveIndicator = useTemplateRef('ftsSaveIndicator'); async function onChangeFts(value) { const [error] = await mailModel.setFtsConfig(value); if (error) { ftsEnabled.value = !value; + ftsSaveIndicator.value.error(); return console.error(error); } + ftsSaveIndicator.value.success(); } @@ -260,6 +269,7 @@ onMounted(async () => {
{{ $t('emails.mailboxSharing.description') }}
+ @@ -268,6 +278,7 @@ onMounted(async () => {
+
@@ -288,6 +299,7 @@ onMounted(async () => {
+
diff --git a/dashboard/src/views/SystemSettingsView.vue b/dashboard/src/views/SystemSettingsView.vue index 9bf434c0c..1e7b55a22 100644 --- a/dashboard/src/views/SystemSettingsView.vue +++ b/dashboard/src/views/SystemSettingsView.vue @@ -26,7 +26,10 @@ const timezoneSaveIndicator = useTemplateRef('timezoneSaveIndicator'); async function onTimeZoneChange(value) { const [error] = await cloudronModel.setTimeZone(value); - if (error) return console.error(error); + if (error) { + timezoneSaveIndicator.value.error(); + return console.error(error); + } currentTimeZone.value = value; @@ -41,7 +44,10 @@ const languageSaveIndicator = useTemplateRef('languageSaveIndicator'); async function onLanguageChange(value) { const [error] = await cloudronModel.setLanguage(value); - if (error) return console.error(error); + if (error) { + languageSaveIndicator.value.error(); + return console.error(error); + } currentLanguage.value = value;