From fedd7a75fee2c84b9beab085e0eca2f86e8d3eeb Mon Sep 17 00:00:00 2001
From: Jack Reed <phillipjreed@gmail.com>
Date: Mon, 20 Apr 2020 18:09:07 -0600
Subject: [PATCH] Setup CompanionArea drawer to be positioned on the right by
default in RTL viewing
---
__tests__/src/components/CompanionArea.test.js | 17 +++++++++++++++++
__tests__/src/components/WindowSideBar.test.js | 10 ++++++++++
src/components/CompanionArea.js | 9 ++++++---
src/components/WindowSideBar.js | 9 +++++----
src/containers/CompanionArea.js | 5 ++++-
src/containers/WindowSideBar.js | 4 ++--
6 files changed, 44 insertions(+), 10 deletions(-)
diff --git a/__tests__/src/components/CompanionArea.test.js b/__tests__/src/components/CompanionArea.test.js
index dd5374ea7..97d49996b 100644
--- a/__tests__/src/components/CompanionArea.test.js
+++ b/__tests__/src/components/CompanionArea.test.js
@@ -27,6 +27,23 @@ describe('CompanionArea', () => {
expect(wrapper.find(Slide).prop('direction')).toBe('left');
});
+ it('when rtl, the left slide should be from the right', () => {
+ const wrapper = createWrapper({
+ direction: 'rtl',
+ });
+ expect(wrapper.find(CompanionWindowFactory).length).toBe(2);
+ expect(wrapper.find(Slide).prop('direction')).toBe('right');
+ });
+
+ it('when rtl, the right slide should be from the left', () => {
+ const wrapper = createWrapper({
+ direction: 'rtl',
+ position: 'left',
+ });
+ expect(wrapper.find(CompanionWindowFactory).length).toBe(2);
+ expect(wrapper.find(Slide).prop('direction')).toBe('left');
+ });
+
it('should add the appropriate classes when the companion area fills the full width', () => {
const wrapper = createWrapper({ position: 'bottom' });
expect(wrapper.find('div.horizontal').length).toBe(2);
diff --git a/__tests__/src/components/WindowSideBar.test.js b/__tests__/src/components/WindowSideBar.test.js
index 5eca16b8a..167de0ec0 100644
--- a/__tests__/src/components/WindowSideBar.test.js
+++ b/__tests__/src/components/WindowSideBar.test.js
@@ -26,4 +26,14 @@ describe('WindowSideBar', () => {
expect(wrapper.find(Drawer).length).toBe(1);
expect(wrapper.find(Drawer).prop('open')).toBe(true);
});
+ it('when ltr', () => {
+ const wrapper = createWrapper();
+ expect(wrapper.find(Drawer).prop('anchor')).toBe('left');
+ });
+ it('when rtl', () => {
+ const wrapper = createWrapper({
+ direction: 'rtl',
+ });
+ expect(wrapper.find(Drawer).prop('anchor')).toBe('right');
+ });
});
diff --git a/src/components/CompanionArea.js b/src/components/CompanionArea.js
index 0c47963e9..6a2afb58c 100644
--- a/src/components/CompanionArea.js
+++ b/src/components/CompanionArea.js
@@ -20,17 +20,19 @@ export class CompanionArea extends Component {
/** @private */
slideDirection() {
- const { position } = this.props;
+ const { direction, position } = this.props;
+ const defaultPosition = direction === 'rtl' ? 'left' : 'right';
+ const oppositePosition = direction === 'rtl' ? 'right' : 'left';
switch (position) {
case 'right':
case 'far-right':
- return 'left';
+ return oppositePosition;
case 'bottom':
case 'far-bottom':
return 'up';
default:
- return 'right';
+ return defaultPosition;
}
}
@@ -77,6 +79,7 @@ CompanionArea.propTypes = {
classes: PropTypes.objectOf(PropTypes.string),
companionAreaOpen: PropTypes.bool.isRequired,
companionWindowIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+ direction: PropTypes.string.isRequired,
position: PropTypes.string.isRequired,
setCompanionAreaOpen: PropTypes.func,
sideBarOpen: PropTypes.bool,
diff --git a/src/components/WindowSideBar.js b/src/components/WindowSideBar.js
index 8396895df..5381a60a3 100644
--- a/src/components/WindowSideBar.js
+++ b/src/components/WindowSideBar.js
@@ -14,7 +14,7 @@ export class WindowSideBar extends Component {
*/
render() {
const {
- classes, t, windowId, sideBarOpen,
+ classes, direction, t, windowId, sideBarOpen,
} = this.props;
return (
@@ -23,13 +23,13 @@ export class WindowSideBar extends Component {
variant="persistent"
className={classNames(classes.drawer)}
classes={{ paper: classNames(classes.paper) }}
- anchor="left"
+ anchor={direction === 'rtl' ? 'right' : 'left'}
PaperProps={{
'aria-label': t('sidebarPanelsNavigation'),
component: 'nav',
- style: { position: 'relative' },
+ style: { height: '100%', position: 'relative' },
}}
- SlideProps={{ mountOnEnter: true, unmountOnExit: true }}
+ SlideProps={{ direction: direction === 'rtl' ? 'left' : 'right', mountOnEnter: true, unmountOnExit: true }}
open={sideBarOpen}
>
<WindowSideBarButtons windowId={windowId} />
@@ -41,6 +41,7 @@ export class WindowSideBar extends Component {
WindowSideBar.propTypes = {
classes: PropTypes.objectOf(PropTypes.string).isRequired,
+ direction: PropTypes.string.isRequired,
sideBarOpen: PropTypes.bool,
t: PropTypes.func.isRequired,
windowId: PropTypes.string.isRequired,
diff --git a/src/containers/CompanionArea.js b/src/containers/CompanionArea.js
index ad406f564..f5bb041f7 100644
--- a/src/containers/CompanionArea.js
+++ b/src/containers/CompanionArea.js
@@ -3,7 +3,9 @@ import { connect } from 'react-redux';
import { withStyles } from '@material-ui/core';
import { withTranslation } from 'react-i18next';
import { withPlugins } from '../extend/withPlugins';
-import { getCompanionWindowIdsForPosition, getCompanionAreaVisibility, getWindow } from '../state/selectors';
+import {
+ getCompanionWindowIdsForPosition, getCompanionAreaVisibility, getThemeDirection, getWindow,
+} from '../state/selectors';
import * as actions from '../state/actions';
import { CompanionArea } from '../components/CompanionArea';
@@ -11,6 +13,7 @@ import { CompanionArea } from '../components/CompanionArea';
const mapStateToProps = (state, { windowId, position }) => ({
companionAreaOpen: getCompanionAreaVisibility(state, { position, windowId }),
companionWindowIds: getCompanionWindowIdsForPosition(state, { position, windowId }),
+ direction: getThemeDirection(state),
sideBarOpen: (getWindow(state, { windowId }) || {}).sideBarOpen,
});
diff --git a/src/containers/WindowSideBar.js b/src/containers/WindowSideBar.js
index c2edce19c..90598c5fa 100644
--- a/src/containers/WindowSideBar.js
+++ b/src/containers/WindowSideBar.js
@@ -4,7 +4,7 @@ import { withStyles } from '@material-ui/core';
import { withTranslation } from 'react-i18next';
import { withPlugins } from '../extend/withPlugins';
import { WindowSideBar } from '../components/WindowSideBar';
-import { getWindow } from '../state/selectors';
+import { getThemeDirection, getWindow } from '../state/selectors';
/**
* mapStateToProps - to hook up connect
@@ -13,6 +13,7 @@ import { getWindow } from '../state/selectors';
*/
const mapStateToProps = (state, { windowId }) => (
{
+ direction: getThemeDirection(state),
sideBarOpen: (getWindow(state, { windowId }) || {}).sideBarOpen,
sideBarPanel: (getWindow(state, { windowId }) || {}).sideBarPanel,
}
@@ -28,7 +29,6 @@ const styles = theme => ({
drawer: {
flexShrink: 0,
height: '100%',
- left: 0,
order: -1000,
zIndex: theme.zIndex.appBar - 1,
},
--
GitLab