From 3a0e7bf83c253485ce5aed9b46f6f6b54d10777a Mon Sep 17 00:00:00 2001 From: AkiraFukushima Date: Sun, 15 Apr 2018 17:41:28 +0900 Subject: [PATCH] refs #227 Change popover library because vue-js-popover has some bugs --- package-lock.json | 25 +++++--- package.json | 4 +- .../Contents/Cards/Popover/TootMenu.vue | 58 ------------------- .../TimelineSpace/Contents/Cards/Toot.vue | 50 +++++++++++++--- .../SideBar/AccountProfile/Timeline.vue | 2 +- src/renderer/main.js | 5 +- 6 files changed, 65 insertions(+), 79 deletions(-) delete mode 100644 src/renderer/components/TimelineSpace/Contents/Cards/Popover/TootMenu.vue diff --git a/package-lock.json b/package-lock.json index 3fe572f1fd..12afef1978 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 29c463e7d8..afa1044f5f 100644 --- a/package.json +++ b/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" diff --git a/src/renderer/components/TimelineSpace/Contents/Cards/Popover/TootMenu.vue b/src/renderer/components/TimelineSpace/Contents/Cards/Popover/TootMenu.vue deleted file mode 100644 index 44476d86aa..0000000000 --- a/src/renderer/components/TimelineSpace/Contents/Cards/Popover/TootMenu.vue +++ /dev/null @@ -1,58 +0,0 @@ - - - - - diff --git a/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue b/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue index 7e38b55c1c..af72b3aae5 100644 --- a/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue +++ b/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue @@ -38,10 +38,22 @@ - - - - + +
+
    +
  • + View Toot Detail +
    • +
  • + Open in Browser +
    • +
+
+ + + + +
@@ -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, diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.vue b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.vue index ba926c5a97..c4577d35ae 100644 --- a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.vue +++ b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.vue @@ -1,7 +1,7 @@ diff --git a/src/renderer/main.js b/src/renderer/main.js index ec6a23afc9..a50545b468 100644 --- a/src/renderer/main.js +++ b/src/renderer/main.js @@ -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