diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/account_actions/account_actions.js | 59 | ||||
| -rw-r--r-- | src/components/account_actions/account_actions.vue | 133 | ||||
| -rw-r--r-- | src/components/follow_button/follow_button.js | 58 | ||||
| -rw-r--r-- | src/components/follow_button/follow_button.vue | 13 | ||||
| -rw-r--r-- | src/components/user_card/user_card.js | 48 | ||||
| -rw-r--r-- | src/components/user_card/user_card.vue | 135 |
6 files changed, 178 insertions, 268 deletions
diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js deleted file mode 100644 index 1092a96a..00000000 --- a/src/components/account_actions/account_actions.js +++ /dev/null @@ -1,59 +0,0 @@ -import FollowButton from '../follow_button/follow_button.vue' -import ProgressButton from '../progress_button/progress_button.vue' - -const AccountActions = { - props: [ - 'user' - ], - data () { - return { - showDropDown: false - } - }, - components: { - FollowButton, - ProgressButton - }, - computed: { - tagsSet () { - return new Set(this.user.tags) - }, - hasTagPolicy () { - return this.$store.state.instance.tagPolicyAvailable - } - }, - methods: { - subscribeUser () { - return this.$store.dispatch('subscribeUser', this.user.id) - }, - unsubscribeUser () { - return this.$store.dispatch('unsubscribeUser', this.user.id) - }, - showRepeats () { - this.$store.dispatch('showReblogs', this.user.id) - }, - hideRepeats () { - this.$store.dispatch('hideReblogs', this.user.id) - }, - muteUser () { - this.$store.dispatch('muteUser', this.user.id) - }, - unmuteUser () { - this.$store.dispatch('unmuteUser', this.user.id) - }, - blockUser () { - this.$store.dispatch('blockUser', this.user.id) - }, - unblockUser () { - this.$store.dispatch('unblockUser', this.user.id) - }, - reportUser () { - this.$store.dispatch('openUserReportingModal', this.user.id) - }, - mentionUser () { - this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user }) - } - } -} - -export default AccountActions diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue deleted file mode 100644 index ce508b0a..00000000 --- a/src/components/account_actions/account_actions.vue +++ /dev/null @@ -1,133 +0,0 @@ -<template> - <div class="account-actions"> - <FollowButton :user="user" /> - <v-popover - trigger="click" - class="account-tools-popover" - :container="false" - placement="bottom-end" - :offset="5" - @show="showDropDown = true" - @hide="showDropDown = false" - > - <div slot="popover"> - <div class="dropdown-menu"> - <button - class="btn btn-default btn-block dropdown-item" - @click="mentionUser" - > - {{ $t('user_card.mention') }} - </button> - <template v-if="user.following"> - <div - role="separator" - class="dropdown-divider" - /> - <ProgressButton - v-if="!user.subscribed" - class="btn btn-default dropdown-item" - :click="subscribeUser" - :title="$t('user_card.subscribe')" - > - {{ $t('user_card.subscribe') }} - </ProgressButton> - <ProgressButton - v-else - class="btn btn-default pressed dropdown-item" - :click="unsubscribeUser" - :title="$t('user_card.unsubscribe')" - > - {{ $t('user_card.unsubscribe') }} - </ProgressButton> - - <button - v-if="user.showing_reblogs" - class="btn btn-default dropdown-item" - @click="hideRepeats" - > - {{ $t('user_card.hide_repeats') }} - </button> - <button - v-if="!user.showing_reblogs" - class="btn btn-default pressed dropdown-item" - @click="showRepeats" - > - {{ $t('user_card.show_repeats') }} - </button> - </template> - <div - role="separator" - class="dropdown-divider" - /> - <button - v-if="user.muted" - class="btn btn-default btn-block pressed dropdown-item" - @click="unmuteUser" - > - {{ $t('user_card.muted') }} - </button> - <button - v-else - class="btn btn-default btn-block dropdown-item" - @click="muteUser" - > - {{ $t('user_card.mute') }} - </button> - <button - v-if="user.statusnet_blocking" - class="btn btn-default btn-block pressed dropdown-item" - @click="unblockUser" - > - {{ $t('user_card.blocked') }} - </button> - <button - v-else - class="btn btn-default btn-block dropdown-item" - @click="blockUser" - > - {{ $t('user_card.block') }} - </button> - <button - class="btn btn-default btn-block dropdown-item" - @click="reportUser" - > - {{ $t('user_card.report') }} - </button> - </div> - </div> - <button class="btn btn-default ellipsis-button"> - <i class="icon-ellipsis" /> - </button> - </v-popover> - </div> -</template> - -<script src="./account_actions.js"></script> - -<style lang="scss"> -@import '../../_variables.scss'; -@import '../popper/popper.scss'; - -.account-tools-popover { - height: 100%; - .trigger { - display: flex !important; - height: 100%; - } -} -.account-actions { - display: flex; - flex: 0 0 0 !important; - margin: 0 3em 0 0 !important; -} -.account-actions .follow-button { - border-top-right-radius: 0px; - border-bottom-right-radius: 0px; -} -.account-actions .ellipsis-button { - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; -} -.account-actions .button-icon { -} -</style> diff --git a/src/components/follow_button/follow_button.js b/src/components/follow_button/follow_button.js deleted file mode 100644 index 9d2834ab..00000000 --- a/src/components/follow_button/follow_button.js +++ /dev/null @@ -1,58 +0,0 @@ -import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate' -export default { - props: ['user'], - data () { - return { - inProgress: false - } - }, - computed: { - isPressed () { - return this.inProgress || this.user.following - }, - title () { - if (this.inProgress || this.user.following) { - return 'user_card.follow_unfollow' - } else if (this.user.requested) { - return 'user_card.follow_again' - } else { - return '' - } - }, - label () { - if (this.inProgress) { - return 'user_card.follow_progress' - } else if (this.user.following) { - return 'user_card.following' - } else if (this.user.requested) { - return 'user_card.follow_sent' - } else { - return 'user_card.follow' - } - } - }, - methods: { - doClick () { - if (this.user.following) { - this.unfollowUser() - } else { - this.followUser() - } - }, - followUser () { - const store = this.$store - this.inProgress = true - requestFollow(this.user, store).then(() => { - this.inProgress = false - }) - }, - unfollowUser () { - const store = this.$store - this.inProgress = true - requestUnfollow(this.user, store).then(() => { - this.inProgress = false - store.commit('removeStatus', { timeline: 'friends', userId: this.user.id }) - }) - } - } -} diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue deleted file mode 100644 index 61aa75a0..00000000 --- a/src/components/follow_button/follow_button.vue +++ /dev/null @@ -1,13 +0,0 @@ -<template> - <button - class="btn btn-default btn-block follow-button" - :class="{ pressed: isPressed }" - :disabled="inProgress" - :title="$t(title)" - @click="doClick" - > - {{ $t(label) }} - </button> -</template> - -<script src="./follow_button.js"></script> diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js index c09e5654..015a5762 100644 --- a/src/components/user_card/user_card.js +++ b/src/components/user_card/user_card.js @@ -2,8 +2,8 @@ import UserAvatar from '../user_avatar/user_avatar.vue' import RemoteFollow from '../remote_follow/remote_follow.vue' import ProgressButton from '../progress_button/progress_button.vue' import ModerationTools from '../moderation_tools/moderation_tools.vue' -import AccountActions from '../account_actions/account_actions.vue' import { hex2rgb } from '../../services/color_convert/color_convert.js' +import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' export default { @@ -98,10 +98,48 @@ export default { UserAvatar, RemoteFollow, ModerationTools, - AccountActions, ProgressButton }, methods: { + showRepeats () { + this.$store.dispatch('showReblogs', this.user.id) + }, + hideRepeats () { + this.$store.dispatch('hideReblogs', this.user.id) + }, + followUser () { + const store = this.$store + this.followRequestInProgress = true + requestFollow(this.user, store).then(() => { + this.followRequestInProgress = false + }) + }, + unfollowUser () { + const store = this.$store + this.followRequestInProgress = true + requestUnfollow(this.user, store).then(() => { + this.followRequestInProgress = false + store.commit('removeStatus', { timeline: 'friends', userId: this.user.id }) + }) + }, + blockUser () { + this.$store.dispatch('blockUser', this.user.id) + }, + unblockUser () { + this.$store.dispatch('unblockUser', this.user.id) + }, + muteUser () { + this.$store.dispatch('muteUser', this.user.id) + }, + unmuteUser () { + this.$store.dispatch('unmuteUser', this.user.id) + }, + subscribeUser () { + return this.$store.dispatch('subscribeUser', this.user.id) + }, + unsubscribeUser () { + return this.$store.dispatch('unsubscribeUser', this.user.id) + }, setProfileView (v) { if (this.switcher) { const store = this.$store @@ -122,6 +160,9 @@ export default { this.$store.state.instance.restrictedNicknames ) }, + reportUser () { + this.$store.dispatch('openUserReportingModal', this.user.id) + }, zoomAvatar () { const attachment = { url: this.user.profile_image_url_original, @@ -129,6 +170,9 @@ export default { } this.$store.dispatch('setMedia', [attachment]) this.$store.dispatch('setCurrent', attachment) + }, + mentionUser () { + this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user }) } } } diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index abaef85f..f465467c 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -131,12 +131,135 @@ </label> </div> </div> - <div v-if="loggedIn && isOtherUser" class="user-interactions" > - <AccountActions :user="user" /> + <div v-if="!user.following"> + <button + class="btn btn-default btn-block" + :disabled="followRequestInProgress" + :title="user.requested ? $t('user_card.follow_again') : ''" + @click="followUser" + > + <template v-if="followRequestInProgress"> + {{ $t('user_card.follow_progress') }} + </template> + <template v-else-if="user.requested"> + {{ $t('user_card.follow_sent') }} + </template> + <template v-else> + {{ $t('user_card.follow') }} + </template> + </button> + </div> + <div v-else-if="followRequestInProgress"> + <button + class="btn btn-default btn-block pressed" + disabled + :title="$t('user_card.follow_unfollow')" + @click="unfollowUser" + > + {{ $t('user_card.follow_progress') }} + </button> + </div> + <div + v-else + class="btn-group" + > + <button + class="btn btn-default pressed" + :title="$t('user_card.follow_unfollow')" + @click="unfollowUser" + > + {{ $t('user_card.following') }} + </button> + <ProgressButton + v-if="!user.subscribed" + class="btn btn-default" + :click="subscribeUser" + :title="$t('user_card.subscribe')" + > + <i class="icon-bell-alt" /> + </ProgressButton> + <ProgressButton + v-else + class="btn btn-default pressed" + :click="unsubscribeUser" + :title="$t('user_card.unsubscribe')" + > + <i class="icon-bell-ringing-o" /> + </ProgressButton> + <button + v-if="user.showing_reblogs" + class="btn btn-default" + :title="$t('user_card.hide_repeats')" + @click="hideRepeats" + > + <i class="icon-eye" /> + </button> + <button + v-if="!user.showing_reblogs" + class="btn btn-default pressed" + :title="$t('user_card.show_repeats')" + @click="showRepeats" + > + <i class="icon-eye-off" /> + </button> + </div> + + <div> + <button + class="btn btn-default btn-block" + @click="mentionUser" + > + {{ $t('user_card.mention') }} + </button> + </div> + + <div> + <button + v-if="user.muted" + class="btn btn-default btn-block pressed" + @click="unmuteUser" + > + {{ $t('user_card.muted') }} + </button> + <button + v-else + class="btn btn-default btn-block" + @click="muteUser" + > + {{ $t('user_card.mute') }} + </button> + </div> + + <div> + <button + v-if="user.statusnet_blocking" + class="btn btn-default btn-block pressed" + @click="unblockUser" + > + {{ $t('user_card.blocked') }} + </button> + <button + v-else + class="btn btn-default btn-block" + @click="blockUser" + > + {{ $t('user_card.block') }} + </button> + </div> + + <div> + <button + class="btn btn-default btn-block" + @click="reportUser" + > + {{ $t('user_card.report') }} + </button> + </div> + <ModerationTools v-if="loggedIn.role === "admin"" :user="user" @@ -480,9 +603,15 @@ position: relative; display: flex; flex-flow: row wrap; - justify-content: flex-end; + justify-content: space-between; margin-right: -.75em; + > * { + flex: 1 0 0; + margin: 0 .75em .6em 0; + white-space: nowrap; + } + button { margin: 0; |