From 215ca531847050e91e3d720c92bfc997b391d517 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Thu, 29 Mar 2018 13:36:47 +0900
Subject: [PATCH] refs #118 Show preview of attached image in new toot

---
 .../TimelineSpace/Modals/NewToot.vue          | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot.vue b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
index 8454d266..324c5447 100644
--- a/src/renderer/components/TimelineSpace/Modals/NewToot.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
@@ -9,6 +9,12 @@
         <textarea v-model="status" ref="status" @keyup.meta.enter.exact="toot" @keyup.ctrl.enter.exact="toot" @keyup.enter.exact="enter" @keydown="keydown" @keyup="keyup"></textarea>
       </div>
     </el-form>
+    <div class="preview">
+      <div class="image-wrapper" v-for="media in attachedMedias" v-on:key="media.id">
+        <img :src="media.preview_url" class="preview-image" />
+        <icon class="remove-image" name="times-circle" @click="removeAttachment(media)"></icon>
+      </div>
+    </div>
     <div slot="footer" class="dialog-footer">
       <div class="upload-image">
         <el-button size="small" type="text" @click="selectImage"><icon name="camera"></icon></el-button>
@@ -148,6 +154,9 @@ export default {
             type: 'error'
           })
         })
+    },
+    removeAttachment (media) {
+      // TODO:
     }
   }
 }
@@ -188,6 +197,27 @@ export default {
         outline: 0;
       }
     }
+
+    .preview {
+      box-sizing: border-box;
+      padding: 0 12px;
+
+      .image-wrapper {
+        position: relative;
+        display: inline-block;
+
+        .preview-image {
+          width: 60px;
+        }
+
+        .remove-image {
+          position: absolute;
+          top: 0;
+          left: 0;
+          cursor: pointer;
+        }
+      }
+    }
   }
 
   .el-dialog__footer {