From 623d94066c60194d7dc94179e0b396973b15c58d Mon Sep 17 00:00:00 2001 From: Amir Roox Date: Mon, 27 May 2024 23:43:42 +0330 Subject: [PATCH 1/3] Fixing "Toggle Progress" For RTL Support --- src/components/LearnProgress.tsx | 41 +++++++++++++++++++++++++------- 1 file changed, 32 insertions(+), 9 deletions(-) diff --git a/src/components/LearnProgress.tsx b/src/components/LearnProgress.tsx index ee55225d..4e6c3cdf 100644 --- a/src/components/LearnProgress.tsx +++ b/src/components/LearnProgress.tsx @@ -4,6 +4,7 @@ import { useIntl } from 'react-intl'; import Icon from './Icon'; import { InteractiveAreaContext } from 'src/context/InteractiveAreaContext'; import HighlightedText from './HighlightedText'; +import { useLanguageDirection } from "src/utils/useLanguageDirection"; const LearnProgress = () => { const [open, setOpen] = useState(false); @@ -27,11 +28,22 @@ const LearnProgress = () => { const toggleProgress = () => setOpen(!open); + const direction = useLanguageDirection(); + + // list lesson (ToggleProgress For RTL/LTR) + const listOpen = direction === 'rtl' ? 'left-0' : 'right-0'; + const listClose = direction === 'rtl' ? '-left-[244px]' : '-right-[244px]'; + const listOpenInner = direction === 'rtl' ? '-left-10' : '-right-10'; + const listCloseInner = direction === 'rtl' ? 'left-[204px]' : 'right-[204px]'; + const listIconName = direction === 'rtl' ? 'arrow-right' : 'arrow-left'; + const listStepDirection = direction === 'rtl' ? 'left-[7px]' : 'right-[7px]'; + + return (
{
@@ -66,17 +80,26 @@ const LearnProgress = () => { }, 'step-item relative truncate max-w-[80%] flex flex-row-reverse items-center', index !== lessonData.length - 1 && - "pb-6 after:content-[''] after:block after:w-[2px] after:h-8 after:bg-neutral-700 after:rounded-md after:right-[7px] after:top-8 after:absolute", + `pb-6 after:content-[''] after:block after:w-[2px] after:h-8 after:bg-neutral-700 after:rounded-md after:${listStepDirection} after:top-8 after:absolute`, )} > {step === index && ( - + )} {lastStep >= index && step !== index && ( - + )} {lastStep < index && ( - + )} Date: Tue, 28 May 2024 00:12:33 +0330 Subject: [PATCH 2/3] Fix correct display of regex in RTL --- src/components/CheatsheetCollapse.tsx | 2 +- src/components/Step.tsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/CheatsheetCollapse.tsx b/src/components/CheatsheetCollapse.tsx index 7c209e7d..a4083a0e 100644 --- a/src/components/CheatsheetCollapse.tsx +++ b/src/components/CheatsheetCollapse.tsx @@ -36,7 +36,7 @@ const CheatsheetCollapse = ({ title, data }: CheatsheetCollapseProps) => { aria-controls={`Collapse-${data.title}`} >
- + {data.code}
diff --git a/src/components/Step.tsx b/src/components/Step.tsx index 29a39f30..6f305e7d 100644 --- a/src/components/Step.tsx +++ b/src/components/Step.tsx @@ -43,6 +43,7 @@ const Step = () => { text={formatMessage({ id: data.title })} attrs={{ className: 'px-2 my-1 bg-neutral-700 rounded-md mx-1 whitespace-nowrap', + dir: 'ltr' }} /> { text={formatMessage({ id: data.description })} attrs={{ className: 'p-1 text-xs whitespace-nowrap rounded-md bg-neutral-700 tracking-widest', + dir: 'ltr' }} />
From b69bffb366bc7c5c90efd7c9f393480fa468c819 Mon Sep 17 00:00:00 2001 From: Amir Roox Date: Tue, 28 May 2024 00:28:04 +0330 Subject: [PATCH 3/3] Fixing Persian Translate For lesson 49 --- src/localization/fa/learn.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/localization/fa/learn.json b/src/localization/fa/learn.json index e94a9fdd..d680704e 100644 --- a/src/localization/fa/learn.json +++ b/src/localization/fa/learn.json @@ -137,8 +137,8 @@ "steps.positiveLookbehind.title": "بررسی رو به عقب مثبت: `(?<=)`", "steps.positiveLookbehind.description": "برای مثال می خواهیم مقدار قیمت را در متن انتخاب کنیم. بنابراین، برای انتخاب فقط مقادیر عددی که بعد از علامت $ هستند، باید بررسی رو به عقب مثبت (Positive Lookbehind) `(?<=)` را قبل از عبارت خود بنویسیم. بعد از علامت `=` داخل پرانتز، `\\$` را اضافه کنید.", - "steps.negativeLookbehind.title": "بررسی رو به عقب منفی: `(؟