natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

wip

This commit is contained in:
syuilo 2020-09-13 10:54:12 +09:00
parent 4c07cf74ef
commit e0ba42df0a
3 changed files with 55 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

111
src/client/components/emoji-picker.vue
View File

@ -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>

7
src/client/components/post-form.vue
View File

@ -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
});
},