pinafore/routes/_components/compose/ComposeToolbar.html

53 lines
1.4 KiB
HTML
Raw Normal View History

2018-02-27 06:50:03 +01:00
<div class="compose-box-toolbar">
2018-02-28 08:18:07 +01:00
<IconButton
label="Insert emoji"
href="#fa-smile"
on:click="onEmojiClick()"
/>
2018-03-01 18:02:42 +01:00
<IconButton label="Add media"
href="#fa-camera"
on:click="onMediaClick()"
/>
2018-03-01 18:29:11 +01:00
<IconButton label="Adjust privacy" href="#fa-globe" />
<IconButton label="Add content warning" href="#fa-exclamation-triangle" />
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">
2018-02-27 06:50:03 +01:00
</div>
<style>
.compose-box-toolbar {
grid-area: toolbar;
align-self: center;
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 { updateCustomEmojiForInstance } from '../../_actions/emoji'
import { importDialogs } from '../../_utils/asyncModules'
2018-02-27 06:50:03 +01:00
export default {
components: {
IconButton
2018-02-28 08:18:07 +01:00
},
store: () => store,
methods: {
async onEmojiClick() {
/* no await */ updateCustomEmojiForInstance(this.store.get('currentInstance'))
let dialogs = await importDialogs()
dialogs.showEmojiDialog()
2018-03-01 18:02:42 +01:00
},
onMediaClick() {
this.refs.input.click()
2018-03-01 18:29:11 +01:00
},
onFileChange(e) {
let file = e.target.files[0]
2018-02-28 08:18:07 +01:00
}
2018-02-27 06:50:03 +01:00
}
2018-03-01 18:02:42 +01:00
2018-02-27 06:50:03 +01:00
}
</script>