Add dropdown menu to toot component
This commit is contained in:
parent
9465d89933
commit
ca3aeb0fa9
|
@ -95,6 +95,7 @@
|
||||||
"vue": "^2.3.3",
|
"vue": "^2.3.3",
|
||||||
"vue-awesome": "^2.3.5",
|
"vue-awesome": "^2.3.5",
|
||||||
"vue-electron": "^1.0.6",
|
"vue-electron": "^1.0.6",
|
||||||
|
"vue-js-popover": "^1.1.7",
|
||||||
"vue-router": "^2.5.3",
|
"vue-router": "^2.5.3",
|
||||||
"vue-shortkey": "^3.1.0",
|
"vue-shortkey": "^3.1.0",
|
||||||
"vuex": "^2.3.1"
|
"vuex": "^2.3.1"
|
||||||
|
|
|
@ -38,9 +38,16 @@
|
||||||
<el-button type="text" @click="changeFavourite(originalMessage(message))" :class="originalMessage(message).favourited ? 'favourited' : 'favourite'">
|
<el-button type="text" @click="changeFavourite(originalMessage(message))" :class="originalMessage(message).favourited ? 'favourited' : 'favourite'">
|
||||||
<icon name="star" scale="0.9"></icon>
|
<icon name="star" scale="0.9"></icon>
|
||||||
</el-button>
|
</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>
|
<icon name="ellipsis-h" scale="0.9"></icon>
|
||||||
</el-button>
|
</el-button>
|
||||||
|
<popover name="menu" :width="120">
|
||||||
|
<ul class="toot-menu">
|
||||||
|
<li>
|
||||||
|
View Toot Detail
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</popover>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="clearfix"></div>
|
<div class="clearfix"></div>
|
||||||
|
@ -250,6 +257,33 @@ function findLink (target) {
|
||||||
.favourited {
|
.favourited {
|
||||||
color: #e6a23c;
|
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,
|
.reply:hover,
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import ElementUI from 'element-ui'
|
import ElementUI from 'element-ui'
|
||||||
|
import Popover from 'vue-js-popover'
|
||||||
import 'element-ui/lib/theme-chalk/index.css'
|
import 'element-ui/lib/theme-chalk/index.css'
|
||||||
import 'vue-awesome/icons'
|
import 'vue-awesome/icons'
|
||||||
import Icon from 'vue-awesome/components/Icon'
|
import Icon from 'vue-awesome/components/Icon'
|
||||||
|
@ -11,6 +12,7 @@ import router from './router'
|
||||||
import store from './store'
|
import store from './store'
|
||||||
|
|
||||||
Vue.use(ElementUI)
|
Vue.use(ElementUI)
|
||||||
|
Vue.use(Popover)
|
||||||
Vue.component('icon', Icon)
|
Vue.component('icon', Icon)
|
||||||
|
|
||||||
if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
|
if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
|
||||||
|
|
Loading…
Reference in New Issue