Add dropdown menu to toot component

package.json

@@ -95,6 +95,7 @@
     "vue": "^2.3.3",
     "vue-awesome": "^2.3.5",
     "vue-electron": "^1.0.6",
+    "vue-js-popover": "^1.1.7",
     "vue-router": "^2.5.3",
     "vue-shortkey": "^3.1.0",
     "vuex": "^2.3.1"

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

@@ -38,9 +38,16 @@
         <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" @click="changeFavourite(originalMessage(message))" :class="originalMessage(message).favourited ? 'favourited' : 'favourite'">
+        <el-button type="text" v-popover:menu.bottom>
           <icon name="ellipsis-h" scale="0.9"></icon>
         </el-button>
+        <popover name="menu" :width="120">
+          <ul class="toot-menu">
+            <li>
+              View Toot Detail
+            </li>
+          </ul>
+        </popover>
       </div>
     </div>
     <div class="clearfix"></div>
@@ -250,6 +257,33 @@ function findLink (target) {
       .favourited {
         color: #e6a23c;
       }
+
+      div[data-popover="menu"] {
+        box-shadow: none;
+        border: 1px solid #ddd;
+
+        &::before{
+          filter: drop-shadow(0 -1px 0px #ddd);
+        }
+      }
+
+      .toot-menu{
+        padding: 0;
+        font-size: 0.8em;
+        margin-left: 0.5em;
+        list-style-type: none;
+        text-align: center;
+
+        li{
+          padding-bottom: 0.5em;
+          border-bottom: 1px solid #ddd;
+
+          &:last-child{
+            border: 0;
+            padding: 0;
+          }
+        }
+      }
     }
 
     .reply:hover,

src/renderer/main.js

@@ -1,6 +1,7 @@
 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'
@@ -11,6 +12,7 @@ import router from './router'
 import store from './store'
 
 Vue.use(ElementUI)
+Vue.use(Popover)
 Vue.component('icon', Icon)
 
 if (!process.env.IS_WEB) Vue.use(require('vue-electron'))