Merge pull request #1935 from h3poteto/iss-1932

closes #1934 Use el-popper instead of vue-popper in Toot menu

package.json

@@ -176,7 +176,7 @@
     "electron-json-storage": "^4.2.0",
     "electron-log": "^4.2.2",
     "electron-window-state": "^5.0.3",
-    "element-ui": "2.13.2",
+    "element-ui": "2.14.1",
     "emoji-mart-vue": "^2.6.6",
     "emojilib": "^2.4.0",
     "i18next": "^19.8.3",

src/renderer/components/organisms/Toot.vue

@@ -198,36 +198,34 @@
           <el-button class="pinned" type="text" :title="$t('cards.toot.pinned')" :aria-label="$t('cards.toot.pinned')" v-show="pinned">
             <icon name="thumbtack" scale="0.9"></icon>
           </el-button>
-          <popper trigger="click" :options="{ placement: 'bottom' }" ref="popper">
+          <el-popover placement="bottom" width="200" trigger="click" popper-class="status-menu-popper" ref="popper">
-            <div class="popper toot-menu">
+            <ul class="menu-list">
-              <ul class="menu-list">
+              <li role="button" @click="openDetail(message)" v-show="!detailed">
-                <li role="button" @click="openDetail(message)" v-show="!detailed">
+                {{ $t('cards.toot.view_toot_detail') }}
-                  {{ $t('cards.toot.view_toot_detail') }}
+              </li>
-                </li>
+              <li role="button" @click="openBrowser(originalMessage)">
-                <li role="button" @click="openBrowser(originalMessage)">
+                {{ $t('cards.toot.open_in_browser') }}
-                  {{ $t('cards.toot.open_in_browser') }}
+              </li>
-                </li>
+              <li role="button" @click="copyLink(originalMessage)">
-                <li role="button" @click="copyLink(originalMessage)">
+                {{ $t('cards.toot.copy_link_to_toot') }}
-                  {{ $t('cards.toot.copy_link_to_toot') }}
+              </li>
-                </li>
+              <li role="button" class="separate" @click="confirmMute()">
-                <li role="button" class="separate" @click="confirmMute()">
+                {{ $t('cards.toot.mute') }}
-                  {{ $t('cards.toot.mute') }}
+              </li>
-                </li>
+              <li role="button" @click="block()">
-                <li role="button" @click="block()">
+                {{ $t('cards.toot.block') }}
-                  {{ $t('cards.toot.block') }}
+              </li>
-                </li>
+              <li role="button" @click="reportUser()" v-if="!isMyMessage">
-                <li role="button" @click="reportUser()" v-if="!isMyMessage">
+                {{ $t('cards.toot.report') }}
-                  {{ $t('cards.toot.report') }}
+              </li>
-                </li>
+              <li role="button" class="separate" @click="deleteToot(message)" v-if="isMyMessage">
-                <li role="button" class="separate" @click="deleteToot(message)" v-if="isMyMessage">
+                {{ $t('cards.toot.delete') }}
-                  {{ $t('cards.toot.delete') }}
+              </li>
-                </li>
+            </ul>
-              </ul>
-            </div>
             <el-button slot="reference" type="text" :title="$t('cards.toot.detail')">
               <icon name="ellipsis-h" scale="0.9"></icon>
             </el-button>
-          </popper>
+          </el-popover>
         </div>
         <div class="application" v-show="application !== null">
           {{ $t('cards.toot.via', { application: application }) }}
@@ -949,38 +947,6 @@ export default {
       .pinned {
         color: gold;
       }
-
-      .toot-menu {
-        padding: 2px 0;
-        border-color: #909399;
-
-        .menu-list {
-          padding: 0;
-          margin: 4px 0;
-          font-size: 0.9rem;
-          list-style-type: none;
-          line-height: 32px;
-          text-align: left;
-          color: #303133;
-
-          li {
-            box-sizing: border-box;
-            padding: 0 32px 0 16px;
-
-            &:hover {
-              background-color: #409eff;
-              color: #fff;
-              cursor: pointer;
-            }
-
-            &.separate {
-              border-top: 1px solid var(--theme-border-color);
-              padding-top: 4px;
-              margin-top: 2px;
-            }
-          }
-        }
-      }
     }
 
     .application {
@@ -1024,3 +990,37 @@ export default {
   margin: 4px 0 0;
 }
 </style>
+
+<style lang="scss">
+.status-menu-popper {
+  padding: 2px 0;
+  border-color: #909399;
+
+  .menu-list {
+    padding: 0;
+    margin: 4px 0;
+    font-size: 0.9rem;
+    list-style-type: none;
+    line-height: 32px;
+    text-align: left;
+    color: #303133;
+
+    li {
+      box-sizing: border-box;
+      padding: 0 32px 0 16px;
+
+      &:hover {
+        background-color: #409eff;
+        color: #fff;
+        cursor: pointer;
+      }
+
+      &.separate {
+        border-top: 1px solid var(--theme-border-color);
+        padding-top: 4px;
+        margin-top: 2px;
+      }
+    }
+  }
+}
+</style>

yarn.lock

@@ -4698,10 +4698,10 @@ element-matches@^0.1.2:
   resolved "https://registry.yarnpkg.com/element-matches/-/element-matches-0.1.2.tgz#7345cb71e965bd2b12f725e524591c102198361a"
   integrity sha512-yWh1otcs3OKUWDvu/IxyI36ZI3WNaRZlI0uG/DK6fu0pap0VYZ0J5pEGTk1zakme+hT0OKHwhlHc0N5TJhY6yQ==
 
-element-ui@2.13.2:
+element-ui@2.14.1:
-  version "2.13.2"
+  version "2.14.1"
-  resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.13.2.tgz#582bf47aaaaaafe23ea1958fae217a687ad06447"
+  resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.14.1.tgz#8b5745c7366c1c1a603bb6c021286ea7187e2aa2"
-  integrity sha512-r761DRPssMPKDiJZWFlG+4e4vr0cRG/atKr3Eqr8Xi0tQMNbtmYU1QXvFnKiFPFFGkgJ6zS6ASkG+sellcoHlQ==
+  integrity sha512-Uje0J12dBaXdyvt/EtuDA8diFbYTdO7uI4QCfl7zmEJmE1WxgCSVKhlRRoL8MDonO8pyNVhB4n0AFAR14g56nw==
   dependencies:
     async-validator "~1.8.1"
     babel-helper-vue-jsx-merge-props "^2.0.0"