135 lines
4.4 KiB
HTML
135 lines
4.4 KiB
HTML
<div class="status-toolbar {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
|
|
<IconButton
|
|
label="Reply"
|
|
href="#fa-reply"
|
|
disabled="{{disableReply}}"
|
|
delegateKey="{{replyKey}}"
|
|
/>
|
|
<IconButton
|
|
label="{{reblogLabel}}"
|
|
pressable="{{!reblogDisabled}}"
|
|
pressed="{{reblogged}}"
|
|
disabled="{{reblogDisabled}}"
|
|
href="{{reblogIcon}}"
|
|
delegateKey="{{reblogKey}}"
|
|
/>
|
|
<IconButton
|
|
label="Favorite"
|
|
pressable="true"
|
|
pressed="{{favorited}}"
|
|
href="#fa-star"
|
|
delegateKey="{{favoriteKey}}"
|
|
/>
|
|
<IconButton
|
|
label="Show more options"
|
|
href="#fa-ellipsis-h"
|
|
delegateKey="{{optionsKey}}"
|
|
/>
|
|
</div>
|
|
<style>
|
|
.status-toolbar {
|
|
grid-area: toolbar;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.status-toolbar.status-in-own-thread {
|
|
margin-left: 58px;
|
|
}
|
|
</style>
|
|
<script>
|
|
import IconButton from '../IconButton.html'
|
|
import { store } from '../../_store/store'
|
|
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
|
|
import { setFavorited } from '../../_actions/favorite'
|
|
import { setReblogged } from '../../_actions/reblog'
|
|
import { goto } from 'sapper/runtime.js'
|
|
import { importDialogs } from '../../_utils/asyncModules'
|
|
import { updateProfileAndRelationship } from '../../_actions/accounts'
|
|
|
|
export default {
|
|
oncreate() {
|
|
registerClickDelegate(this.get('favoriteKey'), () => this.onFavoriteClick())
|
|
registerClickDelegate(this.get('reblogKey'), () => this.onReblogClick())
|
|
registerClickDelegate(this.get('replyKey'), () => this.onReplyClick())
|
|
registerClickDelegate(this.get('optionsKey'), () => this.onOptionsClick())
|
|
},
|
|
ondestroy() {
|
|
unregisterClickDelegate(this.get('favoriteKey'))
|
|
unregisterClickDelegate(this.get('reblogKey'))
|
|
unregisterClickDelegate(this.get('replyKey'))
|
|
unregisterClickDelegate(this.get('optionsKey'))
|
|
},
|
|
components: {
|
|
IconButton
|
|
},
|
|
store: () => store,
|
|
methods: {
|
|
onFavoriteClick() {
|
|
let statusId = this.get('statusId')
|
|
let favorited = this.get('favorited')
|
|
/* no await */ setFavorited(statusId, !favorited)
|
|
},
|
|
onReblogClick() {
|
|
let statusId = this.get('statusId')
|
|
let reblogged = this.get('reblogged')
|
|
/* no await */ setReblogged(statusId, !reblogged)
|
|
},
|
|
onReplyClick() {
|
|
let statusId = this.get('statusId')
|
|
goto(`/statuses/${statusId}/reply`)
|
|
},
|
|
async onOptionsClick() {
|
|
let statusId = this.get('statusId')
|
|
let accountId = this.get('accountId')
|
|
let updateRelationshipPromise = updateProfileAndRelationship(accountId)
|
|
let dialogs = await importDialogs()
|
|
await updateRelationshipPromise
|
|
dialogs.showStatusOptionsDialog(statusId)
|
|
}
|
|
},
|
|
computed: {
|
|
visibility: (status) => status.visibility,
|
|
reblogLabel: (visibility) => {
|
|
switch (visibility) {
|
|
case 'private':
|
|
return 'Cannot be boosted because this is followers-only'
|
|
case 'direct':
|
|
return 'Cannot be boosted because this is a direct message'
|
|
default:
|
|
return 'Boost'
|
|
}
|
|
},
|
|
reblogIcon: (visibility) => {
|
|
switch (visibility) {
|
|
case 'private':
|
|
return '#fa-lock'
|
|
case 'direct':
|
|
return '#fa-envelope'
|
|
default:
|
|
return '#fa-retweet'
|
|
}
|
|
},
|
|
reblogDisabled: (visibility) => {
|
|
return visibility === 'private' || visibility === 'direct'
|
|
},
|
|
reblogged: (status, $currentStatusModifications) => {
|
|
if ($currentStatusModifications && status.id in $currentStatusModifications.reblogs) {
|
|
return $currentStatusModifications.reblogs[status.id]
|
|
}
|
|
return status.reblogged
|
|
},
|
|
favorited: (status, $currentStatusModifications) => {
|
|
if ($currentStatusModifications && status.id in $currentStatusModifications.favorites) {
|
|
return $currentStatusModifications.favorites[status.id]
|
|
}
|
|
return status.favourited
|
|
},
|
|
statusId: (status) => status.id,
|
|
accountId: (status) => status.account.id,
|
|
favoriteKey: (statusId) => `fav-${statusId}`,
|
|
reblogKey: (statusId) => `reblog-${statusId}`,
|
|
replyKey: (statusId) => `reply-${statusId}`,
|
|
optionsKey: (statusId) => `options-${statusId}`,
|
|
}
|
|
}
|
|
</script> |