From 3b59de98d2704abf6383d0d09432f24d79c74f6b Mon Sep 17 00:00:00 2001 From: Alex Tavor Date: Mon, 7 Feb 2022 15:06:59 +0200 Subject: [PATCH] Handle RTL better --- frontend/public/index.html | 25 +++++++++---------- .../src/chat-window/bubbles/ChatBubble.tsx | 25 ++++++++++++++----- frontend/src/chat-window/header/Header.tsx | 10 ++++---- frontend/src/index.tsx | 7 ------ 4 files changed, 36 insertions(+), 31 deletions(-) diff --git a/frontend/public/index.html b/frontend/public/index.html index e520948..43f3158 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -29,21 +29,20 @@
diff --git a/frontend/src/chat-window/bubbles/ChatBubble.tsx b/frontend/src/chat-window/bubbles/ChatBubble.tsx index 60ecf51..2d32e0a 100644 --- a/frontend/src/chat-window/bubbles/ChatBubble.tsx +++ b/frontend/src/chat-window/bubbles/ChatBubble.tsx @@ -17,10 +17,19 @@ const useBubbleStyles = makeStyles((theme) => { animation: "$open 250ms linear", display: "flex", paddingBottom: theme.spacing(1), - justifyContent: (p: ThemeParams) => - `${p.isUser ? "flex-end" : "flex-start"}`, - marginRight: (p: ThemeParams) => (p.isUser ? "" : theme.spacing(5)), - marginLeft: (p: ThemeParams) => (!p.isUser ? "" : theme.spacing(5)), + justifyContent: (p: ThemeParams) => { + return p.config.is_rtl + ? `${p.isUser ? "flex-start" : "flex-end"}` + : `${p.isUser ? "flex-end" : "flex-start"}`; + }, + marginRight: (p: ThemeParams) => + p.config.is_rtl + ? theme.spacing(p.isUser ? 5 : 0) + : theme.spacing(p.isUser ? 0 : 5), + marginLeft: (p: ThemeParams) => + p.config.is_rtl + ? theme.spacing(p.isUser ? 0 : 5) + : theme.spacing(p.isUser ? 5 : 0), }, bubble: { padding: theme.spacing(1), @@ -44,9 +53,13 @@ const useBubbleStyles = makeStyles((theme) => { : p.config.palette?.botBubble || theme.custom.palette.a.main }`, transformOrigin: (p: ThemeParams) => - `${p.isUser ? "bottom right" : "bottom left"}`, + p.config.is_rtl + ? `${p.isUser ? "bottom left" : "bottom right"}` + : `${p.isUser ? "bottom right" : "bottom left"}`, borderRadius: (p: ThemeParams) => - `${p.isUser ? "18px 18px 0px 18px" : "18px 18px 18px 0px"}`, + p.config.is_rtl + ? `${p.isUser ? "18px 18px 18px 0px" : "18px 18px 0px 18px"}` + : `${p.isUser ? "18px 18px 0px 18px" : "18px 18px 18px 0px"}`, color: (p: ThemeParams) => `${ p.isUser diff --git a/frontend/src/chat-window/header/Header.tsx b/frontend/src/chat-window/header/Header.tsx index db32ff9..b3edd79 100644 --- a/frontend/src/chat-window/header/Header.tsx +++ b/frontend/src/chat-window/header/Header.tsx @@ -57,14 +57,14 @@ export const Header: React.FC<{ }> = ({ name, avatar, params, children }) => { const classes = useStyles(params); return ( -
-
-
-
+
+
+
+
-
+
{name} diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 9e42e93..ebc5dce 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -18,13 +18,6 @@ if (target) { value = v; } catch (e) {} } - if (cur === "is_rtl") { - if (value === "true") { - value = true; - } else if (value === "1") { - value = true; - } else value = false; - } acc[cur] = value; return acc; }, {} as { [key: string]: string | boolean | Object }) as unknown as CoCoChatWindowParams;