Emoji picker to shared components (#34337)
* Exploration of a virtuoso-powered emoji picker moved to shared components Fable generated * fix pnpm lock * format & fix some lint issues * wrong import * fix lint warning * Fix off-by-one and remove manual overflow adjustment: let's leave the default unless it turns out to be necessary. Emoji should not take that long to load. * Convert to functional component * WIP: change to one big virtuoso scroller * Change to use virtuoso's own onRangeChanged and santitise category data and how it's passed around * Convert Tabs to functional component and put the focusing behaviour back with it just keeping track of refs by itself. * Absorb two line config file into main component * Actually add the config to the main file * Convert emoji to functional Also make selected always defined and use useCallback. * QuickReactions to functional component * Non-default exports & doc * Search to functional component * Well it seems to work just fine now * Use ref prop * fix lockfile AGAIN * lint * Remove default export * Remove some mx_ classnames and fix the inputRef to make the arrow keys in the search box work (well, work as much as they ever did). * Remove last of the mx_ id / classnames (except the one in the test) * Use useMemo to memoize * No need to export props interface (I think?) and fix comment now we don't do the mutation stuff anymore * Fix test * Fix axe violations & add screenshots * Avoid comparing dom snapshots in test * Allow more before or after, just compare order of the ones present in both. * Switch existing usages to new emoji picker and kill the old one with fire * Unused stuff * Remove i18n strings * Fix some tests * Update screenshots * Fix test by removing the last of the weird memoized-but-mutated data structure * Move the string somewhere more sensible than 'a11y' * i18n lint * Give the emojis IDs so aria-activedescendant works * Fix more tests * Add a small wrapper emoji picker component This lets us easily memoize the recent emojis when the emoji picker is opened. Also it saves a bit of boilerplate. * Remove old emojipicker css * Typos Co-authored-by: David Langley <davidl@element.io> * Use compound constants * Rethemendex * Use catalog version for emojibase * Add comments * More comments * Fix comment * More comments * more comments (and make them uniform) * More comments * Fix pnpm lock again * Another comment * Apply button types to new version * Add comment * Disable screenshot as per comment --------- Co-authored-by: Will Hunt <2072976+Half-Shot@users.noreply.github.com> Co-authored-by: David Langley <davidl@element.io>
This commit is contained in:
David Baker
co-authored by
Will Hunt
David Langley
Will Hunt
David Langley
parent
023f8ea35a
commit
a4f63cdd22
@@ -212,7 +212,6 @@
|
||||
@import "./views/elements/_TextWithTooltip.pcss";
|
||||
@import "./views/elements/_ToggleSwitch.pcss";
|
||||
@import "./views/elements/_Validation.pcss";
|
||||
@import "./views/emojipicker/_EmojiPicker.pcss";
|
||||
@import "./views/location/_LocationPicker.pcss";
|
||||
@import "./views/messages/_CallEvent.pcss";
|
||||
@import "./views/messages/_CreateEvent.pcss";
|
||||
|
||||
@@ -1,216 +0,0 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2019 Tulir Asokan <tulir@maunium.net>
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_EmojiPicker {
|
||||
width: 340px;
|
||||
height: min(450px, 80vh);
|
||||
max-height: 80vh;
|
||||
|
||||
border-radius: 4px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_body {
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_header {
|
||||
padding: 4px 8px 0;
|
||||
border-bottom: 1px solid $message-action-bar-border-color;
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_anchor {
|
||||
border: none;
|
||||
padding: var(--cpd-space-1x) 0;
|
||||
/* We have to explicitly inherit the font as button browser styles are implicitly ignorant */
|
||||
font: inherit;
|
||||
font-size: $font-20px;
|
||||
line-height: 1;
|
||||
border-bottom: 2px solid transparent;
|
||||
background-color: transparent;
|
||||
border-radius: 4px 4px 0 0;
|
||||
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
|
||||
color: $primary-content;
|
||||
display: inline-block;
|
||||
|
||||
&:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:disabled {
|
||||
filter: opacity(0.3);
|
||||
}
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background-color: $focus-bg-color;
|
||||
border-bottom: 2px solid $accent;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_anchor_visible {
|
||||
border-bottom: 2px solid $accent;
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_search {
|
||||
margin: 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $input-border-color;
|
||||
background-color: $background;
|
||||
display: flex;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px 0;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--cpd-color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background-color: inherit;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
align-self: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_search_icon {
|
||||
width: 18px;
|
||||
margin: 8px;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_category {
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_category_label {
|
||||
width: 304px;
|
||||
font: var(--cpd-font-heading-sm-semibold);
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_list {
|
||||
width: 304px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_item_wrapper {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
width: 38px;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus-within {
|
||||
background-color: $focus-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_body_showHighlight .mx_EmojiPicker_item_wrapper [tabindex="0"] .mx_EmojiPicker_item {
|
||||
background-color: $focus-bg-color;
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_item {
|
||||
display: inline-block;
|
||||
font-size: $font-20px;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: $focus-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_item_selected {
|
||||
color: rgb(0, 0, 0, 0.5);
|
||||
border: 1px solid $accent;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_category_label,
|
||||
.mx_EmojiPicker_preview_name {
|
||||
font-size: $font-16px;
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_footer {
|
||||
border-top: 1px solid $message-action-bar-border-color;
|
||||
min-height: 72px;
|
||||
max-height: 72px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_preview_emoji {
|
||||
font-size: $font-32px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_preview_text {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_name {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_shortcode {
|
||||
color: $light-fg-color;
|
||||
overflow-wrap: break-word;
|
||||
font: var(--cpd-font-body-md-regular);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: ":";
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_quick {
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_quick_header .mx_EmojiPicker_name {
|
||||
margin-right: 4px;
|
||||
}
|
||||
Reference in New Issue
Block a user