fix: support RTL direction (#213)
* fix: support RTL direction fixes #212 * fix: fix for old Safari * fix: remove test page rtl
This commit is contained in:
parent
468fd805b9
commit
7875925be0
|
@ -77,7 +77,7 @@
|
|||
</div>
|
||||
<div class="nav"
|
||||
role="tablist"
|
||||
style="grid-template-columns: repeat({groups.length}, 1fr);"
|
||||
style="grid-template-columns: repeat({groups.length}, 1fr)"
|
||||
aria-label={i18n.categoriesLabel}
|
||||
on:keydown={onNavKeydown}>
|
||||
{#each groups as group (group.id)}
|
||||
|
@ -95,7 +95,8 @@
|
|||
{/each}
|
||||
</div>
|
||||
<div class="indicator-wrapper">
|
||||
<div class="indicator" style={indicatorStyle}>
|
||||
<div class="indicator"
|
||||
style="transform: translateX({(isRtl ? -1 : 1) * currentGroupIndex * 100}%)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -114,7 +115,7 @@
|
|||
on:click={onEmojiClick}
|
||||
bind:this={tabpanelElement}
|
||||
>
|
||||
<div use:calculateEmojiGridWidth>
|
||||
<div use:calculateEmojiGridStyle>
|
||||
{#each currentEmojisWithCategories as emojiWithCategory, i (emojiWithCategory.category)}
|
||||
<div
|
||||
id="menu-label-{i}"
|
||||
|
@ -161,7 +162,7 @@
|
|||
<div class="favorites emoji-menu {message ? 'gone': ''}"
|
||||
role="menu"
|
||||
aria-label={i18n.favoritesLabel}
|
||||
style="padding-right: {scrollbarWidth}px;"
|
||||
style="padding-inline-end: {scrollbarWidth}px"
|
||||
on:click={onEmojiClick}
|
||||
data-testid="favorites">
|
||||
<!-- The reason the emoji logic below is largely duplicated is because it turns out we get a smaller
|
||||
|
|
|
@ -42,7 +42,6 @@ let tabpanelElement
|
|||
let searchMode = false // eslint-disable-line no-unused-vars
|
||||
let activeSearchItem = -1
|
||||
let message // eslint-disable-line no-unused-vars
|
||||
let indicatorStyle = '' // eslint-disable-line no-unused-vars
|
||||
let skinTonePickerExpanded = false
|
||||
let skinTonePickerExpandedAfterAnimation = false // eslint-disable-line no-unused-vars
|
||||
let skinToneDropdown
|
||||
|
@ -55,6 +54,7 @@ let skinTones = []
|
|||
let currentFavorites = [] // eslint-disable-line no-unused-vars
|
||||
let defaultFavoriteEmojis
|
||||
let numColumns = DEFAULT_NUM_COLUMNS
|
||||
let isRtl = false
|
||||
let scrollbarWidth = 0 // eslint-disable-line no-unused-vars
|
||||
let currentGroupIndex = 0
|
||||
let groups = defaultGroups
|
||||
|
@ -221,22 +221,31 @@ $: {
|
|||
// 1) Re-calculate the --num-columns var because it may have changed
|
||||
// 2) Re-calculate the scrollbar width because it may have changed
|
||||
// (i.e. because the number of items changed)
|
||||
// 3) Re-calculate whether we're in RTL mode or not.
|
||||
//
|
||||
// The benefit of doing this in one place is to align with rAF/ResizeObserver
|
||||
// and do all the calculations in one go. RTL vs LTR is not strictly width-related,
|
||||
// but since we're already reading the style here, and since it's already aligned with
|
||||
// the rAF loop, this is the most appropriate place to do it perf-wise.
|
||||
//
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function calculateEmojiGridWidth (node) {
|
||||
function calculateEmojiGridStyle (node) {
|
||||
return widthCalculator.calculateWidth(node, width => {
|
||||
/* istanbul ignore next */
|
||||
const newNumColumns = process.env.NODE_ENV === 'test'
|
||||
? DEFAULT_NUM_COLUMNS
|
||||
: parseInt(getComputedStyle(rootElement).getPropertyValue('--num-columns'), 10)
|
||||
/* istanbul ignore next */
|
||||
const parentWidth = process.env.NODE_ENV === 'test' // jsdom throws an error here occasionally
|
||||
? 1
|
||||
: node.parentElement.getBoundingClientRect().width
|
||||
const newScrollbarWidth = parentWidth - width
|
||||
numColumns = newNumColumns
|
||||
scrollbarWidth = newScrollbarWidth // eslint-disable-line no-unused-vars
|
||||
if (process.env.NODE_ENV !== 'test') { // jsdom throws errors for this kind of fancy stuff
|
||||
// read all the style/layout calculations we need to make
|
||||
const style = getComputedStyle(rootElement)
|
||||
const newNumColumns = parseInt(style.getPropertyValue('--num-columns'), 10)
|
||||
const newIsRtl = style.getPropertyValue('direction') === 'rtl'
|
||||
const parentWidth = node.parentElement.getBoundingClientRect().width
|
||||
const newScrollbarWidth = parentWidth - width
|
||||
|
||||
// write to Svelte variables
|
||||
numColumns = newNumColumns
|
||||
scrollbarWidth = newScrollbarWidth // eslint-disable-line no-unused-vars
|
||||
isRtl = newIsRtl // eslint-disable-line no-unused-vars
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
@ -246,13 +255,6 @@ function calculateEmojiGridWidth (node) {
|
|||
|
||||
$: currentGroup = groups[currentGroupIndex]
|
||||
|
||||
//
|
||||
// Animate the indicator (little blue bar below category icons)
|
||||
//
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
$: indicatorStyle = `transform: translateX(${`${currentGroupIndex * 100}%`})`
|
||||
|
||||
//
|
||||
// Set or update the currentEmojis. Check for invalid ZWJ renderings
|
||||
// (i.e. double emoji).
|
||||
|
|
|
@ -21,7 +21,7 @@ $skintoneZIndex3: 3;
|
|||
|
||||
.skintone-list {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
top: 0;
|
||||
z-index: $skintoneZIndex2;
|
||||
overflow: visible;
|
||||
|
@ -41,6 +41,12 @@ $skintoneZIndex3: 3;
|
|||
transition-duration: 0.001s;
|
||||
}
|
||||
|
||||
// TODO: remove this when old iOS Safari drops out of usage: https://caniuse.com/css-logical-props
|
||||
// For now, we don't support RTL in old versions of iOS
|
||||
@supports not (inset-inline-end: 0) {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.no-animate {
|
||||
transition: none;
|
||||
}
|
||||
|
@ -175,12 +181,11 @@ button.emoji,
|
|||
background: var(--background);
|
||||
}
|
||||
|
||||
|
||||
.search-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding-left: var(--emoji-padding);
|
||||
padding-inline-start: var(--emoji-padding);
|
||||
padding-bottom: var(--emoji-padding);
|
||||
}
|
||||
|
||||
|
|
|
@ -18,6 +18,8 @@
|
|||
@media screen and (max-width: 320px) {
|
||||
emoji-picker {
|
||||
width: 100%;
|
||||
--num-columns: 6;
|
||||
--category-emoji-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 240px) {
|
||||
|
|
Loading…
Reference in New Issue