Archived
2
0

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", "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",

View File

@ -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 }) {

View File

@ -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>