yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Emoji picker should be on right hand side for RTL languages

Browse Source
This commit is contained in:
Tom Moor
2023-09-05 07:53:07 -04:00
parent 262590e507
commit 795fe37bd6
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/scenes/Document/components/DocumentTitle.tsx
View File

@@ -231,6 +231,7 @@ const DocumentTitle = React.forwardRef(function _DocumentTitle(
[emoji, onChangeEmoji, restoreFocus] [emoji, onChangeEmoji, restoreFocus]
); );
const dir = ref.current?.getComputedDirection();
const emojiIcon = <Emoji size={32}>{emoji}</Emoji>; const emojiIcon = <Emoji size={32}>{emoji}</Emoji>;
return ( return (
@@ -251,7 +252,7 @@ const DocumentTitle = React.forwardRef(function _DocumentTitle(
ref={ref} ref={ref}
> >
{can.update && !readOnly ? ( {can.update && !readOnly ? (
<EmojiWrapper align="center" justify="center"> <EmojiWrapper align="center" justify="center" dir={dir}>
<React.Suspense fallback={emojiIcon}> <React.Suspense fallback={emojiIcon}>
<StyledEmojiPicker <StyledEmojiPicker
value={emoji} value={emoji}
@@ -264,7 +265,7 @@ const DocumentTitle = React.forwardRef(function _DocumentTitle(
</React.Suspense> </React.Suspense>
</EmojiWrapper> </EmojiWrapper>
) : emoji ? ( ) : emoji ? (
<EmojiWrapper align="center" justify="center"> <EmojiWrapper align="center" justify="center" dir={dir}>
{emojiIcon} {emojiIcon}
</EmojiWrapper> </EmojiWrapper>
) : null} ) : null}
@@ -276,10 +277,10 @@ const StyledEmojiPicker = styled(EmojiPicker)`
${extraArea(8)} ${extraArea(8)}
`; `;
const EmojiWrapper = styled(Flex)` const EmojiWrapper = styled(Flex)<{ dir?: string }>`
position: absolute; position: absolute;
top: 8px; top: 8px;
left: -40px; ${(props) => (props.dir === "rtl" ? "right: -40px" : "left: -40px")};
height: 32px; height: 32px;
width: 32px; width: 32px;
`; `;