pinafore/routes/_components/compose/ComposeToolbar.html

95 lines
2.6 KiB
HTML
Raw Normal View History

2018-02-27 06:50:03 +01:00
<div class="compose-box-toolbar">
2018-03-25 03:04:54 +02:00
<div class="compose-box-toolbar-items">
<IconButton
label="Insert emoji"
href="#fa-smile"
on:click="onEmojiClick()"
/>
<IconButton
svgClassName={$uploadingMedia ? 'spin' : ''}
2018-03-25 03:04:54 +02:00
label="Add media"
href={$uploadingMedia ? '#fa-spinner' : '#fa-camera'}
2018-03-25 03:04:54 +02:00
on:click="onMediaClick()"
disabled={$uploadingMedia || (media.length === 4)}
2018-03-25 03:04:54 +02:00
/>
<IconButton
label="Adjust privacy (currently {postPrivacy.label})"
href={postPrivacy.icon}
2018-03-25 03:04:54 +02:00
on:click="onPostPrivacyClick()"
/>
<IconButton
label={contentWarningShown ? 'Remove content warning' : 'Add content warning'}
2018-03-25 03:04:54 +02:00
href="#fa-exclamation-triangle"
on:click="onContentWarningClick()"
pressable="true"
pressed={contentWarningShown}
2018-03-25 03:04:54 +02:00
/>
</div>
2018-03-01 18:02:42 +01:00
<input ref:input
2018-03-01 18:29:11 +01:00
on:change="onFileChange(event)"
2018-03-01 18:02:42 +01:00
style="display: none;"
type="file"
accept=".jpg,.jpeg,.png,.gif,.webm,.mp4,.m4v,image/jpeg,image/png,image/gif,video/webm,video/mp4">
<ComposeAutosuggest {realm} {text} />
2018-02-27 06:50:03 +01:00
</div>
<style>
.compose-box-toolbar {
grid-area: toolbar;
2018-03-25 03:04:54 +02:00
position: relative;
2018-02-27 06:50:03 +01:00
align-self: center;
2018-03-25 03:04:54 +02:00
}
.compose-box-toolbar-items {
2018-02-27 06:50:03 +01:00
display: flex;
align-items: center;
}
</style>
<script>
import IconButton from '../IconButton.html'
2018-02-28 08:18:07 +01:00
import { store } from '../../_store/store'
import { importShowEmojiDialog, importShowPostPrivacyDialog } from '../dialog/asyncDialogs'
2018-03-02 06:21:49 +01:00
import { doMediaUpload } from '../../_actions/media'
2018-03-04 00:44:43 +01:00
import { toggleContentWarningShown } from '../../_actions/contentWarnings'
2018-03-25 03:04:54 +02:00
import ComposeAutosuggest from './ComposeAutosuggest.html'
2018-02-28 08:18:07 +01:00
2018-02-27 06:50:03 +01:00
export default {
2018-04-20 06:38:01 +02:00
oncreate () {
// for testing
window.__fakeFileInput = (file) => {
this.onFileChange({
target: {
files: [file]
}
})
2018-03-03 02:54:38 +01:00
}
},
2018-02-27 06:50:03 +01:00
components: {
2018-03-25 03:04:54 +02:00
IconButton,
ComposeAutosuggest
2018-02-28 08:18:07 +01:00
},
store: () => store,
methods: {
2018-04-20 06:38:01 +02:00
async onEmojiClick () {
let { realm } = this.get()
let showEmojiDialog = await importShowEmojiDialog()
showEmojiDialog(realm)
2018-03-01 18:02:42 +01:00
},
2018-04-20 06:38:01 +02:00
onMediaClick () {
2018-03-01 18:02:42 +01:00
this.refs.input.click()
2018-03-01 18:29:11 +01:00
},
2018-04-20 06:38:01 +02:00
onFileChange (e) {
2018-03-01 18:29:11 +01:00
let file = e.target.files[0]
let { realm } = this.get()
doMediaUpload(realm, file)
2018-03-03 22:23:26 +01:00
},
2018-04-20 06:38:01 +02:00
async onPostPrivacyClick () {
let { realm } = this.get()
let showPostPrivacyDialog = await importShowPostPrivacyDialog()
showPostPrivacyDialog(realm)
2018-03-04 00:44:43 +01:00
},
2018-04-20 06:38:01 +02:00
onContentWarningClick () {
let { realm } = this.get()
toggleContentWarningShown(realm)
2018-02-28 08:18:07 +01:00
}
2018-02-27 06:50:03 +01:00
}
}
</script>