diff --git a/packages/client/src/components/emoji-picker.section.vue b/packages/client/src/components/emoji-picker.section.vue index 901bc76ac6..e2a80d5466 100644 --- a/packages/client/src/components/emoji-picker.section.vue +++ b/packages/client/src/components/emoji-picker.section.vue @@ -1,16 +1,17 @@ <template> +<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと --> <section> <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 }}) </header> - <div v-if="shown"> + <div v-if="shown" class="body"> <button v-for="emoji in emojis" :key="emoji" - class="_button" + class="_button item" @click="emit('chosen', emoji, $event)" > - <MkEmoji :emoji="emoji" :normal="true"/> + <MkEmoji class="emoji" :emoji="emoji" :normal="true"/> </button> </div> </section> diff --git a/packages/client/src/components/emoji-picker.vue b/packages/client/src/components/emoji-picker.vue index 46cf562301..2f974cbda4 100644 --- a/packages/client/src/components/emoji-picker.vue +++ b/packages/client/src/components/emoji-picker.vue @@ -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()"> <div ref="emojis" class="emojis"> <section class="result"> - <div v-if="searchResultCustom.length > 0"> + <div v-if="searchResultCustom.length > 0" class="body"> <button v-for="emoji in searchResultCustom" :key="emoji.id" - class="_button" + class="_button item" :title="emoji.name" tabindex="0" @click="chosen(emoji, $event)" > <!--<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> </div> - <div v-if="searchResultUnicode.length > 0"> + <div v-if="searchResultUnicode.length > 0" class="body"> <button v-for="emoji in searchResultUnicode" :key="emoji.name" - class="_button" + class="_button item" :title="emoji.name" tabindex="0" @click="chosen(emoji, $event)" > - <MkEmoji :emoji="emoji.char"/> + <MkEmoji class="emoji" :emoji="emoji.char"/> </button> </div> </section> - <div v-if="tab === 'index'" class="index"> + <div v-if="tab === 'index'" class="group index"> <section v-if="showPinned"> - <div> + <div class="body"> <button v-for="emoji in pinned" :key="emoji" - class="_button" + class="_button item" tabindex="0" @click="chosen(emoji, $event)" > - <MkEmoji :emoji="emoji" :normal="true"/> + <MkEmoji class="emoji" :emoji="emoji" :normal="true"/> </button> </div> </section> <section> <header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ i18n.ts.recentUsed }}</header> - <div> + <div class="body"> <button v-for="emoji in recentlyUsedEmojis" :key="emoji" - class="_button" + class="_button item" @click="chosen(emoji, $event)" > - <MkEmoji :emoji="emoji" :normal="true"/> + <MkEmoji class="emoji" :emoji="emoji" :normal="true"/> </button> </div> </section> </div> - <div> + <div class="group"> <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> </div> - <div> + <div class="group"> <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> </div> @@ -419,19 +419,16 @@ defineExpose({ font-size: 15px; } - > div { + > .body { display: grid; grid-template-columns: var(--columns); + font-size: 30px; - > button { + > .item { aspect-ratio: 1 / 1; width: auto; height: auto; min-width: 0; - - > * { - font-size: 30px; - } } } } @@ -482,7 +479,7 @@ defineExpose({ display: none; } - > div { + > .group { &:not(.index) { padding: 4px 0 8px 0; border-top: solid 0.5px var(--divider); @@ -517,16 +514,18 @@ defineExpose({ } } - > div { + > .body { position: relative; padding: $pad; - > button { + > .item { position: relative; padding: 0; width: var(--eachSize); height: var(--eachSize); + contain: strict; border-radius: 4px; + font-size: 24px; &:focus-visible { outline: solid 2px var(--focus); @@ -542,8 +541,7 @@ defineExpose({ box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15); } - > * { - font-size: 24px; + > .emoji { height: 1.25em; vertical-align: -.25em; pointer-events: none;