diff options
Diffstat (limited to 'src/components/extra_buttons')
| -rw-r--r-- | src/components/extra_buttons/extra_buttons.js | 27 | ||||
| -rw-r--r-- | src/components/extra_buttons/extra_buttons.vue | 108 |
2 files changed, 109 insertions, 26 deletions
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js index 5e0c36bb..dd45b6b9 100644 --- a/src/components/extra_buttons/extra_buttons.js +++ b/src/components/extra_buttons/extra_buttons.js @@ -1,4 +1,28 @@ import Popover from '../popover/popover.vue' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faEllipsisH, + faBookmark, + faEyeSlash, + faThumbtack, + faShareAlt, + faExternalLinkAlt +} from '@fortawesome/free-solid-svg-icons' +import { + faBookmark as faBookmarkReg, + faFlag +} from '@fortawesome/free-regular-svg-icons' + +library.add( + faEllipsisH, + faBookmark, + faBookmarkReg, + faEyeSlash, + faThumbtack, + faShareAlt, + faExternalLinkAlt, + faFlag +) const ExtraButtons = { props: [ 'status' ], @@ -44,6 +68,9 @@ const ExtraButtons = { this.$store.dispatch('unbookmark', { id: this.status.id }) .then(() => this.$emit('onSuccess')) .catch(err => this.$emit('onError', err.error.error)) + }, + reportStatus () { + this.$store.dispatch('openUserReportingModal', { userId: this.status.user.id, statusIds: [this.status.id] }) } }, computed: { diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue index 7a4e8642..e845d8fc 100644 --- a/src/components/extra_buttons/extra_buttons.vue +++ b/src/components/extra_buttons/extra_buttons.vue @@ -1,9 +1,11 @@ <template> <Popover + class="ExtraButtons" trigger="click" placement="top" - class="extra-button-popover" + :offset="{ y: 5 }" :bound-to="{ x: 'container' }" + remove-padding > <div slot="content" @@ -12,71 +14,122 @@ <div class="dropdown-menu"> <button v-if="canMute && !status.thread_muted" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="muteConversation" > - <i class="icon-eye-off" /><span>{{ $t("status.mute_conversation") }}</span> + <FAIcon + fixed-width + icon="eye-slash" + /><span>{{ $t("status.mute_conversation") }}</span> </button> <button v-if="canMute && status.thread_muted" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="unmuteConversation" > - <i class="icon-eye-off" /><span>{{ $t("status.unmute_conversation") }}</span> + <FAIcon + fixed-width + icon="eye-slash" + /><span>{{ $t("status.unmute_conversation") }}</span> </button> <button v-if="!status.pinned && canPin" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="pinStatus" @click="close" > - <i class="icon-pin" /><span>{{ $t("status.pin") }}</span> + <FAIcon + fixed-width + icon="thumbtack" + /><span>{{ $t("status.pin") }}</span> </button> <button v-if="status.pinned && canPin" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="unpinStatus" @click="close" > - <i class="icon-pin" /><span>{{ $t("status.unpin") }}</span> + <FAIcon + fixed-width + icon="thumbtack" + /><span>{{ $t("status.unpin") }}</span> </button> <button v-if="!status.bookmarked" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="bookmarkStatus" @click="close" > - <i class="icon-bookmark-empty" /><span>{{ $t("status.bookmark") }}</span> + <FAIcon + fixed-width + :icon="['far', 'bookmark']" + /><span>{{ $t("status.bookmark") }}</span> </button> <button v-if="status.bookmarked" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="unbookmarkStatus" @click="close" > - <i class="icon-bookmark" /><span>{{ $t("status.unbookmark") }}</span> + <FAIcon + fixed-width + icon="bookmark" + /><span>{{ $t("status.unbookmark") }}</span> </button> <button v-if="canDelete" - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="deleteStatus" @click="close" > - <i class="icon-cancel" /><span>{{ $t("status.delete") }}</span> + <FAIcon + fixed-width + icon="times" + /><span>{{ $t("status.delete") }}</span> </button> <button - class="dropdown-item dropdown-item-icon" + class="button-default dropdown-item dropdown-item-icon" @click.prevent="copyLink" @click="close" > - <i class="icon-share" /><span>{{ $t("status.copy_link") }}</span> + <FAIcon + fixed-width + icon="share-alt" + /><span>{{ $t("status.copy_link") }}</span> + </button> + <a + v-if="!status.is_local" + class="button-default dropdown-item dropdown-item-icon" + title="Source" + :href="status.external_url" + target="_blank" + > + <FAIcon + fixed-width + icon="external-link-alt" + /><span>{{ $t("status.external_source") }}</span> + </a> + <button + class="button-default dropdown-item dropdown-item-icon" + @click.prevent="reportStatus" + @click="close" + > + <FAIcon + fixed-width + :icon="['far', 'flag']" + /><span>{{ $t("user_card.report") }}</span> </button> </div> </div> - <i + <span slot="trigger" - class="icon-ellipsis button-icon" - /> + class="popover-trigger" + > + <FAIcon + class="fa-scale-110 fa-old-padding" + icon="ellipsis-h" + /> + </span> </Popover> </template> @@ -85,13 +138,16 @@ <style lang="scss"> @import '../../_variables.scss'; -.icon-ellipsis { - cursor: pointer; +.ExtraButtons { + .popover-trigger { + position: static; + padding: 10px; + margin: -10px; - &:hover, - .extra-button-popover.open & { - color: $fallback--text; - color: var(--text, $fallback--text); + &:hover .svg-inline--fa { + color: $fallback--text; + color: var(--text, $fallback--text); + } } } </style> |