From 87728876d3d829fe3383874654510f455177ffe4 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 23 Dec 2022 10:51:50 -0600 Subject: [PATCH 1/6] RTL: fix "x" in birthday input --- app/styles/components/datepicker.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/styles/components/datepicker.scss b/app/styles/components/datepicker.scss index e66698bea..7d56b67ea 100644 --- a/app/styles/components/datepicker.scss +++ b/app/styles/components/datepicker.scss @@ -137,6 +137,10 @@ @apply bg-primary-50 hover:bg-primary-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-primary-600 dark:text-primary-400; } +.react-datepicker__close-icon { + @apply rtl:left-0 rtl:right-auto rtl:pr-0 rtl:pl-[6px]; +} + .react-datepicker__close-icon::after { @apply bg-transparent text-gray-600 dark:text-gray-400 text-base; font-family: 'Font Awesome 5 Free'; From 058a75deec94ce53282d0c1752e470ed981a4574 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 23 Dec 2022 11:12:48 -0600 Subject: [PATCH 2/6] useLocale(): refactor to return direction --- app/soapbox/containers/soapbox.tsx | 8 +++----- app/soapbox/hooks/useLocale.ts | 33 +++++++++++++++++++++++++----- 2 files changed, 31 insertions(+), 10 deletions(-) diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx index 53a0b684d..8ce48f7e2 100644 --- a/app/soapbox/containers/soapbox.tsx +++ b/app/soapbox/containers/soapbox.tsx @@ -53,8 +53,6 @@ import ErrorBoundary from '../components/error-boundary'; import UI from '../features/ui'; import { store } from '../store'; -const RTL_LOCALES = ['ar', 'ckb', 'fa', 'he']; - // Configure global functions for developers createGlobals(store); @@ -211,7 +209,7 @@ const SoapboxLoad: React.FC = ({ children }) => { const me = useAppSelector(state => state.me); const account = useOwnAccount(); const swUpdating = useAppSelector(state => state.meta.swUpdating); - const locale = useLocale(); + const { locale } = useLocale(); const [messages, setMessages] = useState>({}); const [localeLoading, setLocaleLoading] = useState(true); @@ -262,7 +260,7 @@ interface ISoapboxHead { /** Injects metadata into site head with Helmet. */ const SoapboxHead: React.FC = ({ children }) => { - const locale = useLocale(); + const { locale, direction } = useLocale(); const settings = useSettings(); const soapboxConfig = useSoapboxConfig(); @@ -281,7 +279,7 @@ const SoapboxHead: React.FC = ({ children }) => { <> - + {themeCss && } {darkMode && } diff --git a/app/soapbox/hooks/useLocale.ts b/app/soapbox/hooks/useLocale.ts index 1be278002..14dedaf16 100644 --- a/app/soapbox/hooks/useLocale.ts +++ b/app/soapbox/hooks/useLocale.ts @@ -2,15 +2,38 @@ import MESSAGES from 'soapbox/locales/messages'; import { useSettings } from './useSettings'; +import type { CSSProperties } from 'react'; + +/** Locales which should be presented in right-to-left. */ +const RTL_LOCALES = ['ar', 'ckb', 'fa', 'he']; + /** Ensure the given locale exists in our codebase */ const validLocale = (locale: string): boolean => Object.keys(MESSAGES).includes(locale); -/** Get valid locale from settings. */ -const useLocale = (fallback = 'en') => { - const settings = useSettings(); - const locale = settings.get('locale'); +interface UseLocaleResult { + locale: string + direction: CSSProperties['direction'] +} - return validLocale(locale) ? locale : fallback; +/** Get valid locale from settings. */ +const useLocale = (fallback = 'en'): UseLocaleResult => { + const settings = useSettings(); + const userLocale = settings.get('locale') as unknown; + + const locale = + (typeof userLocale === 'string' && validLocale(userLocale)) + ? userLocale + : fallback; + + const direction: CSSProperties['direction'] = + RTL_LOCALES.includes(locale) + ? 'rtl' + : undefined; + + return { + locale, + direction, + }; }; export { useLocale }; From 140c0b3037771288132f5013bbd8f4558f30caf6 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 23 Dec 2022 11:17:06 -0600 Subject: [PATCH 3/6] AutosuggestInput/AutosuggestTextarea: determine RTL by placeholder value as well (hotfix) --- app/soapbox/components/autosuggest-input.tsx | 3 ++- app/soapbox/components/autosuggest-textarea.tsx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/app/soapbox/components/autosuggest-input.tsx b/app/soapbox/components/autosuggest-input.tsx index 35460131a..a5d5737d0 100644 --- a/app/soapbox/components/autosuggest-input.tsx +++ b/app/soapbox/components/autosuggest-input.tsx @@ -268,7 +268,8 @@ export default class AutosuggestInput extends ImmutablePureComponent const { suggestionsHidden } = this.state; const style = { direction: 'ltr', minRows: 10 }; - if (isRtl(value)) { + // TODO: convert to functional component and use `useLocale()` hook instead of checking placeholder text. + if (isRtl(value) || (placeholder && isRtl(placeholder))) { style.direction = 'rtl'; } From 69328ade8b939aa0b4d15bf03beee89cd25f4b1d Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 23 Dec 2022 11:31:53 -0600 Subject: [PATCH 4/6] Toast: use HStack, RTL support --- app/soapbox/components/ui/toast/toast.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/app/soapbox/components/ui/toast/toast.tsx b/app/soapbox/components/ui/toast/toast.tsx index a7e26c98c..1e4d1d086 100644 --- a/app/soapbox/components/ui/toast/toast.tsx +++ b/app/soapbox/components/ui/toast/toast.tsx @@ -6,6 +6,7 @@ import { Link } from 'react-router-dom'; import { ToastText, ToastType } from 'soapbox/toast'; +import HStack from '../hstack/hstack'; import Icon from '../icon/icon'; const renderText = (text: ToastText) => { @@ -63,7 +64,7 @@ const Toast = (props: IToast) => { }; const renderAction = () => { - const classNames = 'ml-3 mt-0.5 flex-shrink-0 rounded-full text-sm font-medium text-primary-600 dark:text-accent-blue hover:underline focus:outline-none'; + const classNames = 'mt-0.5 flex-shrink-0 rounded-full text-sm font-medium text-primary-600 dark:text-accent-blue hover:underline focus:outline-none'; if (action && actionLabel) { return ( @@ -109,24 +110,24 @@ const Toast = (props: IToast) => { } >
-
-
-
+ + +
{renderIcon()}
-

+

{renderText(message)}

-
+ {/* Action */} {renderAction()} -
+ {/* Dismiss Button */} -
+
-
+
); From 95f7761fb43129c02dee2d166c68c843d2797e39 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 23 Dec 2022 11:33:10 -0600 Subject: [PATCH 5/6] Toast: remove unnecessary outer div --- app/soapbox/components/ui/toast/toast.tsx | 54 +++++++++++------------ 1 file changed, 26 insertions(+), 28 deletions(-) diff --git a/app/soapbox/components/ui/toast/toast.tsx b/app/soapbox/components/ui/toast/toast.tsx index 1e4d1d086..1aec2a2b6 100644 --- a/app/soapbox/components/ui/toast/toast.tsx +++ b/app/soapbox/components/ui/toast/toast.tsx @@ -103,43 +103,41 @@ const Toast = (props: IToast) => { data-testid='toast' className={ classNames({ - 'pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white dark:bg-gray-900 shadow-lg dark:ring-2 dark:ring-gray-800': true, + 'p-4 pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white dark:bg-gray-900 shadow-lg dark:ring-2 dark:ring-gray-800': true, 'animate-enter': t.visible, 'animate-leave': !t.visible, }) } > -
- - - -
- {renderIcon()} -
+ + + +
+ {renderIcon()} +
-

- {renderText(message)} -

- - - {/* Action */} - {renderAction()} +

+ {renderText(message)} +

- {/* Dismiss Button */} -
- -
+ {/* Action */} + {renderAction()} -
+ + {/* Dismiss Button */} +
+ +
+ ); }; From ee9908aab2aca1fa1b11e881d0ce8273c82ac9cd Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 23 Dec 2022 11:38:42 -0600 Subject: [PATCH 6/6] AutosuggestInput/AutosuggestTextarea: actually, just remove RTL checking. The browser should handle it --- app/soapbox/components/autosuggest-input.tsx | 9 --------- app/soapbox/components/autosuggest-textarea.tsx | 8 -------- 2 files changed, 17 deletions(-) diff --git a/app/soapbox/components/autosuggest-input.tsx b/app/soapbox/components/autosuggest-input.tsx index a5d5737d0..c4bf49d72 100644 --- a/app/soapbox/components/autosuggest-input.tsx +++ b/app/soapbox/components/autosuggest-input.tsx @@ -8,7 +8,6 @@ import AutosuggestEmoji, { Emoji } from 'soapbox/components/autosuggest-emoji'; import Icon from 'soapbox/components/icon'; import { Input } from 'soapbox/components/ui'; import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest-account'; -import { isRtl } from 'soapbox/rtl'; import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions'; import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu'; @@ -264,15 +263,8 @@ export default class AutosuggestInput extends ImmutablePureComponent @@ -291,7 +283,6 @@ export default class AutosuggestInput extends ImmutablePureComponent render() { const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, children, condensed, id } = this.props; const { suggestionsHidden } = this.state; - const style = { direction: 'ltr', minRows: 10 }; - - // TODO: convert to functional component and use `useLocale()` hook instead of checking placeholder text. - if (isRtl(value) || (placeholder && isRtl(placeholder))) { - style.direction = 'rtl'; - } return [
@@ -257,7 +250,6 @@ class AutosuggestTextarea extends ImmutablePureComponent onFocus={this.onFocus} onBlur={this.onBlur} onPaste={this.onPaste} - style={style as any} aria-autocomplete='list' />