Skip to content
  • Sponsor processing/p5.js-web-editor

  • Notifications You must be signed in to change notification settings
  • Fork 1.5k

Enhancement/rtl UI support #3326

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion client/components/Menubar/Menubar.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import PropTypes from 'prop-types';
import React, { useCallback, useMemo, useRef, useState } from 'react';
import { useSelector } from 'react-redux';
import useModalClose from '../../common/useModalClose';
import { MenuOpenContext, MenubarContext } from './contexts';

@@ -62,9 +63,14 @@ function Menubar({ children, className }) {
[setMenuOpen, toggleMenuOpen, clearHideTimeout, handleBlur]
);

// change menu direction to rtl for rtl languages like [urdo, persian, arabic, ...]
let newClassName = className;
const direction = useSelector((state) => state.preferences.direction);
if (direction === 'rtl') newClassName = 'rtl-nav';

return (
<MenubarContext.Provider value={contextValue}>
<div className={className} ref={nodeRef}>
<div className={newClassName} ref={nodeRef}>
<MenuOpenContext.Provider value={menuOpen}>
{children}
</MenuOpenContext.Provider>
8 changes: 7 additions & 1 deletion client/components/Menubar/MenubarItem.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import PropTypes from 'prop-types';
import React, { useContext, useMemo } from 'react';
import { useSelector } from 'react-redux';
import ButtonOrLink from '../../common/ButtonOrLink';
import { MenubarContext, ParentMenuContext } from './contexts';

@@ -26,8 +27,13 @@ function MenubarItem({
const role = customRole || 'menuitem';
const ariaSelected = role === 'option' ? { 'aria-selected': selected } : {};

// change sub menu direction
let newClassName = 'nav__dropdown-item';
const direction = useSelector((state) => state.preferences.direction);
if (direction === 'rtl') newClassName = 'rtl-nav__dropdown-item';

return (
<li className={className}>
<li className={newClassName}>
<ButtonOrLink {...rest} {...handlers} {...ariaSelected} role={role} />
</li>
);
33 changes: 29 additions & 4 deletions client/components/Menubar/MenubarSubmenu.jsx
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React, { useContext, useMemo } from 'react';
import { useSelector } from 'react-redux';
import TriangleIcon from '../../images/down-filled-triangle.svg';
import { MenuOpenContext, MenubarContext, ParentMenuContext } from './contexts';

@@ -28,6 +29,19 @@ export function useMenuProps(id) {
function MenubarTrigger({ id, title, role, hasPopup, ...props }) {
const { isOpen, handlers } = useMenuProps(id);

// for better ui in rtl
const direction = useSelector((state) => state.preferences.direction);
let selectedClassNames = {
nav__item_header: 'nav__item-header',
nav__item_header_triangle: 'nav__item-header-triangle'
};
if (direction === 'rtl') {
selectedClassNames = {
nav__item_header: 'rtl-nav__item-header',
nav__item_header_triangle: 'rtl-nav__item-header-triangle'
};
}

return (
<button
{...handlers}
@@ -36,9 +50,9 @@ function MenubarTrigger({ id, title, role, hasPopup, ...props }) {
aria-haspopup={hasPopup}
aria-expanded={isOpen}
>
<span className="nav__item-header">{title}</span>
<span className={selectedClassNames.nav__item_header}>{title}</span>
<TriangleIcon
className="nav__item-header-triangle"
className={selectedClassNames.nav__item_header_triangle}
focusable="false"
aria-hidden="true"
/>
@@ -63,8 +77,13 @@ MenubarTrigger.defaultProps = {
* -----------------------------------------------------------------------------------------------*/

function MenubarList({ id, children, role, ...props }) {
// change sub menu direction
let newClassName = 'nav__dropdown';
const direction = useSelector((state) => state.preferences.direction);
if (direction === 'rtl') newClassName = 'rtl-nav__dropdown';

return (
<ul className="nav__dropdown" role={role} {...props}>
<ul className={newClassName} role={role} {...props}>
<ParentMenuContext.Provider value={id}>
{children}
</ParentMenuContext.Provider>
@@ -102,8 +121,14 @@ function MenubarSubmenu({

const hasPopup = listRole === 'listbox' ? 'listbox' : 'menu';

// change sub menu direction
let newClassName = classNames('nav__item', isOpen && 'nav__item--open');
const direction = useSelector((state) => state.preferences.direction);
if (direction === 'rtl')
newClassName = classNames('rtl-nav__item', isOpen && 'rtl-nav__item--open');

return (
<li className={classNames('nav__item', isOpen && 'nav__item--open')}>
<li className={newClassName}>
<MenubarTrigger
id={id}
title={title}
1 change: 1 addition & 0 deletions client/constants.js
Original file line number Diff line number Diff line change
@@ -91,6 +91,7 @@ export const HIDE_TOAST = 'HIDE_TOAST';
export const SET_TOAST_TEXT = 'SET_TOAST_TEXT';
export const SET_THEME = 'SET_THEME';
export const SET_LANGUAGE = 'SET_LANGUAGE';
export const SET_DIRECTION = 'SET_DIRECTION';

export const SET_UNSAVED_CHANGES = 'SET_UNSAVED_CHANGES';
export const SET_AUTOREFRESH = 'SET_AUTOREFRESH';
12 changes: 12 additions & 0 deletions client/i18n.js
Original file line number Diff line number Diff line change
@@ -23,6 +23,18 @@ import {

const fallbackLng = ['en-US'];

export const rtlLanguageList = [
'ar', // Arabic (Standard)
'fa', // Persian (Farsi)
'ur', // Urdu
'he', // Hebrew
'ckb', // Kurdish (Sorani)
'ps', // Pashto
'sd', // Sindhi
'ug', // Uyghur
'dv' // Divehi (Dhivehi)
];

export const availableLanguages = [
'be',
'de',
49 changes: 40 additions & 9 deletions client/modules/App/components/Overlay.jsx
Original file line number Diff line number Diff line change
@@ -20,6 +20,9 @@ const Overlay = ({

const previousPath = useSelector((state) => state.ide.previousPath);

// for better ui in rtl
const direction = useSelector((state) => state.preferences.direction);

const ref = useRef(null);

const browserHistory = useHistory();
@@ -41,23 +44,49 @@ const Overlay = ({

useModalClose(close, ref);

// for better ui in rtl
let classNames = {
overlay__is_fixed_height: 'overlay--is-fixed-height',
overlay__content: 'overlay__content',
overlay__body: 'overlay__body',
overlay__header: 'overlay__header',
overlay__title: 'overlay__title',
overlay__actions: 'overlay__actions',
overlay__close_button: 'overlay__close-button',
overlay__actions_mobile: 'overlay__actions-mobile'
};
if (direction === 'rtl') {
classNames = {
overlay__is_fixed_height: 'rtl-overlay--is-fixed-height',
overlay__content: 'rtl-overlay__content',
overlay__body: 'rtl-overlay__body',
overlay__header: 'rtl-overlay__header',
overlay__title: 'rtl-overlay__title',
overlay__actions: 'rtl-overlay__actions',
overlay__close_button: 'rtl-overlay__close-button',
overlay__actions_mobile: 'rtl-overlay__actions-mobile'
};
}

return (
<div
className={`overlay ${isFixedHeight ? 'overlay--is-fixed-height' : ''}`}
className={`overlay ${
isFixedHeight ? classNames.overlay__is_fixed_height : ''
}`}
>
<div className="overlay__content">
<div className={classNames.overlay__content}>
<section
role="main"
aria-label={ariaLabel}
aria-label={classNames.ariaLabel}
ref={ref}
className="overlay__body"
className={classNames.overlay__body}
>
<header className="overlay__header">
<h2 className="overlay__title">{title}</h2>
<div className="overlay__actions">
<header className={classNames.overlay__header}>
<h2 className={classNames.overlay__title}>{title}</h2>
<div className={classNames.overlay__actions}>
<MediaQuery minWidth={770}>{actions}</MediaQuery>
<button
className="overlay__close-button"
className={classNames.overlay__close_button}
onClick={close}
aria-label={t('Overlay.AriaLabel', { title })}
>
@@ -67,7 +96,9 @@ const Overlay = ({
</header>
<MediaQuery maxWidth={769}>
{actions && (
<div className="overlay__actions-mobile">{actions}</div>
<div className={classNames.overlay__actions_mobile}>
{actions}
</div>
)}
</MediaQuery>
{children}
9 changes: 9 additions & 0 deletions client/modules/IDE/actions/preferences.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import i18next from 'i18next';
import apiClient from '../../../utils/apiClient';
import * as ActionTypes from '../../../constants';
import { rtlLanguageList } from '../../../i18n';

function updatePreferences(formParams, dispatch) {
apiClient
@@ -242,6 +243,14 @@ export function setLanguage(value, { persistPreference = true } = {}) {
type: ActionTypes.SET_LANGUAGE,
language: value
});
// change direction base on language
dispatch({
type: ActionTypes.SET_DIRECTION,
direction:
Array.isArray(rtlLanguageList) && rtlLanguageList.includes(value)
? 'rtl'
: 'ltr'
});
const state = getState();
if (persistPreference && state.user.authenticated) {
const formParams = {
95 changes: 67 additions & 28 deletions client/modules/IDE/components/Editor/index.jsx
Original file line number Diff line number Diff line change
@@ -545,37 +545,75 @@ class Editor extends React.Component {

const { currentLine } = this.state;

// for better ui in rtl
const { direction } = this.props; // Access direction from props
let editorHeader = 'editor__header';
let editorHeaderContent = (
<>
<button
aria-label={this.props.t('Editor.OpenSketchARIA')}
className="sidebar__contract"
onClick={() => {
this.props.collapseSidebar();
this.props.closeProjectOptions();
}}
>
<LeftArrowIcon focusable="false" aria-hidden="true" />
</button>
<button
aria-label={this.props.t('Editor.CloseSketchARIA')}
className="sidebar__expand"
onClick={this.props.expandSidebar}
>
<RightArrowIcon focusable="false" aria-hidden="true" />
</button>
<div className="editor__file-name">
<span>
{this.props.file.name}
<UnsavedChangesIndicator />
</span>
<Timer />
</div>
</>
);
if (direction === 'rtl') {
editorHeader = 'editor__header-rtl';
editorHeaderContent = (
<>
<div className="editor__file-name-rtl">
<span>
{this.props.file.name}
<UnsavedChangesIndicator />
</span>
<Timer />
</div>
<button
aria-label={this.props.t('Editor.CloseSketchARIA')}
className="sidebar__expand"
onClick={this.props.expandSidebar}
>
<LeftArrowIcon focusable="false" aria-hidden="true" />
</button>
<button
aria-label={this.props.t('Editor.OpenSketchARIA')}
className="sidebar__contract"
onClick={() => {
this.props.collapseSidebar();
this.props.closeProjectOptions();
}}
>
<RightArrowIcon focusable="false" aria-hidden="true" />
</button>
</>
);
}

return (
<MediaQuery minWidth={770}>
{(matches) =>
matches ? (
<section className={editorSectionClass}>
<div className="editor__header">
<button
aria-label={this.props.t('Editor.OpenSketchARIA')}
className="sidebar__contract"
onClick={() => {
this.props.collapseSidebar();
this.props.closeProjectOptions();
}}
>
<LeftArrowIcon focusable="false" aria-hidden="true" />
</button>
<button
aria-label={this.props.t('Editor.CloseSketchARIA')}
className="sidebar__expand"
onClick={this.props.expandSidebar}
>
<RightArrowIcon focusable="false" aria-hidden="true" />
</button>
<div className="editor__file-name">
<span>
{this.props.file.name}
<UnsavedChangesIndicator />
</span>
<Timer />
</div>
</div>
<div className={editorHeader}>{editorHeaderContent}</div>
<article
ref={(element) => {
this.codemirrorContainer = element;
@@ -685,7 +723,8 @@ Editor.propTypes = {
provideController: PropTypes.func.isRequired,
t: PropTypes.func.isRequired,
setSelectedFile: PropTypes.func.isRequired,
expandConsole: PropTypes.func.isRequired
expandConsole: PropTypes.func.isRequired,
direction: PropTypes.string.isRequired // Add direction to propTypes
};

function mapStateToProps(state) {
@@ -699,7 +738,7 @@ function mapStateToProps(state) {
user: state.user,
project: state.project,
consoleEvents: state.console,

direction: state.preferences.direction, // Map direction to props
...state.preferences,
...state.ide,
...state.project,
Loading