From 8d489b92990aaa1d4356220a5ce45f56b8edb5f2 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 18 Mar 2021 21:59:16 +0800
Subject: feat: Delete image.

---
 .../app/views/timeline-common/MarkdownPostEdit.tsx   | 20 +++++++++++++++-----
 .../app/views/timeline-common/timeline-common.sass   | 10 ++++++++++
 2 files changed, 25 insertions(+), 5 deletions(-)

(limited to 'FrontEnd/src')

diff --git a/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx b/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx
index f4351db0..68dee848 100644
--- a/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx
+++ b/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx
@@ -139,12 +139,22 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
             tabText: "image",
             page: (
               <div className="timeline-markdown-post-edit-page">
-                {images.map((image) => (
-                  <img
+                {images.map((image, index) => (
+                  <div
                     key={image.url}
-                    src={image.url}
-                    className="timeline-markdown-post-edit-image"
-                  />
+                    className="timeline-markdown-post-edit-image-container"
+                  >
+                    <img
+                      src={image.url}
+                      className="timeline-markdown-post-edit-image"
+                    />
+                    <i
+                      className="bi-trash text-danger icon-button timeline-markdown-post-edit-image-delete-button"
+                      onClick={() => {
+                        getBuilder().deleteImage(index);
+                      }}
+                    />
+                  </div>
                 ))}
                 <Form.File
                   label={t("chooseImage")}
diff --git a/FrontEnd/src/app/views/timeline-common/timeline-common.sass b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
index 04318674..0d172327 100644
--- a/FrontEnd/src/app/views/timeline-common/timeline-common.sass
+++ b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
@@ -175,6 +175,16 @@ $timeline-line-color-current: #36c2e6
   overflow: scroll
   max-height: 300px
 
+.timeline-markdown-post-edit-image-container
+  position: relative
+  text-align: center
+  margin-bottom: 1em
+
 .timeline-markdown-post-edit-image
   max-width: 100%
   max-height: 200px
+
+.timeline-markdown-post-edit-image-delete-button
+  position: absolute
+  right: 10px
+  top: 2px
-- 
cgit v1.2.3