refs #227 Change popover library because vue-js-popover has some bugs
This commit is contained in:
AkiraFukushima
parent
c973965938
commit
f3012d8e41
|
|
@ -4725,9 +4725,9 @@
|
|||
}
|
||||
},
|
||||
"element-ui": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.2.1.tgz",
|
||||
"integrity": "sha512-GQizzAy00t1sb0Y0Q7fsYPqiMDC/4sgYvj32lPzBbPiMDpHpoW3LH/us8dnshnkpSAPF2LfPGckZmaMv0TKuKg==",
|
||||
"version": "2.3.4",
|
||||
"resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.3.4.tgz",
|
||||
"integrity": "sha512-wJij9v2kNn23a1PjsNMviYAQF1yRrHbO9q3yyyJls49tIauJp+DfoESRVXR+l7qhnUKaocvKmHf5fmBoEzZMoQ==",
|
||||
"requires": {
|
||||
"async-validator": "1.8.2",
|
||||
"babel-helper-vue-jsx-merge-props": "2.0.3",
|
||||
|
|
@ -11750,6 +11750,11 @@
|
|||
"integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==",
|
||||
"dev": true
|
||||
},
|
||||
"popper.js": {
|
||||
"version": "1.14.3",
|
||||
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.3.tgz",
|
||||
"integrity": "sha1-FDj5jQRqz3tNeM1QK/QYrGTU8JU="
|
||||
},
|
||||
"portfinder": {
|
||||
"version": "1.0.13",
|
||||
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz",
|
||||
|
|
@ -15725,11 +15730,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"vue-js-popover": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/vue-js-popover/-/vue-js-popover-1.1.7.tgz",
|
||||
"integrity": "sha512-Ye/Y+bClo6N1Vso0SKBtGC4jyEPvmRIdG7iHlkgFaTw8ppbO66asdoLCv0AVH2J6talq1g65NbVv5/kNwihu/Q=="
|
||||
},
|
||||
"vue-loader": {
|
||||
"version": "13.7.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.1.tgz",
|
||||
|
|
@ -15779,6 +15779,15 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"vue-popperjs": {
|
||||
"version": "1.2.6",
|
||||
"resolved": "https://registry.npmjs.org/vue-popperjs/-/vue-popperjs-1.2.6.tgz",
|
||||
"integrity": "sha512-0SEPDdQY8NxRcDiWXTgW6nMpRcc+rSpcELsLszuPzehBqQ5/9AGAr2OGKh1smwcaRe8Rb1CtE399vNz9+jYorw==",
|
||||
"requires": {
|
||||
"popper.js": "1.14.3",
|
||||
"vue": "2.5.13"
|
||||
}
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-2.8.1.tgz",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
<template>
|
||||
<div class="toot-menu">
|
||||
<popover :name="name" :width="120" class="action-pop-over" ref="actionPopover">
|
||||
<ul class="menu-list">
|
||||
<li role="button" @click="openDetail">
|
||||
View Toot Detail
|
||||
</li>
|
||||
<li role="button" @click="openBrowser">
|
||||
Open in Browser
|
||||
</li>
|
||||
</ul>
|
||||
</popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { shell } from 'electron'
|
||||
|
||||
export default {
|
||||
name: 'toot-menu',
|
||||
props: ['message', 'name'],
|
||||
methods: {
|
||||
openDetail () {
|
||||
this.$refs.actionPopover.visible = false
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/openTootComponent')
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/TootDetail/changeToot', this.message)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
|
||||
},
|
||||
openBrowser () {
|
||||
this.$refs.actionPopover.visible = false
|
||||
shell.openExternal(this.message.url)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.toot-menu {
|
||||
.menu-list {
|
||||
padding: 0;
|
||||
font-size: 0.8em;
|
||||
list-style-type: none;
|
||||
text-align: left;
|
||||
color: #303133;
|
||||
|
||||
li {
|
||||
box-sizing: border-box;
|
||||
padding-left: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
|
||||
&:hover {
|
||||
background-color: #f2f6fc;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
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'
|
||||
|
|
@ -12,8 +13,8 @@ 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
|
||||
|
|
|
|||
Loading…
Reference in New Issue