56d1232588
There's a seperator between certain blocks of items. I show/hide the seperator together with the block under it. When a block with a seperator is at the top, the seperator doesn't show, keeping a consistent look with seperators only between blocks. I also hide granting roles for deactivated accounts because that doesn't make much sense to me. For the rest the items are hidden when you're not privileged. When there's no privileges that show items, the menu isn't shown either.
198 lines
5.9 KiB
JavaScript
198 lines
5.9 KiB
JavaScript
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 FollowButton from '../follow_button/follow_button.vue'
|
|
import ModerationTools from '../moderation_tools/moderation_tools.vue'
|
|
import AccountActions from '../account_actions/account_actions.vue'
|
|
import Select from '../select/select.vue'
|
|
import RichContent from 'src/components/rich_content/rich_content.jsx'
|
|
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
|
|
import { mapGetters } from 'vuex'
|
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
|
import {
|
|
faBell,
|
|
faRss,
|
|
faSearchPlus,
|
|
faExternalLinkAlt,
|
|
faEdit,
|
|
faTimes,
|
|
faExpandAlt
|
|
} from '@fortawesome/free-solid-svg-icons'
|
|
|
|
library.add(
|
|
faRss,
|
|
faBell,
|
|
faSearchPlus,
|
|
faExternalLinkAlt,
|
|
faEdit,
|
|
faTimes,
|
|
faExpandAlt
|
|
)
|
|
|
|
export default {
|
|
props: [
|
|
'userId',
|
|
'switcher',
|
|
'selected',
|
|
'hideBio',
|
|
'rounded',
|
|
'bordered',
|
|
'avatarAction', // default - open profile, 'zoom' - zoom, function - call function
|
|
'onClose'
|
|
],
|
|
data () {
|
|
return {
|
|
followRequestInProgress: false,
|
|
betterShadow: this.$store.state.interface.browserSupport.cssFilter
|
|
}
|
|
},
|
|
created () {
|
|
this.$store.dispatch('fetchUserRelationship', this.user.id)
|
|
},
|
|
computed: {
|
|
user () {
|
|
return this.$store.getters.findUser(this.userId)
|
|
},
|
|
relationship () {
|
|
return this.$store.getters.relationship(this.userId)
|
|
},
|
|
classes () {
|
|
return [{
|
|
'-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
|
|
'-rounded': this.rounded === true, // set border-radius for all sides
|
|
'-bordered': this.bordered === true, // set border for all sides
|
|
'-popover': !!this.onClose // set popover rounding
|
|
}]
|
|
},
|
|
style () {
|
|
return {
|
|
backgroundImage: [
|
|
'linear-gradient(to bottom, var(--profileTint), var(--profileTint))',
|
|
`url(${this.user.cover_photo})`
|
|
].join(', ')
|
|
}
|
|
},
|
|
isOtherUser () {
|
|
return this.user.id !== this.$store.state.users.currentUser.id
|
|
},
|
|
subscribeUrl () {
|
|
// eslint-disable-next-line no-undef
|
|
const serverUrl = new URL(this.user.statusnet_profile_url)
|
|
return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
|
|
},
|
|
loggedIn () {
|
|
return this.$store.state.users.currentUser
|
|
},
|
|
dailyAvg () {
|
|
const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
|
|
return Math.round(this.user.statuses_count / days)
|
|
},
|
|
userHighlightType: {
|
|
get () {
|
|
const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
|
|
return (data && data.type) || 'disabled'
|
|
},
|
|
set (type) {
|
|
const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
|
|
if (type !== 'disabled') {
|
|
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) || '#FFFFFF', type })
|
|
} else {
|
|
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
|
|
}
|
|
},
|
|
...mapGetters(['mergedConfig'])
|
|
},
|
|
userHighlightColor: {
|
|
get () {
|
|
const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
|
|
return data && data.color
|
|
},
|
|
set (color) {
|
|
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
|
|
}
|
|
},
|
|
visibleRole () {
|
|
const rights = this.user.rights
|
|
if (!rights) { return }
|
|
const validRole = rights.admin || rights.moderator
|
|
const roleTitle = rights.admin ? 'admin' : 'moderator'
|
|
return validRole && roleTitle
|
|
},
|
|
hideFollowsCount () {
|
|
return this.isOtherUser && this.user.hide_follows_count
|
|
},
|
|
hideFollowersCount () {
|
|
return this.isOtherUser && this.user.hide_followers_count
|
|
},
|
|
showModerationMenu () {
|
|
const privileges = this.loggedIn.privileges
|
|
return this.loggedIn.role === 'admin' || privileges.includes('users_manage_activation_state') || privileges.includes('users_delete') || privileges.includes('users_manage_tags')
|
|
},
|
|
...mapGetters(['mergedConfig'])
|
|
},
|
|
components: {
|
|
UserAvatar,
|
|
RemoteFollow,
|
|
ModerationTools,
|
|
AccountActions,
|
|
ProgressButton,
|
|
FollowButton,
|
|
Select,
|
|
RichContent
|
|
},
|
|
methods: {
|
|
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
|
|
store.commit('setProfileView', { v })
|
|
}
|
|
},
|
|
linkClicked ({ target }) {
|
|
if (target.tagName === 'SPAN') {
|
|
target = target.parentNode
|
|
}
|
|
if (target.tagName === 'A') {
|
|
window.open(target.href, '_blank')
|
|
}
|
|
},
|
|
userProfileLink (user) {
|
|
return generateProfileLink(
|
|
user.id, user.screen_name,
|
|
this.$store.state.instance.restrictedNicknames
|
|
)
|
|
},
|
|
openProfileTab () {
|
|
this.$store.dispatch('openSettingsModalTab', 'profile')
|
|
},
|
|
zoomAvatar () {
|
|
const attachment = {
|
|
url: this.user.profile_image_url_original,
|
|
mimetype: 'image'
|
|
}
|
|
this.$store.dispatch('setMedia', [attachment])
|
|
this.$store.dispatch('setCurrentMedia', attachment)
|
|
},
|
|
mentionUser () {
|
|
this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
|
|
},
|
|
onAvatarClickHandler (e) {
|
|
if (this.onAvatarClick) {
|
|
e.preventDefault()
|
|
this.onAvatarClick()
|
|
}
|
|
}
|
|
}
|
|
}
|