From cac784af8a0eac1f6ba72901adb21b3a664c6f64 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Sat, 7 Jan 2023 14:44:50 +0900 Subject: [PATCH] fix #9483 --- .../frontend/src/components/MkEmojiPicker.vue | 25 ++- .../src/components/MkEmojiPickerWindow.vue | 153 +----------------- packages/frontend/src/components/MkWindow.vue | 6 +- 3 files changed, 34 insertions(+), 150 deletions(-) diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue index 4ce451c85c..f3b3ac0b50 100644 --- a/packages/frontend/src/components/MkEmojiPicker.vue +++ b/packages/frontend/src/components/MkEmojiPicker.vue @@ -1,5 +1,5 @@ <template> -<div class="omfetrab" :class="['s' + size, 'w' + width, 'h' + height, { asDrawer }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }"> +<div class="omfetrab" :class="['s' + size, 'w' + width, 'h' + height, { asDrawer, asWindow }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }"> <input ref="search" :value="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" @input="input()" @paste.stop="paste" @keyup.enter="done()"> <div ref="emojis" class="emojis"> <section class="result"> @@ -94,6 +94,7 @@ const props = withDefaults(defineProps<{ asReactionPicker?: boolean; maxHeight?: number; asDrawer?: boolean; + asWindow?: boolean; }>(), { showPinned: true, }); @@ -440,6 +441,28 @@ defineExpose({ } } + &.asWindow { + width: 100% !important; + height: 100% !important; + + > .emojis { + ::v-deep(section) { + > .body { + display: grid; + grid-template-columns: var(--columns); + font-size: 30px; + + > .item { + aspect-ratio: 1 / 1; + width: auto; + height: auto; + min-width: 0; + } + } + } + } + } + > .search { width: 100%; padding: 12px; diff --git a/packages/frontend/src/components/MkEmojiPickerWindow.vue b/packages/frontend/src/components/MkEmojiPickerWindow.vue index 523e4ba695..ca7dbccdc8 100644 --- a/packages/frontend/src/components/MkEmojiPickerWindow.vue +++ b/packages/frontend/src/components/MkEmojiPickerWindow.vue @@ -1,13 +1,13 @@ <template> <MkWindow ref="window" - :initial-width="null" - :initial-height="null" - :can-resize="false" + :initial-width="300" + :initial-height="290" + :can-resize="true" :mini="true" :front="true" @closed="emit('closed')" > - <MkEmojiPicker :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen"/> + <MkEmojiPicker :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" as-window @chosen="chosen" :class="$style.picker"/> </MkWindow> </template> @@ -34,147 +34,8 @@ function chosen(emoji: any) { } </script> -<style lang="scss" scoped> -.omfetrab { - $pad: 8px; - --eachSize: 40px; - - display: flex; - flex-direction: column; - contain: content; - - &.big { - --eachSize: 44px; - } - - &.w1 { - width: calc((var(--eachSize) * 5) + (#{$pad} * 2)); - } - - &.w2 { - width: calc((var(--eachSize) * 6) + (#{$pad} * 2)); - } - - &.w3 { - width: calc((var(--eachSize) * 7) + (#{$pad} * 2)); - } - - &.h1 { - --height: calc((var(--eachSize) * 4) + (#{$pad} * 2)); - } - - &.h2 { - --height: calc((var(--eachSize) * 6) + (#{$pad} * 2)); - } - - &.h3 { - --height: calc((var(--eachSize) * 8) + (#{$pad} * 2)); - } - - > .search { - width: 100%; - padding: 12px; - box-sizing: border-box; - font-size: 1em; - outline: none; - border: none; - background: transparent; - color: var(--fg); - - &:not(.filled) { - order: 1; - z-index: 2; - box-shadow: 0px -1px 0 0px var(--divider); - } - } - - > .emojis { - height: var(--height); - overflow-y: auto; - overflow-x: hidden; - - scrollbar-width: none; - - &::-webkit-scrollbar { - display: none; - } - - > .index { - min-height: var(--height); - position: relative; - border-bottom: solid 0.5px var(--divider); - - > .arrow { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - padding: 16px 0; - text-align: center; - opacity: 0.5; - pointer-events: none; - } - } - - section { - > header { - position: sticky; - top: 0; - left: 0; - z-index: 1; - padding: 8px; - font-size: 12px; - } - - > div { - padding: $pad; - - > button { - position: relative; - padding: 0; - width: var(--eachSize); - height: var(--eachSize); - border-radius: 4px; - - &:focus-visible { - outline: solid 2px var(--focus); - z-index: 1; - } - - &:hover { - background: rgba(0, 0, 0, 0.05); - } - - &:active { - background: var(--accent); - box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15); - } - - > * { - font-size: 24px; - height: 1.25em; - vertical-align: -.25em; - pointer-events: none; - } - } - } - - &.result { - border-bottom: solid 0.5px var(--divider); - - &:empty { - display: none; - } - } - - &.unicode { - min-height: 384px; - } - - &.custom { - min-height: 64px; - } - } - } +<style lang="scss" module> +.picker { + height: 100%; } </style> diff --git a/packages/frontend/src/components/MkWindow.vue b/packages/frontend/src/components/MkWindow.vue index 401f0f4a2e..dd7ac30fde 100644 --- a/packages/frontend/src/components/MkWindow.vue +++ b/packages/frontend/src/components/MkWindow.vue @@ -61,8 +61,8 @@ function dragClear(fn) { } const props = withDefaults(defineProps<{ - initialWidth?: number; - initialHeight?: number | null; + initialWidth: number; + initialHeight: number | null; canResize?: boolean; closeButton?: boolean; mini?: boolean; @@ -386,7 +386,7 @@ function onBrowserResize() { } onMounted(() => { - if (props.initialWidth) applyTransformWidth(props.initialWidth); + applyTransformWidth(props.initialWidth); if (props.initialHeight) applyTransformHeight(props.initialHeight); applyTransformTop((window.innerHeight / 2) - (rootEl.offsetHeight / 2));