From 4d232449b1b9a3367d57a57e34c6bf0d0761f4f7 Mon Sep 17 00:00:00 2001
From: Kuchenpirat <jojow@gmx.net>
Date: Sun, 29 Jun 2025 13:18:56 +0000
Subject: [PATCH] move save button out of menu

---
 frontend/components/global/ImageCropper.vue | 25 ++++++++++++---------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/frontend/components/global/ImageCropper.vue b/frontend/components/global/ImageCropper.vue
index b3b938b37..785e4d4dc 100644
--- a/frontend/components/global/ImageCropper.vue
+++ b/frontend/components/global/ImageCropper.vue
@@ -10,6 +10,14 @@
           @click="$emit('delete')"
         />
         <v-spacer />
+        <v-btn
+          v-if="changed"
+          class="mr-2"
+          color="success"
+          :icon="$globals.icons.save"
+          :disabled="submitted"
+          @click="() => save()"
+        />
         <v-menu offset-y :close-on-content-click="false">
           <template #activator="{ props }">
             <v-btn color="info" v-bind="props" :icon="$globals.icons.edit" :disabled="submitted" />
@@ -40,6 +48,8 @@
         :src="img"
         :default-size="defaultSize"
         :style="`height: ${cropperHeight}; width: ${cropperWidth};`"
+        @change="changed = changed + 1"
+        @ready="changed = -1"
       />
     </v-card-text>
   </v-card>
@@ -72,6 +82,7 @@ export default defineNuxtComponent({
   emits: ["save", "delete"],
   setup(_, context) {
     const cropper = ref<any>();
+    const changed = ref(0);
     const { $globals } = useNuxtApp();
 
     interface Control {
@@ -105,41 +116,32 @@ export default defineNuxtComponent({
           callback: () => rotate(90),
         },
       ],
-      [
-        {
-          color: "success",
-          icon: $globals.icons.save,
-          callback: () => save(),
-        },
-      ],
     ]);
 
     function flip(hortizontal: boolean, vertical?: boolean) {
       if (!cropper.value) {
         return;
       }
-
       cropper.value.flip(hortizontal, vertical);
+      changed.value = changed.value + 1;
     }
 
     function rotate(angle: number) {
       if (!cropper.value) {
         return;
       }
-
       cropper.value.rotate(angle);
+      changed.value = changed.value + 1;
     }
 
     function save() {
       if (!cropper.value) {
         return;
       }
-
       const { canvas } = cropper.value.getResult();
       if (!canvas) {
         return;
       }
-
       canvas.toBlob((blob) => {
         if (blob) {
           context.emit("save", blob);
@@ -153,6 +155,7 @@ export default defineNuxtComponent({
       flip,
       rotate,
       save,
+      changed,
     };
   },