From b1b3fd78f9ac74d631a7599ac1fd7e1d5e1b85db Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Mon, 25 Apr 2022 18:20:18 +0900
Subject: [PATCH] Fix design modals

---
 .../Contents/SideBar/AccountProfile.vue       |  68 +--
 .../TimelineSpace/Modals/AddListMember.vue    |  61 +-
 .../TimelineSpace/Modals/ImageViewer.vue      |  14 +-
 .../TimelineSpace/Modals/NewToot.vue          | 565 +++++++++---------
 .../TimelineSpace/Modals/NewToot/Quote.vue    |  46 +-
 .../TimelineSpace/Modals/NewToot/Status.vue   |  70 ++-
 .../TimelineSpace/Modals/Report.vue           |  10 +-
 .../TimelineSpace/Modals/Shortcut.vue         | 162 ++---
 src/renderer/components/organisms/Toot.vue    |   7 -
 src/renderer/main.js                          |   4 +
 10 files changed, 505 insertions(+), 502 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
index 94495dac..9b1b3e11 100644
--- a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
@@ -22,17 +22,17 @@
               @click="unsubscribe(account)"
               :title="$t('side_bar.account_profile.unsubscribe')"
             >
-              <font-awesome-icon icon="bell" size="xl" />
+              <font-awesome-icon icon="bell" size="lg" />
             </div>
             <div v-else class="subscribe" @click="subscribe(account)" :title="$t('side_bar.account_profile.subscribe')">
-              <font-awesome-icon :icon="['far', 'bell']" size="xl" />
+              <font-awesome-icon :icon="['far', 'bell']" size="lg" />
             </div>
           </div>
         </div>
 
         <div class="user-info">
           <div class="more" v-if="relationship !== null && relationship !== '' && !isOwnProfile">
-            <el-popover placement="bottom" width="200" trigger="click" ref="popper">
+            <el-popover placement="bottom" width="200" trigger="click" popper-class="account-menu-popper">
               <ul class="menu-list">
                 <li role="button" @click="openBrowser(account)">
                   {{ $t('side_bar.account_profile.open_in_browser') }}
@@ -229,29 +229,23 @@ export default {
     },
     openBrowser(account) {
       window.shell.openExternal(account.url)
-      this.$refs.popper.doClose()
     },
     addToList(account) {
       this.$store.dispatch('TimelineSpace/Modals/ListMembership/setAccount', account)
       this.$store.dispatch('TimelineSpace/Modals/ListMembership/changeModal', true)
-      this.$refs.popper.doClose()
     },
     confirmMute(account) {
       this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeAccount', account)
       this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeModal', true)
-      this.$refs.popper.doClose()
     },
     unmute(account) {
       this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/unmute', account)
-      this.$refs.popper.doClose()
     },
     block(account) {
       this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/block', account)
-      this.$refs.popper.doClose()
     },
     unblock(account) {
       this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/unblock', account)
-      this.$refs.popper.doClose()
     },
     metadataClick(e) {
       const link = findLink(e.target, 'metadata')
@@ -344,34 +338,6 @@ export default {
         }
       }
 
-      .more {
-        .popper {
-          padding: 2px 0;
-          border-color: #909399;
-        }
-
-        .menu-list {
-          padding: 0;
-          font-size: calc(var(--base-font-size) * 0.9);
-          list-style-type: none;
-          line-height: 32px;
-          text-align: left;
-          color: #303133;
-          margin: 4px 0;
-
-          li {
-            box-sizing: border-box;
-            padding: 0 32px 0 16px;
-
-            &:hover {
-              background-color: #409eff;
-              color: #fff;
-              cursor: pointer;
-            }
-          }
-        }
-      }
-
       .icon {
         padding: 12px;
 
@@ -517,3 +483,31 @@ export default {
   }
 }
 </style>
+
+<style lang="scss">
+.account-menu-popper {
+  padding: 2px 0 !important;
+  border-color: #909399;
+
+  .menu-list {
+    padding: 0;
+    font-size: calc(var(--base-font-size) * 0.9);
+    list-style-type: none;
+    line-height: 32px;
+    text-align: left;
+    color: #303133;
+    margin: 4px 0;
+
+    li {
+      box-sizing: border-box;
+      padding: 0 32px 0 16px;
+
+      &:hover {
+        background-color: #409eff;
+        color: #fff;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/renderer/components/TimelineSpace/Modals/AddListMember.vue b/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
index d69d49da..a641e06a 100644
--- a/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
+++ b/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
@@ -1,34 +1,36 @@
 <template>
-  <el-dialog :title="$t('modals.add_list_member.title')" :model-value="addListMemberModal" width="400px" class="add-member">
-    <div class="search-account" :element-loading-background="loadingBackground">
-      <el-form :inline="true">
-        <input v-model="name" placeholder="Account name" class="account-name" autofocus />
-        <el-button type="text" class="search" @click="search">
-          <font-awesome-icon icon="magnifying-glass" />
-        </el-button>
-      </el-form>
-      <div class="search-results">
-        <template v-for="user in accounts">
-          <div class="user">
-            <div class="icon">
-              <img :src="user.avatar" />
-            </div>
-            <div class="name">
-              <div class="username">
-                {{ username(user) }}
+  <div class="add-member">
+    <el-dialog :title="$t('modals.add_list_member.title')" :model-value="addListMemberModal" width="400px" custom-class="add-member-modal">
+      <div class="search-account" :element-loading-background="loadingBackground">
+        <el-form :inline="true">
+          <input v-model="name" placeholder="Account name" class="account-name" autofocus />
+          <el-button type="text" class="search" @click="search">
+            <font-awesome-icon icon="magnifying-glass" />
+          </el-button>
+        </el-form>
+        <div class="search-results">
+          <template v-for="user in accounts">
+            <div class="user">
+              <div class="icon">
+                <img :src="user.avatar" />
+              </div>
+              <div class="name">
+                <div class="username">
+                  {{ username(user) }}
+                </div>
+                <div class="acct">@{{ user.acct }}</div>
+              </div>
+              <div class="add">
+                <el-button type="text" @click="add(user)">
+                  <font-awesome-icon icon="plus" />
+                </el-button>
               </div>
-              <div class="acct">@{{ user.acct }}</div>
             </div>
-            <div class="add">
-              <el-button type="text" @click="add(user)">
-                <font-awesome-icon icon="plus" />
-              </el-button>
-            </div>
-          </div>
-        </template>
+          </template>
+        </div>
       </div>
-    </div>
-  </el-dialog>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
@@ -86,9 +88,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.add-member /deep/ {
+.add-member :deep() {
   .el-dialog__header {
     background-color: var(--theme-header-menu-color);
+    margin-right: 0;
 
     .el-dialog__title {
       color: var(--theme-secondary-color);
@@ -100,7 +103,9 @@ export default {
     color: var(--theme-secondary-color);
     padding: 8px 12px 30px;
   }
+}
 
+.add-member-modal {
   .search-account {
     background-color: var(--theme-selected-background-color);
 
diff --git a/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue b/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
index 13c949e3..f2c4b508 100644
--- a/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
+++ b/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="image-viewer">
-    <div id="image" v-show="modalOpen" @click="close" :aria-hidden="!modalOpen" aria-modal="true" role="dialog">
+    <div id="image" v-show="modalOpen" :aria-hidden="!modalOpen" aria-modal="true" role="dialog">
       <div class="image-wrapper">
         <div class="image-header">
           <el-button type="text" @click="close" class="close-button">
@@ -9,11 +9,11 @@
         </div>
         <div class="image-content" role="presentation">
           <span class="button-area"
-            ><el-button type="text"> <font-awesome-icon icon="arrow-left" /> </el-button
+            ><el-button type="text" v-show="showLeft" @click="decrementIndex()"> <font-awesome-icon icon="angle-left" /> </el-button
           ></span>
           <Media :src="imageURL" :type="imageType"></Media>
           <span class="button-area"
-            ><el-button type="text"> <font-awesome-icon icon="arrow-right" /> </el-button
+            ><el-button type="text" v-show="showRight" @click="incrementIndex()"> <font-awesome-icon icon="angle-right" /> </el-button
           ></span>
         </div>
       </div>
@@ -107,11 +107,13 @@ export default {
 .image-viewer-leave-to {
   opacity: 0;
 }
+
 .button-area {
   display: inline-block;
-  width: 52px;
-  height: 77px;
-  i {
+  width: 27px;
+  margin: 0 12px;
+
+  svg {
     font-size: 50px;
   }
 }
diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot.vue b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
index 1cce325d..165cb5ac 100644
--- a/src/renderer/components/TimelineSpace/Modals/NewToot.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
@@ -1,145 +1,147 @@
 <template>
-  <el-dialog
-    :title="$t('modals.new_toot.title')"
-    :model-value="newTootModal"
-    v-if="newTootModal"
-    :before-close="closeConfirm"
-    width="600px"
-    class="new-toot-modal"
-    ref="dialog"
-  >
-    <el-form v-on:submit.prevent="toot" role="form">
-      <Quote :message="quoteToMessage" :displayNameStyle="displayNameStyle" v-if="quoteToMessage !== null" ref="quote"></Quote>
-      <div class="spoiler" v-if="showContentWarning" ref="spoiler">
-        <div class="el-input">
-          <input type="text" class="el-input__inner" :placeholder="$t('modals.new_toot.cw')" v-model="spoiler" />
+  <div class="new-toot">
+    <el-dialog
+      :title="$t('modals.new_toot.title')"
+      :model-value="newTootModal"
+      @update:model-value="newTootModal = $event"
+      :before-close="closeConfirm"
+      width="600px"
+      custom-class="new-toot-modal"
+      ref="dialog"
+    >
+      <el-form v-on:submit.prevent="toot" role="form">
+        <Quote :message="quoteToMessage" :displayNameStyle="displayNameStyle" v-if="quoteToMessage !== null" ref="quote"></Quote>
+        <div class="spoiler" v-if="showContentWarning" ref="spoiler">
+          <div class="el-input">
+            <input type="text" class="el-input__inner" :placeholder="$t('modals.new_toot.cw')" v-model="spoiler" />
+          </div>
+        </div>
+        <Status
+          v-model="status"
+          :opened="newTootModal"
+          :fixCursorPos="hashtagInserting"
+          :height="statusHeight"
+          @paste="onPaste"
+          @toot="toot"
+          @pickerOpened="innerElementOpened"
+          @suggestOpened="innerElementOpened"
+        />
+      </el-form>
+      <Poll
+        v-if="openPoll"
+        v-model="polls"
+        @addPoll="addPoll"
+        @removePoll="removePoll"
+        :defaultExpire="pollExpire"
+        @changeExpire="changeExpire"
+        ref="poll"
+      ></Poll>
+      <div class="preview" ref="preview">
+        <div class="image-wrapper" v-for="media in attachedMedias" v-bind:key="media.id">
+          <img :src="media.preview_url" class="preview-image" />
+          <el-button type="text" @click="removeAttachment(media)" class="remove-image"><font-awesome-icon icon="circle-xmark" /></el-button>
+          <textarea
+            maxlength="420"
+            class="image-description"
+            :placeholder="$t('modals.new_toot.description')"
+            :value="mediaDescriptions[media.id]"
+            @input="updateDescription(media.id, $event.target.value)"
+            role="textbox"
+            contenteditable="true"
+            aria-multiline="true"
+          >
+          </textarea>
         </div>
       </div>
-      <Status
-        v-model="status"
-        :opened="newTootModal"
-        :fixCursorPos="hashtagInserting"
-        :height="statusHeight"
-        @paste="onPaste"
-        @toot="toot"
-        @pickerOpened="innerElementOpened"
-        @suggestOpened="innerElementOpened"
-      />
-    </el-form>
-    <Poll
-      v-if="openPoll"
-      v-model="polls"
-      @addPoll="addPoll"
-      @removePoll="removePoll"
-      :defaultExpire="pollExpire"
-      @changeExpire="changeExpire"
-      ref="poll"
-    ></Poll>
-    <div class="preview" ref="preview">
-      <div class="image-wrapper" v-for="media in attachedMedias" v-bind:key="media.id">
-        <img :src="media.preview_url" class="preview-image" />
-        <el-button type="text" @click="removeAttachment(media)" class="remove-image"><font-awesome-icon icon="circle-xmark" /></el-button>
-        <textarea
-          maxlength="420"
-          class="image-description"
-          :placeholder="$t('modals.new_toot.description')"
-          :value="mediaDescriptions[media.id]"
-          @input="updateDescription(media.id, $event.target.value)"
-          role="textbox"
-          contenteditable="true"
-          aria-multiline="true"
-        >
-        </textarea>
-      </div>
-    </div>
-    <div slot="footer" class="dialog-footer">
-      <div class="upload-image">
-        <el-button size="default" type="text" @click="selectImage" :title="$t('modals.new_toot.footer.add_image')">
-          <font-awesome-icon icon="camera" />
-        </el-button>
-        <input name="image" type="file" class="image-input" ref="image" @change="onChangeImage" :key="attachedMediaId" />
-      </div>
-      <div class="poll">
-        <el-button size="default" type="text" @click="togglePollForm" :title="$t('modals.new_toot.footer.poll')">
-          <font-awesome-icon icon="square-poll-horizontal" />
-        </el-button>
-      </div>
-      <div class="privacy">
-        <el-dropdown trigger="click" @command="changeVisibility">
-          <el-button size="default" type="text" :title="$t('modals.new_toot.footer.change_visibility')">
-            <font-awesome-icon :icon="visibilityIcon" />
-          </el-button>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item :command="visibilityList.Public.value">
-                <font-awesome-icon icon="globe" class="privacy-icon" />
-                {{ $t(visibilityList.Public.name) }}
-              </el-dropdown-item>
-              <el-dropdown-item :command="visibilityList.Unlisted.value">
-                <font-awesome-icon icon="unlock" class="privacy-icon" />
-                {{ $t(visibilityList.Unlisted.name) }}
-              </el-dropdown-item>
-              <el-dropdown-item :command="visibilityList.Private.value">
-                <font-awesome-icon icon="lock" class="privacy-icon" />
-                {{ $t(visibilityList.Private.name) }}
-              </el-dropdown-item>
-              <el-dropdown-item :command="visibilityList.Direct.value">
-                <font-awesome-icon icon="envelope" class="privacy-icon" size="sm" />
-                {{ $t(visibilityList.Direct.name) }}
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-      </div>
-      <div class="sensitive" v-show="attachedMedias.length > 0">
-        <el-button
-          size="default"
-          type="text"
-          @click="changeSensitive"
-          :title="$t('modals.new_toot.footer.change_sensitive')"
-          :aria-pressed="sensitive"
-        >
-          <font-awesome-icon icon="eye-slash" v-show="!sensitive" />
-          <font-awesome-icon icon="eye" v-show="sensitive" />
-        </el-button>
-      </div>
-      <div class="content-warning">
-        <el-button
-          size="default"
-          type="text"
-          @click="toggleContentWarning()"
-          :title="$t('modals.new_toot.footer.add_cw')"
-          :class="showContentWarning ? '' : 'clickable'"
-          :aria-pressed="showContentWarning"
-        >
-          <font-awesome-icon icon="eye-slash" />
-        </el-button>
-      </div>
-      <div class="pined-hashtag">
-        <el-button
-          size="default"
-          type="text"
-          @click="pinedHashtag = !pinedHashtag"
-          :title="$t('modals.new_toot.footer.pined_hashtag')"
-          :class="pinedHashtag ? '' : 'clickable'"
-          :aria-pressed="pinedHashtag"
-        >
-          <font-awesome-icon icon="hashtag" />
-        </el-button>
-      </div>
-      <div class="info">
-        <img src="../../../assets/images/loading-spinner-wide.svg" v-show="loading" class="loading" />
-        <span class="text-count">{{ tootMax - status.length }}</span>
+      <template #footer>
+        <div class="dialog-footer">
+          <div class="upload-image">
+            <el-button size="default" type="text" @click="selectImage" :title="$t('modals.new_toot.footer.add_image')">
+              <font-awesome-icon icon="camera" />
+            </el-button>
+            <input name="image" type="file" class="image-input" ref="image" @change="onChangeImage" :key="attachedMediaId" />
+          </div>
+          <div class="poll">
+            <el-button size="default" type="text" @click="togglePollForm" :title="$t('modals.new_toot.footer.poll')">
+              <font-awesome-icon icon="square-poll-horizontal" />
+            </el-button>
+          </div>
+          <div class="privacy">
+            <el-dropdown trigger="click" @command="changeVisibility">
+              <el-button size="default" type="text" :title="$t('modals.new_toot.footer.change_visibility')">
+                <font-awesome-icon :icon="visibilityIcon" />
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item :command="visibilityList.Public.value">
+                    <font-awesome-icon icon="globe" class="privacy-icon" />
+                    {{ $t(visibilityList.Public.name) }}
+                  </el-dropdown-item>
+                  <el-dropdown-item :command="visibilityList.Unlisted.value">
+                    <font-awesome-icon icon="unlock" class="privacy-icon" />
+                    {{ $t(visibilityList.Unlisted.name) }}
+                  </el-dropdown-item>
+                  <el-dropdown-item :command="visibilityList.Private.value">
+                    <font-awesome-icon icon="lock" class="privacy-icon" />
+                    {{ $t(visibilityList.Private.name) }}
+                  </el-dropdown-item>
+                  <el-dropdown-item :command="visibilityList.Direct.value">
+                    <font-awesome-icon icon="envelope" class="privacy-icon" size="sm" />
+                    {{ $t(visibilityList.Direct.name) }}
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+          <div class="sensitive" v-show="attachedMedias.length > 0">
+            <el-button
+              size="default"
+              type="text"
+              @click="changeSensitive"
+              :title="$t('modals.new_toot.footer.change_sensitive')"
+              :aria-pressed="sensitive"
+            >
+              <font-awesome-icon icon="eye-slash" v-show="!sensitive" />
+              <font-awesome-icon icon="eye" v-show="sensitive" />
+            </el-button>
+          </div>
+          <div class="content-warning">
+            <el-button
+              size="default"
+              type="text"
+              @click="toggleContentWarning()"
+              :title="$t('modals.new_toot.footer.add_cw')"
+              :class="showContentWarning ? '' : 'clickable'"
+              :aria-pressed="showContentWarning"
+            >
+              <font-awesome-icon icon="eye-slash" />
+            </el-button>
+          </div>
+          <div class="pined-hashtag">
+            <el-button
+              size="default"
+              type="text"
+              @click="pinedHashtag = !pinedHashtag"
+              :title="$t('modals.new_toot.footer.pined_hashtag')"
+              :class="pinedHashtag ? '' : 'clickable'"
+              :aria-pressed="pinedHashtag"
+            >
+              <font-awesome-icon icon="hashtag" />
+            </el-button>
+          </div>
+          <div class="info">
+            <img src="../../../assets/images/loading-spinner-wide.svg" v-show="loading" class="loading" />
+            <span class="text-count">{{ tootMax - status.length }}</span>
 
-        <el-button class="toot-action" size="small" @click="closeConfirm(close)">{{ $t('modals.new_toot.cancel') }}</el-button>
-        <el-button class="toot-action" size="small" type="primary" @click="toot" :loading="blockSubmit">{{
-          $t('modals.new_toot.toot')
-        }}</el-button>
-      </div>
-      <div class="clearfix"></div>
-    </div>
-    <resize-observer @notify="handleResize" />
-  </el-dialog>
+            <el-button class="toot-action" @click="closeConfirm(close)">{{ $t('modals.new_toot.cancel') }}</el-button>
+            <el-button class="toot-action" type="primary" @click="toot" :loading="blockSubmit">{{ $t('modals.new_toot.toot') }}</el-button>
+          </div>
+          <div class="clearfix"></div>
+        </div>
+      </template>
+      <resize-observer @notify="handleResize" />
+    </el-dialog>
+  </div>
 </template>
 
 <script>
@@ -462,189 +464,190 @@ export default {
           event.height - footerHeight - headerHeight - this.$refs.preview.offsetHeight - pollHeight - spoilerHeight - quoteHeight
       }
     },
-    innerElementOpened(open) {
-      if (open) {
-        this.$refs.dialog.$el.firstChild.style.overflow = 'visible'
-      } else {
-        this.$refs.dialog.$el.firstChild.style.overflow = 'hidden'
-      }
+    innerElementOpened() {
+      // if (open) {
+      //   this.$refs.dialog.$el.firstChild.style.overflow = 'visible'
+      // } else {
+      //   this.$refs.dialog.$el.firstChild.style.overflow = 'hidden'
+      // }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.new-toot-modal /deep/ {
-  .el-dialog {
+.new-toot :deep() {
+  .new-toot-modal {
     background-color: var(--theme-selected-background-color);
     overflow: hidden;
     resize: both;
     padding-bottom: 20px;
     max-height: calc(100% - 15vh - 80px);
     max-width: 95%;
-  }
 
-  .el-dialog__header {
-    background-color: #4a5664;
-
-    .el-dialog__title {
-      color: #ebeef5;
-    }
-  }
-
-  .el-dialog__body {
-    padding: 0;
-
-    .el-input__inner {
-      background-color: var(--theme-background-color);
-      color: var(--theme-primary-color);
-      border: 1px solid var(--theme-border-color);
-    }
-
-    .spoiler {
-      box-sizing: border-box;
-      padding: 4px 0;
+    .el-dialog__header {
       background-color: #4a5664;
+      margin-right: 0;
 
-      input {
-        border-radius: 0;
-
-        &::placeholder {
-          color: #c0c4cc;
-        }
+      .el-dialog__title {
+        color: #ebeef5;
       }
     }
 
-    .preview {
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
+    .el-dialog__body {
+      padding: 0;
 
-      .image-wrapper {
-        position: relative;
-        flex: 1 1 0;
-        min-width: 10%;
-        height: 150px;
-        margin: 4px;
+      .el-input__inner {
+        background-color: var(--theme-background-color);
+        color: var(--theme-primary-color);
+        border: 1px solid var(--theme-border-color);
+      }
 
-        .preview-image {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-          border: 0;
-          border-radius: 8px;
-        }
+      .spoiler {
+        box-sizing: border-box;
+        padding: 4px 0;
+        background-color: #4a5664;
 
-        .image-description {
-          position: absolute;
-          left: 0;
-          bottom: 0;
-          width: 100%;
-          box-sizing: border-box;
-          border: 0;
-          border-bottom-left-radius: 8px;
-          border-bottom-right-radius: 8px;
-          background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0.35) 80%, transparent);
-          font-size: var(--font-base-size);
-          color: #fff;
-          opacity: 1;
-          resize: none;
-          overflow: scroll;
+        input {
+          border-radius: 0;
 
           &::placeholder {
             color: #c0c4cc;
           }
         }
+      }
 
-        .remove-image {
-          position: absolute;
-          top: 2px;
-          left: 2px;
-          padding: 0;
-          cursor: pointer;
-          font-size: 1.5rem;
+      .preview {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
 
-          .fa-icon {
-            font-size: 0.9rem;
-            width: auto;
-            height: 1em;
-            max-width: 100%;
-            max-height: 100%;
+        .image-wrapper {
+          position: relative;
+          flex: 1 1 0;
+          min-width: 10%;
+          height: 150px;
+          margin: 4px;
+
+          .preview-image {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border: 0;
+            border-radius: 8px;
+          }
+
+          .image-description {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            box-sizing: border-box;
+            border: 0;
+            border-bottom-left-radius: 8px;
+            border-bottom-right-radius: 8px;
+            background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0.35) 80%, transparent);
+            font-size: var(--font-base-size);
+            color: #fff;
+            opacity: 1;
+            resize: none;
+            overflow: scroll;
+
+            &::placeholder {
+              color: #c0c4cc;
+            }
+          }
+
+          .remove-image {
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            padding: 0;
+            cursor: pointer;
+            font-size: 1.5rem;
+
+            .fa-icon {
+              font-size: 0.9rem;
+              width: auto;
+              height: 1em;
+              max-width: 100%;
+              max-height: 100%;
+            }
           }
         }
       }
     }
-  }
 
-  .el-dialog__footer {
-    background-color: var(--theme-selected-background-color);
-    font-size: var(--base-font-size);
-    padding-bottom: 0;
+    .el-dialog__footer {
+      background-color: var(--theme-selected-background-color);
+      font-size: var(--base-font-size);
+      padding-bottom: 0;
 
-    .upload-image {
-      text-align: left;
-      float: left;
+      .upload-image {
+        text-align: left;
+        float: left;
 
-      .image-input {
-        display: none;
-      }
-    }
-
-    .poll {
-      float: left;
-      margin-left: 8px;
-    }
-
-    .privacy {
-      float: left;
-      margin-left: 8px;
-    }
-
-    .sensitive {
-      float: left;
-      margin-left: 8px;
-    }
-
-    .content-warning {
-      float: left;
-      margin-left: 8px;
-
-      .cw-text {
-        font-weight: 800;
-        line-height: 18px;
-      }
-    }
-
-    .pined-hashtag {
-      float: left;
-      margin-left: 8px;
-    }
-
-    .clickable {
-      color: #909399;
-    }
-
-    .info {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-
-      .loading {
-        width: 18px;
-        margin-right: 4px;
+        .image-input {
+          display: none;
+        }
       }
 
-      .text-count {
-        padding-right: 10px;
+      .poll {
+        float: left;
+        margin-left: 8px;
+      }
+
+      .privacy {
+        float: left;
+        margin-left: 8px;
+      }
+
+      .sensitive {
+        float: left;
+        margin-left: 8px;
+      }
+
+      .content-warning {
+        float: left;
+        margin-left: 8px;
+
+        .cw-text {
+          font-weight: 800;
+          line-height: 18px;
+        }
+      }
+
+      .pined-hashtag {
+        float: left;
+        margin-left: 8px;
+      }
+
+      .clickable {
         color: #909399;
       }
-    }
 
-    .toot-action {
-      font-size: var(--base-font-size);
-      margin-top: 2px;
-      margin-bottom: 2px;
+      .info {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+
+        .loading {
+          width: 18px;
+          margin-right: 4px;
+        }
+
+        .text-count {
+          padding-right: 10px;
+          color: #909399;
+        }
+      }
+
+      .toot-action {
+        font-size: var(--base-font-size);
+        margin-top: 2px;
+        margin-bottom: 2px;
+      }
     }
   }
 }
diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot/Quote.vue b/src/renderer/components/TimelineSpace/Modals/NewToot/Quote.vue
index 386cd7ea..3b408632 100644
--- a/src/renderer/components/TimelineSpace/Modals/NewToot/Quote.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot/Quote.vue
@@ -6,22 +6,14 @@
     <div class="detail">
       <div class="toot-header">
         <div class="user">
-          <span class="display-name"
-            ><bdi v-html="username(message.account)"></bdi
-          ></span>
+          <span class="display-name"><bdi v-html="username(message.account)"></bdi></span>
           <span class="acct">{{ accountName(message.account) }}</span>
         </div>
         <div class="clearfix"></div>
       </div>
       <div class="content-wrapper">
-        <div
-          class="spoiler"
-          v-html="emojiText(message.spoiler_text, message.emojis)"
-        ></div>
-        <div
-          class="content"
-          v-html="emojiText(message.content, message.emojis)"
-        ></div>
+        <div class="spoiler" v-html="emojiText(message.spoiler_text, message.emojis)"></div>
+        <div class="content" v-html="emojiText(message.content, message.emojis)"></div>
       </div>
     </div>
     <div class="clearfix"></div>
@@ -36,17 +28,17 @@ import emojify from '@/utils/emojify'
 export default {
   new: 'quote-target',
   components: {
-    FailoverImg,
+    FailoverImg
   },
   props: {
     message: {
       type: Object,
-      default: {},
+      default: {}
     },
     displayNameStyle: {
       type: Number,
-      default: 0,
-    },
+      default: 0
+    }
   },
   methods: {
     username(account) {
@@ -78,8 +70,8 @@ export default {
     },
     emojiText(content, emojis) {
       return emojify(content, emojis)
-    },
-  },
+    }
+  }
 }
 </script>
 
@@ -104,7 +96,7 @@ export default {
     float: left;
     width: calc(100% - 52px);
 
-    .content-wrapper /deep/ {
+    .content-wrapper {
       font-size: var(--base-font-size);
       color: var(--theme-primary-color);
 
@@ -127,11 +119,11 @@ export default {
       .content p {
         unicode-bidi: plaintext;
       }
+    }
 
-      .emojione {
-        width: 20px;
-        height: 20px;
-      }
+    .content-wrapper :deep(.emojione) {
+      width: 20px;
+      height: 20px;
     }
 
     .toot-header {
@@ -143,14 +135,14 @@ export default {
         overflow: hidden;
         text-overflow: ellipsis;
 
-        .display-name /deep/ {
+        .display-name {
           font-weight: 800;
           color: var(--theme-primary-color);
+        }
 
-          .emojione {
-            max-width: 14px;
-            max-height: 14px;
-          }
+        .display-name :deep(.emojione) {
+          max-width: 14px;
+          max-height: 14px;
         }
 
         .acct {
diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue b/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
index af657e1e..baf422ac 100644
--- a/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
@@ -13,7 +13,7 @@
       autofocus
     >
     </textarea>
-    <el-popover placement="bottom-start" width="300" trigger="manual" :model-value="openSuggest" popper-class="suggest-popper">
+    <el-popover placement="bottom-start" width="300" trigger="manual" v-model:visible="openSuggest" popper-class="suggest-popper">
       <ul class="suggest-list">
         <li
           v-for="(item, index) in filteredSuggestion"
@@ -31,9 +31,13 @@
           {{ item.name }}
         </li>
       </ul>
+      <!-- dummy object to open suggest popper -->
+      <template #reference>
+        <span></span>
+      </template>
     </el-popover>
     <div>
-      <el-popover placement="bottom" width="281" trigger="click" popper-class="status-emoji-picker" ref="status_emoji_picker">
+      <el-popover placement="bottom" width="281" trigger="click" popper-class="new-toot-emoji-picker" ref="new_toot_emoji_picker">
         <picker
           :data="emojiIndex"
           set="twitter"
@@ -280,6 +284,37 @@ export default {
 .suggest-popper {
   background-color: var(--theme-background-color);
   border: 1px solid var(--theme-header-menu-color);
+
+  .suggest-list {
+    list-style: none;
+    padding: 6px 0;
+    margin: 0;
+    box-sizing: border-box;
+
+    li {
+      font-size: var(--base-font-size);
+      padding: 0 20px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      height: 34px;
+      line-height: 34px;
+      box-sizing: border-box;
+      cursor: pointer;
+      color: var(--theme-regular-color);
+
+      .icon {
+        display: inline-block;
+        vertical-align: middle;
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .highlighted {
+      background-color: var(--theme-selected-background-color);
+    }
+  }
 }
 </style>
 
@@ -317,37 +352,6 @@ export default {
     }
   }
 
-  .suggest-list {
-    list-style: none;
-    padding: 6px 0;
-    margin: 0;
-    box-sizing: border-box;
-
-    li {
-      font-size: var(--base-font-size);
-      padding: 0 20px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      height: 34px;
-      line-height: 34px;
-      box-sizing: border-box;
-      cursor: pointer;
-      color: var(--theme-regular-color);
-
-      .icon {
-        display: inline-block;
-        vertical-align: middle;
-        width: 20px;
-        height: 20px;
-      }
-    }
-
-    .highlighted {
-      background-color: var(--theme-selected-background-color);
-    }
-  }
-
   .emoji-selector {
     position: absolute;
     top: 4px;
diff --git a/src/renderer/components/TimelineSpace/Modals/Report.vue b/src/renderer/components/TimelineSpace/Modals/Report.vue
index 49ef17ee..519a560f 100644
--- a/src/renderer/components/TimelineSpace/Modals/Report.vue
+++ b/src/renderer/components/TimelineSpace/Modals/Report.vue
@@ -1,10 +1,12 @@
 <template>
   <el-dialog :title="$t('modals.report.title')" :model-value="reportModal" width="400px" custom-class="report">
     <el-input type="textarea" v-model="comment" :placeholder="$t('modals.report.comment')"></el-input>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="closeModal">{{ $t('modals.report.cancel') }}</el-button>
-      <el-button type="primary" @click="submit">{{ $t('modals.report.ok') }}</el-button>
-    </span>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="closeModal">{{ $t('modals.report.cancel') }}</el-button>
+        <el-button type="primary" @click="submit">{{ $t('modals.report.ok') }}</el-button>
+      </span>
+    </template>
   </el-dialog>
 </template>
 
diff --git a/src/renderer/components/TimelineSpace/Modals/Shortcut.vue b/src/renderer/components/TimelineSpace/Modals/Shortcut.vue
index 6c8ea357..b4a4f6dd 100644
--- a/src/renderer/components/TimelineSpace/Modals/Shortcut.vue
+++ b/src/renderer/components/TimelineSpace/Modals/Shortcut.vue
@@ -1,82 +1,84 @@
 <template>
-  <el-dialog :title="$t('modals.shortcut.title')" :model-value="shortcutModal" width="500px" class="shortcut-modal">
-    <table class="shortcuts">
-      <tbody>
-        <tr>
-          <td><kbd>Ctrl(Cmd) + 1, 2, 3...</kbd></td>
-          <td>{{ $t('modals.shortcut.ctrl_number') }}</td>
-        </tr>
-        <tr>
-          <td><kbd>Ctrl(Cmd) + k</kbd></td>
-          <td>{{ $t('modals.shortcut.ctrl_k') }}</td>
-        </tr>
-        <tr>
-          <td><kbd>Ctrl(Cmd) + n</kbd></td>
-          <td>{{ $t('modals.shortcut.ctrl_n') }}</td>
-        </tr>
-        <tr>
-          <td><kbd>Ctrl(Cmd) + Enter</kbd></td>
-          <td>{{ $t('modals.shortcut.ctrl_enter') }}</td>
-        </tr>
-        <tr>
-          <td><kbd>Ctrl(Cmd) + r</kbd></td>
-          <td>{{ $t('modals.shortcut.ctrl_r') }}</td>
-        </tr>
-        <tr>
-          <td><kbd>j</kbd></td>
-          <td>{{ $t('modals.shortcut.j') }}</td>
-        </tr>
-        <tr>
-          <td><kbd>k</kbd></td>
-          <td>{{ $t('modals.shortcut.k') }}</td>
-        </tr>
-        <tr>
-          <td><kbd>h</kbd></td>
-          <td>{{ $t('modals.shortcut.h') }}</td>
-        </tr>
-        <tr>
-          <td><kbd>l</kbd></td>
-          <td>{{ $t('modals.shortcut.l') }}</td>
-        </tr>
-        <tr>
-          <td><kbd>r</kbd></td>
-          <td>{{ $t('modals.shortcut.r') }}</td>
-        </tr>
-        <tr>
-          <td><kbd>b</kbd></td>
-          <td>{{ $t('modals.shortcut.b') }}</td>
-        </tr>
-        <tr>
-          <td><kbd>f</kbd></td>
-          <td>{{ $t('modals.shortcut.f') }}</td>
-        </tr>
-        <tr>
-          <td><kbd>o</kbd></td>
-          <td>{{ $t('modals.shortcut.o') }}</td>
-        </tr>
-        <tr>
-          <td><kbd>p</kbd></td>
-          <td>{{ $t('modals.shortcut.p') }}</td>
-        </tr>
-        <tr>
-          <td><kbd>i</kbd></td>
-          <td>{{ $t('modals.shortcut.i') }}</td>
-        </tr>
-        <tr>
-          <td><kbd>x</kbd></td>
-          <td>{{ $t('modals.shortcut.x') }}</td>
-        </tr>
-        <tr>
-          <td><kbd>?</kbd></td>
-          <td>{{ $t('modals.shortcut.?') }}</td>
-        </tr>
-        <tr>
-          <td><kbd>esc</kbd></td>
-          <td>{{ $t('modals.shortcut.esc') }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </el-dialog>
+  <div class="shortcut">
+    <el-dialog :title="$t('modals.shortcut.title')" :model-value="shortcutModal" width="500px" class="shortcut-modal">
+      <table class="shortcuts">
+        <tbody>
+          <tr>
+            <td><kbd>Ctrl(Cmd) + 1, 2, 3...</kbd></td>
+            <td>{{ $t('modals.shortcut.ctrl_number') }}</td>
+          </tr>
+          <tr>
+            <td><kbd>Ctrl(Cmd) + k</kbd></td>
+            <td>{{ $t('modals.shortcut.ctrl_k') }}</td>
+          </tr>
+          <tr>
+            <td><kbd>Ctrl(Cmd) + n</kbd></td>
+            <td>{{ $t('modals.shortcut.ctrl_n') }}</td>
+          </tr>
+          <tr>
+            <td><kbd>Ctrl(Cmd) + Enter</kbd></td>
+            <td>{{ $t('modals.shortcut.ctrl_enter') }}</td>
+          </tr>
+          <tr>
+            <td><kbd>Ctrl(Cmd) + r</kbd></td>
+            <td>{{ $t('modals.shortcut.ctrl_r') }}</td>
+          </tr>
+          <tr>
+            <td><kbd>j</kbd></td>
+            <td>{{ $t('modals.shortcut.j') }}</td>
+          </tr>
+          <tr>
+            <td><kbd>k</kbd></td>
+            <td>{{ $t('modals.shortcut.k') }}</td>
+          </tr>
+          <tr>
+            <td><kbd>h</kbd></td>
+            <td>{{ $t('modals.shortcut.h') }}</td>
+          </tr>
+          <tr>
+            <td><kbd>l</kbd></td>
+            <td>{{ $t('modals.shortcut.l') }}</td>
+          </tr>
+          <tr>
+            <td><kbd>r</kbd></td>
+            <td>{{ $t('modals.shortcut.r') }}</td>
+          </tr>
+          <tr>
+            <td><kbd>b</kbd></td>
+            <td>{{ $t('modals.shortcut.b') }}</td>
+          </tr>
+          <tr>
+            <td><kbd>f</kbd></td>
+            <td>{{ $t('modals.shortcut.f') }}</td>
+          </tr>
+          <tr>
+            <td><kbd>o</kbd></td>
+            <td>{{ $t('modals.shortcut.o') }}</td>
+          </tr>
+          <tr>
+            <td><kbd>p</kbd></td>
+            <td>{{ $t('modals.shortcut.p') }}</td>
+          </tr>
+          <tr>
+            <td><kbd>i</kbd></td>
+            <td>{{ $t('modals.shortcut.i') }}</td>
+          </tr>
+          <tr>
+            <td><kbd>x</kbd></td>
+            <td>{{ $t('modals.shortcut.x') }}</td>
+          </tr>
+          <tr>
+            <td><kbd>?</kbd></td>
+            <td>{{ $t('modals.shortcut.?') }}</td>
+          </tr>
+          <tr>
+            <td><kbd>esc</kbd></td>
+            <td>{{ $t('modals.shortcut.esc') }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
@@ -96,7 +98,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.shortcut-modal /deep/ {
+.shortcut :deep() {
   .el-dialog__header {
     background-color: #4a5664;
 
@@ -104,7 +106,9 @@ export default {
       color: #ebeef5;
     }
   }
+}
 
+.shortcut-modal {
   .shortcuts {
     text-align: left;
     border-collapse: collapse;
diff --git a/src/renderer/components/organisms/Toot.vue b/src/renderer/components/organisms/Toot.vue
index 039f1344..f74c9806 100644
--- a/src/renderer/components/organisms/Toot.vue
+++ b/src/renderer/components/organisms/Toot.vue
@@ -468,28 +468,22 @@ export default {
       this.$store.dispatch('TimelineSpace/Contents/SideBar/openTootComponent')
       this.$store.dispatch('TimelineSpace/Contents/SideBar/TootDetail/changeToot', message)
       this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
-      this.$refs.status_menu_popper.doClose()
     },
     openBrowser(message) {
       window.shell.openExternal(message.url)
-      this.$refs.status_menu_popper.doClose()
     },
     copyLink(message) {
       window.clipboard.writeText(message.url, 'toot-link')
-      this.$refs.status_menu_popper.doClose()
     },
     reportUser() {
       this.$store.dispatch('TimelineSpace/Modals/Report/openReport', this.originalMessage)
-      this.$refs.status_menu_popper.doClose()
     },
     confirmMute() {
       this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeAccount', this.originalMessage.account)
       this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeModal', true)
-      this.$refs.status_menu_popper.doClose()
     },
     block() {
       this.$store.dispatch('organisms/Toot/block', this.originalMessage.account)
-      this.$refs.status_menu_popper.doClose()
     },
     changeReblog(message) {
       if (message.reblogged) {
@@ -676,7 +670,6 @@ export default {
         native: emoji.native
       })
       this.$emit('update', status)
-      this.$refs.status_emoji_picker.doClose()
     },
     async addReaction(native) {
       const status = await this.$store.dispatch('organisms/Toot/sendReaction', {
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 9a27ec65..c7b27f70 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -8,6 +8,8 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faAngleDown,
   faAngleUp,
+  faAngleRight,
+  faAngleLeft,
   faAnglesRight,
   faAnglesLeft,
   faHome,
@@ -82,6 +84,8 @@ import i18next from '~/src/config/i18n'
 library.add(
   faAngleDown,
   faAngleUp,
+  faAngleRight,
+  faAngleLeft,
   faAnglesRight,
   faAnglesLeft,
   faHome,