Skip to content
Snippets Groups Projects
Commit 3489a4f9 authored by Jack Reed's avatar Jack Reed Committed by Chris Beer
Browse files

Update companion window/area components to better support RTL

parent a27e1342
No related branches found
No related tags found
No related merge requests found
......@@ -10,6 +10,7 @@ function createWrapper(props) {
return shallow(
<CompanionArea
classes={{ horizontal: 'horizontal' }}
direction="ltr"
windowId="abc123"
position="right"
companionAreaOpen
......
......@@ -9,6 +9,7 @@ function createWrapper(props) {
return shallow(
<CompanionWindow
id="abc123"
direction="ltr"
windowId="x"
classes={{ horizontal: 'horizontal', small: 'small', vertical: 'vertical' }}
companionWindow={{}}
......
......@@ -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>
)
......
......@@ -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,
......
......@@ -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),
......
......@@ -36,6 +36,7 @@ const styles = theme => ({
flexGrow: 1,
},
paper: {
borderInlineEnd: `1px solid ${theme.palette.divider}`,
overflowX: 'hidden',
width: 48,
},
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment