From 3489a4f9430fcba5f454f75ffa05bde36fbca536 Mon Sep 17 00:00:00 2001
From: Jack Reed <phillipjreed@gmail.com>
Date: Tue, 21 Apr 2020 14:14:24 -0600
Subject: [PATCH] Update companion window/area components to better support RTL
---
.../src/components/CompanionArea.test.js | 1 +
.../src/components/CompanionWindow.test.js | 1 +
src/components/CompanionArea.js | 15 +++++++++-
src/components/CompanionWindow.js | 28 ++++++++++++++++---
src/containers/CompanionWindow.js | 3 +-
src/containers/WindowSideBar.js | 1 +
6 files changed, 43 insertions(+), 6 deletions(-)
diff --git a/__tests__/src/components/CompanionArea.test.js b/__tests__/src/components/CompanionArea.test.js
index 97d49996b..3c32d1b38 100644
--- a/__tests__/src/components/CompanionArea.test.js
+++ b/__tests__/src/components/CompanionArea.test.js
@@ -10,6 +10,7 @@ function createWrapper(props) {
return shallow(
<CompanionArea
classes={{ horizontal: 'horizontal' }}
+ direction="ltr"
windowId="abc123"
position="right"
companionAreaOpen
diff --git a/__tests__/src/components/CompanionWindow.test.js b/__tests__/src/components/CompanionWindow.test.js
index c185b9320..6c306cf8c 100644
--- a/__tests__/src/components/CompanionWindow.test.js
+++ b/__tests__/src/components/CompanionWindow.test.js
@@ -9,6 +9,7 @@ function createWrapper(props) {
return shallow(
<CompanionWindow
id="abc123"
+ direction="ltr"
windowId="x"
classes={{ horizontal: 'horizontal', small: 'small', vertical: 'vertical' }}
companionWindow={{}}
diff --git a/src/components/CompanionArea.js b/src/components/CompanionArea.js
index 6a2afb58c..6aedbadee 100644
--- a/src/components/CompanionArea.js
+++ b/src/components/CompanionArea.js
@@ -18,6 +18,19 @@ export class CompanionArea extends Component {
return (position === 'bottom' || position === 'far-bottom') ? classes.horizontal : null;
}
+ /** */
+ collapseIcon() {
+ const { companionAreaOpen, direction } = this.props;
+ if (companionAreaOpen) {
+ if (direction === 'ltr') {
+ return <ArrowLeftIcon />;
+ }
+ return <ArrowRightIcon />;
+ }
+ if (direction === 'rtl') return <ArrowLeftIcon />;
+ return <ArrowRightIcon />;
+ }
+
/** @private */
slideDirection() {
const { direction, position } = this.props;
@@ -56,7 +69,7 @@ export class CompanionArea extends Component {
onClick={() => { setCompanionAreaOpen(windowId, !companionAreaOpen); }}
TooltipProps={{ placement: 'right' }}
>
- {companionAreaOpen ? <ArrowLeftIcon /> : <ArrowRightIcon />}
+ {this.collapseIcon()}
</MiradorMenuButton>
</div>
)
diff --git a/src/components/CompanionWindow.js b/src/components/CompanionWindow.js
index 4f567e9f6..d20037bf1 100644
--- a/src/components/CompanionWindow.js
+++ b/src/components/CompanionWindow.js
@@ -14,9 +14,28 @@ import ns from '../config/css-ns';
* CompanionWindow
*/
export class CompanionWindow extends Component {
+ /** */
+ openInNewStyle() {
+ const { direction } = this.props;
+ if (direction === 'rtl') return { transform: 'scale(-1, 1)' };
+ return {};
+ }
+
+
/** */
resizeHandles() {
- const { position } = this.props;
+ const { direction, position } = this.props;
+ const positions = {
+ ltr: {
+ default: 'left',
+ opposite: 'right',
+ },
+ rtl: {
+ default: 'right',
+ opposite: 'left',
+ },
+ };
+
const base = {
bottom: false,
@@ -30,11 +49,11 @@ export class CompanionWindow extends Component {
};
if (position === 'right' || position === 'far-right') {
- return { ...base, left: true };
+ return { ...base, [positions[direction].default]: true };
}
if (position === 'left') {
- return { ...base, right: true };
+ return { ...base, [positions[direction].opposite]: true };
}
if (position === 'bottom' || position === 'far-bottom') {
@@ -100,7 +119,7 @@ export class CompanionWindow extends Component {
aria-label={t('openInCompanionWindow')}
onClick={() => { updateCompanionWindow(windowId, id, { position: 'right' }); }}
>
- <OpenInNewIcon />
+ <OpenInNewIcon style={this.openInNewStyle()} />
</MiradorMenuButton>
)
: (
@@ -156,6 +175,7 @@ CompanionWindow.propTypes = {
children: PropTypes.node,
classes: PropTypes.objectOf(PropTypes.string).isRequired,
defaultSidebarPanelWidth: PropTypes.number,
+ direction: PropTypes.string.isRequired,
id: PropTypes.string.isRequired,
isDisplayed: PropTypes.bool,
onCloseClick: PropTypes.func,
diff --git a/src/containers/CompanionWindow.js b/src/containers/CompanionWindow.js
index 7056c46ed..20e47029e 100644
--- a/src/containers/CompanionWindow.js
+++ b/src/containers/CompanionWindow.js
@@ -5,7 +5,7 @@ import { withStyles } from '@material-ui/core';
import { withSize } from 'react-sizeme';
import { withPlugins } from '../extend/withPlugins';
import * as actions from '../state/actions';
-import { getCompanionWindow } from '../state/selectors';
+import { getCompanionWindow, getThemeDirection } from '../state/selectors';
import { CompanionWindow } from '../components/CompanionWindow';
/**
@@ -20,6 +20,7 @@ const mapStateToProps = (state, { id, windowId }) => {
return {
...companionWindow,
defaultSidebarPanelWidth,
+ direction: getThemeDirection(state),
isDisplayed: (companionWindow
&& companionWindow.content
&& companionWindow.content.length > 0),
diff --git a/src/containers/WindowSideBar.js b/src/containers/WindowSideBar.js
index 90598c5fa..012b2fd5d 100644
--- a/src/containers/WindowSideBar.js
+++ b/src/containers/WindowSideBar.js
@@ -36,6 +36,7 @@ const styles = theme => ({
flexGrow: 1,
},
paper: {
+ borderInlineEnd: `1px solid ${theme.palette.divider}`,
overflowX: 'hidden',
width: 48,
},
--
GitLab