commit: 9c10370e1960f4adaa5f2d2ffd9f41b418f5d92a
parent 7f74ed9753a6c891a7cbaf3b6eb3d7e12fa0c55f
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Sat, 28 Dec 2024 14:33:02 +0000
Merge branch 'emoji-fixes' into 'develop'
Emoji fixes
See merge request pleroma/pleroma-fe!1956
Diffstat:
6 files changed, 83 insertions(+), 40 deletions(-)
diff --git a/changelog.d/emoji-picker.add b/changelog.d/emoji-picker.add
@@ -0,0 +1 @@
+fixed occasional overflows in emoji picker and made header scrollable
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
@@ -135,21 +135,38 @@ const EmojiPicker = {
Popover
},
methods: {
+ groupScroll (e) {
+ e.currentTarget.scrollLeft += e.deltaY + e.deltaX
+ },
updateEmojiSize () {
const css = window.getComputedStyle(this.$refs.popover.$el)
+ const fontSize = css.getPropertyValue('font-size')
const emojiSize = css.getPropertyValue('--emojiSize')
+
+ const fontSizeUnit = fontSize.replace(/[0-9,.]+/, '')
+ const fontSizeValue = Number(fontSize.replace(/[^0-9,.]+/, ''))
+
const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '')
const emojiSizeValue = Number(emojiSize.replace(/[^0-9,.]+/, ''))
- const fontSize = css.getPropertyValue('font-size').replace(/[^0-9,.]+/, '')
+
+ let fontSizeMultiplier
+ if (fontSizeUnit.endsWith('em')) {
+ fontSizeMultiplier = fontSizeValue
+ } else {
+ fontSizeMultiplier = fontSizeValue / 14
+ }
+ console.log('Multiplier', fontSizeMultiplier)
+ console.log('Result', fontSizeMultiplier * 14)
let emojiSizeReal
if (emojiSizeUnit.endsWith('em')) {
- emojiSizeReal = emojiSizeValue * fontSize
+ emojiSizeReal = emojiSizeValue * fontSizeMultiplier * 14
} else {
emojiSizeReal = emojiSizeValue
}
+ console.log(emojiSizeReal)
- const fullEmojiSize = emojiSizeReal + (2 * 0.2 * fontSize)
+ const fullEmojiSize = emojiSizeReal + (2 * 0.2 * fontSizeMultiplier * 14)
this.emojiSize = fullEmojiSize
},
showPicker () {
@@ -304,6 +321,7 @@ const EmojiPicker = {
return this.emojiSize
},
itemPerRow () {
+ console.log('CALC', this.emojiSize, this.width)
return this.width ? Math.floor(this.width / this.emojiSize) : 6
},
activeGroupView () {
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
@@ -49,6 +49,7 @@
.heading {
display: flex;
+ flex-direction: column;
padding: 0.7em 0.5em 0;
}
@@ -129,7 +130,7 @@
.emoji {
&-search {
- padding: 0.3em;
+ padding-bottom: 0.5em;
flex: 0 0 auto;
input {
@@ -166,24 +167,6 @@
}
}
- &-group {
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- justify-content: left;
-
- &-title {
- font-size: 0.85em;
- width: 100%;
- margin: 0;
- padding-left: 0.3em;
-
- &.disabled {
- display: none;
- }
- }
- }
-
&-item {
width: var(--emoji-size);
height: var(--emoji-size);
@@ -206,9 +189,38 @@
}
.emoji-picker-emoji.-unicode {
- font-size: 1.6em;
+ font-size: calc(var(--emoji-size) * 0.8);
overflow: hidden;
}
}
+
+ &-group {
+ display: grid;
+ grid-template-columns: repeat(var(--__amount), 1fr);
+ align-items: center;
+ justify-items: center;
+ justify-content: center;
+ grid-template-rows: repeat(1, auto);
+
+ &.first-row {
+ grid-template-rows: repeat(2, auto);
+
+ .emoji-item {
+ grid-row: 2;
+ }
+ }
+
+ &-title {
+ font-size: 0.85em;
+ grid-column: span var(--__amount);
+ width: 100%;
+ margin: 0;
+ padding-left: 0.3em;
+
+ &.disabled {
+ display: none;
+ }
+ }
+ }
}
}
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
@@ -8,7 +8,19 @@
@close="onPopoverClosed"
>
<template #content>
- <div class="heading">
+ <div
+ class="heading"
+ >
+ <div class="emoji-search">
+ <input
+ ref="search"
+ v-model="keyword"
+ type="text"
+ class="input form-control"
+ :placeholder="$t('emoji.search_emoji')"
+ @input="$event.target.composing = false"
+ >
+ </div>
<!--
Body scroll lock needs to be on every scrollable element on safari iOS.
Here we tell it to enable scrolling for this element.
@@ -18,6 +30,7 @@
ref="header"
v-body-scroll-lock="isInModal"
class="emoji-tabs"
+ @wheel.prevent="groupScroll"
>
<span
v-for="group in filteredEmojiGroups"
@@ -72,16 +85,6 @@
class="emoji-content"
:class="{hidden: showingStickers}"
>
- <div class="emoji-search">
- <input
- ref="search"
- v-model="keyword"
- type="text"
- class="input form-control"
- :placeholder="$t('emoji.search_emoji')"
- @input="$event.target.composing = false"
- >
- </div>
<!-- Enables scrolling for this element on safari iOS. See comments for header. -->
<DynamicScroller
ref="emoji-groups"
@@ -106,6 +109,8 @@
>
<div
class="emoji-group"
+ :class="{ ['first-row']: group.isFirstRow }"
+ :style="{ '--__amount': itemPerRow }"
>
<h6
v-if="group.isFirstRow"
diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
@@ -1,5 +1,6 @@
import UserAvatar from '../user_avatar/user_avatar.vue'
import UserListPopover from '../user_list_popover/user_list_popover.vue'
+import StillImage from 'src/components/still-image/still-image.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faPlus,
@@ -19,7 +20,8 @@ const EmojiReactions = {
name: 'EmojiReactions',
components: {
UserAvatar,
- UserListPopover
+ UserListPopover,
+ StillImage
},
props: ['status'],
data: () => ({
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
@@ -18,12 +18,11 @@
<span
class="reaction-emoji"
>
- <img
+ <StillImage
v-if="reaction.url"
:src="reaction.url"
class="reaction-emoji-content"
- width="1em"
- >
+ />
<span
v-else
class="reaction-emoji reaction-emoji-content"
@@ -127,17 +126,23 @@
display: flex;
justify-content: center;
align-items: center;
+
+ --_still_image-label-scale: 0.3;
}
.reaction-emoji-content {
max-width: 100%;
max-height: 100%;
- width: auto;
- height: auto;
+ width: var(--emoji-size);
+ height: var(--emoji-size);
line-height: inherit;
overflow: hidden;
font-size: calc(var(--emoji-size) * 0.8);
margin: 0;
+
+ img {
+ object-fit: contain;
+ }
}
&:focus {
