絵文字ピッカーで最近使用した絵文字がバグっているのを修正

あとMkEmojiをリファクタリング
This commit is contained in:
syuilo 2020-11-08 12:08:07 +09:00
parent 0866d5c055
commit 52cffe0864
5 changed files with 26 additions and 27 deletions

View file

@ -34,12 +34,10 @@
<div>
<button v-for="emoji in reactions || $store.state.settings.reactions"
class="_button"
:title="emoji.name"
@click="chosen(emoji, $event)"
:key="emoji"
tabindex="0"
>
<MkEmoji :emoji="emoji.startsWith(':') ? null : emoji" :name="emoji.startsWith(':') ? emoji.substr(1, emoji.length - 2) : null" :normal="true"/>
<MkEmoji :emoji="emoji" :normal="true"/>
</button>
</div>
</section>
@ -47,14 +45,12 @@
<section>
<header class="_acrylic"><Fa :icon="faHistory" fixed-width/> {{ $t('recentUsed') }}</header>
<div>
<button v-for="emoji in ($store.state.device.recentEmojis || [])"
<button v-for="emoji in $store.state.device.recentlyUsedEmojis"
class="_button"
:title="emoji.name"
@click="chosen(emoji, $event)"
:key="emoji"
>
<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>
<img v-else :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
<MkEmoji :emoji="emoji" :normal="true"/>
</button>
</div>
</section>
@ -320,6 +316,10 @@ export default defineComponent({
},
methods: {
getKey(emoji: any) {
return typeof emoji === 'string' ? emoji : (emoji.char || `:${emoji.name}:`);
},
chosen(emoji: any, ev) {
if (ev) {
const el = ev.currentTarget || ev.target;
@ -329,15 +329,15 @@ export default defineComponent({
os.popup(Particle, { x, y }, {}, 'end');
}
const getKey = (emoji: any) => typeof emoji === 'string' ? emoji : emoji.char || `:${emoji.name}:`;
this.$emit('done', getKey(emoji));
const key = this.getKey(emoji);
this.$emit('done', key);
this.$refs.modal.close();
// 使
let recents = this.$store.state.device.recentEmojis || [];
recents = recents.filter((e: any) => getKey(e) !== getKey(emoji));
recents.unshift(emoji)
this.$store.commit('device/set', { key: 'recentEmojis', value: recents.splice(0, 16) });
let recents = this.$store.state.device.recentlyUsedEmojis;
recents = recents.filter((e: any) => e !== key);
recents.unshift(key);
this.$store.commit('device/set', { key: 'recentlyUsedEmojis', value: recents.splice(0, 16) });
},
paste(event) {

View file

@ -2,7 +2,7 @@
<img v-if="customEmoji" class="mk-emoji custom" :class="{ normal, noStyle }" :src="url" :alt="alt" :title="alt"/>
<img v-else-if="char && !useOsNativeEmojis" class="mk-emoji" :src="url" :alt="alt" :title="alt"/>
<span v-else-if="char && useOsNativeEmojis">{{ char }}</span>
<span v-else>:{{ name }}:</span>
<span v-else>{{ emoji }}</span>
</template>
<script lang="ts">
@ -12,13 +12,9 @@ import { twemojiSvgBase } from '../../misc/twemoji-base';
export default defineComponent({
props: {
name: {
type: String,
required: false
},
emoji: {
type: String,
required: false
required: true
},
normal: {
type: Boolean,
@ -49,6 +45,10 @@ export default defineComponent({
},
computed: {
isCustom(): boolean {
return this.emoji.startsWith(':');
},
alt(): string {
return this.customEmoji ? `:${this.customEmoji.name}:` : this.char;
},
@ -68,8 +68,8 @@ export default defineComponent({
watch: {
ce: {
handler() {
if (this.name) {
const customEmoji = this.ce.find(x => x.name == this.name);
if (this.isCustom) {
const customEmoji = this.ce.find(x => x.name === this.emoji.substr(1, this.emoji.length - 2));
if (customEmoji) {
this.customEmoji = customEmoji;
this.url = this.$store.state.device.disableShowingAnimatedImages
@ -83,7 +83,7 @@ export default defineComponent({
},
created() {
if (!this.name) {
if (!this.isCustom) {
this.char = this.emoji;
}

View file

@ -207,8 +207,7 @@ export default defineComponent({
case 'emoji': {
return [h(MkEmoji, {
key: Math.random(),
emoji: token.node.props.emoji,
name: token.node.props.name,
emoji: token.node.props.name ? `:${token.node.props.name}:` : token.node.props.emoji,
customEmojis: this.customEmojis,
normal: this.plain
})];

View file

@ -1,9 +1,9 @@
<template>
<MkEmoji :emoji="reaction.startsWith(':') ? null : reaction" :name="reaction.startsWith(':') ? reaction.substr(1, reaction.length - 2) : null" :customEmojis="customEmojis" :is-reaction="true" :normal="true" :no-style="noStyle"/>
<MkEmoji :emoji="reaction" :custom-emojis="customEmojis" :is-reaction="true" :normal="true" :no-style="noStyle"/>
</template>
<script lang="ts">
import { defineComponent } from 'vue';import * as os from '@/os';
import { defineComponent } from 'vue';
export default defineComponent({
props: {

View file

@ -59,7 +59,7 @@ export const defaultDeviceSettings = {
useOsNativeEmojis: false,
serverDisconnectedBehavior: 'quiet',
accounts: [],
recentEmojis: [],
recentlyUsedEmojis: [],
themes: [],
darkTheme: '8050783a-7f63-445a-b270-36d0f6ba1677',
lightTheme: '4eea646f-7afa-4645-83e9-83af0333cd37',