From 52cffe0864524f10ef518d930b211831db597435 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Sun, 8 Nov 2020 12:08:07 +0900 Subject: [PATCH] =?UTF-8?q?=E7=B5=B5=E6=96=87=E5=AD=97=E3=83=94=E3=83=83?= =?UTF-8?q?=E3=82=AB=E3=83=BC=E3=81=A7=E6=9C=80=E8=BF=91=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=E3=81=97=E3=81=9F=E7=B5=B5=E6=96=87=E5=AD=97=E3=81=8C=E3=83=90?= =?UTF-8?q?=E3=82=B0=E3=81=A3=E3=81=A6=E3=81=84=E3=82=8B=E3=81=AE=E3=82=92?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit あとMkEmojiをリファクタリング --- src/client/components/emoji-picker.vue | 26 ++++++++++++------------- src/client/components/emoji.vue | 18 ++++++++--------- src/client/components/mfm.ts | 3 +-- src/client/components/reaction-icon.vue | 4 ++-- src/client/store.ts | 2 +- 5 files changed, 26 insertions(+), 27 deletions(-) diff --git a/src/client/components/emoji-picker.vue b/src/client/components/emoji-picker.vue index 247e59e8a1..e36161d3dd 100644 --- a/src/client/components/emoji-picker.vue +++ b/src/client/components/emoji-picker.vue @@ -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) { diff --git a/src/client/components/emoji.vue b/src/client/components/emoji.vue index 458b0a7fab..b2bf7f0169 100644 --- a/src/client/components/emoji.vue +++ b/src/client/components/emoji.vue @@ -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; } diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts index aa9ff0952d..0b25f0b183 100644 --- a/src/client/components/mfm.ts +++ b/src/client/components/mfm.ts @@ -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 })]; diff --git a/src/client/components/reaction-icon.vue b/src/client/components/reaction-icon.vue index f781f63d79..c0ec955e32 100644 --- a/src/client/components/reaction-icon.vue +++ b/src/client/components/reaction-icon.vue @@ -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: { diff --git a/src/client/store.ts b/src/client/store.ts index 507c7563a1..6dec9205ba 100644 --- a/src/client/store.ts +++ b/src/client/store.ts @@ -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',