From 89814484485d13f3de4a8cea0e17390528b99767 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 25 Jun 2024 23:30:08 +0300 Subject: [PATCH] make emoji picker more scalable --- src/components/emoji_picker/emoji_picker.js | 38 +++++++++++++-- src/components/emoji_picker/emoji_picker.scss | 48 +++++++++---------- 2 files changed, 57 insertions(+), 29 deletions(-) diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index eb665c40..862f6aa4 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -106,6 +106,9 @@ const EmojiPicker = { } }, inject: ['popoversZLayer'], + mounted () { + this.updateEmojiSize() + }, data () { return { keyword: '', @@ -120,6 +123,7 @@ const EmojiPicker = { groupRefs: {}, emojiRefs: {}, filteredEmojiGroups: [], + emojiSize: 0, width: 0 } }, @@ -130,6 +134,23 @@ const EmojiPicker = { Popover }, methods: { + updateEmojiSize () { + const css = window.getComputedStyle(this.$refs.popover.$el) + const emojiSize = css.getPropertyValue('--emojiSize') + const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '') + const emojiSizeValue = emojiSize.replace(/[^0-9,.]+/, '') + const fontSize = css.getPropertyValue('font-size').replace(/[^0-9,.]+/, '') + + let emojiSizeReal + if (emojiSizeUnit.endsWith('em')) { + emojiSizeReal = emojiSizeValue * fontSize + } else { + emojiSizeReal = emojiSizeValue + } + + const fullEmojiSize = emojiSizeReal + (2 * 0.2 * fontSize) + this.emojiSize = fullEmojiSize + }, showPicker () { this.$refs.popover.showPopover() this.onShowing() @@ -268,14 +289,25 @@ const EmojiPicker = { minItemSize () { return this.emojiHeight }, + // used to watch it + fontSize () { + this.$nextTick(() => { + this.updateEmojiSize() + }) + return this.$store.getters.mergedConfig.fontSize + }, emojiHeight () { - return 32 + 4 + return this.emojiSize }, emojiWidth () { - return 32 + 4 + return this.emojiSize }, itemPerRow () { - return this.width ? Math.floor(this.width / this.emojiWidth - 1) : 6 + console.log( + this.emojiWidth, + this.width + ) + return this.width ? Math.floor(this.width / this.emojiWidth) : 6 }, activeGroupView () { return this.showingStickers ? '' : this.activeGroup diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 5602a16b..1a75469e 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -1,8 +1,3 @@ -$emoji-picker-header-height: 36px; -$emoji-picker-header-picture-width: 32px; -$emoji-picker-header-picture-height: 32px; -$emoji-picker-emoji-size: 32px; - .emoji-picker { width: 25em; max-width: calc(100vw - 20px); // popover gives 10px margin from window edge @@ -13,10 +8,10 @@ $emoji-picker-emoji-size: 32px; display: inline-flex; justify-content: center; align-items: center; - width: $emoji-picker-header-picture-width; - max-width: $emoji-picker-header-picture-width; - height: $emoji-picker-header-picture-height; - max-height: $emoji-picker-header-picture-height; + width: var(--emoji-size); + max-width: var(--emoji-size); + height: var(--emoji-size); + max-height: var(--emoji-size); .still-image { max-width: 100%; @@ -30,7 +25,7 @@ $emoji-picker-emoji-size: 32px; .keep-open, .too-many-emoji, .hide-custom-emoji { - padding: 7px; + padding: 0.5em; line-height: normal; } @@ -44,13 +39,13 @@ $emoji-picker-emoji-size: 32px; } .keep-open-label { - padding: 0 7px; + padding: 0 0.5em; display: flex; } .heading { display: flex; - padding: 10px 7px 5px; + padding: 10px 0.5em 0.3em; } .content { @@ -71,7 +66,7 @@ $emoji-picker-emoji-size: 32px; display: flex; border-left: 1px solid; border-left-color: var(--border); - padding-left: 7px; + padding-left: 0.5em; flex: 0 0 auto; } @@ -82,13 +77,13 @@ $emoji-picker-emoji-size: 32px; align-content: center; &-item { - padding: 0 7px; + padding: 0 0.5em; cursor: pointer; font-size: 1.85em; - width: $emoji-picker-header-picture-width; - max-width: $emoji-picker-header-picture-width; - height: $emoji-picker-header-picture-height; - max-height: $emoji-picker-header-picture-height; + width: var(--emoji-size); + max-width: var(--emoji-size); + height: var(--emoji-size); + max-height: var(--emoji-size); display: flex; align-items: center; @@ -98,7 +93,7 @@ $emoji-picker-emoji-size: 32px; } &.toggled { - border-bottom: 4px solid; + border-bottom: 0.2em solid; } } } @@ -125,7 +120,7 @@ $emoji-picker-emoji-size: 32px; .emoji { &-search { - padding: 5px; + padding: 0.3em; flex: 0 0 auto; input { @@ -139,6 +134,7 @@ $emoji-picker-emoji-size: 32px; flex: 1 1 1px; position: relative; overflow: auto; + scrollbar-gutter: stable both-edges; user-select: none; mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat, @@ -165,13 +161,13 @@ $emoji-picker-emoji-size: 32px; display: flex; align-items: center; flex-wrap: wrap; - padding-left: 5px; justify-content: left; &-title { font-size: 0.85em; width: 100%; margin: 0; + padding-left: 0.3em; &.disabled { display: none; @@ -180,14 +176,14 @@ $emoji-picker-emoji-size: 32px; } &-item { - width: $emoji-picker-emoji-size; - height: $emoji-picker-emoji-size; + width: var(--emoji-size); + height: var(--emoji-size); box-sizing: border-box; display: flex; - line-height: $emoji-picker-emoji-size; + line-height: var(--emoji-size); align-items: center; justify-content: center; - margin: 4px; + margin: 0.2em; cursor: pointer; .emoji-picker-emoji.-custom { @@ -197,7 +193,7 @@ $emoji-picker-emoji-size: 32px; } .emoji-picker-emoji.-unicode { - font-size: 24px; + font-size: 20.2em; overflow: hidden; } }