Pinafore-Web-Client-Frontend/src/routes/_components/dialog/components/StatusOptionsDialog.html

251 lines
8.6 KiB
HTML

<ModalDialog
{id}
{label}
{title}
shrinkWidthToFit={true}
background="var(--main-bg)"
>
<GenericDialogList selectable={false} {items} on:click="onClick(event)"/>
</ModalDialog>
<script>
import ModalDialog from './ModalDialog.html'
import { store } from '../../../_store/store'
import GenericDialogList from './GenericDialogList.html'
import { setAccountFollowed } from '../../../_actions/follow'
import { doDeleteStatus } from '../../../_actions/delete'
import { show } from '../helpers/showDialog'
import { close } from '../helpers/closeDialog'
import { oncreate } from '../helpers/onCreateDialog'
import { setAccountBlocked } from '../../../_actions/block'
import { setStatusPinnedOrUnpinned } from '../../../_actions/pin'
import { setStatusBookmarkedOrUnbookmarked } from '../../../_actions/bookmark'
import { setConversationMuted } from '../../../_actions/muteConversation'
import { copyText } from '../../../_actions/copyText'
import { deleteAndRedraft } from '../../../_actions/deleteAndRedraft'
import { shareStatus } from '../../../_actions/share'
import { toggleMute } from '../../../_actions/toggleMute'
import { reportStatusOrAccount } from '../../../_actions/report'
import { formatIntl } from '../../../_utils/formatIntl'
export default {
oncreate,
data: () => ({
supportsWebShare: process.browser && typeof navigator.share === 'function'
}),
computed: {
relationship: ({ $currentAccountRelationship }) => $currentAccountRelationship,
account: ({ $currentAccountProfile }) => $currentAccountProfile,
verifyCredentials: ({ $currentVerifyCredentials }) => $currentVerifyCredentials,
statusId: ({ status }) => status.id,
pinned: ({ statusId, $currentStatusModifications, status }) => {
if ($currentStatusModifications && statusId in $currentStatusModifications.pins) {
return $currentStatusModifications.pins[statusId]
}
return status.pinned
},
//
// begin copypasta (StatusOptionsDialog.html / AccountProfileOptionsDialog.html)
//
verifyCredentialsId: ({ verifyCredentials }) => verifyCredentials.id,
following: ({ relationship }) => relationship && relationship.following,
followRequested: ({ relationship }) => relationship && relationship.requested,
accountId: ({ account }) => account && account.id,
username: ({ account }) => account.username,
muting: ({ relationship }) => relationship.muting,
blocking: ({ relationship }) => relationship.blocking,
followLabel: ({ following, followRequested, account, username }) => {
if (typeof following === 'undefined' || !account) {
return ''
}
return (following || followRequested)
? formatIntl('intl.unfollowAccount', { account: `@${username}` })
: formatIntl('intl.followAccount', { account: `@${username}` })
},
followIcon: ({ following, followRequested }) => (
following ? '#fa-user-times' : followRequested ? '#fa-hourglass' : '#fa-user-plus'
),
blockLabel: ({ blocking, username }) => (
blocking
? formatIntl('intl.unblockAccount', { account: `@${username}` })
: formatIntl('intl.blockAccount', { account: `@${username}` })
),
blockIcon: ({ blocking }) => blocking ? '#fa-unlock' : '#fa-ban',
muteLabel: ({ muting, username }) => (
muting
? formatIntl('intl.unmuteAccount', { account: `@${username}` })
: formatIntl('intl.muteAccount', { account: `@${username}` })
),
muteIcon: ({ muting }) => muting ? '#fa-volume-up' : '#fa-volume-off',
isUser: ({ accountId, verifyCredentialsId }) => accountId === verifyCredentialsId,
//
// end copypasta (StatusOptionsDialog.html / AccountProfileOptionsDialog.html)
//
pinLabel: ({ pinned, isUser }) => isUser ? (pinned ? 'intl.unpinFromProfile' : 'intl.pinToProfile') : '',
visibility: ({ status }) => status.visibility,
mentions: ({ status }) => status.mentions || [],
mentionsUser: ({ mentions, verifyCredentialsId }) => !!mentions.find(_ => _.id === verifyCredentialsId),
mutingConversation: ({ status }) => !!status.muted,
muteConversationLabel: ({ mutingConversation }) => (
mutingConversation
? 'intl.unmuteConversation'
: 'intl.muteConversation'
),
muteConversationIcon: ({ mutingConversation }) => mutingConversation ? '#fa-volume-up' : '#fa-volume-off',
isPublicOrUnlisted: ({ visibility }) => visibility === 'public' || visibility === 'unlisted',
bookmarkLabel: ({ status }) => status.bookmarked ? 'intl.unbookmarkStatus' : 'intl.bookmarkStatus',
items: ({
blockLabel, blocking, blockIcon, muteLabel, muteIcon, followLabel, followIcon,
following, followRequested, pinLabel, isUser, visibility, mentionsUser, mutingConversation,
muteConversationLabel, muteConversationIcon, supportsWebShare, isPublicOrUnlisted, bookmarkLabel
}) => ([
isUser && {
key: 'delete',
label: 'intl.delete',
icon: '#fa-trash'
},
isPublicOrUnlisted && isUser && {
key: 'pin',
label: pinLabel,
icon: '#fa-thumb-tack'
},
!isUser && !blocking && {
key: 'follow',
label: followLabel,
icon: followIcon
},
!isUser && {
key: 'block',
label: blockLabel,
icon: blockIcon
},
!isUser && !blocking && {
key: 'mute',
label: muteLabel,
icon: muteIcon
},
(isUser || mentionsUser) && {
key: 'muteConversation',
label: muteConversationLabel,
icon: muteConversationIcon
},
isUser && {
key: 'redraft',
label: 'intl.deleteAndRedraft',
icon: '#fa-pencil'
},
!isUser && {
key: 'report',
label: 'intl.reportStatus',
icon: '#fa-flag'
},
{
key: 'bookmark',
label: bookmarkLabel,
icon: '#fa-bookmark'
},
isPublicOrUnlisted && supportsWebShare && {
key: 'share',
label: 'intl.shareStatus',
icon: '#fa-share-square-o'
},
isPublicOrUnlisted && {
key: 'copy',
label: 'intl.copyLinkToStatus',
icon: '#fa-link'
}
].filter(Boolean))
},
components: {
ModalDialog,
GenericDialogList
},
store: () => store,
methods: {
show,
close,
onClick (item) {
switch (item.key) {
case 'delete':
return this.onDeleteClicked()
case 'pin':
return this.onPinClicked()
case 'follow':
return this.onFollowClicked()
case 'block':
return this.onBlockClicked()
case 'mute':
return this.onMuteClicked()
case 'copy':
return this.onCopyClicked()
case 'muteConversation':
return this.onMuteConversationClicked()
case 'redraft':
return this.onRedraft()
case 'share':
return this.onShare()
case 'report':
return this.onReport()
case 'bookmark':
return this.onBookmark()
}
},
async onDeleteClicked () {
const { statusId } = this.get()
this.close()
await doDeleteStatus(statusId)
},
async onPinClicked () {
const { statusId, pinned } = this.get()
this.close()
await setStatusPinnedOrUnpinned(statusId, !pinned, true)
},
async onFollowClicked () {
const { accountId, following } = this.get()
this.close()
await setAccountFollowed(accountId, !following, true)
},
async onBlockClicked () {
const { accountId, blocking } = this.get()
this.close()
await setAccountBlocked(accountId, !blocking, true)
},
async onMuteClicked () {
const { account, muting } = this.get()
this.close()
await toggleMute(account, !muting)
},
async onMuteConversationClicked () {
const { statusId, mutingConversation } = this.get()
this.close()
await setConversationMuted(statusId, !mutingConversation, true)
},
async onCopyClicked () {
const { status } = this.get()
const { url } = status
this.close()
await copyText(url)
},
async onRedraft () {
const { status } = this.get()
this.close()
await deleteAndRedraft(status)
},
async onShare () {
const { status } = this.get()
this.close()
await shareStatus(status)
},
async onReport () {
const { status, account } = this.get()
this.close()
await reportStatusOrAccount(({ status, account }))
},
async onBookmark () {
const { status } = this.get()
this.close()
await setStatusBookmarkedOrUnbookmarked(status.id, !status.bookmarked)
}
}
}
</script>