From 89814484485d13f3de4a8cea0e17390528b99767 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 25 Jun 2024 23:30:08 +0300 Subject: 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(-) (limited to 'src/components/emoji_picker') 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; } } -- cgit v1.2.3-70-g09d2 From 1e0d75782fc8b5baaf3ac982da1a2d02382d8bca Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 26 Jun 2024 00:02:45 +0300 Subject: Made the packs scroller a lot more bearable --- src/components/emoji_picker/emoji_picker.scss | 45 +++++++++++++++++---------- 1 file changed, 29 insertions(+), 16 deletions(-) (limited to 'src/components/emoji_picker') diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 1a75469e..9e5ddbce 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -1,4 +1,6 @@ .emoji-picker { + --__emoji-picker-header: 2.2em; + width: 25em; max-width: calc(100vw - 20px); // popover gives 10px margin from window edge display: flex; @@ -8,17 +10,19 @@ display: inline-flex; justify-content: center; align-items: center; - width: var(--emoji-size); - max-width: var(--emoji-size); - height: var(--emoji-size); - max-height: var(--emoji-size); + width: var(--__emoji-picker-header); + max-width: var(--__emoji-picker-header); + height: var(--__emoji-picker-header); + max-height: var(--__emoji-picker-header); .still-image { - max-width: 100%; - max-height: 100%; - height: 100%; - width: 100%; + width: var(--__emoji-picker-header); + max-width: var(--__emoji-picker-header); + height: var(--__emoji-picker-header); + max-height: var(--__emoji-picker-header); object-fit: contain; + + --_still_image-label-scale: 0.5; } } @@ -45,7 +49,7 @@ .heading { display: flex; - padding: 10px 0.5em 0.3em; + padding: 0.7em 0.5em 0; } .content { @@ -60,6 +64,7 @@ display: flex; flex-flow: row nowrap; overflow-x: auto; + overflow-y: hidden; } .additional-tabs { @@ -75,18 +80,22 @@ flex-basis: auto; display: flex; align-content: center; + scrollbar-width: thin; &-item { padding: 0 0.5em; cursor: pointer; - font-size: 1.85em; - width: var(--emoji-size); - max-width: var(--emoji-size); - height: var(--emoji-size); - max-height: var(--emoji-size); + width: var(--__emoji-picker-header); + max-width: var(--__emoji-picker-header); + height: var(--__emoji-picker-header); + max-height: var(--__emoji-picker-header); display: flex; align-items: center; + .svg-inline--fa { + font-size: 1.85em; + } + &.disabled { opacity: 0.5; pointer-events: none; @@ -188,8 +197,12 @@ .emoji-picker-emoji.-custom { object-fit: contain; - max-width: 100%; - max-height: 100%; + width: var(--emoji-size); + max-width: var(--emoji-size); + height: var(--emoji-size); + max-height: var(--emoji-size); + + --_still_image-label-scale: 0.5; } .emoji-picker-emoji.-unicode { -- cgit v1.2.3-70-g09d2 From c27bbfd21cbdc222e442c3f020d2f5592e42e5f9 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 26 Jun 2024 02:15:32 +0300 Subject: some improvements from testing prod --- src/components/emoji_picker/emoji_picker.js | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) (limited to 'src/components/emoji_picker') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 862f6aa4..f86c4330 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -106,9 +106,6 @@ const EmojiPicker = { } }, inject: ['popoversZLayer'], - mounted () { - this.updateEmojiSize() - }, data () { return { keyword: '', @@ -138,7 +135,7 @@ const EmojiPicker = { 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 emojiSizeValue = Number(emojiSize.replace(/[^0-9,.]+/, '')) const fontSize = css.getPropertyValue('font-size').replace(/[^0-9,.]+/, '') let emojiSizeReal @@ -245,6 +242,7 @@ const EmojiPicker = { }, onShowing () { const oldContentLoaded = this.contentLoaded + this.updateEmojiSize() this.recalculateItemPerRow() this.$nextTick(() => { this.$refs.search.focus() @@ -287,7 +285,7 @@ const EmojiPicker = { }, computed: { minItemSize () { - return this.emojiHeight + return this.emojiSize }, // used to watch it fontSize () { @@ -299,15 +297,12 @@ const EmojiPicker = { emojiHeight () { return this.emojiSize }, - emojiWidth () { - return this.emojiSize - }, itemPerRow () { console.log( - this.emojiWidth, + this.emojiSize, this.width ) - return this.width ? Math.floor(this.width / this.emojiWidth) : 6 + return this.width ? Math.floor(this.width / this.emojiSize) : 6 }, activeGroupView () { return this.showingStickers ? '' : this.activeGroup -- cgit v1.2.3-70-g09d2 From a664cf352d78caefb5be7b82d8bf6b282702d9a3 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 26 Jun 2024 02:21:16 +0300 Subject: fix unicode emoji --- src/components/emoji_picker/emoji_picker.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/emoji_picker') diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 9e5ddbce..12c09388 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -206,7 +206,7 @@ } .emoji-picker-emoji.-unicode { - font-size: 20.2em; + font-size: 1.6em; overflow: hidden; } } -- cgit v1.2.3-70-g09d2 From 169f71c006af4e409a72d84c115106e65ded01dd Mon Sep 17 00:00:00 2001 From: HJ <30-hj@users.noreply.git.pleroma.social> Date: Mon, 22 Jul 2024 19:53:06 +0000 Subject: Apply 1 suggestion(s) to 1 file(s) --- src/components/emoji_picker/emoji_picker.js | 4 ---- 1 file changed, 4 deletions(-) (limited to 'src/components/emoji_picker') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index f86c4330..d71bc1bb 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -298,10 +298,6 @@ const EmojiPicker = { return this.emojiSize }, itemPerRow () { - console.log( - this.emojiSize, - this.width - ) return this.width ? Math.floor(this.width / this.emojiSize) : 6 }, activeGroupView () { -- cgit v1.2.3-70-g09d2