refs #1934 Use el-popper instead of vue-popper in Toot menu

This commit is contained in:
AkiraFukushima 2020-11-28 21:55:22 +09:00
parent d16d0c9b70
commit 730c1b08c6
3 changed files with 64 additions and 64 deletions

View File

@ -176,7 +176,7 @@
"electron-json-storage": "^4.2.0",
"electron-log": "^4.2.2",
"electron-window-state": "^5.0.3",
"element-ui": "2.13.2",
"element-ui": "2.14.1",
"emoji-mart-vue": "^2.6.6",
"emojilib": "^2.4.0",
"i18next": "^19.8.3",

View File

@ -198,36 +198,34 @@
<el-button class="pinned" type="text" :title="$t('cards.toot.pinned')" :aria-label="$t('cards.toot.pinned')" v-show="pinned">
<icon name="thumbtack" scale="0.9"></icon>
</el-button>
<popper trigger="click" :options="{ placement: 'bottom' }" ref="popper">
<div class="popper toot-menu">
<ul class="menu-list">
<li role="button" @click="openDetail(message)" v-show="!detailed">
{{ $t('cards.toot.view_toot_detail') }}
</li>
<li role="button" @click="openBrowser(originalMessage)">
{{ $t('cards.toot.open_in_browser') }}
</li>
<li role="button" @click="copyLink(originalMessage)">
{{ $t('cards.toot.copy_link_to_toot') }}
</li>
<li role="button" class="separate" @click="confirmMute()">
{{ $t('cards.toot.mute') }}
</li>
<li role="button" @click="block()">
{{ $t('cards.toot.block') }}
</li>
<li role="button" @click="reportUser()" v-if="!isMyMessage">
{{ $t('cards.toot.report') }}
</li>
<li role="button" class="separate" @click="deleteToot(message)" v-if="isMyMessage">
{{ $t('cards.toot.delete') }}
</li>
</ul>
</div>
<el-popover placement="bottom" width="200" trigger="click" popper-class="status-menu-popper" ref="popper">
<ul class="menu-list">
<li role="button" @click="openDetail(message)" v-show="!detailed">
{{ $t('cards.toot.view_toot_detail') }}
</li>
<li role="button" @click="openBrowser(originalMessage)">
{{ $t('cards.toot.open_in_browser') }}
</li>
<li role="button" @click="copyLink(originalMessage)">
{{ $t('cards.toot.copy_link_to_toot') }}
</li>
<li role="button" class="separate" @click="confirmMute()">
{{ $t('cards.toot.mute') }}
</li>
<li role="button" @click="block()">
{{ $t('cards.toot.block') }}
</li>
<li role="button" @click="reportUser()" v-if="!isMyMessage">
{{ $t('cards.toot.report') }}
</li>
<li role="button" class="separate" @click="deleteToot(message)" v-if="isMyMessage">
{{ $t('cards.toot.delete') }}
</li>
</ul>
<el-button slot="reference" type="text" :title="$t('cards.toot.detail')">
<icon name="ellipsis-h" scale="0.9"></icon>
</el-button>
</popper>
</el-popover>
</div>
<div class="application" v-show="application !== null">
{{ $t('cards.toot.via', { application: application }) }}
@ -949,38 +947,6 @@ export default {
.pinned {
color: gold;
}
.toot-menu {
padding: 2px 0;
border-color: #909399;
.menu-list {
padding: 0;
margin: 4px 0;
font-size: 0.9rem;
list-style-type: none;
line-height: 32px;
text-align: left;
color: #303133;
li {
box-sizing: border-box;
padding: 0 32px 0 16px;
&:hover {
background-color: #409eff;
color: #fff;
cursor: pointer;
}
&.separate {
border-top: 1px solid var(--theme-border-color);
padding-top: 4px;
margin-top: 2px;
}
}
}
}
}
.application {
@ -1024,3 +990,37 @@ export default {
margin: 4px 0 0;
}
</style>
<style lang="scss">
.status-menu-popper {
padding: 2px 0;
border-color: #909399;
.menu-list {
padding: 0;
margin: 4px 0;
font-size: 0.9rem;
list-style-type: none;
line-height: 32px;
text-align: left;
color: #303133;
li {
box-sizing: border-box;
padding: 0 32px 0 16px;
&:hover {
background-color: #409eff;
color: #fff;
cursor: pointer;
}
&.separate {
border-top: 1px solid var(--theme-border-color);
padding-top: 4px;
margin-top: 2px;
}
}
}
}
</style>

View File

@ -4698,10 +4698,10 @@ element-matches@^0.1.2:
resolved "https://registry.yarnpkg.com/element-matches/-/element-matches-0.1.2.tgz#7345cb71e965bd2b12f725e524591c102198361a"
integrity sha512-yWh1otcs3OKUWDvu/IxyI36ZI3WNaRZlI0uG/DK6fu0pap0VYZ0J5pEGTk1zakme+hT0OKHwhlHc0N5TJhY6yQ==
element-ui@2.13.2:
version "2.13.2"
resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.13.2.tgz#582bf47aaaaaafe23ea1958fae217a687ad06447"
integrity sha512-r761DRPssMPKDiJZWFlG+4e4vr0cRG/atKr3Eqr8Xi0tQMNbtmYU1QXvFnKiFPFFGkgJ6zS6ASkG+sellcoHlQ==
element-ui@2.14.1:
version "2.14.1"
resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.14.1.tgz#8b5745c7366c1c1a603bb6c021286ea7187e2aa2"
integrity sha512-Uje0J12dBaXdyvt/EtuDA8diFbYTdO7uI4QCfl7zmEJmE1WxgCSVKhlRRoL8MDonO8pyNVhB4n0AFAR14g56nw==
dependencies:
async-validator "~1.8.1"
babel-helper-vue-jsx-merge-props "^2.0.0"