pinafore/src/routes/_components/compose/ComposeToolbar.html
Nolan Lawson 0878275ab9
feat: ability to create polls (#1235)
* feat: ability to create polls

fixes #1130

* fix adds and deletes

* fix tests

* fix tests again
2019-05-27 00:24:47 -07:00

102 lines
2.9 KiB
HTML

<div class="compose-box-toolbar">
<div class="compose-box-toolbar-items">
<IconButton
label="Insert emoji"
href="#fa-smile"
on:click="onEmojiClick()"
/>
<IconButton
svgClassName={$uploadingMedia ? 'spin' : ''}
label="Add media"
href={$uploadingMedia ? '#fa-spinner' : '#fa-camera'}
on:click="onMediaClick()"
disabled={$uploadingMedia || (media.length === 4)}
/>
<IconButton
label="{poll && poll.options && poll.options.length ? 'Add poll' : 'Remove poll'}"
href="#fa-bar-chart"
on:click="onPollClick()"
pressable="true"
pressed={poll && poll.options && poll.options.length}
/>
<IconButton
label="Adjust privacy (currently {postPrivacy.label})"
href={postPrivacy.icon}
on:click="onPostPrivacyClick()"
/>
<IconButton
label={contentWarningShown ? 'Remove content warning' : 'Add content warning'}
href="#fa-exclamation-triangle"
on:click="onContentWarningClick()"
pressable="true"
pressed={contentWarningShown}
/>
</div>
<input ref:input
on:change="onFileChange(event)"
style="display: none;"
type="file"
accept={mediaAccept} >
</div>
<style>
.compose-box-toolbar {
grid-area: toolbar;
align-self: center;
}
.compose-box-toolbar-items {
display: flex;
align-items: center;
}
</style>
<script>
import IconButton from '../IconButton.html'
import { store } from '../../_store/store'
import { importShowEmojiDialog, importShowPostPrivacyDialog } from '../dialog/asyncDialogs'
import { doMediaUpload } from '../../_actions/media'
import { toggleContentWarningShown } from '../../_actions/contentWarnings'
import { mediaAccept } from '../../_static/media'
import { enablePoll, disablePoll } from '../../_actions/composePoll'
export default {
components: {
IconButton
},
data: () => ({
mediaAccept
}),
store: () => store,
methods: {
async onEmojiClick () {
let { realm } = this.get()
let showEmojiDialog = await importShowEmojiDialog()
showEmojiDialog(realm)
},
onMediaClick () {
this.refs.input.click()
},
onFileChange (e) {
let file = e.target.files[0]
let { realm } = this.get()
doMediaUpload(realm, file)
},
async onPostPrivacyClick () {
let { realm } = this.get()
let showPostPrivacyDialog = await importShowPostPrivacyDialog()
showPostPrivacyDialog(realm)
},
onContentWarningClick () {
let { realm } = this.get()
toggleContentWarningShown(realm)
},
onPollClick () {
let { poll, realm } = this.get()
if (poll && poll.options && poll.options.length) {
disablePoll(realm)
} else {
enablePoll(realm)
}
}
}
}
</script>