upgrade create from image visuals

frontend/assets/css/main.css

@@ -64,3 +64,7 @@ a {
 .fill-height {
   min-height: 100vh;
 }
+
+.vue-simple-handler {
+  background-color: rgb(var(--v-theme-primary)) !important;
+}

frontend/components/global/ImageCropper.vue

@@ -1,10 +1,42 @@
 <template>
-  <v-container class="pa-0">
-    <v-row no-gutters>
-      <v-col
-        cols="8"
-        align-self="center"
+  <v-card class="ma-0 pt-2" :elevation="4">
+    <v-card-text>
+      <!-- Controls Row (Menu) -->
+      <v-row class="mb-2 mx-1">
+        <v-btn
+          color="error"
+          :icon="$globals.icons.delete"
+          @click="$emit('delete')"
+        />
+        <v-spacer />
+        <v-menu offset-y>
+          <template #activator="{ props }">
+            <v-btn color="info" v-bind="props" :icon="$globals.icons.edit" />
+          </template>
+          <v-list>
+            <template v-for="(row, keyRow) in controls" :key="keyRow">
+              <v-list-item-group>
+                <v-list-item
+                  v-for="(control, keyControl) in row"
+                  :key="keyControl"
+                  @click="control.callback()"
                 >
+                  <v-list-item-icon>
+                    <v-icon :color="control.color">
+                      {{ control.icon }}
+                    </v-icon>
+                  </v-list-item-icon>
+                  <v-list-item-content>
+                    <!-- Optionally, you can add a label here if you want -->
+                  </v-list-item-content>
+                </v-list-item>
+              </v-list-item-group>
+            </template>
+          </v-list>
+        </v-menu>
+      </v-row>
+
+      <!-- Image Row -->
       <Cropper
         ref="cropper"
         class="cropper"
@@ -12,37 +44,8 @@
         :default-size="defaultSize"
         :style="`height: ${cropperHeight}; width: ${cropperWidth};`"
       />
-      </v-col>
-      <v-spacer />
-      <v-col
-        cols="2"
-        align-self="center"
-      >
-        <v-container class="pa-0 mx-0">
-          <v-row
-            v-for="(row, keyRow) in controls"
-            :key="keyRow"
-          >
-            <v-col
-              v-for="(control, keyControl) in row"
-              :key="keyControl"
-              :cols="12 / row.length"
-              class="py-2 mx-0"
-              style="display: flex; align-items: center; justify-content: center;"
-            >
-              <v-btn
-                icon
-                :color="control.color"
-                @click="control.callback()"
-              >
-                <v-icon> {{ control.icon }} </v-icon>
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-col>
-    </v-row>
-  </v-container>
+    </v-card-text>
+  </v-card>
 </template>
 
 <script lang="ts">
@@ -65,9 +68,9 @@ export default defineNuxtComponent({
       default: undefined,
     },
   },
-  emits: ["save"],
+  emits: ["save", "delete"],
   setup(_, context) {
-    const cropper = ref<Cropper>();
+    const cropper = ref<any>();
     const { $globals } = useNuxtApp();
 
     interface Control {
@@ -153,7 +156,6 @@ export default defineNuxtComponent({
   },
 
   methods: {
-    // @ts-expect-error https://advanced-cropper.github.io/vue-advanced-cropper/guides/advanced-recipes.html
     defaultSize({ imageSize, visibleArea }) {
       return {
         width: (visibleArea || imageSize).width,

frontend/pages/g/[groupSlug]/r/create/image.vue

@@ -7,9 +7,7 @@
         </v-card-title>
         <v-card-text>
           <p>{{ $t("recipe.create-recipe-from-an-image-description") }}</p>
-          <v-container class="pa-0">
-            <v-row>
-              <v-col cols="auto" align-self="center">
+          <v-container class="px-0">
             <AppButtonUpload
               class="ml-auto"
               url="none"
@@ -20,48 +18,36 @@
               :post="false"
               @uploaded="uploadImage"
             />
-              </v-col>
-              <v-spacer />
-            </v-row>
 
             <div v-if="uploadedImages.length > 0" class="mt-3">
-              <v-row>
-                <v-col cols="12" class="pb-0">
-                  <v-card-text class="pa-0">
-                    <p class="mb-0">
+              <p class="my-2">
                 {{ $t("recipe.crop-and-rotate-the-image") }}
               </p>
-                  </v-card-text>
-                </v-col>
-              </v-row>
-              <v-row style="max-width: 600px">
-                <v-spacer />
-                <v-col v-for="(imageUrl, index) in uploadedImagesPreviewUrls" :key="index" cols="12">
+
               <v-row>
-                    <v-col cols="auto" align-self="center">
+                <v-col
+                  v-for="(imageUrl, index) in uploadedImagesPreviewUrls"
+                  :key="index"
+                  cols="12"
+                  sm="6"
+                  lg="4"
+                  xl="3"
+                >
                   <ImageCropper
                     :img="imageUrl"
                     cropper-height="100%"
                     cropper-width="100%"
+                    class="mt-4"
                     @save="(croppedImage) => updateUploadedImage(index, croppedImage)"
+                    @delete="clearImage(index)"
                   />
-
-                      <v-btn color="error" @click="() => clearImage(index)">
-                        <v-icon start>
-                          {{ $globals.icons.close }}
-                        </v-icon>
-                        {{ $t("recipe.remove-image") }}
-                      </v-btn>
                 </v-col>
               </v-row>
-                </v-col>
-                <v-spacer />
-              </v-row>
             </div>
           </v-container>
         </v-card-text>
         <v-card-actions v-if="uploadedImages.length > 0">
-          <div>
+          <div class="w-100 d-flex flex-column align-center">
             <p style="width: 250px">
               <BaseButton rounded block type="submit" :loading="loading" />
             </p>