128 lines
3.7 KiB
HTML
128 lines
3.7 KiB
HTML
<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;
|
|
}
|
|
}
|
|
@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, 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>
|