From 34f20ba49a45bf74cc1cf1e323d2cb71f907f384 Mon Sep 17 00:00:00 2001
From: Jack Reed <phillipjreed@gmail.com>
Date: Tue, 21 Apr 2020 16:49:17 -0600
Subject: [PATCH] Flip the icon on WindowThumbnailSettings for RTL view
---
.../src/components/WindowThumbnailSettings.test.js | 6 ++++++
src/components/WindowThumbnailSettings.js | 12 ++++++++----
src/containers/WindowThumbnailSettings.js | 3 ++-
3 files changed, 16 insertions(+), 5 deletions(-)
diff --git a/__tests__/src/components/WindowThumbnailSettings.test.js b/__tests__/src/components/WindowThumbnailSettings.test.js
index 1777fc508..5a6c5282d 100644
--- a/__tests__/src/components/WindowThumbnailSettings.test.js
+++ b/__tests__/src/components/WindowThumbnailSettings.test.js
@@ -10,6 +10,7 @@ function createWrapper(props) {
return shallow(
<WindowThumbnailSettings
classes={{}}
+ direction="ltr"
windowId="xyz"
setWindowThumbnailPosition={() => {}}
thumbnailNavigationPosition="off"
@@ -47,4 +48,9 @@ describe('WindowThumbnailSettings', () => {
wrapper.find(MenuItem).at(2).simulate('click');
expect(setWindowThumbnailPosition).toHaveBeenCalledWith('xyz', 'far-right');
});
+
+ it('when rtl flips an icon', () => {
+ const wrapper = createWrapper({ direction: 'rtl' });
+ expect(wrapper.find(FormControlLabel).at(2).props().control.props.style).toEqual({ transform: 'rotate(180deg)' });
+ });
});
diff --git a/src/components/WindowThumbnailSettings.js b/src/components/WindowThumbnailSettings.js
index 0a83b7cd7..9db790fc9 100644
--- a/src/components/WindowThumbnailSettings.js
+++ b/src/components/WindowThumbnailSettings.js
@@ -34,7 +34,7 @@ export class WindowThumbnailSettings extends Component {
*/
render() {
const {
- classes, handleClose, t, thumbnailNavigationPosition,
+ classes, handleClose, t, thumbnailNavigationPosition, direction,
} = this.props;
return (
@@ -67,9 +67,12 @@ export class WindowThumbnailSettings extends Component {
<FormControlLabel
value="far-right"
classes={{ label: thumbnailNavigationPosition === 'far-right' ? classes.selectedLabel : classes.label }}
- control={
- <ThumbnailNavigationRightIcon color={thumbnailNavigationPosition === 'far-right' ? 'secondary' : undefined} />
- }
+ control={(
+ <ThumbnailNavigationRightIcon
+ color={thumbnailNavigationPosition === 'far-right' ? 'secondary' : undefined}
+ style={direction === 'rtl' ? { transform: 'rotate(180deg)' } : {}}
+ />
+ )}
label={t('right')}
labelPlacement="bottom"
/>
@@ -81,6 +84,7 @@ export class WindowThumbnailSettings extends Component {
WindowThumbnailSettings.propTypes = {
classes: PropTypes.objectOf(PropTypes.string).isRequired,
+ direction: PropTypes.string.isRequired,
handleClose: PropTypes.func,
setWindowThumbnailPosition: PropTypes.func.isRequired,
t: PropTypes.func,
diff --git a/src/containers/WindowThumbnailSettings.js b/src/containers/WindowThumbnailSettings.js
index c9d8f13f5..24878457a 100644
--- a/src/containers/WindowThumbnailSettings.js
+++ b/src/containers/WindowThumbnailSettings.js
@@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next';
import { withStyles } from '@material-ui/core/styles';
import { withPlugins } from '../extend/withPlugins';
import * as actions from '../state/actions';
-import { getThumbnailNavigationPosition } from '../state/selectors';
+import { getThumbnailNavigationPosition, getThemeDirection } from '../state/selectors';
import { WindowThumbnailSettings } from '../components/WindowThumbnailSettings';
/**
@@ -21,6 +21,7 @@ const mapDispatchToProps = { setWindowThumbnailPosition: actions.setWindowThumbn
*/
const mapStateToProps = (state, { windowId }) => (
{
+ direction: getThemeDirection(state),
thumbnailNavigationPosition: getThumbnailNavigationPosition(state, { windowId }),
}
);
--
GitLab