mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Merge branch 'threads-rtl' into 'develop' 

Fix threads in RTL (and other small fixes)

See merge request soapbox-pub/soapbox!2032
environments/review-develop-3zknud/deployments/1844
Alex Gleason 2022-12-23 22:49:02 +00:00
rodzic 89292203d1 c788916644
commit b88026df5e
8 zmienionych plików z 25 dodań i 33 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

9
app/soapbox/components/autosuggest-input.tsx
Wyświetl plik

@ -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<IAutosugges
render() {
const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu, theme } = this.props;
const { suggestionsHidden } = this.state;
const style: React.CSSProperties = { direction: 'ltr' };
const visible = !suggestionsHidden && (!suggestions.isEmpty() || (menu && value));
// TODO: convert to functional component and use `useLocale()` hook instead of checking placeholder text.
if (isRtl(value) || (!value && placeholder && isRtl(placeholder))) {
style.direction = 'rtl';
}
return [
<div key='input' className='relative w-full'>
<label className='sr-only'>{placeholder}</label>
@ -283,6 +291,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
onKeyUp={onKeyUp}
onFocus={this.onFocus}
onBlur={this.onBlur}
style={style}
aria-autocomplete='list'
id={id}
maxLength={maxLength}

8
app/soapbox/components/autosuggest-textarea.tsx
Wyświetl plik

@ -7,6 +7,7 @@ import Textarea from 'react-textarea-autosize';
import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
import AutosuggestAccount from '../features/compose/components/autosuggest-account';
import { isRtl } from '../rtl';
import AutosuggestEmoji, { Emoji } from './autosuggest-emoji';
@ -226,6 +227,12 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
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) || (!value && placeholder && isRtl(placeholder))) {
style.direction = 'rtl';
}
return [
<div key='textarea'>
@ -250,6 +257,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
onFocus={this.onFocus}
onBlur={this.onBlur}
onPaste={this.onPaste}
style={style as any}
aria-autocomplete='list'
/>
</label>

2
app/soapbox/components/status-action-button.tsx
Wyświetl plik

@ -79,7 +79,7 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
ref={ref}
type='button'
className={classNames(
'flex items-center p-1 rounded-full',
'flex items-center p-1 rounded-full rtl:space-x-reverse',
'text-gray-600 hover:text-gray-600 dark:hover:text-white',
'bg-white dark:bg-transparent',
'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-0',

4
app/soapbox/components/status.tsx
Wyświetl plik

@ -237,7 +237,7 @@ const Status: React.FC<IStatus> = (props) => {
<NavLink
to={`/@${status.getIn(['account', 'acct'])}`}
onClick={(event) => 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'
>
<Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
@ -246,7 +246,7 @@ const Status: React.FC<IStatus> = (props) => {
id='status.reblogged_by'
defaultMessage='{name} reposted'
values={{
name: <bdi className='max-w-[100px] truncate pr-1'>
name: <bdi className='max-w-[100px] truncate pr-1 rtl:px-1'>
<strong className='text-gray-800 dark:text-gray-200' dangerouslySetInnerHTML={displayNameHtml} />
</bdi>,
}}

1
app/soapbox/features/compose/components/search.tsx
Wyświetl plik

@ -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) {

2
app/soapbox/features/ui/components/navbar.tsx
Wyświetl plik

@ -71,7 +71,7 @@ const Navbar = () => {
<div className='max-w-7xl mx-auto px-2 sm:px-6 lg:px-8'>
<div className='relative flex justify-between h-12 lg:h-16'>
{account && (
<div className='absolute inset-y-0 left-0 flex items-center lg:hidden'>
<div className='absolute inset-y-0 left-0 flex items-center lg:hidden rtl:right-0 rtl:left-auto'>
<button onClick={onOpenSidebar}>
<Avatar src={account.avatar} size={34} />
</button>

29
app/styles/components/detailed-status.scss
Wyświetl plik

@ -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;

3
app/styles/components/sidebar-menu.scss
Wyświetl plik

@ -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 {