fix: rtl support for registration screen too

This commit is contained in:
Audric Ackermann 2023-08-21 12:07:19 +10:00
parent bee00157ef
commit ada549788c
3 changed files with 18 additions and 9 deletions

View File

@ -145,13 +145,6 @@
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
} }
.session-icon-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0px;
}
} }
&-terms-conditions-agreement { &-terms-conditions-agreement {

View File

@ -3,6 +3,7 @@ import React, { useState } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { SessionIconButton } from '../icon'; import { SessionIconButton } from '../icon';
import { Noop } from '../../types/Util'; import { Noop } from '../../types/Util';
import { useHTMLDirection } from '../../util/i18n';
type Props = { type Props = {
label?: string; label?: string;
@ -46,7 +47,17 @@ const ErrorItem = (props: { error: string | undefined }) => {
}; };
const ShowHideButton = (props: { toggleForceShow: Noop }) => { const ShowHideButton = (props: { toggleForceShow: Noop }) => {
return <SessionIconButton iconType="eye" iconSize="medium" onClick={props.toggleForceShow} />; const htmlDirection = useHTMLDirection();
const position = htmlDirection === 'ltr' ? { right: '0px' } : { left: '0px' };
return (
<SessionIconButton
iconType="eye"
iconSize="medium"
onClick={props.toggleForceShow}
style={{ position: 'absolute', top: '50%', transform: 'translateY(-50%)', ...position }}
/>
);
}; };
export const SessionInput = (props: Props) => { export const SessionInput = (props: Props) => {

View File

@ -267,13 +267,17 @@ async function start() {
await connect(); await connect();
}); });
function openInbox() { function switchBodyToRtlIfNeeded() {
const rtlLocales = ['fa', 'ar', 'he']; const rtlLocales = ['fa', 'ar', 'he'];
const loc = (window.i18n as any).getLocale(); const loc = (window.i18n as any).getLocale();
if (rtlLocales.includes(loc) && !document.getElementById('body')?.classList.contains('rtl')) { if (rtlLocales.includes(loc) && !document.getElementById('body')?.classList.contains('rtl')) {
document.getElementById('body')?.classList.add('rtl'); document.getElementById('body')?.classList.add('rtl');
} }
}
function openInbox() {
switchBodyToRtlIfNeeded();
const hideMenuBar = Storage.get('hide-menu-bar', true) as boolean; const hideMenuBar = Storage.get('hide-menu-bar', true) as boolean;
window.setAutoHideMenuBar(hideMenuBar); window.setAutoHideMenuBar(hideMenuBar);
window.setMenuBarVisibility(!hideMenuBar); window.setMenuBarVisibility(!hideMenuBar);
@ -287,6 +291,7 @@ async function start() {
function showRegistrationView() { function showRegistrationView() {
ReactDOM.render(<SessionRegistrationView />, document.getElementById('root')); ReactDOM.render(<SessionRegistrationView />, document.getElementById('root'));
switchBodyToRtlIfNeeded();
} }
ExpirationTimerOptions.initExpiringMessageListener(); ExpirationTimerOptions.initExpiringMessageListener();