diff --git a/__tests__/src/components/WindowThumbnailSettings.test.js b/__tests__/src/components/WindowThumbnailSettings.test.js index 1777fc508f01e5e05e3e42132bc6432c44fad0d4..5a6c5282dfc2c4dc56c0dac3299626e03ba667f1 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 0a83b7cd7a177c1bf25b948f7b8ed2f2120a31c3..9db790fc928175d67d8e54c8e3cbc717c973b7da 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 c9d8f13f5b1b62458b8592449a7643047eb220a6..24878457a780b19e3e280e0e289179636d0fb28b 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 }), } );