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": "4.0.0-beta.4",
"vuex-persistedstate": "3.1.0", "vuex-persistedstate": "3.1.0",
"web-push": "3.4.4", "web-push": "3.4.4",
"webpack": "5.0.0-beta.29", "webpack": "5.0.0-beta.30",
"webpack-cli": "3.3.12", "webpack-cli": "3.3.12",
"websocket": "1.0.31", "websocket": "1.0.31",
"ws": "7.3.1", "ws": "7.3.1",

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

@ -1,65 +1,63 @@
<template> <template>
<XModal :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }"> <div class="omfetrab">
<div class="omfetrab"> <header>
<header> <button v-for="(category, i) in categories"
<button v-for="(category, i) in categories" class="_button"
class="_button" @click="go(category)"
@click="go(category)" :class="{ active: category.isActive }"
:class="{ active: category.isActive }" :key="i"
:key="i" >
> <fa :icon="category.icon" fixed-width/>
<fa :icon="category.icon" fixed-width/> </button>
</button> </header>
</header>
<div class="emojis"> <div class="emojis">
<template v-if="categories[0].isActive"> <template v-if="categories[0].isActive">
<header class="category"><fa :icon="faHistory" fixed-width/> {{ $t('recentUsed') }}</header> <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"> <div class="list">
<button v-for="(emoji, i) in ($store.state.device.recentEmojis || [])" <button v-for="emoji in customEmojis[key]"
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" class="_button"
:title="emoji.name" :title="emoji.name"
@click="chosen(emoji)" @click="chosen(emoji)"
:key="emoji.name" :key="emoji.name"
> >
<mk-emoji :emoji="emoji.char"/> <img :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
</button> </button>
</div> </div>
</template> </div>
<template v-else> </template>
<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> </div>
</XModal> </div>
</template> </template>
<script lang="ts"> <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 { 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 { faHeart, faFlag, faLaugh } from '@fortawesome/free-regular-svg-icons';
import { groupByX } from '../../prelude/array'; import { groupByX } from '../../prelude/array';
import XModal from './modal.vue';
import * as os from '@/os'; import * as os from '@/os';
export default defineComponent({ export default defineComponent({
components: { emits: ['done'],
XModal,
},
props: { props: {
source: { source: {
@ -163,12 +158,8 @@ export default defineComponent({
recents = recents.filter((e: any) => getKey(e) !== getKey(emoji)); recents = recents.filter((e: any) => getKey(e) !== getKey(emoji));
recents.unshift(emoji) recents.unshift(emoji)
this.$store.commit('device/set', { key: 'recentEmojis', value: recents.splice(0, 16) }); 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> </script>

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

@ -606,11 +606,10 @@ export default defineComponent({
}, },
async insertEmoji(ev) { async insertEmoji(ev) {
const vm = os.modal(await import('./emoji-picker.vue'), { os.modal(defineAsyncComponent(() => import('@/components/emoji-picker.vue')), {}, emoji => {
source: ev.currentTarget || ev.target
}).$once('chosen', emoji => {
insertTextAtCursor(this.$refs.text, emoji); insertTextAtCursor(this.$refs.text, emoji);
vm.close(); }, {
source: ev.currentTarget || ev.target
}); });
}, },