76 lines
1.9 KiB
HTML
76 lines
1.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"
|
|
/>
|
|
<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'
|
|
|
|
export default {
|
|
components: {
|
|
IconButton
|
|
},
|
|
store: () => store,
|
|
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
|
|
}
|
|
}
|
|
}
|
|
</script> |