From d4b5c368f8e600c4e104395f4c7464599a96687a Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 23 Dec 2022 15:46:24 -0600 Subject: [PATCH 1/9] Fix threads in RTL --- app/styles/components/detailed-status.scss | 29 ++-------------------- 1 file changed, 2 insertions(+), 27 deletions(-) diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss index e91dfb6f8..7b5086776 100644 --- a/app/styles/components/detailed-status.scss +++ b/app/styles/components/detailed-status.scss @@ -10,36 +10,11 @@ } .status__content-wrapper { - padding-left: calc(42px + 12px); + @apply pl-[calc(42px+12px)] rtl:pl-0 rtl:pr-[calc(42px+12px)]; } - // &__descendants &__status:first-child { - // margin-top: 10px; - - // .status__wrapper--filtered { - // margin-top: -10px; - // } - // } - - // &__status--focused:first-child, - // &__ancestors &__status:first-child { - // margin-top: 10px; - - // .status__wrapper--filtered { - // margin-top: -10px; - // } - // } - - // &__descendants &__status:last-child { - // margin-bottom: 10px; - - // .status__wrapper--filtered { - // margin-bottom: -10px; - // } - // } - &__connector { - @apply bg-gray-200 dark:bg-primary-800 absolute w-0.5 left-5 hidden z-[1]; + @apply bg-gray-200 dark:bg-primary-800 absolute w-0.5 left-5 hidden z-[1] rtl:right-5 rtl:left-auto; &--bottom { @apply block; From dfe5079058f1d2e4df07e99d96c559495b8056a9 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 23 Dec 2022 15:48:07 -0600 Subject: [PATCH 2/9] StatusActionButton: fix spacing in RTL --- app/soapbox/components/status-action-button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/components/status-action-button.tsx b/app/soapbox/components/status-action-button.tsx index 2f355211b..e0d23b98b 100644 --- a/app/soapbox/components/status-action-button.tsx +++ b/app/soapbox/components/status-action-button.tsx @@ -79,7 +79,7 @@ const StatusActionButton = React.forwardRef Date: Fri, 23 Dec 2022 15:55:17 -0600 Subject: [PATCH 3/9] SidebarMenu: fix RTL --- app/styles/components/sidebar-menu.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/styles/components/sidebar-menu.scss b/app/styles/components/sidebar-menu.scss index f3fd86032..10c960fc4 100644 --- a/app/styles/components/sidebar-menu.scss +++ b/app/styles/components/sidebar-menu.scss @@ -2,8 +2,7 @@ @apply flex inset-0 fixed flex-col w-80 bg-white dark:bg-primary-900 transition-all ease-linear -translate-x-80 rtl:translate-x-80 z-1000; @media (max-width: 400px) { - width: 90vw; - transform: translateX(-90vw); + @apply w-[90vw] -translate-x-[90vw] rtl:translate-x-[90vw]; } hr { From 78a9dc519ca8290786c71af8a5e0b1a41692152b Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 23 Dec 2022 16:01:12 -0600 Subject: [PATCH 4/9] Status: fix reblogElement in RTL --- app/soapbox/components/status.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx index f24adaefb..66710bf9c 100644 --- a/app/soapbox/components/status.tsx +++ b/app/soapbox/components/status.tsx @@ -237,7 +237,7 @@ const Status: React.FC = (props) => { event.stopPropagation()} - className='hidden sm:flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 hover:underline' + className='hidden sm:flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 rtl:space-x-reverse hover:underline' > @@ -246,7 +246,7 @@ const Status: React.FC = (props) => { id='status.reblogged_by' defaultMessage='{name} reposted' values={{ - name: + name: , }} From ea70f48023eae6c7c7a802b435041909888b5997 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 23 Dec 2022 16:02:39 -0600 Subject: [PATCH 5/9] Navbar: fix position of avatar in RTL on mobile --- app/soapbox/features/ui/components/navbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx index 2fd186830..72ba8c792 100644 --- a/app/soapbox/features/ui/components/navbar.tsx +++ b/app/soapbox/features/ui/components/navbar.tsx @@ -71,7 +71,7 @@ const Navbar = () => {
{account && ( -
+
From c4270a0512e238b88ea7f6b2f7d9e60d19ca7031 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 23 Dec 2022 16:11:30 -0600 Subject: [PATCH 6/9] Revert "AutosuggestInput/AutosuggestTextarea: actually, just remove RTL checking. The browser should handle it" This reverts commit ee9908aab2aca1fa1b11e881d0ce8273c82ac9cd. --- app/soapbox/components/autosuggest-input.tsx | 9 +++++++++ app/soapbox/components/autosuggest-textarea.tsx | 8 ++++++++ 2 files changed, 17 insertions(+) diff --git a/app/soapbox/components/autosuggest-input.tsx b/app/soapbox/components/autosuggest-input.tsx index c4bf49d72..a5d5737d0 100644 --- a/app/soapbox/components/autosuggest-input.tsx +++ b/app/soapbox/components/autosuggest-input.tsx @@ -8,6 +8,7 @@ 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'; @@ -263,8 +264,15 @@ export default class AutosuggestInput extends ImmutablePureComponent @@ -283,6 +291,7 @@ 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 [
@@ -250,6 +257,7 @@ class AutosuggestTextarea extends ImmutablePureComponent onFocus={this.onFocus} onBlur={this.onBlur} onPaste={this.onPaste} + style={style as any} aria-autocomplete='list' /> From bedd181f4c030374c4f5e3256a5e3a7c349026a0 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 23 Dec 2022 16:14:50 -0600 Subject: [PATCH 7/9] AutosuggestInput/AutosuggestTextarea: fix RTL detection with placeholder --- app/soapbox/components/autosuggest-input.tsx | 2 +- app/soapbox/components/autosuggest-textarea.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/soapbox/components/autosuggest-input.tsx b/app/soapbox/components/autosuggest-input.tsx index a5d5737d0..c6cef9595 100644 --- a/app/soapbox/components/autosuggest-input.tsx +++ b/app/soapbox/components/autosuggest-input.tsx @@ -269,7 +269,7 @@ export default class AutosuggestInput extends ImmutablePureComponent 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))) { + if (isRtl(value) || (placeholder && isRtl(placeholder) && !value)) { style.direction = 'rtl'; } From 8fde7f267d5e6cefdf4dcfb13c52728acf497c04 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 23 Dec 2022 16:24:04 -0600 Subject: [PATCH 8/9] Search: prevent overflow of text into icon --- app/soapbox/features/compose/components/search.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/soapbox/features/compose/components/search.tsx b/app/soapbox/features/compose/components/search.tsx index f4b8c1876..796100440 100644 --- a/app/soapbox/features/compose/components/search.tsx +++ b/app/soapbox/features/compose/components/search.tsx @@ -127,6 +127,7 @@ const Search = (props: ISearch) => { onFocus: handleFocus, autoFocus: autoFocus, theme: 'search', + className: 'pr-10 rtl:pl-10 rtl:pr-3', }; if (autosuggest) { From c7889166441b914c388ce3875d8648d4198d2446 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 23 Dec 2022 16:26:07 -0600 Subject: [PATCH 9/9] AutosuggestInput/AutosuggestTextarea: short-circuit RTL check earlier --- app/soapbox/components/autosuggest-input.tsx | 2 +- app/soapbox/components/autosuggest-textarea.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/soapbox/components/autosuggest-input.tsx b/app/soapbox/components/autosuggest-input.tsx index c6cef9595..fe82744c1 100644 --- a/app/soapbox/components/autosuggest-input.tsx +++ b/app/soapbox/components/autosuggest-input.tsx @@ -269,7 +269,7 @@ export default class AutosuggestInput extends ImmutablePureComponent 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) && !value)) { + if (isRtl(value) || (!value && placeholder && isRtl(placeholder))) { style.direction = 'rtl'; }