slight changes

This commit is contained in:
Craig 2020-02-01 21:27:41 +00:00
parent 98980cc565
commit 7253b5ac62
3 changed files with 27 additions and 18 deletions

View File

@ -33,6 +33,7 @@
"v-tooltip": "^2.0.3",
"vue": "^2.6.10",
"vue-class-component": "^7.0.2",
"vue-clickaway": "^2.2.2",
"vue-context": "^5.0.0",
"vue-notification": "^1.3.20",
"vue-property-decorator": "^8.3.0",
@ -42,6 +43,7 @@
"@types/animejs": "^3.1.0",
"@types/node": "^13.7.0",
"@types/vue": "^2.0.0",
"@types/vue-clickaway": "^2.2.0",
"@vue/cli-plugin-babel": "^4.1.0",
"@vue/cli-plugin-eslint": "^4.1.0",
"@vue/cli-plugin-typescript": "^4.1.0",

View File

@ -35,15 +35,9 @@
<div v-if="!muted" class="chat-send">
<div class="accent" />
<div class="text-container">
<textarea
ref="input"
placeholder="Send a message"
@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>
<textarea ref="input" placeholder="Send a message" @keydown="onKeyDown" v-model="content" />
<neko-emoji v-if="emoji" @picked="onEmojiPicked" @done="emoji = false" />
<i class="emoji-menu fas fa-laugh" @click.stop.prevent="onEmoji"></i>
</div>
</div>
</div>
@ -330,6 +324,8 @@
import { Component, Ref, Watch, Vue } from 'vue-property-decorator'
import { formatRelative } from 'date-fns'
import { Member } from '~/neko/types'
import Markdown from './markdown'
import Content from './context.vue'
import Emoji from './emoji.vue'
@ -371,11 +367,6 @@
})
}
@Watch('emoji')
onEmojiChange() {
this._input.focus()
}
@Watch('muted')
onMutedChange(muted: boolean) {
if (muted) {
@ -398,6 +389,11 @@
return `${str.charAt(0).toUpperCase()}${str.slice(1)}`
}
onEmoji() {
this.emoji = !this.emoji
this._input.focus()
}
onEmojiPicked(emoji: string) {
const text = `:${emoji}:`
if (this._input.selectionStart || this._input.selectionStart === 0) {
@ -411,11 +407,15 @@
} else {
this.content += text
}
this._input.focus()
this.emoji = false
}
onContext(event: MouseEvent, data: any) {
this._context.open(event, data)
onContext(event: MouseEvent, { member }: { member: Member }) {
if (member.id === this.id) {
return
}
this._context.open(event, { member })
}
onClick(event: { target?: HTMLElement; preventDefault(): void }) {

View File

@ -1,5 +1,5 @@
<template>
<div class="neko-emoji">
<div class="neko-emoji" v-on-clickaway="onClickAway">
<div class="search">
<div class="search-contianer">
<input type="text" ref="search" v-model="search" />
@ -288,11 +288,14 @@
<script lang="ts">
import { Component, Ref, Watch, Vue } from 'vue-property-decorator'
import { directive as onClickaway } from 'vue-clickaway'
import { get, set } from '../utils/localstorage'
@Component({
name: 'neko-emoji',
directives: {
onClickaway,
},
})
export default class extends Vue {
@Ref('scroll') readonly _scroll!: HTMLElement
@ -378,5 +381,9 @@
this.$accessor.emoji.setRecent(emoji)
this.$emit('picked', emoji)
}
onClickAway(event: MouseEvent) {
this.$emit('done')
}
}
</script>