skeh/misskey
1
0
Fork 0
Code Issues2 Pull requests Releases Activity

[ChatUI] Add preview to post form

Browse source
This commit is contained in:
Derek Schmidt 2022-01-24 21:21:06 -07:00
parent fce1172510
commit 1121e9646d
1 changed files with 30 additions and 1 deletions

31
packages/client/src/ui/chat/post-form.vue
View file

@ -21,6 +21,7 @@
<textarea ref="text" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>
<XNotePreview v-if="showPreview" class="preview" :text="text"/>
<footer>
<div class="left">
<button v-tooltip="$ts.attachFile" class="_button" @click="chooseFileFrom"><i class="fas fa-photo-video"></i></button>
@ -39,6 +40,7 @@
<span v-if="visibility === 'followers'"><i class="fas fa-unlock"></i></span>
<span v-if="visibility === 'specified'"><i class="fas fa-envelope"></i></span>
</button>
<button v-tooltip="$ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="fas fa-file-code"></i></button>
<button class="submit _buttonPrimary" :disabled="!canPost" @click="post">{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
</div>
</footer>
@ -51,6 +53,7 @@ import { defineComponent, defineAsyncComponent } from 'vue';
import insertTextAtCursor from 'insert-text-at-cursor';
import { length } from 'stringz';
import { toASCII } from 'punycode/';
import XNotePreview from '@/components/note-preview.vue';
import * as mfm from 'mfm-js';
import { host, url } from '@/config';
import { erase, unique } from '@/scripts/array';
@ -65,6 +68,7 @@ import { throttle } from 'throttle-debounce';
export default defineComponent({
components: {
XNotePreview,
XPostFormAttaches: defineAsyncComponent(() => import('@/components/post-form-attaches.vue')),
XPollEditor: defineAsyncComponent(() => import('@/components/poll-editor.vue'))
},
@ -122,6 +126,7 @@ export default defineComponent({
cw: null,
localOnly: this.$store.state.rememberNoteVisibility ? this.$store.state.localOnly : this.$store.state.defaultNoteLocalOnly,
visibility: this.$store.state.rememberNoteVisibility ? this.$store.state.visibility : this.$store.state.defaultNoteVisibility,
showPreview: false,
visibleUsers: [],
autocomplete: null,
draghover: false,
@ -417,6 +422,7 @@ export default defineComponent({
this.files = [];
this.poll = null;
this.quoteId = null;
this.showPreview = false;
},
onKeydown(e: KeyboardEvent) {
@ -735,7 +741,12 @@ export default defineComponent({
> .visibility {
width: $height;
margin: 0 8px;
margin: 0 0 0 8px;
border-radius: 6px;
&:hover {
background: var(--X5);
}
& + .localOnly {
margin-left: 0 !important;
@ -747,12 +758,30 @@ export default defineComponent({
opacity: 0.7;
}
> .preview {
display: inline-block;
padding: 0;
margin: 0 8px 0 0;
font-size: 16px;
width: $height;
border-radius: 6px;
&:hover {
background: var(--X5);
}
&.active {
color: var(--accent);
}
}
> .submit {
margin: 0;
padding: 0 12px;
line-height: 34px;
font-weight: bold;
border-radius: 4px;
font-size: 0.9em;
&:disabled {
opacity: 0.7;