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

あと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> <div>
<button v-for="emoji in reactions || $store.state.settings.reactions" <button v-for="emoji in reactions || $store.state.settings.reactions"
class="_button" class="_button"
:title="emoji.name"
@click="chosen(emoji, $event)" @click="chosen(emoji, $event)"
:key="emoji"
tabindex="0" 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> </button>
</div> </div>
</section> </section>
@ -47,14 +45,12 @@
<section> <section>
<header class="_acrylic"><Fa :icon="faHistory" fixed-width/> {{ $t('recentUsed') }}</header> <header class="_acrylic"><Fa :icon="faHistory" fixed-width/> {{ $t('recentUsed') }}</header>
<div> <div>
<button v-for="emoji in ($store.state.device.recentEmojis || [])" <button v-for="emoji in $store.state.device.recentlyUsedEmojis"
class="_button" class="_button"
:title="emoji.name"
@click="chosen(emoji, $event)" @click="chosen(emoji, $event)"
:key="emoji" :key="emoji"
> >
<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/> <MkEmoji :emoji="emoji" :normal="true"/>
<img v-else :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
</button> </button>
</div> </div>
</section> </section>
@ -320,6 +316,10 @@ export default defineComponent({
}, },
methods: { methods: {
getKey(emoji: any) {
return typeof emoji === 'string' ? emoji : (emoji.char || `:${emoji.name}:`);
},
chosen(emoji: any, ev) { chosen(emoji: any, ev) {
if (ev) { if (ev) {
const el = ev.currentTarget || ev.target; const el = ev.currentTarget || ev.target;
@ -329,15 +329,15 @@ export default defineComponent({
os.popup(Particle, { x, y }, {}, 'end'); os.popup(Particle, { x, y }, {}, 'end');
} }
const getKey = (emoji: any) => typeof emoji === 'string' ? emoji : emoji.char || `:${emoji.name}:`; const key = this.getKey(emoji);
this.$emit('done', getKey(emoji)); this.$emit('done', key);
this.$refs.modal.close(); this.$refs.modal.close();
// 使 // 使
let recents = this.$store.state.device.recentEmojis || []; let recents = this.$store.state.device.recentlyUsedEmojis;
recents = recents.filter((e: any) => getKey(e) !== getKey(emoji)); recents = recents.filter((e: any) => e !== key);
recents.unshift(emoji) recents.unshift(key);
this.$store.commit('device/set', { key: 'recentEmojis', value: recents.splice(0, 16) }); this.$store.commit('device/set', { key: 'recentlyUsedEmojis', value: recents.splice(0, 16) });
}, },
paste(event) { 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-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"/> <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-if="char && useOsNativeEmojis">{{ char }}</span>
<span v-else>:{{ name }}:</span> <span v-else>{{ emoji }}</span>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -12,13 +12,9 @@ import { twemojiSvgBase } from '../../misc/twemoji-base';
export default defineComponent({ export default defineComponent({
props: { props: {
name: {
type: String,
required: false
},
emoji: { emoji: {
type: String, type: String,
required: false required: true
}, },
normal: { normal: {
type: Boolean, type: Boolean,
@ -49,6 +45,10 @@ export default defineComponent({
}, },
computed: { computed: {
isCustom(): boolean {
return this.emoji.startsWith(':');
},
alt(): string { alt(): string {
return this.customEmoji ? `:${this.customEmoji.name}:` : this.char; return this.customEmoji ? `:${this.customEmoji.name}:` : this.char;
}, },
@ -68,8 +68,8 @@ export default defineComponent({
watch: { watch: {
ce: { ce: {
handler() { handler() {
if (this.name) { if (this.isCustom) {
const customEmoji = this.ce.find(x => x.name == this.name); const customEmoji = this.ce.find(x => x.name === this.emoji.substr(1, this.emoji.length - 2));
if (customEmoji) { if (customEmoji) {
this.customEmoji = customEmoji; this.customEmoji = customEmoji;
this.url = this.$store.state.device.disableShowingAnimatedImages this.url = this.$store.state.device.disableShowingAnimatedImages
@ -83,7 +83,7 @@ export default defineComponent({
}, },
created() { created() {
if (!this.name) { if (!this.isCustom) {
this.char = this.emoji; this.char = this.emoji;
} }

View File

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

View File

@ -1,9 +1,9 @@
<template> <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> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue';import * as os from '@/os'; import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({
props: { props: {

View File

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