From a2744288a5d98a27adb8a43607fd8128eb128e4a Mon Sep 17 00:00:00 2001
From: silverpill <silverpill@firemail.cc>
Date: Sun, 25 Sep 2022 23:05:42 +0000
Subject: [PATCH] Add button for removing attachment from post form

---
 src/assets/feather/x.svg      |  1 +
 src/components/PostEditor.vue | 41 ++++++++++++++++++++++++++++++-----
 2 files changed, 37 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/feather/x.svg

diff --git a/src/assets/feather/x.svg b/src/assets/feather/x.svg
new file mode 100644
index 0000000..425248c
--- /dev/null
+++ b/src/assets/feather/x.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
\ No newline at end of file
diff --git a/src/components/PostEditor.vue b/src/components/PostEditor.vue
index 01dc1a8..868e97e 100644
--- a/src/components/PostEditor.vue
+++ b/src/components/PostEditor.vue
@@ -16,8 +16,17 @@
         required
         :placeholder="inReplyTo ? 'Your reply' : 'What\'s on your mind?'"
       ></textarea>
-      <div v-if="attachment" class="attachment">
-        <img :src="attachment.url">
+      <div v-if="attachment" class="attachments">
+        <div class="attachment">
+          <button
+            class="remove-attachment"
+            title="Remove attachment"
+            @click.prevent="removeAttachment()"
+          >
+            <img :src="require('@/assets/feather/x.svg')">
+          </button>
+          <img :src="attachment.url">
+        </div>
       </div>
       <div class="toolbar">
         <button
@@ -42,7 +51,7 @@
           <button
             type="button"
             class="icon"
-            title="Post visibility"
+            title="Change visibility"
             @click="toggleVisibilityMenu()"
           >
             <visibility-icon :visibility="visibility"></visibility-icon>
@@ -179,6 +188,10 @@ async function onAttachmentUpload(event: Event) {
   )
 }
 
+function removeAttachment() {
+  attachment = null
+}
+
 function toggleVisibilityMenu() {
   visibilityMenuVisible = !visibilityMenuVisible
 }
@@ -269,10 +282,28 @@ textarea {
   width: 100%;
 }
 
-.attachment {
+.attachments {
   padding: calc($block-inner-padding / 1.5) $block-inner-padding;
+}
 
-  img {
+.attachment {
+  position: relative;
+
+  .remove-attachment {
+    background-color: $btn-background-color;
+    display: flex;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    img {
+      filter: $btn-text-colorizer;
+      height: $icon-size;
+      width: $icon-size;
+    }
+  }
+
+  > img {
     width: 100%;
   }
 }