pinafore/routes/_components/compose/ComposeToolbar.html

110 lines
3.1 KiB
HTML
Raw Normal View History

2018-02-27 05:50:03 +00:00
<div class="compose-box-toolbar">
2018-03-25 01:04:54 +00:00
<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>
2018-03-01 17:02:42 +00:00
<input ref:input
2018-03-01 17:29:11 +00:00
on:change="onFileChange(event)"
2018-03-01 17:02:42 +00:00
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' : ''}}">
2018-03-25 01:04:54 +00:00
<ComposeAutosuggest :realm :text />
</div>
2018-02-27 05:50:03 +00:00
</div>
<style>
.compose-box-toolbar {
grid-area: toolbar;
2018-03-25 01:04:54 +00:00
position: relative;
2018-02-27 05:50:03 +00:00
align-self: center;
2018-03-25 01:04:54 +00:00
}
.compose-box-toolbar-items {
2018-02-27 05:50:03 +00:00
display: flex;
align-items: center;
}
2018-03-25 01:04:54 +00:00
.compose-autosuggest-wrapper {
position: absolute;
left: 5px;
top: 0;
2018-04-05 05:20:12 +00:00
z-index: 7000;
2018-03-25 01:04:54 +00:00
}
.compose-autosuggest-wrapper.is-dialog {
z-index: 11000;
}
.compose-autosuggest-wrapper.not-shown {
pointer-events: none;
}
2018-02-27 05:50:03 +00:00
</style>
<script>
import IconButton from '../IconButton.html'
2018-02-28 07:18:07 +00:00
import { store } from '../../_store/store'
import { importDialogs } from '../../_utils/asyncModules'
2018-03-02 05:21:49 +00:00
import { doMediaUpload } from '../../_actions/media'
2018-03-03 23:44:43 +00:00
import { toggleContentWarningShown } from '../../_actions/contentWarnings'
2018-03-25 01:04:54 +00:00
import ComposeAutosuggest from './ComposeAutosuggest.html'
2018-02-28 07:18:07 +00:00
2018-02-27 05:50:03 +00:00
export default {
2018-03-03 01:54:38 +00:00
oncreate() {
if (process.env.NODE_ENV !== 'production') {
window.__fakeFileInput = (file) => {
this.onFileChange({
target: {
files: [file]
}
})
}
}
},
2018-02-27 05:50:03 +00:00
components: {
2018-03-25 01:04:54 +00:00
IconButton,
ComposeAutosuggest
2018-02-28 07:18:07 +00:00
},
store: () => store,
computed: {
composeAutosuggestionShown: ($composeAutosuggestionShown) => $composeAutosuggestionShown
},
2018-02-28 07:18:07 +00:00
methods: {
async onEmojiClick() {
let dialogs = await importDialogs()
2018-03-03 22:51:48 +00:00
dialogs.showEmojiDialog(this.get('realm'))
2018-03-01 17:02:42 +00:00
},
onMediaClick() {
this.refs.input.click()
2018-03-01 17:29:11 +00:00
},
onFileChange(e) {
let file = e.target.files[0]
let realm = this.get('realm')
doMediaUpload(realm, file)
2018-03-03 21:23:26 +00:00
},
async onPostPrivacyClick() {
let dialogs = await importDialogs()
dialogs.showPostPrivacyDialog(this.get('realm'))
2018-03-03 23:44:43 +00:00
},
onContentWarningClick() {
toggleContentWarningShown(this.get('realm'))
2018-02-28 07:18:07 +00:00
}
2018-02-27 05:50:03 +00:00
}
}
</script>