From 0f7b8591cf51d9161bedf3b237f0c92be24fe452 Mon Sep 17 00:00:00 2001
From: Thomas Haaf <thomas@smart-sign.com>
Date: Fri, 14 Jun 2024 17:34:10 +0200
Subject: [PATCH] cleanup drag/drop images

---
 client/src/components/ImagePreview.vue | 46 +++++++++++++++++++++++---
 client/src/i18n/de.json                |  5 +--
 client/src/i18n/en.json                |  3 +-
 client/src/views/PostFormView.vue      |  9 ++++-
 4 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/client/src/components/ImagePreview.vue b/client/src/components/ImagePreview.vue
index d7eff20..99d2a92 100644
--- a/client/src/components/ImagePreview.vue
+++ b/client/src/components/ImagePreview.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="preview-container">
+    <div class="erase" @click="$emit('delete')" :title="t('app.base.delete_image')"></div>
     <div class="img-container">
       <img :src="dataUrl" v-on:dragstart="onDragStart($event)" :draggable="showPaste" />
     </div>
@@ -12,21 +13,58 @@
           type="button"
           v-if="showPaste"
           @click="$emit('paste', getMarkdownString())"
-          :title="t('app.base.insert')"
+          :title="t('app.base.insert_image')"
         >
           <fa-icon :icon="faFileImport"></fa-icon>
         </button>
         <button class="btn btn-softdelete mx-1" type="button" v-if="showDelete" @click="$emit('softdelete')" :title="t('app.base.remove')">
           <fa-icon :icon="faEraser"></fa-icon>
         </button>
-        <button class="btn btn-delete mx-1" type="button" v-if="showDelete" @click="$emit('delete')" :title="t('app.base.delete_image')">
+        <!-- <button class="btn btn-delete mx-1" type="button" v-if="showDelete" @click="$emit('delete')"
+          :title="t('app.base.delete_image')">
           <fa-icon :icon="faTrash"></fa-icon>
-        </button>
+        </button> -->
       </div>
     </div>
   </div>
 </template>
 <style scoped lang="scss">
+.erase {
+  width: 16px;
+  height: 16px;
+  right: -7px;
+  top: -7px;
+
+  display: block;
+  position: absolute;
+  z-index: 999;
+  background-color: #333;
+  border: 1px solid #555;
+  border-radius: 50%;
+  cursor: pointer;
+  transition-duration: 0.4s;
+
+  &:hover {
+    transition-duration: 0.4s;
+    background-color: #a00;
+  }
+
+  &:before {
+    position: absolute;
+    top: 0;
+    left: calc(50% - 3px);
+    z-index: 1000;
+    content: "\d7";
+    line-height: 12px;
+    font-size: 12px;
+    padding: 0;
+    margin: 0;
+    transform: scale(1.25);
+    color: #fff;
+    text-align: center;
+  }
+}
+
 .preview-container {
   width: 150px;
   margin: 0;
@@ -69,7 +107,7 @@
   }
 
   &:not(:last-child) {
-    margin-right: 10px;
+    margin-right: 15px;
   }
 
   .img-container {
diff --git a/client/src/i18n/de.json b/client/src/i18n/de.json
index 9e9ef67..fdf18a4 100644
--- a/client/src/i18n/de.json
+++ b/client/src/i18n/de.json
@@ -23,7 +23,7 @@
       "save": "Speichern",
       "cancel": "Abbrechen",
       "edit": "Bearbeiten",
-      "insert": "Einfügen",
+      "insert_image": "Bild einfügen",
       "delete": "Löschen",
       "delete_image": "Bild löschen",
       "remove": "Bildrefernz aus Text entfernen",
@@ -62,7 +62,8 @@
         "tags": "Schlagworte",
         "enter": "Geben Sie Schlagworte ein..."
       },
-      "imageupload": "keine angehängten Bilder | ein angehängtes Bild | {count} angehängte Bilder"
+      "imageupload": "keine angehängten Bilder | ein angehängtes Bild | {count} angehängte Bilder",
+      "imageupload_hint": "(Bild per Drag & Drop in den Text ziehen)"
     },
     "confirm": {
       "title": "Löschen bestätigen",
diff --git a/client/src/i18n/en.json b/client/src/i18n/en.json
index 5ea9216..c9353d2 100644
--- a/client/src/i18n/en.json
+++ b/client/src/i18n/en.json
@@ -23,7 +23,7 @@
       "save": "Save",
       "cancel": "Cancel",
       "edit": "Edit",
-      "insert": "Insert",
+      "insert_image": "Insert image",
       "delete_image": "Delete image",
       "remove": "Remove image reference from text",
       "read": "Read",
@@ -58,6 +58,7 @@
         "title": "Preview"
       },
       "imageupload": "Upload image",
+      "imageupload_hint": "(drag onto textarea to insert)",
       "tags": "Tags"
     },
     "confirm": {
diff --git a/client/src/views/PostFormView.vue b/client/src/views/PostFormView.vue
index 0254175..ee8b0ec 100644
--- a/client/src/views/PostFormView.vue
+++ b/client/src/views/PostFormView.vue
@@ -67,6 +67,8 @@
                   <small class="text-body-secondary f-4" v-if="Object.keys(files).length > 0">
                     ({{ convertToHumanReadableFileSize(totalBytesInFiles) }})
                   </small>
+
+                  <span class="tiny">{{ t("posts.form.imageupload_hint") }}</span>
                 </h4>
                 <!-- Hidden file input, used to open the file dialog, when the dropzone is clicked -->
                 <input
@@ -141,6 +143,10 @@
 </template>
 
 <style lang="scss">
+.tiny {
+  font-size: 0.75rem;
+  color: #6c757d;
+}
 .post-bg {
   background-image: url("@client/assets/images/post-bg.jpg");
   background-repeat: no-repeat;
@@ -171,7 +177,8 @@
   padding: 0;
   overflow-x: auto;
   height: auto;
-  min-height: 270px;
+  min-height: 280px;
+  padding-top: 10px;
 }
 
 .inner {