From c07cebf28af98285a639f9a5a3482680340ae4bd Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Wed, 11 Sep 2024 13:02:52 +0800 Subject: [PATCH 1/3] refactor(console,experience): improve RTL support --- packages/console/src/App.tsx | 13 +----------- .../Topbar/TenantSelector/index.module.scss | 9 +------- .../Topbar/TenantSelector/index.tsx | 5 ++--- .../Topbar/UserInfo/SubMenu/index.module.scss | 21 ++++--------------- .../Topbar/UserInfo/SubMenu/index.tsx | 7 ++----- .../Topbar/UserInfo/index.module.scss | 2 +- .../src/containers/AppBoundary/index.tsx | 13 ++++++++++-- .../src/ds-components/Pagination/Next.tsx | 12 ----------- .../src/ds-components/Pagination/Previous.tsx | 12 ----------- .../Pagination/index.module.scss | 5 +++++ .../src/ds-components/Pagination/index.tsx | 17 +++++++++++---- .../ds-components/Textarea/index.module.scss | 2 +- .../UserPassword/index.module.scss | 2 +- .../Button/SocialLinkButton.module.scss | 2 +- .../src/components/Button/index.module.scss | 4 ++-- .../src/components/Checkbox/index.module.scss | 2 +- .../ConfirmModal/Acmodal.module.scss | 2 +- .../ConfirmModal/MobileModal.module.scss | 2 +- .../src/components/Divider/index.module.scss | 4 ++-- .../IdentifierRegisterForm/index.module.scss | 2 +- .../IdentifierSignInForm/index.module.scss | 2 +- .../NotchedBorder/index.module.scss | 2 +- .../InputFields/InputField/index.module.scss | 4 ++-- .../CountryCodeDropdown/index.module.scss | 8 +++---- .../CountryCodeSelector/index.module.scss | 7 +++---- .../LogtoSignature/index.module.scss | 2 +- .../src/components/NavBar/index.module.scss | 2 +- .../AppNotification/index.module.scss | 4 ++-- .../PasswordSignInForm/index.module.scss | 2 +- .../SingleSignOnForm/index.module.scss | 2 +- .../src/components/TextLink/index.module.scss | 2 +- .../VerificationCode/index.module.scss | 2 +- .../containers/SetPassword/index.module.scss | 4 ++-- .../TermsAndPrivacyCheckbox/index.module.scss | 2 +- .../OrganizationItem/index.module.scss | 2 +- .../Consent/ScopeGroup/index.module.scss | 4 ++-- .../Consent/ScopesListCard/index.module.scss | 4 ++-- .../Consent/UserProfile/index.module.scss | 2 +- .../IdentifierProfileForm/index.module.scss | 2 +- .../ForgotPasswordForm/index.module.scss | 2 +- .../pages/SignInPassword/index.module.scss | 2 +- packages/experience/src/App.tsx | 11 ---------- .../src/Providers/AppBoundary/AppMeta.tsx | 2 ++ .../src/components/Button/index.module.scss | 2 +- 44 files changed, 85 insertions(+), 131 deletions(-) delete mode 100644 packages/console/src/ds-components/Pagination/Next.tsx delete mode 100644 packages/console/src/ds-components/Pagination/Previous.tsx diff --git a/packages/console/src/App.tsx b/packages/console/src/App.tsx index d24380d6c28..aac799a98f8 100644 --- a/packages/console/src/App.tsx +++ b/packages/console/src/App.tsx @@ -7,7 +7,6 @@ import { TenantScope, } from '@logto/schemas'; import { conditionalArray } from '@silverhand/essentials'; -import i18next from 'i18next'; import { useContext, useMemo } from 'react'; import { Helmet } from 'react-helmet'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; @@ -115,17 +114,7 @@ function Providers() { }} > - + diff --git a/packages/console/src/components/Topbar/TenantSelector/index.module.scss b/packages/console/src/components/Topbar/TenantSelector/index.module.scss index 4d9b725404f..8d683959e45 100644 --- a/packages/console/src/components/Topbar/TenantSelector/index.module.scss +++ b/packages/console/src/components/Topbar/TenantSelector/index.module.scss @@ -55,20 +55,13 @@ $dropdown-item-height: 40px; background-color: var(--color-neutral-80); flex-shrink: 0; position: absolute; - left: _.unit(-3); + inset-inline-start: _.unit(-3); } &:hover::before { pointer-events: none; cursor: default; } - - &.rtl { - &::before { - left: unset; - right: _.unit(-3); - } - } } .dropdown { diff --git a/packages/console/src/components/Topbar/TenantSelector/index.tsx b/packages/console/src/components/Topbar/TenantSelector/index.tsx index 3b11c599d7c..f882a351fc1 100644 --- a/packages/console/src/components/Topbar/TenantSelector/index.tsx +++ b/packages/console/src/components/Topbar/TenantSelector/index.tsx @@ -1,5 +1,4 @@ import { OrganizationInvitationStatus } from '@logto/schemas'; -import classNames from 'classnames'; import { useContext, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -21,7 +20,7 @@ import TenantInvitationDropdownItem from './TenantInvitationDropdownItem'; import styles from './index.module.scss'; export default function TenantSelector() { - const { t, i18n } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { tenants, prependTenant, @@ -45,7 +44,7 @@ export default function TenantSelector() {
{ setShowDropdown(true); diff --git a/packages/console/src/components/Topbar/UserInfo/SubMenu/index.module.scss b/packages/console/src/components/Topbar/UserInfo/SubMenu/index.module.scss index 55775b8f74c..76c7b80596e 100644 --- a/packages/console/src/components/Topbar/UserInfo/SubMenu/index.module.scss +++ b/packages/console/src/components/Topbar/UserInfo/SubMenu/index.module.scss @@ -28,7 +28,7 @@ .menu { position: absolute; top: -4px; - right: calc(100% + 5px); + inset-inline-end: calc(100% + 5px); visibility: hidden; background: var(--color-float); border: 1px solid var(--color-divider); @@ -38,17 +38,13 @@ &.visible { visibility: visible; } - - &.rtl { - right: unset; - left: calc(100% + 5px); - } } .menuOption { position: relative; min-width: 200px; - padding: _.unit(2.5) _.unit(5.5) _.unit(2.5) _.unit(8); + padding-block: _.unit(2.5); + padding-inline: _.unit(8) _.unit(5.5); margin: _.unit(1); &.selected { @@ -57,16 +53,7 @@ .tick { position: absolute; - left: 8px; + inset-inline-start: 8px; top: 10px; } - - &.rtl { - padding: _.unit(2.5) _.unit(8) _.unit(2.5) _.unit(5.5); - - .tick { - left: unset; - right: 8px; - } - } } diff --git a/packages/console/src/components/Topbar/UserInfo/SubMenu/index.tsx b/packages/console/src/components/Topbar/UserInfo/SubMenu/index.tsx index ffb38069bbe..6843f5f7fe8 100644 --- a/packages/console/src/components/Topbar/UserInfo/SubMenu/index.tsx +++ b/packages/console/src/components/Topbar/UserInfo/SubMenu/index.tsx @@ -1,7 +1,6 @@ import type { AdminConsoleKey } from '@logto/phrases'; import classNames from 'classnames'; import { type ReactNode, useCallback, useState, useRef } from 'react'; -import { useTranslation } from 'react-i18next'; import ArrowRight from '@/assets/icons/arrow-right.svg?react'; import Tick from '@/assets/icons/tick.svg?react'; @@ -44,7 +43,6 @@ function SubMenu({ const mouseEnterTimeoutRef = useRef(0); const mouseLeaveTimeoutRef = useRef(0); const [menuHeight, setMenuHeight] = useState(); - const { i18n } = useTranslation(); const calculateDropdownHeight = useCallback(() => { if (anchorRef.current) { @@ -97,7 +95,7 @@ function SubMenu({ {options.map(({ value, title }) => { @@ -109,8 +107,7 @@ function SubMenu({ className={classNames( styles.menuOption, selected && styles.selected, - menuItemClassName, - styles[i18n.dir()] + menuItemClassName )} onClick={() => { onItemClick(value); diff --git a/packages/console/src/components/Topbar/UserInfo/index.module.scss b/packages/console/src/components/Topbar/UserInfo/index.module.scss index 5429bd3ec21..d302ca98aec 100644 --- a/packages/console/src/components/Topbar/UserInfo/index.module.scss +++ b/packages/console/src/components/Topbar/UserInfo/index.module.scss @@ -8,7 +8,7 @@ content: ''; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; display: block; border-radius: 8px; width: 32px; diff --git a/packages/console/src/containers/AppBoundary/index.tsx b/packages/console/src/containers/AppBoundary/index.tsx index 11387a2b1bc..9ee3aae5c93 100644 --- a/packages/console/src/containers/AppBoundary/index.tsx +++ b/packages/console/src/containers/AppBoundary/index.tsx @@ -1,7 +1,9 @@ import type { ReactNode } from 'react'; import { useEffect } from 'react'; +import { Helmet } from 'react-helmet'; import { useTranslation } from 'react-i18next'; +import useTheme from '@/hooks/use-theme'; import useUserPreferences from '@/hooks/use-user-preferences'; type Props = { @@ -12,14 +14,21 @@ function AppBoundary({ children }: Props) { const { data: { language }, } = useUserPreferences(); + const theme = useTheme(); const { i18n } = useTranslation(); useEffect(() => { void i18n.changeLanguage(language); }, [i18n, language]); - // eslint-disable-next-line react/jsx-no-useless-fragment - return <>{children}; + return ( + <> + + + + {children} + + ); } export default AppBoundary; diff --git a/packages/console/src/ds-components/Pagination/Next.tsx b/packages/console/src/ds-components/Pagination/Next.tsx deleted file mode 100644 index 2f25b5f9ab2..00000000000 --- a/packages/console/src/ds-components/Pagination/Next.tsx +++ /dev/null @@ -1,12 +0,0 @@ -function Next() { - return ( - - - - ); -} - -export default Next; diff --git a/packages/console/src/ds-components/Pagination/Previous.tsx b/packages/console/src/ds-components/Pagination/Previous.tsx deleted file mode 100644 index b67dd76c417..00000000000 --- a/packages/console/src/ds-components/Pagination/Previous.tsx +++ /dev/null @@ -1,12 +0,0 @@ -function Previous() { - return ( - - - - ); -} - -export default Previous; diff --git a/packages/console/src/ds-components/Pagination/index.module.scss b/packages/console/src/ds-components/Pagination/index.module.scss index dfff07557b7..06511314753 100644 --- a/packages/console/src/ds-components/Pagination/index.module.scss +++ b/packages/console/src/ds-components/Pagination/index.module.scss @@ -37,6 +37,11 @@ margin: 0 auto; } + svg { + width: 20px; + height: 20px; + } + &.active { border-color: var(--color-text-link); color: var(--color-text-link); diff --git a/packages/console/src/ds-components/Pagination/index.tsx b/packages/console/src/ds-components/Pagination/index.tsx index 102fcc4f70b..e29fa43f686 100644 --- a/packages/console/src/ds-components/Pagination/index.tsx +++ b/packages/console/src/ds-components/Pagination/index.tsx @@ -2,13 +2,14 @@ import classNames from 'classnames'; import { useTranslation } from 'react-i18next'; import ReactPaginate from 'react-paginate'; +import ArrowLeft from '@/assets/icons/arrow-left.svg?react'; +import ArrowRight from '@/assets/icons/arrow-right.svg?react'; import useCacheValue from '@/hooks/use-cache-value'; import Button from '../Button'; import DangerousRaw from '../DangerousRaw'; +import FlipOnRtl from '../FlipOnRtl'; -import Next from './Next'; -import Previous from './Previous'; import styles from './index.module.scss'; export type Props = { @@ -61,7 +62,11 @@ function Pagination({ page, totalCount, pageSize, className, mode = 'normal', on