<div class="compose-box-toolbar"> <div class="compose-box-toolbar-items"> <IconButton className="compose-toolbar-button" label="Insert emoji" href="#fa-smile" on:click="onEmojiClick()" /> <IconButton className="compose-toolbar-button" svgClassName={$uploadingMedia ? 'spin' : ''} label="Add media (images, video, audio)" href={$uploadingMedia ? '#fa-spinner' : '#fa-camera'} on:click="onMediaClick()" disabled={$uploadingMedia || (media.length === 4)} /> <IconButton className="compose-toolbar-button" label="{poll && poll.options && poll.options.length ? 'Remove poll' : 'Add poll'}" href="#fa-bar-chart" on:click="onPollClick()" pressable="true" pressed={poll && poll.options && poll.options.length} /> <IconButton className="compose-toolbar-button" label="Adjust privacy (currently {postPrivacy.label})" href={postPrivacy.icon} on:click="onPostPrivacyClick()" /> <IconButton className="compose-toolbar-button" 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" multiple accept={mediaAccept} > </div> <style> .compose-box-toolbar { grid-area: toolbar; align-self: center; } .compose-box-toolbar-items { display: flex; align-items: center; } @media (max-width: 320px) { :global(button.icon-button.compose-toolbar-button) { padding-left: 5px; padding-right: 5px; } } </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' import { updateCustomEmojiForInstance } from '../../_actions/emoji' export default { components: { IconButton }, data: () => ({ mediaAccept }), store: () => store, methods: { async onEmojiClick () { const { realm } = this.get() const { currentInstance } = this.store.get() const [showEmojiDialog] = await Promise.all([ importShowEmojiDialog(), updateCustomEmojiForInstance(currentInstance) ]) showEmojiDialog(realm) }, onMediaClick () { this.refs.input.click() }, async onFileChange (e) { const { files } = e.target const { realm } = this.get() for (const file of files) { await doMediaUpload(realm, file) } }, async onPostPrivacyClick () { const { realm } = this.get() const showPostPrivacyDialog = await importShowPostPrivacyDialog() showPostPrivacyDialog(realm) }, onContentWarningClick () { const { realm } = this.get() toggleContentWarningShown(realm) }, onPollClick () { const { poll, realm } = this.get() if (poll && poll.options && poll.options.length) { disablePoll(realm) } else { enablePoll(realm) } } } } </script>