137 lines
3.9 KiB
HTML
137 lines
3.9 KiB
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>
|