diff options
| -rw-r--r-- | src/components/delete_button/delete_button.js | 21 | ||||
| -rw-r--r-- | src/components/delete_button/delete_button.vue | 21 | ||||
| -rw-r--r-- | src/components/extra_buttons/extra_buttons.js | 51 | ||||
| -rw-r--r-- | src/components/extra_buttons/extra_buttons.vue | 46 | ||||
| -rw-r--r-- | src/components/moderation_tools/moderation_tools.vue | 8 | ||||
| -rw-r--r-- | src/components/status/status.js | 27 | ||||
| -rw-r--r-- | src/components/status/status.vue | 8 | ||||
| -rw-r--r-- | src/i18n/en.json | 4 |
8 files changed, 118 insertions, 68 deletions
diff --git a/src/components/delete_button/delete_button.js b/src/components/delete_button/delete_button.js deleted file mode 100644 index 22f24625..00000000 --- a/src/components/delete_button/delete_button.js +++ /dev/null @@ -1,21 +0,0 @@ -const DeleteButton = { - props: [ 'status' ], - methods: { - deleteStatus () { - const confirmed = window.confirm('Do you really want to delete this status?') - if (confirmed) { - this.$store.dispatch('deleteStatus', { id: this.status.id }) - } - } - }, - computed: { - currentUser () { return this.$store.state.users.currentUser }, - canDelete () { - if (!this.currentUser) { return } - const superuser = this.currentUser.rights.moderator || this.currentUser.rights.admin - return superuser || this.status.user.id === this.currentUser.id - } - } -} - -export default DeleteButton diff --git a/src/components/delete_button/delete_button.vue b/src/components/delete_button/delete_button.vue deleted file mode 100644 index f4c91cfd..00000000 --- a/src/components/delete_button/delete_button.vue +++ /dev/null @@ -1,21 +0,0 @@ -<template> - <div v-if="canDelete"> - <a href="#" v-on:click.prevent="deleteStatus()"> - <i class='button-icon icon-cancel delete-status'></i> - </a> - </div> -</template> - -<script src="./delete_button.js" ></script> - -<style lang="scss"> -@import '../../_variables.scss'; - -.icon-cancel,.delete-status { - cursor: pointer; - &:hover { - color: $fallback--cRed; - color: var(--cRed, $fallback--cRed); - } -} -</style> diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js new file mode 100644 index 00000000..40bab2ab --- /dev/null +++ b/src/components/extra_buttons/extra_buttons.js @@ -0,0 +1,51 @@ +import Popper from 'vue-popperjs/src/component/popper.js.vue' + +const ExtraButtons = { + props: [ 'status' ], + components: { + Popper + }, + data () { + return { + showDropDown: false + } + }, + methods: { + deleteStatus () { + const confirmed = window.confirm(this.$t('status.delete_confirm')) + if (confirmed) { + this.$store.dispatch('deleteStatus', { id: this.status.id }) + } + }, + toggleMenu () { + this.showDropDown = !this.showDropDown + }, + pinStatus () { + this.$store.state.api.backendInteractor.pinOwnStatus(this.status.id).then((status) => { + if (status.error) { + this.$emit('onError', status.error) + } else { + this.$store.dispatch('updatePinned', status) + } + }) + }, + unpinStatus () { + this.$store.state.api.backendInteractor.unpinOwnStatus(this.status.id).then((status) => { + this.$store.dispatch('updatePinned', status) + }) + } + }, + computed: { + currentUser () { return this.$store.state.users.currentUser }, + canDelete () { + if (!this.currentUser) { return } + const superuser = this.currentUser.rights.moderator || this.currentUser.rights.admin + return superuser || this.status.user.id === this.currentUser.id + }, + ownStatus () { + return this.status.user.id === this.currentUser.id + } + } +} + +export default ExtraButtons diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue new file mode 100644 index 00000000..13f8587b --- /dev/null +++ b/src/components/extra_buttons/extra_buttons.vue @@ -0,0 +1,46 @@ +<template> + <Popper + trigger="click" + @hide='showDropDown = false' + append-to-body + :options="{ + placement: 'top', + modifiers: { + arrow: { enabled: true }, + offset: { offset: '0, 5px' }, + } + }" + > + <div class="popper-wrapper"> + <div class="dropdown-menu"> + <button class="dropdown-item dropdown-item-icon" @click.prevent="pinStatus" v-if="!status.pinned && ownStatus"> + <i class="icon-pin"></i><span>{{$t("status.pin")}}</span> + </button> + <button class="dropdown-item dropdown-item-icon" @click.prevent="unpinStatus" v-if="status.pinned && ownStatus"> + <i class="icon-pin"></i><span>{{$t("status.unpin")}}</span> + </button> + <button class="dropdown-item dropdown-item-icon" @click.prevent="deleteStatus" v-if="canDelete"> + <i class="icon-cancel"></i><span>{{$t("status.delete")}}</span> + </button> + </div> + </div> + <div class="button-icon" slot="reference" @click="toggleMenu"> + <i class='icon-ellipsis' :class="{'icon-clicked': showDropDown}"></i> + </div> + </Popper> +</template> + +<script src="./extra_buttons.js" ></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.icon-ellipsis { + cursor: pointer; + + &:hover, &.icon-clicked { + color: $fallback--cBlue; + color: var(--cBlue, $fallback--cBlue); + } +} +</style> diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue index c24a2280..c9e3fc78 100644 --- a/src/components/moderation_tools/moderation_tools.vue +++ b/src/components/moderation_tools/moderation_tools.vue @@ -127,6 +127,14 @@ width: 100%; height: 100%; + &-icon { + padding-left: 0.5rem; + + i { + margin-right: 0.25rem; + } + } + &:hover { // TODO: improve the look on breeze themes background-color: $fallback--fg; diff --git a/src/components/status/status.js b/src/components/status/status.js index 85159fc4..fa4b426c 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -1,7 +1,7 @@ import Attachment from '../attachment/attachment.vue' import FavoriteButton from '../favorite_button/favorite_button.vue' import RetweetButton from '../retweet_button/retweet_button.vue' -import DeleteButton from '../delete_button/delete_button.vue' +import ExtraButtons from '../extra_buttons/extra_buttons.vue' import PostStatusForm from '../post_status_form/post_status_form.vue' import UserCard from '../user_card/user_card.vue' import UserAvatar from '../user_avatar/user_avatar.vue' @@ -280,7 +280,7 @@ const Status = { Attachment, FavoriteButton, RetweetButton, - DeleteButton, + ExtraButtons, PostStatusForm, UserCard, UserAvatar, @@ -301,6 +301,12 @@ const Status = { return 'icon-globe' } }, + showError (error) { + this.error = error + setTimeout(() => { + this.error = null + }, 5000) + }, linkClicked (event) { let { target } = event if (target.tagName === 'SPAN') { @@ -358,23 +364,6 @@ const Status = { this.expandingSubject = true } }, - pinStatus () { - this.$store.state.api.backendInteractor.pinOwnStatus(this.status.id).then((status) => { - if (status.error) { - this.error = status.error - setTimeout(() => { - this.error = null - }, 5000) - } else { - this.$store.dispatch('updatePinned', status) - } - }) - }, - unpinStatus () { - this.$store.state.api.backendInteractor.unpinOwnStatus(this.status.id).then((status) => { - this.$store.dispatch('updatePinned', status) - }) - }, replyEnter (id, event) { this.showPreview = true const targetId = id diff --git a/src/components/status/status.vue b/src/components/status/status.vue index bc7ff43c..1644f6b0 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -16,9 +16,6 @@ <div v-if="pinned" class="status-pin"> <i class="fa icon-pin faint"></i> <span class="faint">Pinned</span> - <div class="button-icon button-action-icon" v-if="status.pinned && ownStatus" @click.prevent="unpinStatus" title="Unpin"> - <i class="fa icon-cancel"></i> - </div> </div> <div v-if="retweet && !noHeading && !inConversation" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info"> <UserAvatar class="media-left" v-if="retweet" :betterShadow="betterShadow" :user="statusoid.user"/> @@ -60,9 +57,6 @@ <a :href="status.external_url" target="_blank" v-if="!status.is_local && !isPreview" class="source_url" title="Source"> <i class="button-icon icon-link-ext-alt"></i> </a> - <div class="button-icon button-action-icon" v-if="!status.pinned && ownStatus" @click.prevent="pinStatus" title="Pin"> - <i class="fa icon-pin"></i> - </div> <div class="button-icon button-action-icon" v-if="expandable && !isPreview" @click.prevent="toggleExpanded" title="Expand"> <i class="icon-plus-squared"></i> </div> @@ -175,7 +169,7 @@ </div> <retweet-button :visibility='status.visibility' :loggedIn='loggedIn' :status='status'></retweet-button> <favorite-button :loggedIn='loggedIn' :status='status'></favorite-button> - <delete-button :status='status'></delete-button> + <extra-buttons :status="status" @onError="showError"></extra-buttons> </div> </div> </div> diff --git a/src/i18n/en.json b/src/i18n/en.json index b4f0deb2..8429367c 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -402,6 +402,10 @@ "status": { "favorites": "Favorites", "repeats": "Repeats", + "delete": "Delete status", + "pin": "Pin on profile", + "unpin": "Unpin form profile", + "delete_confirm": "Do you really want to delete this status?", "reply_to": "Reply to", "replies_list": "Replies:" }, |