110 lines
3.1 KiB
HTML
110 lines
3.1 KiB
HTML
<div class="compose-box-toolbar">
|
|
<div class="compose-box-toolbar-items">
|
|
<IconButton
|
|
label="Insert emoji"
|
|
href="#fa-smile"
|
|
on:click="onEmojiClick()"
|
|
/>
|
|
<IconButton
|
|
className="{{$uploadingMedia ? 'spin' : ''}}"
|
|
label="Add media"
|
|
href="{{$uploadingMedia ? '#fa-spinner' : '#fa-camera'}}"
|
|
on:click="onMediaClick()"
|
|
disabled="{{$uploadingMedia || (media.length === 4)}}"
|
|
/>
|
|
<IconButton
|
|
label="Adjust privacy (currently {{postPrivacy.label}})"
|
|
href="{{postPrivacy.icon}}"
|
|
on:click="onPostPrivacyClick()"
|
|
/>
|
|
<IconButton
|
|
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"
|
|
accept=".jpg,.jpeg,.png,.gif,.webm,.mp4,.m4v,image/jpeg,image/png,image/gif,video/webm,video/mp4">
|
|
<div class="compose-autosuggest-wrapper {{composeAutosuggestionShown ? '' : 'not-shown'}} {{realm === 'dialog' ? 'is-dialog' : ''}}">
|
|
<ComposeAutosuggest :realm :text />
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.compose-box-toolbar {
|
|
grid-area: toolbar;
|
|
position: relative;
|
|
align-self: center;
|
|
}
|
|
.compose-box-toolbar-items {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.compose-autosuggest-wrapper {
|
|
position: absolute;
|
|
left: 5px;
|
|
top: 0;
|
|
z-index: 7000;
|
|
}
|
|
.compose-autosuggest-wrapper.is-dialog {
|
|
z-index: 11000;
|
|
}
|
|
.compose-autosuggest-wrapper.not-shown {
|
|
pointer-events: none;
|
|
}
|
|
</style>
|
|
<script>
|
|
import IconButton from '../IconButton.html'
|
|
import { store } from '../../_store/store'
|
|
import { importDialogs } from '../../_utils/asyncModules'
|
|
import { doMediaUpload } from '../../_actions/media'
|
|
import { toggleContentWarningShown } from '../../_actions/contentWarnings'
|
|
import ComposeAutosuggest from './ComposeAutosuggest.html'
|
|
|
|
export default {
|
|
oncreate() {
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
window.__fakeFileInput = (file) => {
|
|
this.onFileChange({
|
|
target: {
|
|
files: [file]
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
IconButton,
|
|
ComposeAutosuggest
|
|
},
|
|
store: () => store,
|
|
computed: {
|
|
composeAutosuggestionShown: ($composeAutosuggestionShown) => $composeAutosuggestionShown
|
|
},
|
|
methods: {
|
|
async onEmojiClick() {
|
|
let dialogs = await importDialogs()
|
|
dialogs.showEmojiDialog(this.get('realm'))
|
|
},
|
|
onMediaClick() {
|
|
this.refs.input.click()
|
|
},
|
|
onFileChange(e) {
|
|
let file = e.target.files[0]
|
|
let realm = this.get('realm')
|
|
doMediaUpload(realm, file)
|
|
},
|
|
async onPostPrivacyClick() {
|
|
let dialogs = await importDialogs()
|
|
dialogs.showPostPrivacyDialog(this.get('realm'))
|
|
},
|
|
onContentWarningClick() {
|
|
toggleContentWarningShown(this.get('realm'))
|
|
}
|
|
}
|
|
}
|
|
</script> |