pinafore/routes/_components/status/StatusToolbar.html
2018-02-24 16:12:25 -08:00

99 lines
2.7 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 { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
import { setFavorited } from '../../_actions/favorite'
export default {
oncreate() {
this.onFavoriteClick = this.onFavoriteClick.bind(this)
let favoriteKey = this.get('favoriteKey')
registerClickDelegate(favoriteKey, this.onFavoriteClick)
},
ondestroy() {
let favoriteKey = this.get('favoriteKey')
unregisterClickDelegate(favoriteKey)
},
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>