Pinafore-Web-Client-Frontend/src/routes/_components/compose/ComposeToolbar.html

<div class="compose-box-toolbar">
  <div class="compose-box-toolbar-items">
    <IconButton
      className="compose-toolbar-button"
      label="{intl.addEmoji}"
      href="#fa-smile"
      on:click="onEmojiClick()"
    />
    <IconButton
      className="compose-toolbar-button"
      svgClassName={$uploadingMedia ? 'spin' : ''}
      label="{intl.addMedia}"
      href={$uploadingMedia ? '#fa-spinner' : '#fa-camera'}
      on:click="onMediaClick()"
      disabled={$uploadingMedia || (media.length === 4)}
    />
    <IconButton
      className="compose-toolbar-button"
      label="{intl.addPoll}"
      pressedLabel="{intl.removePoll}"
      href="#fa-bar-chart"
      on:click="onPollClick()"
      pressable={true}
      pressed={poll && poll.options && poll.options.length}
    />
    <IconButton
      className="compose-toolbar-button"
      label={postPrivacyLabel}
      href={postPrivacy.icon}
      on:click="onPostPrivacyClick()"
    />
    <IconButton
      className="compose-toolbar-button"
      label="{intl.addContentWarning}"
      pressedLabel="{intl.removeContentWarning}"
      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;
    }
  }
  @media (max-width: 240px) {
    :global(button.icon-button.compose-toolbar-button .icon-button-svg) {
      width: 20px;
      height: 20px;
    }
  }
</style>
<script>
  import IconButton from '../IconButton.html'
  import { store } from '../../_store/store'
  import { importShowEmojiDialog } from '../dialog/asyncDialogs/importShowEmojiDialog'
  import { importShowPostPrivacyDialog } from '../dialog/asyncDialogs/importShowPostPrivacyDialog'
  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'
  import { formatIntl } from '../../_utils/formatIntl'

  export default {
    components: {
      IconButton
    },
    data: () => ({
      mediaAccept
    }),
    computed: {
      postPrivacyLabel: ({ postPrivacy }) => (
        formatIntl('intl.postPrivacyLabel', { label: postPrivacy.label })
      )
    },
    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>