Merge pull request #230 from h3poteto/iss-227

closes #227 Change popover library because vue-js-popover has some bugs

package.json

@@ -86,7 +86,7 @@
     "electron-json-storage": "^4.0.2",
     "electron-log": "^2.2.14",
     "electron-window-state": "^4.1.1",
-    "element-ui": "^2.2.1",
+    "element-ui": "^2.3.4",
     "is-empty": "^1.2.0",
     "mastodon-api": "^1.3.0",
     "moment": "^2.21.0",
@@ -95,7 +95,7 @@
     "vue": "^2.3.3",
     "vue-awesome": "^2.3.5",
     "vue-electron": "^1.0.6",
-    "vue-js-popover": "^1.1.7",
+    "vue-popperjs": "^1.2.6",
     "vue-router": "^2.5.3",
     "vue-shortkey": "^3.1.0",
     "vuex": "^2.3.1"

src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue

@@ -38,10 +38,22 @@
         <el-button type="text" @click="changeFavourite(originalMessage(message))" :class="originalMessage(message).favourited ? 'favourited' : 'favourite'">
           <icon name="star" scale="0.9"></icon>
         </el-button>
-        <el-button type="text" v-popover="{ name: message.id }">
-          <icon name="ellipsis-h" scale="0.9"></icon>
-        </el-button>
-        <toot-menu :key="message.id" :message="message" :name="message.id"></toot-menu>
+        <popper trigger="click" :options="{placement: 'bottom'}">
+          <div class="popper toot-menu">
+            <ul class="menu-list">
+              <li role="button" @click="openDetail(message)">
+                View Toot Detail
+              </li>
+              <li role="button" @click="openBrowser(message)">
+                Open in Browser
+              </li>
+            </ul>
+          </div>
+
+          <el-button slot="reference" type="text">
+            <icon name="ellipsis-h" scale="0.9"></icon>
+          </el-button>
+        </popper>
       </div>
     </div>
     <div class="clearfix"></div>
@@ -53,12 +65,10 @@
 import moment from 'moment'
 import { shell } from 'electron'
 import { mapState } from 'vuex'
-import TootMenu from './Popover/TootMenu'
 
 export default {
   name: 'toot',
   props: ['message'],
-  components: { TootMenu },
   computed: {
     ...mapState({
       theme: (state) => {
@@ -102,8 +112,8 @@ export default {
       this.$store.dispatch('TimelineSpace/Contents/SideBar/TootDetail/changeToot', message)
       this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
     },
-    openBrowser (message) {
-      console.log(message)
+    openBrowser () {
+      shell.openExternal(this.message.url)
     },
     changeReblog (message) {
       if (message.reblogged) {
@@ -271,6 +281,30 @@ function findLink (target) {
       .favourited {
         color: #e6a23c;
       }
+
+      .toot-menu {
+        padding-right: 8px;
+
+        .menu-list {
+          padding: 0;
+          font-size: 0.8em;
+          list-style-type: none;
+          line-height: 20px;
+          text-align: left;
+          color: #303133;
+
+          li {
+            box-sizing: border-box;
+            padding-left: 0.5em;
+            padding-bottom: 0.5em;
+
+            &:hover {
+              background-color: #f2f6fc;
+              cursor: pointer;
+            }
+          }
+        }
+      }
     }
 
     .reply:hover,

src/renderer/main.js

@@ -1,19 +1,20 @@
 import Vue from 'vue'
 import axios from 'axios'
 import ElementUI from 'element-ui'
-import Popover from 'vue-js-popover'
 import 'element-ui/lib/theme-chalk/index.css'
 import 'vue-awesome/icons'
 import Icon from 'vue-awesome/components/Icon'
+import Popper from 'vue-popperjs'
+import 'vue-popperjs/dist/css/vue-popper.css'
 
 import './assets/fonts/fonts.css'
 import App from './App'
 import router from './router'
 import store from './store'
 
 Vue.use(ElementUI)
-Vue.use(Popover)
 Vue.component('icon', Icon)
+Vue.component('popper', Popper)
 
 if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
 Vue.http = Vue.prototype.$http = axios