slight changes
This commit is contained in:
parent
98980cc565
commit
7253b5ac62
@ -33,6 +33,7 @@
|
|||||||
"v-tooltip": "^2.0.3",
|
"v-tooltip": "^2.0.3",
|
||||||
"vue": "^2.6.10",
|
"vue": "^2.6.10",
|
||||||
"vue-class-component": "^7.0.2",
|
"vue-class-component": "^7.0.2",
|
||||||
|
"vue-clickaway": "^2.2.2",
|
||||||
"vue-context": "^5.0.0",
|
"vue-context": "^5.0.0",
|
||||||
"vue-notification": "^1.3.20",
|
"vue-notification": "^1.3.20",
|
||||||
"vue-property-decorator": "^8.3.0",
|
"vue-property-decorator": "^8.3.0",
|
||||||
@ -42,6 +43,7 @@
|
|||||||
"@types/animejs": "^3.1.0",
|
"@types/animejs": "^3.1.0",
|
||||||
"@types/node": "^13.7.0",
|
"@types/node": "^13.7.0",
|
||||||
"@types/vue": "^2.0.0",
|
"@types/vue": "^2.0.0",
|
||||||
|
"@types/vue-clickaway": "^2.2.0",
|
||||||
"@vue/cli-plugin-babel": "^4.1.0",
|
"@vue/cli-plugin-babel": "^4.1.0",
|
||||||
"@vue/cli-plugin-eslint": "^4.1.0",
|
"@vue/cli-plugin-eslint": "^4.1.0",
|
||||||
"@vue/cli-plugin-typescript": "^4.1.0",
|
"@vue/cli-plugin-typescript": "^4.1.0",
|
||||||
|
@ -35,15 +35,9 @@
|
|||||||
<div v-if="!muted" class="chat-send">
|
<div v-if="!muted" class="chat-send">
|
||||||
<div class="accent" />
|
<div class="accent" />
|
||||||
<div class="text-container">
|
<div class="text-container">
|
||||||
<textarea
|
<textarea ref="input" placeholder="Send a message" @keydown="onKeyDown" v-model="content" />
|
||||||
ref="input"
|
<neko-emoji v-if="emoji" @picked="onEmojiPicked" @done="emoji = false" />
|
||||||
placeholder="Send a message"
|
<i class="emoji-menu fas fa-laugh" @click.stop.prevent="onEmoji"></i>
|
||||||
@keydown="onKeyDown"
|
|
||||||
v-model="content"
|
|
||||||
@click.stop.prevent="emoji = false"
|
|
||||||
/>
|
|
||||||
<neko-emoji v-if="emoji" @picked="onEmojiPicked" />
|
|
||||||
<i class="emoji-menu fas fa-laugh" @click.stop.prevent="emoji = !emoji"></i>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -330,6 +324,8 @@
|
|||||||
import { Component, Ref, Watch, Vue } from 'vue-property-decorator'
|
import { Component, Ref, Watch, Vue } from 'vue-property-decorator'
|
||||||
import { formatRelative } from 'date-fns'
|
import { formatRelative } from 'date-fns'
|
||||||
|
|
||||||
|
import { Member } from '~/neko/types'
|
||||||
|
|
||||||
import Markdown from './markdown'
|
import Markdown from './markdown'
|
||||||
import Content from './context.vue'
|
import Content from './context.vue'
|
||||||
import Emoji from './emoji.vue'
|
import Emoji from './emoji.vue'
|
||||||
@ -371,11 +367,6 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@Watch('emoji')
|
|
||||||
onEmojiChange() {
|
|
||||||
this._input.focus()
|
|
||||||
}
|
|
||||||
|
|
||||||
@Watch('muted')
|
@Watch('muted')
|
||||||
onMutedChange(muted: boolean) {
|
onMutedChange(muted: boolean) {
|
||||||
if (muted) {
|
if (muted) {
|
||||||
@ -398,6 +389,11 @@
|
|||||||
return `${str.charAt(0).toUpperCase()}${str.slice(1)}`
|
return `${str.charAt(0).toUpperCase()}${str.slice(1)}`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onEmoji() {
|
||||||
|
this.emoji = !this.emoji
|
||||||
|
this._input.focus()
|
||||||
|
}
|
||||||
|
|
||||||
onEmojiPicked(emoji: string) {
|
onEmojiPicked(emoji: string) {
|
||||||
const text = `:${emoji}:`
|
const text = `:${emoji}:`
|
||||||
if (this._input.selectionStart || this._input.selectionStart === 0) {
|
if (this._input.selectionStart || this._input.selectionStart === 0) {
|
||||||
@ -411,11 +407,15 @@
|
|||||||
} else {
|
} else {
|
||||||
this.content += text
|
this.content += text
|
||||||
}
|
}
|
||||||
|
this._input.focus()
|
||||||
this.emoji = false
|
this.emoji = false
|
||||||
}
|
}
|
||||||
|
|
||||||
onContext(event: MouseEvent, data: any) {
|
onContext(event: MouseEvent, { member }: { member: Member }) {
|
||||||
this._context.open(event, data)
|
if (member.id === this.id) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this._context.open(event, { member })
|
||||||
}
|
}
|
||||||
|
|
||||||
onClick(event: { target?: HTMLElement; preventDefault(): void }) {
|
onClick(event: { target?: HTMLElement; preventDefault(): void }) {
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="neko-emoji">
|
<div class="neko-emoji" v-on-clickaway="onClickAway">
|
||||||
<div class="search">
|
<div class="search">
|
||||||
<div class="search-contianer">
|
<div class="search-contianer">
|
||||||
<input type="text" ref="search" v-model="search" />
|
<input type="text" ref="search" v-model="search" />
|
||||||
@ -288,11 +288,14 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Component, Ref, Watch, Vue } from 'vue-property-decorator'
|
import { Component, Ref, Watch, Vue } from 'vue-property-decorator'
|
||||||
|
import { directive as onClickaway } from 'vue-clickaway'
|
||||||
import { get, set } from '../utils/localstorage'
|
import { get, set } from '../utils/localstorage'
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
name: 'neko-emoji',
|
name: 'neko-emoji',
|
||||||
|
directives: {
|
||||||
|
onClickaway,
|
||||||
|
},
|
||||||
})
|
})
|
||||||
export default class extends Vue {
|
export default class extends Vue {
|
||||||
@Ref('scroll') readonly _scroll!: HTMLElement
|
@Ref('scroll') readonly _scroll!: HTMLElement
|
||||||
@ -378,5 +381,9 @@
|
|||||||
this.$accessor.emoji.setRecent(emoji)
|
this.$accessor.emoji.setRecent(emoji)
|
||||||
this.$emit('picked', emoji)
|
this.$emit('picked', emoji)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onClickAway(event: MouseEvent) {
|
||||||
|
this.$emit('done')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
Reference in New Issue
Block a user