Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Revert "revert emoji picker changes"

Browse source 
This reverts commit 38d5303ccd.
This commit is contained in:
syuilo 2022-07-06 07:30:56 +09:00
parent 4940894324
commit f7747af690
2 changed files with 28 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/client/src/components/emoji-picker.section.vue
View file

@ -1,16 +1,17 @@
<template> <template>
<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
<section> <section>
<header class="_acrylic" @click="shown = !shown"> <header class="_acrylic" @click="shown = !shown">
<i class="toggle fa-fw" :class="shown ? 'fas fa-chevron-down' : 'fas fa-chevron-up'"></i> <slot></slot> ({{ emojis.length }}) <i class="toggle fa-fw" :class="shown ? 'fas fa-chevron-down' : 'fas fa-chevron-up'"></i> <slot></slot> ({{ emojis.length }})
</header> </header>
<div v-if="shown"> <div v-if="shown" class="body">
<button <button
v-for="emoji in emojis" v-for="emoji in emojis"
:key="emoji" :key="emoji"
class="_button" class="_button item"
@click="emit('chosen', emoji, $event)" @click="emit('chosen', emoji, $event)"
> >
<MkEmoji :emoji="emoji" :normal="true"/> <MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
</button> </button>
</div> </div>
</section> </section>

50
packages/client/src/components/emoji-picker.vue
View file

@ -3,67 +3,67 @@
<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" @paste.stop="paste" @keyup.enter="done()"> <input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" @paste.stop="paste" @keyup.enter="done()">
<div ref="emojis" class="emojis"> <div ref="emojis" class="emojis">
<section class="result"> <section class="result">
<div v-if="searchResultCustom.length > 0"> <div v-if="searchResultCustom.length > 0" class="body">
<button <button
v-for="emoji in searchResultCustom" v-for="emoji in searchResultCustom"
:key="emoji.id" :key="emoji.id"
class="_button" class="_button item"
:title="emoji.name" :title="emoji.name"
tabindex="0" tabindex="0"
@click="chosen(emoji, $event)" @click="chosen(emoji, $event)"
> >
<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>--> <!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
<img :src="disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/> <img class="emoji" :src="disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
</button> </button>
</div> </div>
<div v-if="searchResultUnicode.length > 0"> <div v-if="searchResultUnicode.length > 0" class="body">
<button <button
v-for="emoji in searchResultUnicode" v-for="emoji in searchResultUnicode"
:key="emoji.name" :key="emoji.name"
class="_button" class="_button item"
:title="emoji.name" :title="emoji.name"
tabindex="0" tabindex="0"
@click="chosen(emoji, $event)" @click="chosen(emoji, $event)"
> >
<MkEmoji :emoji="emoji.char"/> <MkEmoji class="emoji" :emoji="emoji.char"/>
</button> </button>
</div> </div>
</section> </section>
<div v-if="tab === 'index'" class="index"> <div v-if="tab === 'index'" class="group index">
<section v-if="showPinned"> <section v-if="showPinned">
<div> <div class="body">
<button <button
v-for="emoji in pinned" v-for="emoji in pinned"
:key="emoji" :key="emoji"
class="_button" class="_button item"
tabindex="0" tabindex="0"
@click="chosen(emoji, $event)" @click="chosen(emoji, $event)"
> >
<MkEmoji :emoji="emoji" :normal="true"/> <MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
</button> </button>
</div> </div>
</section> </section>
<section> <section>
<header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ i18n.ts.recentUsed }}</header> <header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ i18n.ts.recentUsed }}</header>
<div> <div class="body">
<button <button
v-for="emoji in recentlyUsedEmojis" v-for="emoji in recentlyUsedEmojis"
:key="emoji" :key="emoji"
class="_button" class="_button item"
@click="chosen(emoji, $event)" @click="chosen(emoji, $event)"
> >
<MkEmoji :emoji="emoji" :normal="true"/> <MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
</button> </button>
</div> </div>
</section> </section>
</div> </div>
<div> <div class="group">
<header class="_acrylic">{{ i18n.ts.customEmojis }}</header> <header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.ts.other }}</XSection> <XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.ts.other }}</XSection>
</div> </div>
<div> <div class="group">
<header class="_acrylic">{{ i18n.ts.emoji }}</header> <header class="_acrylic">{{ i18n.ts.emoji }}</header>
<XSection v-for="category in categories" :key="category" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection> <XSection v-for="category in categories" :key="category" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
</div> </div>
@ -419,19 +419,16 @@ defineExpose({
font-size: 15px; font-size: 15px;
} }
> div { > .body {
display: grid; display: grid;
grid-template-columns: var(--columns); grid-template-columns: var(--columns);
font-size: 30px;
> button { > .item {
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
width: auto; width: auto;
height: auto; height: auto;
min-width: 0; min-width: 0;
> * {
font-size: 30px;
}
} }
} }
} }
@ -482,7 +479,7 @@ defineExpose({
display: none; display: none;
} }
> div { > .group {
&:not(.index) { &:not(.index) {
padding: 4px 0 8px 0; padding: 4px 0 8px 0;
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--divider);
@ -517,16 +514,18 @@ defineExpose({
} }
} }
> div { > .body {
position: relative; position: relative;
padding: $pad; padding: $pad;
> button { > .item {
position: relative; position: relative;
padding: 0; padding: 0;
width: var(--eachSize); width: var(--eachSize);
height: var(--eachSize); height: var(--eachSize);
contain: strict;
border-radius: 4px; border-radius: 4px;
font-size: 24px;
&:focus-visible { &:focus-visible {
outline: solid 2px var(--focus); outline: solid 2px var(--focus);
@ -542,8 +541,7 @@ defineExpose({
box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15); box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
} }
> * { > .emoji {
font-size: 24px;
height: 1.25em; height: 1.25em;
vertical-align: -.25em; vertical-align: -.25em;
pointer-events: none; pointer-events: none;