絵文字ピッカーで最近使用した絵文字がバグっているのを修正
あとMkEmojiをリファクタリング
This commit is contained in:
parent
0866d5c055
commit
52cffe0864
5 changed files with 26 additions and 27 deletions
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
})];
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in a new issue