fix: rtl support for registration screen too
This commit is contained in:
parent
bee00157ef
commit
ada549788c
|
@ -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 {
|
||||||
|
|
|
@ -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) => {
|
||||||
|
|
|
@ -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();
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue