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