mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
feat: moved html direction logic into i18n util
updated Flex component with RTL support, create getWritingDirection selector
This commit is contained in:
parent
31c79f9eea
commit
7be11cd973
4 changed files with 21 additions and 11 deletions
|
@ -1,4 +1,5 @@
|
|||
import styled from 'styled-components';
|
||||
import { HTMLDirection } from '../../util/i18n';
|
||||
|
||||
export interface FlexProps {
|
||||
children?: any;
|
||||
|
@ -36,6 +37,8 @@ export interface FlexProps {
|
|||
maxWidth?: string;
|
||||
minWidth?: string;
|
||||
maxHeight?: string;
|
||||
/****** RTL support ********/
|
||||
dir?: HTMLDirection;
|
||||
}
|
||||
|
||||
export const Flex = styled.div<FlexProps>`
|
||||
|
@ -53,4 +56,5 @@ export const Flex = styled.div<FlexProps>`
|
|||
height: ${props => props.height || 'auto'};
|
||||
max-width: ${props => props.maxWidth || 'none'};
|
||||
min-width: ${props => props.minWidth || 'none'};
|
||||
dir: ${props => props.dir || undefined};
|
||||
`;
|
||||
|
|
|
@ -373,12 +373,6 @@ export const MarkAllReadMenuItem = (): JSX.Element | null => {
|
|||
}
|
||||
};
|
||||
|
||||
export function isRtlBody(): boolean {
|
||||
const body = document.getElementsByTagName('body').item(0);
|
||||
|
||||
return body?.classList.contains('rtl') || false;
|
||||
}
|
||||
|
||||
export const BlockMenuItem = (): JSX.Element | null => {
|
||||
const convoId = useConvoIdFromContext();
|
||||
const isMe = useIsMe(convoId);
|
||||
|
@ -577,7 +571,7 @@ export const NotificationForConvoMenuItem = (): JSX.Element | null => {
|
|||
return null;
|
||||
}
|
||||
|
||||
// const isRtlMode = isRtlBody();'
|
||||
// const isRtlMode = isRtlBody();
|
||||
|
||||
// exclude mentions_only settings for private chats as this does not make much sense
|
||||
const notificationForConvoOptions = ConversationNotificationSetting.filter(n =>
|
||||
|
|
|
@ -4,7 +4,7 @@ import { LocalizerType } from '../../types/Util';
|
|||
|
||||
import { StateType } from '../reducer';
|
||||
import { UserStateType } from '../ducks/user';
|
||||
import { isRtlBody } from '../../components/menu/Menu';
|
||||
import { HTMLDirection, getHTMLDirection } from '../../util/i18n';
|
||||
|
||||
export const getUser = (state: StateType): UserStateType => state.user;
|
||||
|
||||
|
@ -15,6 +15,4 @@ export const getOurNumber = createSelector(
|
|||
|
||||
export const getIntl = createSelector(getUser, (): LocalizerType => window.i18n);
|
||||
|
||||
export const getWritingDirection = createSelector(getUser, (): string =>
|
||||
isRtlBody() ? 'rtl' : 'ltr'
|
||||
);
|
||||
export const getWritingDirection = createSelector(getUser, (): HTMLDirection => getHTMLDirection());
|
||||
|
|
|
@ -63,3 +63,17 @@ export const loadEmojiPanelI18n = async () => {
|
|||
}
|
||||
}
|
||||
};
|
||||
|
||||
// RTL Support
|
||||
|
||||
export type HTMLDirection = 'ltr' | 'rtl';
|
||||
|
||||
export function isRtlBody(): boolean {
|
||||
const body = document.getElementsByTagName('body').item(0);
|
||||
|
||||
return body?.classList.contains('rtl') || false;
|
||||
}
|
||||
|
||||
export function getHTMLDirection(): HTMLDirection {
|
||||
return isRtlBody() ? 'rtl' : 'ltr';
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue