pinafore/routes/_components/dialog/components/StatusOptionsDialog.html

179 lines
6.1 KiB
HTML
Raw Normal View History

2018-04-05 03:33:17 +00:00
<ModalDialog
{id}
{label}
{title}
2018-04-05 03:33:17 +00:00
background="var(--main-bg)"
>
<GenericDialogList {items} on:click="onClick(event)"/>
2018-03-12 02:40:32 +00:00
</ModalDialog>
<script>
import ModalDialog from './ModalDialog.html'
import { store } from '../../../_store/store'
2018-03-12 02:40:32 +00:00
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'
2018-04-15 05:18:48 +00:00
import { setAccountMuted } from '../../../_actions/mute'
import { setStatusPinnedOrUnpinned } from '../../../_actions/pin'
import { importShowCopyDialog } from '../asyncDialogs'
import { setConversationMuted } from '../../../_actions/muteConversation'
2018-03-12 02:40:32 +00:00
export default {
oncreate,
2018-03-12 02:40:32 +00:00
computed: {
relationship: ({$currentAccountRelationship}) => $currentAccountRelationship,
account: ({$currentAccountProfile}) => $currentAccountProfile,
verifyCredentials: ({$currentVerifyCredentials}) => $currentVerifyCredentials,
statusId: ({status}) => status.id,
pinned: ({status}) => 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,
acct: ({account}) => account.acct,
muting: ({relationship}) => relationship.muting,
blocking: ({relationship}) => relationship.blocking,
followLabel: ({following, followRequested, account, acct}) => {
2018-04-05 14:44:10 +00:00
if (typeof following === 'undefined' || !account) {
2018-03-12 02:40:32 +00:00
return ''
}
2018-03-15 05:14:06 +00:00
return (following || followRequested)
2018-04-15 05:18:48 +00:00
? `Unfollow @${acct}`
: `Follow @${acct}`
2018-03-12 02:40:32 +00:00
},
followIcon: ({following, followRequested}) => (
following ? '#fa-user-times' : followRequested ? '#fa-hourglass' : '#fa-user-plus'
),
blockLabel: ({blocking, acct}) => (
blocking ? `Unblock @${acct}` : `Block @${acct}`
),
blockIcon: ({blocking}) => blocking ? '#fa-unlock' : '#fa-ban',
muteLabel: ({muting, acct}) => (
muting ? `Unmute @${acct}` : `Mute @${acct}`
),
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 ? 'Unpin from profile' : 'Pin to profile') : '',
visibility: ({status}) => status.visibility,
mentions: ({status}) => status.mentions || [],
mentionsUser: ({mentions, verifyCredentialsId}) => !!mentions.find(_ => _.id === verifyCredentialsId),
mutingConversation: ({status}) => !!status.muted,
muteConversationLabel: ({mutingConversation}) => mutingConversation ? `Unmute conversation` : `Mute conversation`,
muteConversationIcon: ({mutingConversation}) => mutingConversation ? '#fa-volume-up' : '#fa-volume-off',
items: ({
blockLabel, blocking, blockIcon, muteLabel, muteIcon, followLabel, followIcon,
following, followRequested, pinLabel, isUser, visibility, mentionsUser, mutingConversation,
muteConversationLabel, muteConversationIcon
}) => ([
isUser && {
key: 'delete',
label: 'Delete',
icon: '#fa-trash'
},
visibility !== 'private' && visibility !== 'direct' && 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
},
{
key: 'copy',
label: 'Copy link to toot',
icon: '#fa-copy'
}
].filter(Boolean))
2018-03-12 02:40:32 +00:00
},
components: {
ModalDialog,
GenericDialogList
},
store: () => store,
methods: {
show,
close,
2018-04-20 04:38:01 +00:00
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()
2018-04-15 05:18:48 +00:00
case 'mute':
return this.onMuteClicked()
case 'copy':
return this.onCopyClicked()
case 'muteConversation':
return this.onMuteConversationClicked()
2018-03-12 02:40:32 +00:00
}
},
2018-04-20 04:38:01 +00:00
async onDeleteClicked () {
let { statusId } = this.get()
this.close()
await doDeleteStatus(statusId)
},
async onPinClicked () {
let { statusId, pinned } = this.get()
this.close()
await setStatusPinnedOrUnpinned(statusId, !pinned, true)
},
2018-04-20 04:38:01 +00:00
async onFollowClicked () {
let { accountId, following } = this.get()
this.close()
await setAccountFollowed(accountId, !following, true)
},
2018-04-20 04:38:01 +00:00
async onBlockClicked () {
let { accountId, blocking } = this.get()
this.close()
await setAccountBlocked(accountId, !blocking, true)
2018-04-15 05:18:48 +00:00
},
2018-04-20 04:38:01 +00:00
async onMuteClicked () {
let { accountId, muting } = this.get()
2018-04-15 05:18:48 +00:00
this.close()
await setAccountMuted(accountId, !muting, true)
},
async onCopyClicked () {
let { status } = this.get()
let { url } = status
let showCopyDialog = await importShowCopyDialog()
this.close()
showCopyDialog(url)
},
async onMuteConversationClicked () {
let { statusId, mutingConversation } = this.get()
this.close()
await setConversationMuted(statusId, !mutingConversation, true)
2018-03-12 02:40:32 +00:00
}
}
}
</script>