From d0d06ebca17a6f8a35fa9e5f652a48a5f0e4968c Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Fri, 30 Jun 2023 19:07:19 +0200
Subject: [PATCH 1/8] Fix la thematic area accessibility

---
 .../activity/content/LAThematicArea.vue       | 37 +++++++++++++------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/activity/content/LAThematicArea.vue b/frontend/src/components/activity/content/LAThematicArea.vue
index e950732004..c287b33af0 100644
--- a/frontend/src/components/activity/content/LAThematicArea.vue
+++ b/frontend/src/components/activity/content/LAThematicArea.vue
@@ -1,26 +1,27 @@
 <template>
   <card-content-node v-bind="$props">
-    <v-list three-line class="mx-n4">
-      <v-list-item-group>
+    <v-list three-line class="mx-n4 ec-lathematicarea">
+      <v-list-item-group multiple :value="model">
         <v-list-item
           v-for="(option, key) in contentNode.data.options"
           :key="key"
-          tag="label"
+          :value="key"
           :disabled="layoutMode || disabled"
         >
-          <v-list-item-action>
+          <v-list-item-action class="ml-0">
             <api-checkbox
+              :id="contentNode.id + key"
               :fieldname="`data.options.${key}.checked`"
               :uri="contentNode._meta.self"
             />
           </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title>{{
-              $tc(`contentNode.laThematicArea.entity.option.${key}.name`)
-            }}</v-list-item-title>
-            <v-list-item-subtitle>{{
-              $tc(`contentNode.laThematicArea.entity.option.${key}.description`)
-            }}</v-list-item-subtitle>
+          <v-list-item-content tag="label" :for="contentNode.id + key">
+            <v-list-item-title
+              >{{ $tc(`contentNode.laThematicArea.entity.option.${key}.name`) }}
+            </v-list-item-title>
+            <v-list-item-subtitle
+              >{{ $tc(`contentNode.laThematicArea.entity.option.${key}.description`) }}
+            </v-list-item-subtitle>
           </v-list-item-content>
         </v-list-item>
       </v-list-item-group>
@@ -37,6 +38,13 @@ export default {
   name: 'LAThematicArea',
   components: { CardContentNode, ApiCheckbox },
   mixins: [contentNodeMixin],
+  computed: {
+    model() {
+      return Object.entries(this.contentNode.data.options)
+        .filter(([, option]) => option.checked)
+        .map(([key]) => key)
+    },
+  },
   methods: {
     async refreshContent() {
       await this.api.reload(this.contentNode)
@@ -44,3 +52,10 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.ec-lathematicarea .theme--light.v-list-item--active:hover::before,
+.ec-lathematicarea .theme--light.v-list-item--active::before {
+  opacity: 0;
+}
+</style>

From efec4bff66dd41438545de5cec8650fd0c6bbbcb Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Fri, 30 Jun 2023 19:09:20 +0200
Subject: [PATCH 2/8] Move spin-only animation to global.scss

---
 frontend/src/components/buttons/IconButton.vue | 11 +----------
 frontend/src/scss/global.scss                  |  9 +++++++++
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/buttons/IconButton.vue b/frontend/src/components/buttons/IconButton.vue
index 12a73b5d38..98d1af996e 100644
--- a/frontend/src/components/buttons/IconButton.vue
+++ b/frontend/src/components/buttons/IconButton.vue
@@ -34,15 +34,6 @@ export default {
 <style scoped>
 /*noinspection CssUnusedSymbol*/
 .v-icon.animate {
-  animation: spin 0.5s infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  animation: spin-only 0.5s infinite;
 }
 </style>
diff --git a/frontend/src/scss/global.scss b/frontend/src/scss/global.scss
index 1402db35db..cc6db87fd4 100644
--- a/frontend/src/scss/global.scss
+++ b/frontend/src/scss/global.scss
@@ -182,3 +182,12 @@ body {
 .justify-items-center {
   justify-items: center;
 }
+
+@keyframes spin-only {
+  from {
+    transform: scale(1) rotate(0deg);
+  }
+  to {
+    transform: scale(1) rotate(360deg);
+  }
+}

From bb6c3604aa0368cced1f26cf2a9d43613a247a55 Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Fri, 30 Jun 2023 19:13:19 +0200
Subject: [PATCH 3/8] Provide css classes for api wrapper states

---
 frontend/src/components/form/api/ApiWrapper.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/form/api/ApiWrapper.vue b/frontend/src/components/form/api/ApiWrapper.vue
index 3c5ef9ca25..8583076c7c 100644
--- a/frontend/src/components/form/api/ApiWrapper.vue
+++ b/frontend/src/components/form/api/ApiWrapper.vue
@@ -5,8 +5,13 @@ Wrapper component for form components to save data back to API
 <template>
   <ValidationObserver ref="validationObserver" v-slot="validationObserver" slim>
     <v-form
-      :class="[{ 'api-wrapper--inline': !autoSave && !readonly && !separateButtons }]"
-      class="e-form-container"
+      :class="{
+        'ec-api-wrapper--inline': !autoSave && !readonly && !separateButtons,
+        'ec-api-wrapper--success': status === 'success',
+        'ec-api-wrapper--saving': status === 'saving',
+        'ec-api-wrapper--server-error': hasServerError,
+      }"
+      class="e-form-container ec-api-wrapper"
       @submit.prevent="onEnter"
     >
       <slot
@@ -247,18 +252,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.api-wrapper--inline .v-btn--last-instance {
+.ec-api-wrapper--inline .v-btn--last-instance {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-.api-wrapper--inline .v-btn {
+.ec-api-wrapper--inline .v-btn {
   border-top: 1px solid rgba(0, 0, 0, 0.38);
   border-bottom: 1px solid rgba(0, 0, 0, 0.38);
 }
 </style>
 
 <style lang="scss">
-.api-wrapper--inline .v-text-field {
+.ec-api-wrapper--inline .v-text-field {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }

From 1a0c144739688f38138c5f5b0fcf73228a9f87f3 Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Fri, 30 Jun 2023 19:23:41 +0200
Subject: [PATCH 4/8] Improve checkbox savings indicator

---
 .../src/components/form/api/ApiCheckbox.vue   | 69 +++++++++++++++++--
 .../form/api/ApiWrapperCheckboxAppend.vue     | 64 +++++++++++++++++
 2 files changed, 129 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/form/api/ApiWrapperCheckboxAppend.vue

diff --git a/frontend/src/components/form/api/ApiCheckbox.vue b/frontend/src/components/form/api/ApiCheckbox.vue
index 0672564e46..1612e91b03 100644
--- a/frontend/src/components/form/api/ApiCheckbox.vue
+++ b/frontend/src/components/form/api/ApiCheckbox.vue
@@ -16,7 +16,14 @@ Displays a field as a e-checkbox + write access via API wrapper
       @input="wrapper.on.input"
     >
       <template #append>
-        <api-wrapper-append :wrapper="wrapper" />
+        <ApiWrapperCheckboxAppend
+          v-if="
+            wrapper.hasServerError ||
+            (wrapper.autoSave && wrapper.dirty) ||
+            wrapper.hasLoadingError
+          "
+          :wrapper="wrapper"
+        />
       </template>
     </e-checkbox>
   </api-wrapper>
@@ -25,11 +32,11 @@ Displays a field as a e-checkbox + write access via API wrapper
 <script>
 import { apiPropsMixin } from '@/mixins/apiPropsMixin.js'
 import ApiWrapper from './ApiWrapper.vue'
-import ApiWrapperAppend from './ApiWrapperAppend.vue'
+import ApiWrapperCheckboxAppend from '@/components/form/api/ApiWrapperCheckboxAppend.vue'
 
 export default {
   name: 'ApiCheckbox',
-  components: { ApiWrapper, ApiWrapperAppend },
+  components: { ApiWrapperCheckboxAppend, ApiWrapper },
   mixins: [apiPropsMixin],
   props: {
     // disable delay per default
@@ -41,4 +48,58 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+.ec-api-wrapper--saving ::v-deep .v-input--selection-controls__input .v-icon {
+  transition: color 0.2s ease;
+  color: rgba(0, 0, 0, 0.5) !important;
+}
+
+.ec-api-wrapper ::v-deep .v-input--checkbox .v-input--selection-controls__input::before {
+  border: 2px solid transparent;
+  border-radius: 50%;
+  position: absolute;
+  height: 24px;
+  width: 24px;
+  content: '\F0131';
+  color: transparent;
+  transition: transform 0.2s ease-out, border-color 0.2s ease;
+  transform: scale(1.9);
+  pointer-events: none;
+}
+
+.ec-api-wrapper--saving
+  ::v-deep
+  .v-input--checkbox
+  .v-input--selection-controls__input::before {
+  border-color: map-get($blue, 'base');
+  -webkit-mask: conic-gradient(from 0deg at 50% 50%, #0000 0%, #000);
+  transform: scale(1.2);
+  animation: spin 1s linear infinite both;
+  transition: transform 0.2s ease-out;
+}
+
+@keyframes spin {
+  from {
+    transform: scale(1.5) rotate(0deg);
+  }
+  to {
+    transform: scale(1.5) rotate(360deg);
+  }
+}
+
+.ec-api-wrapper--success
+  ::v-deep
+  .v-input--checkbox
+  .v-input--selection-controls__input::before {
+  border-color: map-get($green, 'lighten-2');
+  transform: scale(1.5);
+  transition: none;
+}
+
+.ec-api-wrapper--server-error
+  ::v-deep
+  .v-input--checkbox
+  .v-input--selection-controls__input::before {
+  transform: scale(1.5);
+}
+</style>
diff --git a/frontend/src/components/form/api/ApiWrapperCheckboxAppend.vue b/frontend/src/components/form/api/ApiWrapperCheckboxAppend.vue
new file mode 100644
index 0000000000..b7f17437a4
--- /dev/null
+++ b/frontend/src/components/form/api/ApiWrapperCheckboxAppend.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="ec-api-checkbox-append mt-n1">
+    <!-- Retry/Cancel button if saving failed -->
+    <template v-if="wrapper.hasServerError">
+      <v-tooltip bottom class="ml-auto">
+        <template #activator="{ on }">
+          <v-btn
+            fab
+            dark
+            depressed
+            x-small
+            color="error"
+            type="submit"
+            :aria-label="$tc('global.button.tryagain')"
+            v-on="on"
+            @click="wrapper.on.save"
+          >
+            <v-icon>mdi-refresh</v-icon>
+          </v-btn>
+        </template>
+        <span>{{ $tc('global.button.tryagain') }}</span>
+      </v-tooltip>
+    </template>
+    <template v-else-if="!wrapper.autoSave">
+      <v-tooltip v-if="wrapper.dirty" bottom class="ml-auto">
+        <template #activator="{ on }">
+          <div class="rounded-full" tabindex="0" v-on="on">
+            <v-btn
+              fab
+              dark
+              depressed
+              x-small
+              color="success"
+              type="submit"
+              :aria-label="$tc('global.button.save')"
+              @click="wrapper.on.save"
+            >
+              <v-icon>mdi-check</v-icon>
+              <span>{{ $tc('global.button.save') }}</span>
+            </v-btn>
+          </div>
+        </template>
+      </v-tooltip>
+    </template>
+
+    <!-- Retry button if loading failed -->
+    <button-retry v-if="wrapper.hasLoadingError" text @click.stop="$emit('reload')" />
+  </div>
+</template>
+
+<script>
+import ButtonRetry from '@/components/buttons/ButtonRetry.vue'
+
+export default {
+  name: 'ApiWrapperCheckboxAppend',
+  components: { ButtonRetry },
+  props: {
+    wrapper: {
+      required: true,
+      type: Object,
+    },
+  },
+}
+</script>

From 90fef29562b56babf81192b488bb78f18ec94769 Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Fri, 30 Jun 2023 19:28:45 +0200
Subject: [PATCH 5/8] Improve select saving indicator

---
 .../src/components/form/api/ApiSelect.vue     |  14 +-
 .../form/api/ApiWrapperSelectAppend.vue       | 149 ++++++++++++++++++
 frontend/src/mixins/apiPropsMixin.js          |   1 +
 frontend/src/scss/global.scss                 |   4 +
 4 files changed, 163 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/form/api/ApiWrapperSelectAppend.vue

diff --git a/frontend/src/components/form/api/ApiSelect.vue b/frontend/src/components/form/api/ApiSelect.vue
index 282ce33f89..88dfd48f8d 100644
--- a/frontend/src/components/form/api/ApiSelect.vue
+++ b/frontend/src/components/form/api/ApiSelect.vue
@@ -15,7 +15,7 @@ Displays a field as a e-select + write access via API wrapper
       :readonly="wrapper.readonly"
       :disabled="disabled"
       :error-messages="wrapper.errorMessages"
-      :loading="wrapper.isSaving || wrapper.isLoading ? 'secondary' : false"
+      :loading="wrapper.isLoading ? 'secondary' : false"
       :outlined="outlined"
       :filled="filled"
       :dense="dense"
@@ -24,7 +24,7 @@ Displays a field as a e-select + write access via API wrapper
     >
       <template #append>
         <v-icon>mdi-menu-down</v-icon>
-        <api-wrapper-append :wrapper="wrapper" />
+        <ApiWrapperSelectAppend :wrapper="wrapper" :resettable="resettable" />
       </template>
     </e-select>
   </api-wrapper>
@@ -33,11 +33,11 @@ Displays a field as a e-select + write access via API wrapper
 <script>
 import { apiPropsMixin } from '@/mixins/apiPropsMixin.js'
 import ApiWrapper from './ApiWrapper.vue'
-import ApiWrapperAppend from './ApiWrapperAppend.vue'
+import ApiWrapperSelectAppend from '@/components/form/api/ApiWrapperSelectAppend.vue'
 
 export default {
   name: 'ApiSelect',
-  components: { ApiWrapper, ApiWrapperAppend },
+  components: { ApiWrapperSelectAppend, ApiWrapper },
   mixins: [apiPropsMixin],
   props: {
     // disable delay per default
@@ -62,4 +62,8 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+::v-deep .v-input__append-inner {
+  position: relative;
+}
+</style>
diff --git a/frontend/src/components/form/api/ApiWrapperSelectAppend.vue b/frontend/src/components/form/api/ApiWrapperSelectAppend.vue
new file mode 100644
index 0000000000..832420680e
--- /dev/null
+++ b/frontend/src/components/form/api/ApiWrapperSelectAppend.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="ec-api-select-append">
+    <!-- Success icon after saving -->
+    <div class="ec-api-select-append__icon"></div>
+
+    <div class="d-flex gap-1" style="margin-top: -5px">
+      <!-- Retry/Cancel button if saving failed -->
+      <template v-if="wrapper.hasServerError">
+        <v-tooltip bottom class="ml-auto">
+          <template #activator="{ on }">
+            <v-btn
+              fab
+              dark
+              depressed
+              x-small
+              color="error"
+              type="submit"
+              :aria-label="$tc('global.button.tryagain')"
+              v-on="on"
+              @click="wrapper.on.save"
+            >
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+          <span>{{ $tc('global.button.tryagain') }}</span>
+        </v-tooltip>
+        <v-tooltip v-if="resettable" bottom class="ml-auto">
+          <template #activator="{ on }">
+            <v-btn
+              fab
+              dark
+              depressed
+              x-small
+              color="grey"
+              :aria-label="$tc('global.button.cancel')"
+              v-on="on"
+              @click="wrapper.on.reset"
+            >
+              <v-icon>mdi-close</v-icon>
+            </v-btn>
+          </template>
+          <span>{{ $tc('global.button.cancel') }}</span>
+        </v-tooltip>
+      </template>
+
+      <template v-else-if="!wrapper.autoSave">
+        <v-tooltip v-if="wrapper.dirty" bottom class="ml-auto">
+          <template #activator="{ on }">
+            <v-btn
+              fab
+              dark
+              depressed
+              x-small
+              color="success"
+              type="submit"
+              class="mr-1"
+              :aria-label="$tc('global.button.save')"
+              v-on="on"
+            >
+              <v-icon>mdi-check</v-icon>
+            </v-btn>
+          </template>
+          <span>{{ $tc('global.button.save') }}</span>
+        </v-tooltip>
+        <v-tooltip v-if="resettable" bottom class="ml-auto">
+          <template #activator="{ on }">
+            <v-btn
+              fab
+              dark
+              depressed
+              x-small
+              color="grey"
+              :aria-label="$tc('global.button.cancel')"
+              v-on="on"
+              @click="wrapper.on.reset"
+            >
+              <v-icon>mdi-close</v-icon>
+            </v-btn>
+          </template>
+          <span>{{ $tc('global.button.cancel') }}</span>
+        </v-tooltip>
+      </template>
+
+      <!-- Retry button if loading failed -->
+      <button-retry v-if="wrapper.hasLoadingError" text @click="wrapper.on.reload" />
+    </div>
+  </div>
+</template>
+
+<script>
+import ButtonRetry from '@/components/buttons/ButtonRetry.vue'
+
+export default {
+  name: 'ApiWrapperSelectAppend',
+  components: { ButtonRetry },
+  props: {
+    wrapper: {
+      required: true,
+      type: Object,
+    },
+    icon: {
+      type: String,
+      default: 'mdi-cloud-check-variant-outline',
+    },
+    resettable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    checkIconAddon() {
+      if (this.wrapper.hasServerError || this.wrapper.dirty) {
+        return 'hidden'
+      } else if (this.wrapper.status === 'success') {
+        return 'visible'
+      } else {
+        return ''
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.ec-api-select-append__icon {
+  border-radius: 50%;
+  border: 2px solid transparent;
+  position: absolute;
+  inset: 0px;
+  margin-top: 0px;
+  margin-left: 4px;
+  transform: scale(1.2) rotate(0);
+  transition: transform 0.2s ease-out, border-color 0.2s ease;
+}
+
+.ec-api-wrapper--saving .ec-api-select-append__icon {
+  border-color: map-get($blue, 'darken-2');
+  -webkit-mask: conic-gradient(from 0deg at 50% 50%, #0000 0%, #000);
+  animation: spin-only 1s linear infinite;
+  transform: scale(1) rotate(0);
+  transition: transform 0.2s ease-out, border-color 0.2s ease;
+}
+
+.ec-api-wrapper--success .ec-api-select-append__icon {
+  border-color: map-get($green, 'base');
+  transition: transform 0.2s ease-out, border-color 0.2s ease;
+  transform: scale(1) rotate(0);
+}
+</style>
diff --git a/frontend/src/mixins/apiPropsMixin.js b/frontend/src/mixins/apiPropsMixin.js
index c1586a7da7..769d718077 100644
--- a/frontend/src/mixins/apiPropsMixin.js
+++ b/frontend/src/mixins/apiPropsMixin.js
@@ -31,6 +31,7 @@ export const apiPropsMixin = {
     /* enable/disable edit mode */
     readonly: { type: Boolean, required: false, default: false }, // vuetify readonly: same look and feel as normal, but no changes possible
     disabled: { type: Boolean, required: false, default: false }, // vuetify disabled: input greyed out, not focusable
+    resettable: { type: Boolean, required: false, default: false }, // reset field to previous value
 
     /* enable/disable auto save */
     autoSave: { type: Boolean, default: true, required: false },
diff --git a/frontend/src/scss/global.scss b/frontend/src/scss/global.scss
index cc6db87fd4..e04f628972 100644
--- a/frontend/src/scss/global.scss
+++ b/frontend/src/scss/global.scss
@@ -151,6 +151,10 @@ body {
   gap: 1rem;
 }
 
+.gap-1 {
+  gap: 4px;
+}
+
 .gap-2 {
   gap: 8px;
 }

From 989e33bb3bc43c9e1363fd32bccb3e852433cddc Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Fri, 30 Jun 2023 19:32:38 +0200
Subject: [PATCH 6/8] Improve saving indicator and implement resettable prop

---
 .../components/form/api/ApiColorPicker.vue    |   2 +-
 .../src/components/form/api/ApiDatePicker.vue |   2 +-
 .../src/components/form/api/ApiRichtext.vue   |   2 +-
 .../src/components/form/api/ApiSwitch.vue     |   2 +-
 .../src/components/form/api/ApiTextField.vue  |   2 +-
 .../src/components/form/api/ApiTextarea.vue   |   2 +-
 .../src/components/form/api/ApiTimePicker.vue |   2 +-
 .../components/form/api/ApiWrapperAppend.vue  | 177 ++++++++++--------
 8 files changed, 101 insertions(+), 90 deletions(-)

diff --git a/frontend/src/components/form/api/ApiColorPicker.vue b/frontend/src/components/form/api/ApiColorPicker.vue
index 91ea041e84..b00f47b8c3 100644
--- a/frontend/src/components/form/api/ApiColorPicker.vue
+++ b/frontend/src/components/form/api/ApiColorPicker.vue
@@ -16,7 +16,7 @@ Displays a field as a color picker + write access via API wrapper
       @input="wrapper.on.input"
     >
       <template #append>
-        <api-wrapper-append :wrapper="wrapper" />
+        <api-wrapper-append :wrapper="wrapper" :resettable="resettable" />
       </template>
     </e-color-picker>
   </api-wrapper>
diff --git a/frontend/src/components/form/api/ApiDatePicker.vue b/frontend/src/components/form/api/ApiDatePicker.vue
index 6b1f23d45d..889b6c60e3 100644
--- a/frontend/src/components/form/api/ApiDatePicker.vue
+++ b/frontend/src/components/form/api/ApiDatePicker.vue
@@ -16,7 +16,7 @@ Displays a field as a date picker + write access via API wrapper
       @input="wrapper.on.input"
     >
       <template #append>
-        <api-wrapper-append :wrapper="wrapper" />
+        <api-wrapper-append :wrapper="wrapper" :resettable="resettable" />
       </template>
     </e-date-picker>
   </api-wrapper>
diff --git a/frontend/src/components/form/api/ApiRichtext.vue b/frontend/src/components/form/api/ApiRichtext.vue
index 238dd1ac60..dd2cf0c456 100644
--- a/frontend/src/components/form/api/ApiRichtext.vue
+++ b/frontend/src/components/form/api/ApiRichtext.vue
@@ -16,7 +16,7 @@ Displays a field as a e-textarea + write access via API wrapper
       @input="wrapper.on.input"
     >
       <template #append>
-        <api-wrapper-append :wrapper="wrapper" />
+        <api-wrapper-append :wrapper="wrapper" :resettable="resettable" />
       </template>
     </e-richtext>
   </api-wrapper>
diff --git a/frontend/src/components/form/api/ApiSwitch.vue b/frontend/src/components/form/api/ApiSwitch.vue
index 4ac1b97aaf..9bb8d579a3 100644
--- a/frontend/src/components/form/api/ApiSwitch.vue
+++ b/frontend/src/components/form/api/ApiSwitch.vue
@@ -16,7 +16,7 @@ Displays a field as a e-checkbox + write access via API wrapper
       @input="wrapper.on.input"
     >
       <template #append>
-        <api-wrapper-append :wrapper="wrapper" />
+        <api-wrapper-append :wrapper="wrapper" :resettable="resettable" />
       </template>
     </e-switch>
   </api-wrapper>
diff --git a/frontend/src/components/form/api/ApiTextField.vue b/frontend/src/components/form/api/ApiTextField.vue
index cee272f12d..15b38745cd 100644
--- a/frontend/src/components/form/api/ApiTextField.vue
+++ b/frontend/src/components/form/api/ApiTextField.vue
@@ -18,7 +18,7 @@ Displays a field as a e-text-field + write access via API wrapper
       @input="wrapper.on.input"
     >
       <template #append>
-        <api-wrapper-append :wrapper="wrapper" />
+        <api-wrapper-append :wrapper="wrapper" :resettable="resettable" />
       </template>
     </e-text-field>
   </api-wrapper>
diff --git a/frontend/src/components/form/api/ApiTextarea.vue b/frontend/src/components/form/api/ApiTextarea.vue
index b5af667bc7..6533ed48f6 100644
--- a/frontend/src/components/form/api/ApiTextarea.vue
+++ b/frontend/src/components/form/api/ApiTextarea.vue
@@ -17,7 +17,7 @@ Displays a field as a e-textarea + write access via API wrapper
       @input="wrapper.on.input"
     >
       <template #append>
-        <api-wrapper-append :wrapper="wrapper" />
+        <api-wrapper-append :wrapper="wrapper" :resettable="resettable" />
       </template>
     </e-textarea>
   </api-wrapper>
diff --git a/frontend/src/components/form/api/ApiTimePicker.vue b/frontend/src/components/form/api/ApiTimePicker.vue
index dab6c55b28..cf5a31f56c 100644
--- a/frontend/src/components/form/api/ApiTimePicker.vue
+++ b/frontend/src/components/form/api/ApiTimePicker.vue
@@ -16,7 +16,7 @@ Displays a field as a time picker + write access via API wrapper
       @input="wrapper.on.input"
     >
       <template #append>
-        <api-wrapper-append :wrapper="wrapper" />
+        <api-wrapper-append :wrapper="wrapper" :resettable="resettable" />
       </template>
     </e-time-picker>
   </api-wrapper>
diff --git a/frontend/src/components/form/api/ApiWrapperAppend.vue b/frontend/src/components/form/api/ApiWrapperAppend.vue
index 17ee97cc07..ccdb23632b 100644
--- a/frontend/src/components/form/api/ApiWrapperAppend.vue
+++ b/frontend/src/components/form/api/ApiWrapperAppend.vue
@@ -1,92 +1,92 @@
 <template>
-  <div class="d-flex" style="margin-top: -5px">
+  <div class="relative">
     <!-- Success icon after saving -->
     <div class="checkIconContainer">
       <v-icon color="green" class="checkIcon" :class="checkIconAddon">
-        mdi-content-save
+        mdi-cloud-check-variant-outline
       </v-icon>
     </div>
 
-    <!-- Retry/Cancel button if saving failed -->
-    <template v-if="wrapper.hasServerError">
-      <v-tooltip bottom class="ml-auto">
-        <template #activator="{ on }">
-          <v-btn
-            fab
-            dark
-            depressed
-            x-small
-            color="error"
-            type="submit"
-            class="mr-1"
-            :aria-label="$tc('global.button.tryagain')"
-            v-on="on"
-            @click="wrapper.on.save"
-          >
-            <v-icon>mdi-refresh</v-icon>
-          </v-btn>
-        </template>
-        <span>{{ $tc('global.button.tryagain') }}</span>
-      </v-tooltip>
-      <v-tooltip bottom class="ml-auto">
-        <template #activator="{ on }">
-          <v-btn
-            fab
-            dark
-            depressed
-            x-small
-            color="grey"
-            :aria-label="$tc('global.button.cancel')"
-            v-on="on"
-            @click="wrapper.on.reset"
-          >
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
-        </template>
-        <span>{{ $tc('global.button.cancel') }}</span>
-      </v-tooltip>
-    </template>
+    <div class="d-flex gap-1" style="margin-top: -5px">
+      <!-- Retry/Cancel button if saving failed -->
+      <template v-if="wrapper.hasServerError">
+        <v-tooltip bottom class="ml-auto">
+          <template #activator="{ on }">
+            <v-btn
+              fab
+              dark
+              depressed
+              x-small
+              color="error"
+              type="submit"
+              :aria-label="$tc('global.button.tryagain')"
+              v-on="on"
+              @click="wrapper.on.save"
+            >
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+          <span>{{ $tc('global.button.tryagain') }}</span>
+        </v-tooltip>
+        <v-tooltip v-if="resettable" bottom class="ml-auto">
+          <template #activator="{ on }">
+            <v-btn
+              fab
+              dark
+              depressed
+              x-small
+              color="grey"
+              :aria-label="$tc('global.button.cancel')"
+              v-on="on"
+              @click="wrapper.on.reset"
+            >
+              <v-icon>mdi-close</v-icon>
+            </v-btn>
+          </template>
+          <span>{{ $tc('global.button.cancel') }}</span>
+        </v-tooltip>
+      </template>
 
-    <template v-else-if="!wrapper.autoSave">
-      <v-tooltip v-if="wrapper.dirty" bottom class="ml-auto">
-        <template #activator="{ on }">
-          <v-btn
-            fab
-            dark
-            depressed
-            x-small
-            color="success"
-            type="submit"
-            class="mr-1"
-            :aria-label="$tc('global.button.save')"
-            v-on="on"
-          >
-            <v-icon>mdi-check</v-icon>
-          </v-btn>
-        </template>
-        <span>{{ $tc('global.button.save') }}</span>
-      </v-tooltip>
-      <v-tooltip bottom class="ml-auto">
-        <template #activator="{ on }">
-          <v-btn
-            fab
-            dark
-            depressed
-            x-small
-            color="grey"
-            :aria-label="$tc('global.button.cancel')"
-            v-on="on"
-            @click="wrapper.on.reset"
-          >
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
-        </template>
-        <span>{{ $tc('global.button.cancel') }}</span>
-      </v-tooltip>
-    </template>
+      <template v-else-if="!wrapper.autoSave">
+        <v-tooltip v-if="wrapper.dirty" bottom class="ml-auto">
+          <template #activator="{ on }">
+            <v-btn
+              fab
+              dark
+              depressed
+              x-small
+              color="success"
+              type="submit"
+              :aria-label="$tc('global.button.save')"
+              v-on="on"
+            >
+              <v-icon>mdi-check</v-icon>
+            </v-btn>
+          </template>
+          <span>{{ $tc('global.button.save') }}</span>
+        </v-tooltip>
+        <v-tooltip v-if="resettable" bottom class="ml-auto">
+          <template #activator="{ on }">
+            <v-btn
+              fab
+              dark
+              depressed
+              x-small
+              color="grey"
+              :aria-label="$tc('global.button.cancel')"
+              v-on="on"
+              @click="wrapper.on.reset"
+            >
+              <v-icon>mdi-close</v-icon>
+            </v-btn>
+          </template>
+          <span>{{ $tc('global.button.cancel') }}</span>
+        </v-tooltip>
+      </template>
 
-    <!-- Retry button if loading failed -->
-    <button-retry v-if="wrapper.hasLoadingError" text @click="wrapper.on.reload" />
+      <!-- Retry button if loading failed -->
+      <button-retry v-if="wrapper.hasLoadingError" text @click="wrapper.on.reload" />
+    </div>
   </div>
 </template>
 
@@ -101,6 +101,10 @@ export default {
       required: true,
       type: Object,
     },
+    resettable: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     checkIconAddon() {
@@ -119,21 +123,28 @@ export default {
 <style scoped>
 .checkIconContainer {
   position: absolute;
+  right: 0;
+  margin-top: -2px;
+}
+
+.v-input--dense .checkIconContainer {
+  margin-top: 0;
 }
+
 .v-icon.checkIcon {
-  position: relative;
-  top: -11px;
-  right: 13px;
   transition: opacity 0.2s ease-out;
   opacity: 0;
 }
+
 div.v-input--checkbox .v-icon.checkIcon {
   top: 5px;
   right: 40px;
 }
+
 .v-icon.checkIcon.visible {
   opacity: 1;
 }
+
 .v-icon.checkIcon.hidden {
   transition: none;
 }

From 1bf80af950a27c754939717cb859fbb2d536f4cf Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Fri, 15 Dec 2023 17:55:45 +0100
Subject: [PATCH 7/8] Lint: Fix lint after merge

---
 frontend/src/components/form/api/ApiCheckbox.vue     |  4 +++-
 .../components/form/api/ApiWrapperSelectAppend.vue   | 12 +++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/form/api/ApiCheckbox.vue b/frontend/src/components/form/api/ApiCheckbox.vue
index 1612e91b03..fb6a76698a 100644
--- a/frontend/src/components/form/api/ApiCheckbox.vue
+++ b/frontend/src/components/form/api/ApiCheckbox.vue
@@ -62,7 +62,9 @@ export default {
   width: 24px;
   content: '\F0131';
   color: transparent;
-  transition: transform 0.2s ease-out, border-color 0.2s ease;
+  transition:
+    transform 0.2s ease-out,
+    border-color 0.2s ease;
   transform: scale(1.9);
   pointer-events: none;
 }
diff --git a/frontend/src/components/form/api/ApiWrapperSelectAppend.vue b/frontend/src/components/form/api/ApiWrapperSelectAppend.vue
index 832420680e..21afc05f8e 100644
--- a/frontend/src/components/form/api/ApiWrapperSelectAppend.vue
+++ b/frontend/src/components/form/api/ApiWrapperSelectAppend.vue
@@ -130,7 +130,9 @@ export default {
   margin-top: 0px;
   margin-left: 4px;
   transform: scale(1.2) rotate(0);
-  transition: transform 0.2s ease-out, border-color 0.2s ease;
+  transition:
+    transform 0.2s ease-out,
+    border-color 0.2s ease;
 }
 
 .ec-api-wrapper--saving .ec-api-select-append__icon {
@@ -138,12 +140,16 @@ export default {
   -webkit-mask: conic-gradient(from 0deg at 50% 50%, #0000 0%, #000);
   animation: spin-only 1s linear infinite;
   transform: scale(1) rotate(0);
-  transition: transform 0.2s ease-out, border-color 0.2s ease;
+  transition:
+    transform 0.2s ease-out,
+    border-color 0.2s ease;
 }
 
 .ec-api-wrapper--success .ec-api-select-append__icon {
   border-color: map-get($green, 'base');
-  transition: transform 0.2s ease-out, border-color 0.2s ease;
+  transition:
+    transform 0.2s ease-out,
+    border-color 0.2s ease;
   transform: scale(1) rotate(0);
 }
 </style>

From ef8055e6421b1ae49cea004ac15e4115f03fddce Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Sat, 16 Dec 2023 22:01:25 +0100
Subject: [PATCH 8/8] Try another design and fix select bugs

---
 .../src/components/activity/ScheduleEntry.vue |  27 +-
 .../src/components/form/api/ApiSelect.vue     |   4 +-
 .../src/components/form/api/ApiWrapper.vue    |  20 +-
 .../components/form/api/ApiWrapperAppend.vue  |  52 +++-
 .../form/api/ApiWrapperSelectAppend.vue       | 258 +++++++++++-------
 5 files changed, 243 insertions(+), 118 deletions(-)

diff --git a/frontend/src/components/activity/ScheduleEntry.vue b/frontend/src/components/activity/ScheduleEntry.vue
index d113ff21d8..5d776fcfd7 100644
--- a/frontend/src/components/activity/ScheduleEntry.vue
+++ b/frontend/src/components/activity/ScheduleEntry.vue
@@ -61,9 +61,19 @@ Displays a single scheduleEntry
             </v-list-item>
           </v-list>
         </v-menu>
-        <a v-if="!editActivityTitle" style="color: inherit" @click="makeTitleEditable()">
-          {{ activity.title }}
-        </a>
+        <button
+          v-if="!editActivityTitle"
+          class="ml-2 ec-activity-title"
+          @click="makeTitleEditable()"
+        >
+          {{ activity.title
+          }}<v-icon
+            right
+            size="20"
+            :aria-label="$tc('components.activity.scheduleEntry.editTitle')"
+            >mdi-pencil</v-icon
+          >
+        </button>
       </v-toolbar-title>
       <div v-if="editActivityTitle" class="mx-2 flex-grow-1">
         <api-text-field
@@ -73,6 +83,7 @@ Displays a single scheduleEntry
           dense
           autofocus
           :auto-save="false"
+          resettable
           @finished="editActivityTitle = false"
         />
       </div>
@@ -398,6 +409,16 @@ export default {
   padding: 1.5rem 16px;
 }
 
+.ec-activity-title {
+  .v-icon {
+    opacity: 0;
+  }
+
+  &:hover .v-icon {
+    opacity: 1;
+  }
+}
+
 .e-category-chip-save-icon {
   font-size: 18px;
 }
diff --git a/frontend/src/components/form/api/ApiSelect.vue b/frontend/src/components/form/api/ApiSelect.vue
index 88dfd48f8d..a614a83a99 100644
--- a/frontend/src/components/form/api/ApiSelect.vue
+++ b/frontend/src/components/form/api/ApiSelect.vue
@@ -7,6 +7,7 @@ Displays a field as a e-select + write access via API wrapper
     v-slot="wrapper"
     v-bind="$props"
     :auto-save-delay="autoSaveDelayComputed"
+    wrapper-input-type="select"
     v-on="$listeners"
   >
     <e-select
@@ -15,7 +16,7 @@ Displays a field as a e-select + write access via API wrapper
       :readonly="wrapper.readonly"
       :disabled="disabled"
       :error-messages="wrapper.errorMessages"
-      :loading="wrapper.isLoading ? 'secondary' : false"
+      :loading="wrapper.isSaving || wrapper.isLoading ? 'secondary' : false"
       :outlined="outlined"
       :filled="filled"
       :dense="dense"
@@ -23,7 +24,6 @@ Displays a field as a e-select + write access via API wrapper
       @input="wrapper.on.input"
     >
       <template #append>
-        <v-icon>mdi-menu-down</v-icon>
         <ApiWrapperSelectAppend :wrapper="wrapper" :resettable="resettable" />
       </template>
     </e-select>
diff --git a/frontend/src/components/form/api/ApiWrapper.vue b/frontend/src/components/form/api/ApiWrapper.vue
index 7aa9a93743..afe4923caf 100644
--- a/frontend/src/components/form/api/ApiWrapper.vue
+++ b/frontend/src/components/form/api/ApiWrapper.vue
@@ -5,12 +5,15 @@ Wrapper component for form components to save data back to API
 <template>
   <ValidationObserver ref="validationObserver" v-slot="validationObserver" slim>
     <v-form
-      :class="{
-        'ec-api-wrapper--inline': !autoSave && !readonly && !separateButtons,
-        'ec-api-wrapper--success': status === 'success',
-        'ec-api-wrapper--saving': status === 'saving',
-        'ec-api-wrapper--server-error': hasServerError,
-      }"
+      :class="[
+        {
+          'ec-api-wrapper--inline': !autoSave && !readonly && !separateButtons,
+          'ec-api-wrapper--success': status === 'success',
+          'ec-api-wrapper--saving': status === 'saving',
+          'ec-api-wrapper--server-error': hasServerError,
+        },
+        `ec-api-wrapper--type-${wrapperInputType}`,
+      ]"
       class="e-form-container ec-api-wrapper"
       @submit.prevent="onEnter"
     >
@@ -52,6 +55,10 @@ export default {
       type: Function,
       default: null,
     },
+    wrapperInputType: {
+      type: String,
+      default: 'none',
+    },
   },
   data() {
     return {
@@ -266,6 +273,7 @@ export default {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+
 .ec-api-wrapper--inline .v-btn {
   border-top: 1px solid rgba(0, 0, 0, 0.38);
   border-bottom: 1px solid rgba(0, 0, 0, 0.38);
diff --git a/frontend/src/components/form/api/ApiWrapperAppend.vue b/frontend/src/components/form/api/ApiWrapperAppend.vue
index ccdb23632b..d7685a38cc 100644
--- a/frontend/src/components/form/api/ApiWrapperAppend.vue
+++ b/frontend/src/components/form/api/ApiWrapperAppend.vue
@@ -2,9 +2,53 @@
   <div class="relative">
     <!-- Success icon after saving -->
     <div class="checkIconContainer">
-      <v-icon color="green" class="checkIcon" :class="checkIconAddon">
+      <v-icon
+        v-if="false"
+        color="blue-grey lighten-3"
+        class="checkIcon"
+        :class="checkIconAddon"
+      >
         mdi-cloud-check-variant-outline
       </v-icon>
+      <div v-if="checkIconVisible" class="blue-grey--text text--lighten-3">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="checkIcon"
+          width="28"
+          height="28"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.75"
+          >
+            <path
+              stroke-dasharray="60"
+              stroke-dashoffset="60"
+              d="M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
+            >
+              <animate
+                fill="freeze"
+                attributeName="stroke-dashoffset"
+                dur="0.5s"
+                values="60;0"
+              />
+            </path>
+            <path stroke-dasharray="14" stroke-dashoffset="14" d="M8 12L11 15L16 10">
+              <animate
+                fill="freeze"
+                attributeName="stroke-dashoffset"
+                begin="0.6s"
+                dur="0.2s"
+                values="14;0"
+              />
+            </path>
+          </g>
+        </svg>
+      </div>
     </div>
 
     <div class="d-flex gap-1" style="margin-top: -5px">
@@ -116,6 +160,12 @@ export default {
         return ''
       }
     },
+    checkIconVisible() {
+      return (
+        !(this.wrapper.hasServerError || this.wrapper.dirty) &&
+        this.wrapper.status === 'success'
+      )
+    },
   },
 }
 </script>
diff --git a/frontend/src/components/form/api/ApiWrapperSelectAppend.vue b/frontend/src/components/form/api/ApiWrapperSelectAppend.vue
index 21afc05f8e..a6a0693ed1 100644
--- a/frontend/src/components/form/api/ApiWrapperSelectAppend.vue
+++ b/frontend/src/components/form/api/ApiWrapperSelectAppend.vue
@@ -1,88 +1,146 @@
 <template>
-  <div class="ec-api-select-append">
-    <!-- Success icon after saving -->
-    <div class="ec-api-select-append__icon"></div>
-
-    <div class="d-flex gap-1" style="margin-top: -5px">
-      <!-- Retry/Cancel button if saving failed -->
-      <template v-if="wrapper.hasServerError">
-        <v-tooltip bottom class="ml-auto">
-          <template #activator="{ on }">
-            <v-btn
-              fab
-              dark
-              depressed
-              x-small
-              color="error"
-              type="submit"
-              :aria-label="$tc('global.button.tryagain')"
-              v-on="on"
-              @click="wrapper.on.save"
-            >
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-          </template>
-          <span>{{ $tc('global.button.tryagain') }}</span>
-        </v-tooltip>
-        <v-tooltip v-if="resettable" bottom class="ml-auto">
-          <template #activator="{ on }">
-            <v-btn
-              fab
-              dark
-              depressed
-              x-small
-              color="grey"
-              :aria-label="$tc('global.button.cancel')"
-              v-on="on"
-              @click="wrapper.on.reset"
+  <div class="ec-api-select-append d-contents">
+    <v-icon v-if="!checkIconVisible">mdi-menu-down</v-icon>
+    <div>
+      <!-- Success icon after saving -->
+      <div class="ec-api-select-append__icon">
+        <svg
+          v-if="checkIconVisible"
+          xmlns="http://www.w3.org/2000/svg"
+          class="checkIcon blue-grey--text text--lighten-3"
+          style="margin-top: -3px; margin-right: -1px"
+          width="28"
+          height="28"
+          viewBox="0 0 24 24"
+        >
+          <g
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.75"
+          >
+            <path
+              stroke-dasharray="60"
+              stroke-dashoffset="60"
+              d="M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
             >
-              <v-icon>mdi-close</v-icon>
-            </v-btn>
-          </template>
-          <span>{{ $tc('global.button.cancel') }}</span>
-        </v-tooltip>
-      </template>
+              <animate
+                fill="freeze"
+                attributeName="stroke-dashoffset"
+                dur="0.5s"
+                values="60;0"
+              />
+            </path>
+            <path stroke-dasharray="14" stroke-dashoffset="14" d="M8 12L11 15L16 10">
+              <animate
+                fill="freeze"
+                attributeName="stroke-dashoffset"
+                begin="0.6s"
+                dur="0.2s"
+                values="14;0"
+              />
+            </path>
+          </g>
+        </svg>
+      </div>
 
-      <template v-else-if="!wrapper.autoSave">
-        <v-tooltip v-if="wrapper.dirty" bottom class="ml-auto">
-          <template #activator="{ on }">
-            <v-btn
-              fab
-              dark
-              depressed
-              x-small
-              color="success"
-              type="submit"
-              class="mr-1"
-              :aria-label="$tc('global.button.save')"
-              v-on="on"
-            >
-              <v-icon>mdi-check</v-icon>
-            </v-btn>
-          </template>
-          <span>{{ $tc('global.button.save') }}</span>
-        </v-tooltip>
-        <v-tooltip v-if="resettable" bottom class="ml-auto">
-          <template #activator="{ on }">
-            <v-btn
-              fab
-              dark
-              depressed
-              x-small
-              color="grey"
-              :aria-label="$tc('global.button.cancel')"
-              v-on="on"
-              @click="wrapper.on.reset"
-            >
-              <v-icon>mdi-close</v-icon>
-            </v-btn>
-          </template>
-          <span>{{ $tc('global.button.cancel') }}</span>
-        </v-tooltip>
-      </template>
+      <div class="d-flex gap-1" style="margin-top: -5px">
+        <!-- Retry/Cancel button if saving failed -->
+        <template v-if="wrapper.hasServerError">
+          <v-tooltip bottom class="ml-auto">
+            <template #activator="{ on }">
+              <v-btn
+                fab
+                dark
+                depressed
+                x-small
+                color="error"
+                type="submit"
+                :aria-label="$tc('global.button.tryagain')"
+                v-on="on"
+                @mousedown.stop
+                @mouseup.stop
+                @click.stop="wrapper.on.save"
+              >
+                <v-icon>mdi-refresh</v-icon>
+              </v-btn>
+            </template>
+            <span>{{ $tc('global.button.tryagain') }}</span>
+          </v-tooltip>
+          <v-tooltip v-if="resettable" bottom class="ml-auto">
+            <template #activator="{ on }">
+              <v-btn
+                fab
+                dark
+                depressed
+                x-small
+                color="grey"
+                :aria-label="$tc('global.button.cancel')"
+                v-on="on"
+                @mousedown.stop
+                @mouseup.stop
+                @click.stop="wrapper.on.reset"
+              >
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </template>
+            <span>{{ $tc('global.button.cancel') }}</span>
+          </v-tooltip>
+        </template>
+
+        <template v-else-if="!wrapper.autoSave">
+          <v-tooltip v-if="wrapper.dirty" bottom class="ml-auto">
+            <template #activator="{ on }">
+              <v-btn
+                fab
+                dark
+                depressed
+                x-small
+                color="success"
+                type="submit"
+                class="mr-1"
+                :aria-label="$tc('global.button.save')"
+                v-on="on"
+                @mousedown.stop
+                @mouseup.stop
+                @click.stop="wrapper.on.save"
+              >
+                <v-icon>mdi-check</v-icon>
+              </v-btn>
+            </template>
+            <span>{{ $tc('global.button.save') }}</span>
+          </v-tooltip>
+          <v-tooltip v-if="resettable" bottom class="ml-auto">
+            <template #activator="{ on }">
+              <v-btn
+                fab
+                dark
+                depressed
+                x-small
+                color="grey"
+                :aria-label="$tc('global.button.cancel')"
+                v-on="on"
+                @mousedown.stop
+                @mouseup.stop
+                @click.stop="wrapper.on.reset"
+              >
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </template>
+            <span>{{ $tc('global.button.cancel') }}</span>
+          </v-tooltip>
+        </template>
 
-      <!-- Retry button if loading failed -->
-      <button-retry v-if="wrapper.hasLoadingError" text @click="wrapper.on.reload" />
+        <!-- Retry button if loading failed -->
+        <button-retry
+          v-if="wrapper.hasLoadingError"
+          text
+          @click.stop="wrapper.on.reload"
+          @mousedown.stop
+          @mouseup.stop
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -117,39 +175,27 @@ export default {
         return ''
       }
     },
+    checkIconVisible() {
+      return (
+        !(this.wrapper.hasServerError || this.wrapper.dirty) &&
+        this.wrapper.status === 'success'
+      )
+    },
   },
 }
 </script>
 
 <style lang="scss" scoped>
-.ec-api-select-append__icon {
-  border-radius: 50%;
-  border: 2px solid transparent;
-  position: absolute;
-  inset: 0px;
-  margin-top: 0px;
-  margin-left: 4px;
-  transform: scale(1.2) rotate(0);
-  transition:
-    transform 0.2s ease-out,
-    border-color 0.2s ease;
+.ec-api-select-append__check {
+  opacity: 0;
 }
 
-.ec-api-wrapper--saving .ec-api-select-append__icon {
-  border-color: map-get($blue, 'darken-2');
-  -webkit-mask: conic-gradient(from 0deg at 50% 50%, #0000 0%, #000);
-  animation: spin-only 1s linear infinite;
-  transform: scale(1) rotate(0);
-  transition:
-    transform 0.2s ease-out,
-    border-color 0.2s ease;
+.ec-api-wrapper--success .ec-api-select-append__check {
+  opacity: 1;
 }
 
-.ec-api-wrapper--success .ec-api-select-append__icon {
-  border-color: map-get($green, 'base');
-  transition:
-    transform 0.2s ease-out,
-    border-color 0.2s ease;
-  transform: scale(1) rotate(0);
+.ec-api-wrapper--success.ec-api-wrapper--type-select .mdi-menu-down {
+  transition: opacity 0.2s ease;
+  opacity: 0;
 }
 </style>