From e0ba42df0acc2df792248e51394ac159e48c0932 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 13 Sep 2020 10:54:12 +0900
Subject: [PATCH] wip
---
package.json | 2 +-
src/client/components/emoji-picker.vue | 111 ++++++++++++-------------
src/client/components/post-form.vue | 7 +-
3 files changed, 55 insertions(+), 65 deletions(-)
diff --git a/package.json b/package.json
index 6a3c70adb5..ba4d7427dd 100644
--- a/package.json
+++ b/package.json
@@ -262,7 +262,7 @@
"vuex": "4.0.0-beta.4",
"vuex-persistedstate": "3.1.0",
"web-push": "3.4.4",
- "webpack": "5.0.0-beta.29",
+ "webpack": "5.0.0-beta.30",
"webpack-cli": "3.3.12",
"websocket": "1.0.31",
"ws": "7.3.1",
diff --git a/src/client/components/emoji-picker.vue b/src/client/components/emoji-picker.vue
index ad5beab762..78c23ebee7 100644
--- a/src/client/components/emoji-picker.vue
+++ b/src/client/components/emoji-picker.vue
@@ -1,65 +1,63 @@
<template>
-<XModal :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }">
- <div class="omfetrab">
- <header>
- <button v-for="(category, i) in categories"
- class="_button"
- @click="go(category)"
- :class="{ active: category.isActive }"
- :key="i"
- >
- <fa :icon="category.icon" fixed-width/>
- </button>
- </header>
+<div class="omfetrab">
+ <header>
+ <button v-for="(category, i) in categories"
+ class="_button"
+ @click="go(category)"
+ :class="{ active: category.isActive }"
+ :key="i"
+ >
+ <fa :icon="category.icon" fixed-width/>
+ </button>
+ </header>
- <div class="emojis">
- <template v-if="categories[0].isActive">
- <header class="category"><fa :icon="faHistory" fixed-width/> {{ $t('recentUsed') }}</header>
+ <div class="emojis">
+ <template v-if="categories[0].isActive">
+ <header class="category"><fa :icon="faHistory" fixed-width/> {{ $t('recentUsed') }}</header>
+ <div class="list">
+ <button v-for="(emoji, i) in ($store.state.device.recentEmojis || [])"
+ class="_button"
+ :title="emoji.name"
+ @click="chosen(emoji)"
+ :key="i"
+ >
+ <mk-emoji v-if="emoji.char != null" :emoji="emoji.char"/>
+ <img v-else :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
+ </button>
+ </div>
+
+ <header class="category"><fa :icon="faAsterisk" fixed-width/> {{ $t('customEmojis') }}</header>
+ </template>
+
+ <template v-if="categories.find(x => x.isActive).name">
+ <div class="list">
+ <button v-for="emoji in emojilist.filter(e => e.category === categories.find(x => x.isActive).name)"
+ class="_button"
+ :title="emoji.name"
+ @click="chosen(emoji)"
+ :key="emoji.name"
+ >
+ <mk-emoji :emoji="emoji.char"/>
+ </button>
+ </div>
+ </template>
+ <template v-else>
+ <div v-for="(key, i) in Object.keys(customEmojis)" :key="i">
+ <header class="sub" v-if="key">{{ key }}</header>
<div class="list">
- <button v-for="(emoji, i) in ($store.state.device.recentEmojis || [])"
- class="_button"
- :title="emoji.name"
- @click="chosen(emoji)"
- :key="i"
- >
- <mk-emoji v-if="emoji.char != null" :emoji="emoji.char"/>
- <img v-else :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
- </button>
- </div>
-
- <header class="category"><fa :icon="faAsterisk" fixed-width/> {{ $t('customEmojis') }}</header>
- </template>
-
- <template v-if="categories.find(x => x.isActive).name">
- <div class="list">
- <button v-for="emoji in emojilist.filter(e => e.category === categories.find(x => x.isActive).name)"
+ <button v-for="emoji in customEmojis[key]"
class="_button"
:title="emoji.name"
@click="chosen(emoji)"
:key="emoji.name"
>
- <mk-emoji :emoji="emoji.char"/>
+ <img :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
</button>
</div>
- </template>
- <template v-else>
- <div v-for="(key, i) in Object.keys(customEmojis)" :key="i">
- <header class="sub" v-if="key">{{ key }}</header>
- <div class="list">
- <button v-for="emoji in customEmojis[key]"
- class="_button"
- :title="emoji.name"
- @click="chosen(emoji)"
- :key="emoji.name"
- >
- <img :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
- </button>
- </div>
- </div>
- </template>
- </div>
+ </div>
+ </template>
</div>
-</XModal>
+</div>
</template>
<script lang="ts">
@@ -69,13 +67,10 @@ import { getStaticImageUrl } from '@/scripts/get-static-image-url';
import { faAsterisk, faLeaf, faUtensils, faFutbol, faCity, faDice, faGlobe, faHistory, faUser } from '@fortawesome/free-solid-svg-icons';
import { faHeart, faFlag, faLaugh } from '@fortawesome/free-regular-svg-icons';
import { groupByX } from '../../prelude/array';
-import XModal from './modal.vue';
import * as os from '@/os';
export default defineComponent({
- components: {
- XModal,
- },
+ emits: ['done'],
props: {
source: {
@@ -163,12 +158,8 @@ export default defineComponent({
recents = recents.filter((e: any) => getKey(e) !== getKey(emoji));
recents.unshift(emoji)
this.$store.commit('device/set', { key: 'recentEmojis', value: recents.splice(0, 16) });
- this.$emit('chosen', getKey(emoji));
+ this.$emit('done', getKey(emoji));
},
-
- close() {
- this.$refs.popup.close();
- }
}
});
</script>
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index 35739082f0..e29b75ff20 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -606,11 +606,10 @@ export default defineComponent({
},
async insertEmoji(ev) {
- const vm = os.modal(await import('./emoji-picker.vue'), {
- source: ev.currentTarget || ev.target
- }).$once('chosen', emoji => {
+ os.modal(defineAsyncComponent(() => import('@/components/emoji-picker.vue')), {}, emoji => {
insertTextAtCursor(this.$refs.text, emoji);
- vm.close();
+ }, {
+ source: ev.currentTarget || ev.target
});
},