added acccount_actions component

This commit is contained in:
Maksim Pechnikov 2019-09-30 20:34:51 +03:00
parent 19cb98b85f
commit 188b6f56ed
6 changed files with 268 additions and 178 deletions

View file

@ -0,0 +1,59 @@
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

View file

@ -0,0 +1,133 @@
<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>

View file

@ -0,0 +1,58 @@
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 })
})
}
}
}

View file

@ -0,0 +1,13 @@
<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>

View file

@ -2,8 +2,8 @@ import UserAvatar from '../user_avatar/user_avatar.vue'
import RemoteFollow from '../remote_follow/remote_follow.vue' import RemoteFollow from '../remote_follow/remote_follow.vue'
import ProgressButton from '../progress_button/progress_button.vue' import ProgressButton from '../progress_button/progress_button.vue'
import ModerationTools from '../moderation_tools/moderation_tools.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 { 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' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
export default { export default {
@ -98,48 +98,10 @@ export default {
UserAvatar, UserAvatar,
RemoteFollow, RemoteFollow,
ModerationTools, ModerationTools,
AccountActions,
ProgressButton ProgressButton
}, },
methods: { 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) { setProfileView (v) {
if (this.switcher) { if (this.switcher) {
const store = this.$store const store = this.$store
@ -160,9 +122,6 @@ export default {
this.$store.state.instance.restrictedNicknames this.$store.state.instance.restrictedNicknames
) )
}, },
reportUser () {
this.$store.dispatch('openUserReportingModal', this.user.id)
},
zoomAvatar () { zoomAvatar () {
const attachment = { const attachment = {
url: this.user.profile_image_url_original, url: this.user.profile_image_url_original,
@ -170,9 +129,6 @@ export default {
} }
this.$store.dispatch('setMedia', [attachment]) this.$store.dispatch('setMedia', [attachment])
this.$store.dispatch('setCurrent', attachment) this.$store.dispatch('setCurrent', attachment)
},
mentionUser () {
this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
} }
} }
} }

View file

@ -131,135 +131,12 @@
</label> </label>
</div> </div>
</div> </div>
<div <div
v-if="loggedIn && isOtherUser" v-if="loggedIn && isOtherUser"
class="user-interactions" class="user-interactions"
> >
<div v-if="!user.following"> <AccountActions :user="user" />
<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 <ModerationTools
v-if="loggedIn.role === &quot;admin&quot;" v-if="loggedIn.role === &quot;admin&quot;"
:user="user" :user="user"
@ -603,15 +480,9 @@
position: relative; position: relative;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: space-between; justify-content: flex-end;
margin-right: -.75em; margin-right: -.75em;
> * {
flex: 1 0 0;
margin: 0 .75em .6em 0;
white-space: nowrap;
}
button { button {
margin: 0; margin: 0;