101 lines
2.9 KiB
HTML
101 lines
2.9 KiB
HTML
<div class="status-toolbar {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
|
|
<IconButton
|
|
label="Reply"
|
|
href="#fa-reply"
|
|
/>
|
|
<IconButton
|
|
label="{{boostLabel}}"
|
|
pressable="{{!boostDisabled}}"
|
|
pressed="{{status.reblogged}}"
|
|
disabled="{{boostDisabled}}"
|
|
href="{{boostIcon}}"
|
|
/>
|
|
<IconButton
|
|
label="Favorite"
|
|
pressable="true"
|
|
pressed="{{favorited}}"
|
|
href="#fa-star"
|
|
delegateKey="{{favoriteKey}}"
|
|
ref:favoriteNode
|
|
/>
|
|
<IconButton
|
|
label="Show more actions"
|
|
href="#fa-ellipsis-h"
|
|
/>
|
|
</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 { registerDelegate, unregisterDelegate } from '../../_utils/delegate'
|
|
import { setFavorited } from '../../_actions/favorite'
|
|
|
|
export default {
|
|
oncreate() {
|
|
this.onFavoriteClick = this.onFavoriteClick.bind(this)
|
|
|
|
let favoriteKey = this.get('favoriteKey')
|
|
registerDelegate('click', favoriteKey, this.onFavoriteClick)
|
|
registerDelegate('keydown', favoriteKey, this.onFavoriteClick)
|
|
},
|
|
ondestroy() {
|
|
let favoriteKey = this.get('favoriteKey')
|
|
unregisterDelegate('click', favoriteKey, this.onFavoriteClick)
|
|
unregisterDelegate('keydown', favoriteKey, this.onFavoriteClick)
|
|
},
|
|
components: {
|
|
IconButton
|
|
},
|
|
store: () => store,
|
|
methods: {
|
|
onFavoriteClick() {
|
|
let statusId = this.get('statusId')
|
|
let favorited = this.get('favorited')
|
|
/* no await */ setFavorited(statusId, !favorited)
|
|
}
|
|
},
|
|
computed: {
|
|
visibility: (status) => status.visibility,
|
|
boostLabel: (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'
|
|
}
|
|
},
|
|
boostIcon: (visibility) => {
|
|
switch (visibility) {
|
|
case 'private':
|
|
return '#fa-lock'
|
|
case 'direct':
|
|
return '#fa-envelope'
|
|
default:
|
|
return '#fa-retweet'
|
|
}
|
|
},
|
|
boostDisabled: (visibility) => {
|
|
return visibility === 'private' || visibility === 'direct'
|
|
},
|
|
favorited: (status, $currentStatusModifications) => {
|
|
if ($currentStatusModifications && status.id in $currentStatusModifications.favorites) {
|
|
return $currentStatusModifications.favorites[status.id]
|
|
}
|
|
return status.favourited
|
|
},
|
|
statusId: (status) => status.id,
|
|
favoriteKey: (statusId, timelineType, timelineValue) => `fav-${timelineType}-${timelineValue}-${statusId}`
|
|
}
|
|
}
|
|
</script> |