aboutsummaryrefslogtreecommitdiff
path: root/src/components/emoji_picker
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/emoji_picker')
-rw-r--r--src/components/emoji_picker/emoji_picker.js39
-rw-r--r--src/components/emoji_picker/emoji_picker.scss96
-rw-r--r--src/components/emoji_picker/emoji_picker.vue11
3 files changed, 82 insertions, 64 deletions
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index eb665c40..9ea5c877 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -120,6 +120,7 @@ const EmojiPicker = {
groupRefs: {},
emojiRefs: {},
filteredEmojiGroups: [],
+ emojiSize: 0,
width: 0
}
},
@@ -130,9 +131,28 @@ 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 = Number(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()
+ this.$nextTick(() => {
+ this.onShowing()
+ })
},
hidePicker () {
this.$refs.popover.hidePopover()
@@ -224,6 +244,7 @@ const EmojiPicker = {
},
onShowing () {
const oldContentLoaded = this.contentLoaded
+ this.updateEmojiSize()
this.recalculateItemPerRow()
this.$nextTick(() => {
this.$refs.search.focus()
@@ -266,16 +287,20 @@ const EmojiPicker = {
},
computed: {
minItemSize () {
- return this.emojiHeight
+ return this.emojiSize
},
- emojiHeight () {
- return 32 + 4
+ // used to watch it
+ fontSize () {
+ this.$nextTick(() => {
+ this.updateEmojiSize()
+ })
+ return this.$store.getters.mergedConfig.fontSize
},
- emojiWidth () {
- return 32 + 4
+ emojiHeight () {
+ return this.emojiSize
},
itemPerRow () {
- return this.width ? Math.floor(this.width / this.emojiWidth - 1) : 6
+ return this.width ? Math.floor(this.width / this.emojiSize) : 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 aab9251d..12c09388 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -1,47 +1,35 @@
-@import "../../variables";
-
-$emoji-picker-header-height: 36px;
-$emoji-picker-header-picture-width: 32px;
-$emoji-picker-header-picture-height: 32px;
-$emoji-picker-emoji-size: 32px;
-
.emoji-picker {
+ --__emoji-picker-header: 2.2em;
+
width: 25em;
max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
display: flex;
flex-direction: column;
- background-color: $fallback--bg;
- background-color: var(--popover, $fallback--bg);
- color: $fallback--link;
- color: var(--popoverText, $fallback--link);
-
- --faint: var(--popoverFaintText, $fallback--faint);
- --faintLink: var(--popoverFaintLink, $fallback--faint);
- --lightText: var(--popoverLightText, $fallback--lightText);
- --icon: var(--popoverIcon, $fallback--icon);
&-header-image {
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-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;
}
}
.keep-open,
.too-many-emoji,
.hide-custom-emoji {
- padding: 7px;
+ padding: 0.5em;
line-height: normal;
}
@@ -55,13 +43,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: 0.7em 0.5em 0;
}
.content {
@@ -76,14 +64,14 @@ $emoji-picker-emoji-size: 32px;
display: flex;
flex-flow: row nowrap;
overflow-x: auto;
+ overflow-y: hidden;
}
.additional-tabs {
display: flex;
border-left: 1px solid;
- border-left-color: $fallback--icon;
- border-left-color: var(--icon, $fallback--icon);
- padding-left: 7px;
+ border-left-color: var(--border);
+ padding-left: 0.5em;
flex: 0 0 auto;
}
@@ -92,30 +80,29 @@ $emoji-picker-emoji-size: 32px;
flex-basis: auto;
display: flex;
align-content: center;
+ scrollbar-width: thin;
&-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-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;
}
- &.active {
- border-bottom: 4px solid;
-
- svg {
- color: $fallback--lightText;
- color: var(--lightText, $fallback--lightText);
- }
+ &.toggled {
+ border-bottom: 0.2em solid;
}
}
}
@@ -142,7 +129,7 @@ $emoji-picker-emoji-size: 32px;
.emoji {
&-search {
- padding: 5px;
+ padding: 0.3em;
flex: 0 0 auto;
input {
@@ -156,6 +143,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,
@@ -182,13 +170,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;
@@ -197,24 +185,28 @@ $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 {
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 {
- font-size: 24px;
+ font-size: 1.6em;
overflow: hidden;
}
}
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 1231ce2b..a3dc8f9e 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -23,9 +23,9 @@
v-for="group in filteredEmojiGroups"
:ref="setGroupRef('group-header-' + group.id)"
:key="group.id"
- class="emoji-tabs-item"
+ class="button-unstyled emoji-tabs-item"
:class="{
- active: activeGroupView === group.id
+ toggled: activeGroupView === group.id
}"
:title="group.text"
role="button"
@@ -52,8 +52,8 @@
class="additional-tabs"
>
<span
- class="stickers-tab-icon additional-tabs-item"
- :class="{active: showingStickers}"
+ class="button-unstyled stickers-tab-icon additional-tabs-item"
+ :class="{toggled: showingStickers}"
:title="$t('emoji.stickers')"
@click.prevent="toggleStickers"
>
@@ -77,7 +77,7 @@
ref="search"
v-model="keyword"
type="text"
- class="form-control"
+ class="input form-control"
:placeholder="$t('emoji.search_emoji')"
@input="$event.target.composing = false"
>
@@ -89,6 +89,7 @@
class="emoji-groups"
:class="groupsScrolledClass"
:min-item-size="minItemSize"
+ :buffer="minItemSize"
:items="emojiItems"
:emit-update="true"
@update="onScroll"
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 10:08:52 +0000