diff --git a/__tests__/src/components/CompanionArea.test.js b/__tests__/src/components/CompanionArea.test.js
index 87c76cc5ad45a58a94b7a556fabfc674a5ae7a8c..f896ddb434ceec168bd9976b43061ddf2c6f6299 100644
--- a/__tests__/src/components/CompanionArea.test.js
+++ b/__tests__/src/components/CompanionArea.test.js
@@ -1,8 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
-import IconButton from '@material-ui/core/IconButton';
-import ArrowLeftSharpIcon from '@material-ui/icons/ArrowLeftSharp';
-import ArrowRightSharpIcon from '@material-ui/icons/ArrowRightSharp';
import { CompanionArea } from '../../../src/components/CompanionArea';
import CompanionWindowFactory from '../../../src/containers/CompanionWindowFactory';
@@ -17,6 +14,7 @@ function createWrapper(props) {
{ position: 'right', id: 'foo' },
{ position: 'right', id: 'baz' },
]}
+ t={key => key}
{...props}
/>,
);
@@ -47,17 +45,13 @@ describe('CompanionArea', () => {
position: 'left', sideBarOpen: true, setCompanionAreaOpen, companionAreaOpen: false,
});
- expect(wrapper.find('WithStyles(IconButton)').length).toBe(1);
- expect(wrapper.find('WithStyles(IconButton)').matchesElement(
- <IconButton>
- <ArrowRightSharpIcon />
- </IconButton>,
- )).toBe(true);
+ expect(wrapper.find('MiradorMenuButton').length).toBe(1);
+ expect(wrapper.find('MiradorMenuButton').first().children('pure(ArrowRightSharpIcon)').length).toBe(1);
expect(wrapper.find('div.mirador-companion-windows').length).toBe(1);
expect(wrapper.find('div.mirador-companion-windows').props().style.display).toBe('none');
- wrapper.find('WithStyles(IconButton)').simulate('click');
+ wrapper.find('MiradorMenuButton').first().props().onClick(); // Trigger the onClick prop
expect(setCompanionAreaOpen).toHaveBeenCalledWith('abc123', true);
});
@@ -69,17 +63,13 @@ describe('CompanionArea', () => {
position: 'left', sideBarOpen: true, setCompanionAreaOpen, companionAreaOpen: true,
});
- expect(wrapper.find('WithStyles(IconButton)').length).toBe(1);
- expect(wrapper.find('WithStyles(IconButton)').matchesElement(
- <IconButton>
- <ArrowLeftSharpIcon />
- </IconButton>,
- )).toBe(true);
+ expect(wrapper.find('MiradorMenuButton').length).toBe(1);
+ expect(wrapper.find('MiradorMenuButton').first().children('pure(ArrowLeftSharpIcon)').length).toBe(1);
expect(wrapper.find('div.mirador-companion-windows').length).toBe(1);
expect(wrapper.find('div.mirador-companion-windows').props().style.display).toBe('flex');
- wrapper.find('WithStyles(IconButton)').simulate('click');
+ wrapper.find('MiradorMenuButton').first().props().onClick(); // Trigger the onClick prop
expect(setCompanionAreaOpen).toHaveBeenCalledWith('abc123', false);
});
@@ -89,7 +79,7 @@ describe('CompanionArea', () => {
position: 'left', sideBarOpen: false, setCompanionAreaOpen: () => {}, companionAreaOpen: true,
});
- expect(wrapper.find('WithStyles(IconButton)').length).toBe(0);
+ expect(wrapper.find('MiradorMenuButton').length).toBe(0);
});
it('does not show a toggle in other positions', () => {
@@ -97,6 +87,6 @@ describe('CompanionArea', () => {
position: 'whatever', sideBarOpen: true, setCompanionAreaOpen: () => {}, companionAreaOpen: true,
});
- expect(wrapper.find('WithStyles(IconButton)').length).toBe(0);
+ expect(wrapper.find('MiradorMenuButton').length).toBe(0);
});
});
diff --git a/__tests__/src/components/CompanionWindow.test.js b/__tests__/src/components/CompanionWindow.test.js
index a88faa33063a8730f3a60c4547a5a799daa610fe..19707abe18dc689784b4fa49e1eb445720f442af 100644
--- a/__tests__/src/components/CompanionWindow.test.js
+++ b/__tests__/src/components/CompanionWindow.test.js
@@ -20,16 +20,15 @@ describe('CompanionWindow', () => {
let companionWindow;
describe('when the openInCompanionWindow button is clicked', () => {
- it('triggers the updateCompanionWindow prop with the appropriate args', () => {
+ it('passes the the updateCompanionWindow prop to MiradorMenuButton with the appropriate args', () => {
const updateCompanionWindow = jest.fn();
companionWindow = createWrapper({
updateCompanionWindow,
position: 'left',
});
- const button = companionWindow.find('WithStyles(IconButton)[aria-label="openInCompanionWindow"]');
-
- button.simulate('click');
+ const button = companionWindow.find('MiradorMenuButton');
+ button.props().onClick(); // Trigger the onClick prop
expect(updateCompanionWindow).toHaveBeenCalledTimes(1);
expect(updateCompanionWindow).toHaveBeenCalledWith('x', 'abc123', { position: 'right' });
});
@@ -42,8 +41,8 @@ describe('CompanionWindow', () => {
onCloseClick: removeCompanionWindowEvent,
});
- const closeButton = companionWindow.find('WithStyles(IconButton)[aria-label="closeCompanionWindow"]');
- closeButton.simulate('click');
+ const button = companionWindow.find('MiradorMenuButton');
+ button.props().onClick(); // Trigger the onClick prop
expect(removeCompanionWindowEvent).toHaveBeenCalledTimes(1);
});
});
@@ -54,8 +53,8 @@ describe('CompanionWindow', () => {
expect(companionWindow.find('WithStyles(Paper).vertical').length).toBe(1);
- const button = companionWindow.find('WithStyles(IconButton)[aria-label="openInCompanionWindow"]');
- button.simulate('click');
+ const button = companionWindow.find('MiradorMenuButton').first();
+ button.props().onClick(); // Trigger the onClick prop
expect(updateCompanionWindow).toHaveBeenCalledTimes(1);
expect(updateCompanionWindow).toHaveBeenCalledWith('x', 'abc123', { position: 'bottom' });
});
@@ -66,8 +65,8 @@ describe('CompanionWindow', () => {
expect(companionWindow.find('WithStyles(Paper).horizontal').length).toBe(1);
- const button = companionWindow.find('WithStyles(IconButton)[aria-label="openInCompanionWindow"]');
- button.simulate('click');
+ const button = companionWindow.find('MiradorMenuButton').first();
+ button.props().onClick(); // Trigger the onClick prop
expect(updateCompanionWindow).toHaveBeenCalledTimes(1);
expect(updateCompanionWindow).toHaveBeenCalledWith('x', 'abc123', { position: 'right' });
});
diff --git a/__tests__/src/components/WindowTopBar.test.js b/__tests__/src/components/WindowTopBar.test.js
index f7bb55a46743d12c27c1d4e732163c37b49fa05b..51ad72784dcb727d1473e581e035ef7281b6d644 100644
--- a/__tests__/src/components/WindowTopBar.test.js
+++ b/__tests__/src/components/WindowTopBar.test.js
@@ -2,13 +2,12 @@ import React from 'react';
import { shallow } from 'enzyme';
import Typography from '@material-ui/core/Typography';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/MenuSharp';
import Toolbar from '@material-ui/core/Toolbar';
import AppBar from '@material-ui/core/AppBar';
import WindowTopMenuButton from '../../../src/containers/WindowTopMenuButton';
import WindowTopBarButtons from '../../../src/containers/WindowTopBarButtons';
+import { MiradorMenuButton } from '../../../src/components/MiradorMenuButton';
import { WindowTopBar } from '../../../src/components/WindowTopBar';
/** create wrapper */
@@ -34,8 +33,7 @@ describe('WindowTopBar', () => {
const wrapper = createWrapper();
expect(wrapper.find(AppBar).length).toBe(1);
expect(wrapper.find(Toolbar).length).toBe(1);
- expect(wrapper.find(IconButton).length).toBe(3);
- expect(wrapper.find(MenuIcon).length).toBe(1);
+ expect(wrapper.find(MiradorMenuButton).length).toBe(3);
expect(wrapper.find(Typography).length).toBe(1);
expect(wrapper.find(WindowTopBarButtons).length).toBe(1);
expect(wrapper.find(WindowTopMenuButton).length).toBe(1);
@@ -44,7 +42,7 @@ describe('WindowTopBar', () => {
it('passes correct props to <IconButton/>', () => {
const toggleWindowSideBar = jest.fn();
const wrapper = createWrapper({ toggleWindowSideBar });
- expect(wrapper.find(IconButton).first().props().onClick).toBe(toggleWindowSideBar);
+ expect(wrapper.find(MiradorMenuButton).first().props().onClick).toBe(toggleWindowSideBar);
});
it('passes correct props to <Typography/>', () => {
@@ -65,12 +63,12 @@ describe('WindowTopBar', () => {
it('passes correct props to <Button/>', () => {
const removeWindow = jest.fn();
const wrapper = createWrapper({ removeWindow });
- expect(wrapper.find(IconButton).last().props().onClick).toBe(removeWindow);
+ expect(wrapper.find(MiradorMenuButton).last().props().onClick).toBe(removeWindow);
});
it('passes correct props to <Button/>', () => {
const maximizeWindow = jest.fn();
const wrapper = createWrapper({ maximizeWindow });
- expect(wrapper.find(IconButton).at(1).props().onClick).toBe(maximizeWindow);
+ expect(wrapper.find(MiradorMenuButton).at(1).props().onClick).toBe(maximizeWindow);
});
});
diff --git a/__tests__/src/components/WindowTopMenuButton.test.js b/__tests__/src/components/WindowTopMenuButton.test.js
index 49454635cde2cc632004f67aebfaf8c3692eb383..86bb1878530eada97c3c075f5c901b1c586e6bae 100644
--- a/__tests__/src/components/WindowTopMenuButton.test.js
+++ b/__tests__/src/components/WindowTopMenuButton.test.js
@@ -1,9 +1,8 @@
import React from 'react';
import { shallow } from 'enzyme';
-import IconButton from '@material-ui/core/IconButton';
-import MoreVertIcon from '@material-ui/icons/MoreVertSharp';
import WindowTopMenu from '../../../src/containers/WindowTopMenu';
import { WindowTopMenuButton } from '../../../src/components/WindowTopMenuButton';
+import { MiradorMenuButton } from '../../../src/components/MiradorMenuButton';
/** create wrapper */
function createWrapper(props) {
@@ -20,8 +19,7 @@ function createWrapper(props) {
describe('WindowTopMenuButton', () => {
it('renders all needed elements', () => {
const wrapper = createWrapper();
- expect(wrapper.find(IconButton).length).toBe(1);
- expect(wrapper.find(MoreVertIcon).length).toBe(1);
+ expect(wrapper.find(MiradorMenuButton).length).toBe(1);
expect(wrapper.find(WindowTopMenu).length).toBe(1);
});
@@ -34,9 +32,9 @@ describe('WindowTopMenuButton', () => {
expect(props.handleClose).toBe(handleMenuClose);
});
- it('passes correct props to <IconButton/>', () => {
+ it('passes correct props to <MiradorMenuButton />', () => {
const wrapper = createWrapper();
- const props = wrapper.find(IconButton).first().props();
+ const props = wrapper.find(MiradorMenuButton).first().props();
const { handleMenuClick } = wrapper.instance();
expect(props.onClick).toBe(handleMenuClick);
});
@@ -54,10 +52,12 @@ describe('WindowTopMenuButton', () => {
it('the button has a class indicating that it is "selected" once it is clicked', () => {
const wrapper = createWrapper();
- expect(wrapper.find('.ctrlBtnSelected').length).toBe(0);
- wrapper.find('WithStyles(IconButton)').simulate('click', { currentTarget: 'anElement' });
- expect(wrapper.find('.ctrlBtnSelected').length).toBe(1);
- wrapper.find('WithStyles(IconButton)').simulate('click', {});
- expect(wrapper.find('.ctrlBtnSelected').length).toBe(0);
+ const menuButton = wrapper.find(MiradorMenuButton).first();
+
+ expect(wrapper.find(MiradorMenuButton).first().props().className).toEqual('');
+ menuButton.props().onClick({ currentTarget: 'anElement' });
+ expect(wrapper.find(MiradorMenuButton).first().props().className).toEqual('ctrlBtnSelected');
+ menuButton.props().onClick({});
+ expect(wrapper.find(MiradorMenuButton).first().props().className).toEqual('');
});
});
diff --git a/__tests__/src/components/WorkspaceFullScreenButton.test.js b/__tests__/src/components/WorkspaceFullScreenButton.test.js
index eb1e46a2421ad831eb02606f56d93f509368df6f..1981f9ce6ae1f1c7fe03d590e935d3644c76a742 100644
--- a/__tests__/src/components/WorkspaceFullScreenButton.test.js
+++ b/__tests__/src/components/WorkspaceFullScreenButton.test.js
@@ -16,11 +16,12 @@ function createWrapper(props) {
describe('WorkspaceFullScreenButton', () => {
let wrapper;
+ let menuButton;
it('renders without an error', () => {
wrapper = createWrapper();
- expect(wrapper.find('WithStyles(IconButton)').length).toBe(1);
+ expect(wrapper.find('MiradorMenuButton').length).toBe(1);
});
describe('when not in fullscreen', () => {
@@ -28,18 +29,19 @@ describe('WorkspaceFullScreenButton', () => {
beforeAll(() => {
setWorkspaceFullscreen = jest.fn();
wrapper = createWrapper({ setWorkspaceFullscreen });
+ menuButton = wrapper.find('MiradorMenuButton');
});
it('has the FullscreenIcon', () => {
- expect(wrapper.find('pure(FullscreenSharpIcon)').length).toBe(1);
+ expect(menuButton.children('pure(FullscreenSharpIcon)').length).toBe(1);
});
it('has the proper aria-label i18n key', () => {
- expect(wrapper.find('WithStyles(IconButton)[aria-label="workspaceFullScreen"]').length).toBe(1);
+ expect(menuButton.props()['aria-label']).toEqual('workspaceFullScreen');
});
it('triggers the setWorkspaceFullscreen prop with the appropriate boolean', () => {
- wrapper.find('WithStyles(IconButton)').simulate('click');
+ menuButton.props().onClick(); // Trigger the onClick prop
expect(setWorkspaceFullscreen).toHaveBeenCalledWith(true);
});
});
@@ -49,18 +51,19 @@ describe('WorkspaceFullScreenButton', () => {
beforeAll(() => {
setWorkspaceFullscreen = jest.fn();
wrapper = createWrapper({ setWorkspaceFullscreen, isFullscreenEnabled: true });
+ menuButton = wrapper.find('MiradorMenuButton');
});
it('has the FullscreenExitIcon', () => {
- expect(wrapper.find('pure(FullscreenExitSharpIcon)').length).toBe(1);
+ expect(menuButton.children('pure(FullscreenExitSharpIcon)').length).toBe(1);
});
it('has the proper aria-label', () => {
- expect(wrapper.find('WithStyles(IconButton)[aria-label="exitFullScreen"]').length).toBe(1);
+ expect(menuButton.props()['aria-label']).toEqual('exitFullScreen');
});
it('triggers the setWorkspaceFullscreen prop with the appropriate boolean', () => {
- wrapper.find('WithStyles(IconButton)').simulate('click');
+ menuButton.props().onClick(); // Trigger the onClick prop
expect(setWorkspaceFullscreen).toHaveBeenCalledWith(false);
});
});
diff --git a/__tests__/src/components/WorkspaceMenuButton.test.js b/__tests__/src/components/WorkspaceMenuButton.test.js
index b259f3522fb9052468d210f3c387e91de7ae0179..879ffd878ed3d9a6ba64219ce3316b9a0702e67f 100644
--- a/__tests__/src/components/WorkspaceMenuButton.test.js
+++ b/__tests__/src/components/WorkspaceMenuButton.test.js
@@ -11,18 +11,16 @@ describe('WorkspaceMenuButton', () => {
});
it('renders without an error', () => {
- expect(wrapper.find('WithStyles(IconButton)').length).toBe(1);
- });
- it('when clicked, updates the state', () => {
- wrapper.find('WithStyles(IconButton)').simulate('click', {});
- // TODO: this is currently a no-op
+ expect(wrapper.find('MiradorMenuButton').length).toBe(1);
});
it('the button has a class indicating that it is "selected" once it is clicked', () => {
- expect(wrapper.find('.ctrlBtnSelected').length).toBe(0);
- wrapper.find('WithStyles(IconButton)').simulate('click', { currentTarget: 'anElement' });
- expect(wrapper.find('.ctrlBtnSelected').length).toBe(1);
- wrapper.find('WithStyles(IconButton)').simulate('click', {});
- expect(wrapper.find('.ctrlBtnSelected').length).toBe(0);
+ const menuButton = wrapper.find('MiradorMenuButton').first();
+
+ expect(wrapper.find('MiradorMenuButton').first().props().className).toEqual('');
+ menuButton.props().onClick({ currentTarget: 'anElement' });
+ expect(wrapper.find('MiradorMenuButton').first().props().className).toEqual('ctrlBtnSelected');
+ menuButton.props().onClick({});
+ expect(wrapper.find('MiradorMenuButton').first().props().className).toEqual('');
});
});
diff --git a/__tests__/src/components/ZoomControls.test.js b/__tests__/src/components/ZoomControls.test.js
index 31f5fb083c92096bc7892b4aea878f6eab232edd..fe517a20c0966ae18cbe8156e0190b48a589af48 100644
--- a/__tests__/src/components/ZoomControls.test.js
+++ b/__tests__/src/components/ZoomControls.test.js
@@ -44,25 +44,26 @@ describe('ZoomControls', () => {
it('renders a couple buttons', () => {
expect(wrapper.find('div.zoom_controls').length).toBe(1);
+ expect(wrapper.find('MiradorMenuButton').length).toBe(3);
});
it('has a zoom-in button', () => {
- const button = wrapper.find('WithStyles(IconButton)[aria-label="zoomIn"]');
- expect(button.simulate('click'));
+ const button = wrapper.find({ 'aria-label': 'zoomIn' }).first();
+ button.props().onClick(); // Trigger the onClick prop
expect(updateViewport).toHaveBeenCalledTimes(1);
expect(updateViewport).toHaveBeenCalledWith('xyz', { x: 100, y: 100, zoom: 2 });
});
it('has a zoom-out button', () => {
- const button = wrapper.find('WithStyles(IconButton)[aria-label="zoomOut"]');
- expect(button.simulate('click'));
+ const button = wrapper.find({ 'aria-label': 'zoomOut' }).first();
+ button.props().onClick(); // Trigger the onClick prop
expect(updateViewport).toHaveBeenCalledTimes(1);
expect(updateViewport).toHaveBeenCalledWith('xyz', { x: 100, y: 100, zoom: 0.5 });
});
it('has a zoom reseet button', () => {
- const button = wrapper.find('WithStyles(IconButton)[aria-label="zoomReset"]');
- expect(button.simulate('click'));
+ const button = wrapper.find({ 'aria-label': 'zoomReset' }).first();
+ button.props().onClick(); // Trigger the onClick prop
expect(updateViewport).toHaveBeenCalledTimes(1);
expect(updateViewport).toHaveBeenCalledWith('xyz', { x: 100, y: 100, zoom: 1 });
});
diff --git a/locales/en/translation.json b/locales/en/translation.json
index 6191ecc6b3f5a5745a6722d7e7c7da4e0a66b84f..1fb6c0ccd6a3259aa253abeafb559924ccabb8ab 100644
--- a/locales/en/translation.json
+++ b/locales/en/translation.json
@@ -18,6 +18,7 @@
"closeInfoCompanionWindow": "Close information companion window",
"closeWindow": "Close window",
"closeWindowMenu": "Close window options menu",
+ "collapseSidePanel": "Collapse side panel",
"compactList": "Compact List",
"currentItem": "Current item",
"dark": "Dark",
@@ -26,6 +27,7 @@
"downloadExportWorkspace": "Download/export workspace",
"elastic": "Elastic",
"exitFullScreen": "Exit full screen",
+ "expandSidePanel": "Expand side panel",
"fetchManifest": "Add",
"hideZoomControls": "Hide zoom controls",
"item": "Item: {{label}}",
@@ -37,6 +39,8 @@
"miradorResources": "Mirador resources",
"miradorViewer": "Mirador viewer",
"mosaic": "Mosaic",
+ "moveCompanionWindowToBottom": "Move to bottom",
+ "moveCompanionWindowToRight": "Move to right",
"nextCanvas": "Next item",
"numItems": "{{number}} items",
"off": "Off",
diff --git a/src/components/CompanionArea.js b/src/components/CompanionArea.js
index b1e6f5efdec084f98a9f0e683f128c7092263ec5..1238868cf3b388025d71e0d2344ddf33c349e52b 100644
--- a/src/components/CompanionArea.js
+++ b/src/components/CompanionArea.js
@@ -1,9 +1,9 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
-import IconButton from '@material-ui/core/IconButton';
import ArrowLeftIcon from '@material-ui/icons/ArrowLeftSharp';
import ArrowRightIcon from '@material-ui/icons/ArrowRightSharp';
import CompanionWindowFactory from '../containers/CompanionWindowFactory';
+import { MiradorMenuButton } from './MiradorMenuButton';
import ns from '../config/css-ns';
/** */
@@ -21,7 +21,7 @@ export class CompanionArea extends Component {
render() {
const {
classes, companionWindows, companionAreaOpen, setCompanionAreaOpen,
- position, sideBarOpen, windowId,
+ position, sideBarOpen, t, windowId,
} = this.props;
return (
@@ -29,12 +29,13 @@ export class CompanionArea extends Component {
{
setCompanionAreaOpen && position === 'left' && sideBarOpen && companionWindows.length > 0
&& (
- <IconButton
+ <MiradorMenuButton
+ aria-label={companionAreaOpen ? t('collapseSidePanel') : t('expandSidePanel')}
className={classes.toggle}
onClick={() => { setCompanionAreaOpen(windowId, !companionAreaOpen); }}
>
- { companionAreaOpen ? <ArrowLeftIcon /> : <ArrowRightIcon /> }
- </IconButton>
+ {companionAreaOpen ? <ArrowLeftIcon /> : <ArrowRightIcon />}
+ </MiradorMenuButton>
)
}
<div className={[ns('companion-windows'), this.areaLayoutClass()].join(' ')} style={{ display: companionAreaOpen && (position !== 'left' || sideBarOpen) ? 'flex' : 'none' }}>
@@ -57,6 +58,7 @@ CompanionArea.propTypes = {
sideBarOpen: PropTypes.bool,
companionAreaOpen: PropTypes.bool,
setCompanionAreaOpen: PropTypes.func,
+ t: PropTypes.func.isRequired,
};
CompanionArea.defaultProps = {
diff --git a/src/components/CompanionWindow.js b/src/components/CompanionWindow.js
index b474e90faf63174b955908be5394a82cab079023..a799f08818afc43b1f17ac1cfaac80a7afa70e4e 100644
--- a/src/components/CompanionWindow.js
+++ b/src/components/CompanionWindow.js
@@ -1,13 +1,13 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import CloseIcon from '@material-ui/icons/CloseSharp';
-import IconButton from '@material-ui/core/IconButton';
import OpenInNewIcon from '@material-ui/icons/OpenInNewSharp';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import Toolbar from '@material-ui/core/Toolbar';
import ThumbnailNavigationBottomIcon from './icons/ThumbnailNavigationBottomIcon';
import ThumbnailNavigationRightIcon from './icons/ThumbnailNavigationRightIcon';
+import { MiradorMenuButton } from './MiradorMenuButton';
import ns from '../config/css-ns';
/**
@@ -46,35 +46,33 @@ export class CompanionWindow extends Component {
position === 'left'
? updateCompanionWindow
&& (
- <>
- <IconButton
- aria-label={t('openInCompanionWindow')}
- onClick={() => { updateCompanionWindow(windowId, id, { position: 'right' }); }}
- >
- <OpenInNewIcon />
- </IconButton>
- </>
+ <MiradorMenuButton
+ aria-label={t('openInCompanionWindow')}
+ onClick={() => { updateCompanionWindow(windowId, id, { position: 'right' }); }}
+ >
+ <OpenInNewIcon />
+ </MiradorMenuButton>
)
: (
<>
{
updateCompanionWindow && (
- <IconButton
+ <MiradorMenuButton
+ aria-label={position === 'bottom' ? t('moveCompanionWindowToRight') : t('moveCompanionWindowToBottom')}
className={classes.positionButton}
- aria-label={t('openInCompanionWindow')}
onClick={() => { updateCompanionWindow(windowId, id, { position: position === 'bottom' ? 'right' : 'bottom' }); }}
>
- { position === 'bottom' ? <ThumbnailNavigationRightIcon /> : <ThumbnailNavigationBottomIcon /> }
- </IconButton>
+ {position === 'bottom' ? <ThumbnailNavigationRightIcon /> : <ThumbnailNavigationBottomIcon />}
+ </MiradorMenuButton>
)
}
- <IconButton
+ <MiradorMenuButton
aria-label={t('closeCompanionWindow')}
className={classes.closeButton}
onClick={onCloseClick}
>
<CloseIcon />
- </IconButton>
+ </MiradorMenuButton>
</>
)
}
diff --git a/src/components/MiradorMenuButton.js b/src/components/MiradorMenuButton.js
index c60bb628d2d4aeadfb6e78b94cca0562f3b8a6cb..3f737ddd318bf07dbe77f2b85674edbe5daba400 100644
--- a/src/components/MiradorMenuButton.js
+++ b/src/components/MiradorMenuButton.js
@@ -11,7 +11,7 @@ import Tooltip from '@material-ui/core/Tooltip';
*/
export function MiradorMenuButton(props) {
const { 'aria-label': ariaLabel } = props;
- const { icon, ...iconButtonProps } = props;
+ const { children, ...iconButtonProps } = props;
return (
<Tooltip title={ariaLabel}>
@@ -20,7 +20,7 @@ export function MiradorMenuButton(props) {
(e.g. show the tooltip) even if the IconButton is disabled
*/}
<span>
- <IconButton {...iconButtonProps}>{icon}</IconButton>
+ <IconButton {...iconButtonProps}>{children}</IconButton>
</span>
</Tooltip>
);
@@ -28,5 +28,5 @@ export function MiradorMenuButton(props) {
MiradorMenuButton.propTypes = {
'aria-label': PropTypes.string.isRequired,
- icon: PropTypes.element.isRequired,
+ children: PropTypes.element.isRequired,
};
diff --git a/src/components/ViewerNavigation.js b/src/components/ViewerNavigation.js
index 2dce57810406f0d1875e0e82f0f4f83a28032d5a..de84484d1fa6e8648e25613f280be26ec919c855 100644
--- a/src/components/ViewerNavigation.js
+++ b/src/components/ViewerNavigation.js
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
-import IconButton from '@material-ui/core/IconButton';
import NavigationIcon from '@material-ui/icons/PlayCircleOutlineSharp';
import PropTypes from 'prop-types';
+import { MiradorMenuButton } from './MiradorMenuButton';
import ns from '../config/css-ns';
/**
@@ -68,22 +68,22 @@ export class ViewerNavigation extends Component {
return (
<div className={ns('osd-navigation')}>
- <IconButton
+ <MiradorMenuButton
+ aria-label={t('previousCanvas')}
className={ns('previous-canvas-button')}
disabled={!this.hasPreviousCanvas()}
onClick={this.previousCanvas}
- aria-label={t('previousCanvas')}
>
<NavigationIcon style={{ transform: 'rotate(180deg)' }} />
- </IconButton>
- <IconButton
+ </MiradorMenuButton>
+ <MiradorMenuButton
+ aria-label={t('nextCanvas')}
className={ns('next-canvas-button')}
disabled={!this.hasNextCanvas()}
onClick={this.nextCanvas}
- aria-label={t('nextCanvas')}
>
<NavigationIcon />
- </IconButton>
+ </MiradorMenuButton>
</div>
);
}
diff --git a/src/components/WindowTopBar.js b/src/components/WindowTopBar.js
index 7488297ee7371d3ef8a2418c2f1f0028f94bd8a0..f4de6ebc66ca84f85ce24b50e8a6a201c2301750 100644
--- a/src/components/WindowTopBar.js
+++ b/src/components/WindowTopBar.js
@@ -1,7 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Typography from '@material-ui/core/Typography';
-import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/MenuSharp';
import CloseIcon from '@material-ui/icons/CloseSharp';
import FullscreenIcon from '@material-ui/icons/FullscreenSharp';
@@ -11,6 +10,7 @@ import AppBar from '@material-ui/core/AppBar';
import classNames from 'classnames';
import WindowTopMenuButton from '../containers/WindowTopMenuButton';
import WindowTopBarButtons from '../containers/WindowTopBarButtons';
+import { MiradorMenuButton } from './MiradorMenuButton';
import ns from '../config/css-ns';
@@ -30,36 +30,34 @@ export class WindowTopBar extends Component {
return (
<AppBar position="relative">
<Toolbar disableGutters className={classNames(classes.windowTopBarStyle, ns('window-top-bar'))} variant="dense">
- <IconButton
+ <MiradorMenuButton
aria-label={t('toggleWindowSideBar')}
color="inherit"
onClick={toggleWindowSideBar}
>
<MenuIcon />
- </IconButton>
+ </MiradorMenuButton>
<Typography variant="h2" noWrap color="inherit" className={classes.title}>
{manifestTitle}
</Typography>
<WindowTopBarButtons windowId={windowId} />
<WindowTopMenuButton className={ns('window-menu-btn')} windowId={windowId} />
- <IconButton
- color="inherit"
- className={ns('window-maximize')}
+ <MiradorMenuButton
aria-label={t('maximizeWindow')}
+ className={ns('window-maximize')}
+ color="inherit"
onClick={(maximized ? minimizeWindow : maximizeWindow)}
>
- {maximized
- ? <FullscreenExitIcon />
- : <FullscreenIcon />}
- </IconButton>
- <IconButton
- color="inherit"
- className={ns('window-close')}
+ {(maximized ? <FullscreenExitIcon /> : <FullscreenIcon />)}
+ </MiradorMenuButton>
+ <MiradorMenuButton
aria-label={t('closeWindow')}
+ className={ns('window-close')}
+ color="inherit"
onClick={removeWindow}
>
<CloseIcon />
- </IconButton>
+ </MiradorMenuButton>
</Toolbar>
</AppBar>
);
diff --git a/src/components/WindowTopMenuButton.js b/src/components/WindowTopMenuButton.js
index a5b90377ac93a3847a85f770a7341da0039fa189..61dd7091f811bf6aa0e0d5b7904d199839b46769 100644
--- a/src/components/WindowTopMenuButton.js
+++ b/src/components/WindowTopMenuButton.js
@@ -1,9 +1,9 @@
import React, { Component } from 'react';
-import IconButton from '@material-ui/core/IconButton';
import MoreVertIcon from '@material-ui/icons/MoreVertSharp';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import WindowTopMenu from '../containers/WindowTopMenu';
+import { MiradorMenuButton } from './MiradorMenuButton';
/**
*/
@@ -48,16 +48,16 @@ export class WindowTopMenuButton extends Component {
return (
<>
- <IconButton
- color="inherit"
+ <MiradorMenuButton
+ aria-haspopup="true"
aria-label={t('windowMenu')}
+ aria-owns={anchorEl ? `window-menu_${windowId}` : undefined}
className={classNames(classes.ctrlBtn, (anchorEl ? classes.ctrlBtnSelected : null))}
- aria-haspopup="true"
+ color="inherit"
onClick={this.handleMenuClick}
- aria-owns={anchorEl ? `window-menu_${windowId}` : undefined}
>
<MoreVertIcon />
- </IconButton>
+ </MiradorMenuButton>
<WindowTopMenu
windowId={windowId}
anchorEl={anchorEl}
diff --git a/src/components/WorkspaceAdd.js b/src/components/WorkspaceAdd.js
index f2c8634e318b6b210d70d5db80633536768f4b39..81adbf9caf1ef58d3e57442e63f1b374c45cf259 100644
--- a/src/components/WorkspaceAdd.js
+++ b/src/components/WorkspaceAdd.js
@@ -6,7 +6,6 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMoreSharp';
import AppBar from '@material-ui/core/AppBar';
import Drawer from '@material-ui/core/Drawer';
import Fab from '@material-ui/core/Fab';
-import IconButton from '@material-ui/core/IconButton';
import List from '@material-ui/core/List';
import Paper from '@material-ui/core/Paper';
import Toolbar from '@material-ui/core/Toolbar';
@@ -14,6 +13,7 @@ import Typography from '@material-ui/core/Typography';
import ns from '../config/css-ns';
import ManifestForm from '../containers/ManifestForm';
import ManifestListItem from '../containers/ManifestListItem';
+import { MiradorMenuButton } from './MiradorMenuButton';
/**
* An area for managing manifests and adding them to workspace
@@ -91,9 +91,13 @@ export class WorkspaceAdd extends React.Component {
>
<AppBar position="absolute" color="secondary" onClick={() => (this.setAddResourcesVisibility(false))}>
<Toolbar>
- <IconButton className={classes.menuButton} color="inherit" aria-label={t('closeAddResourceMenu')}>
+ <MiradorMenuButton
+ aria-label={t('closeAddResourceMenu')}
+ className={classes.menuButton}
+ color="inherit"
+ >
<ExpandMoreIcon />
- </IconButton>
+ </MiradorMenuButton>
<Typography variant="h2" noWrap color="inherit" className={classes.typographyBody}>
{t('addResource')}
</Typography>
diff --git a/src/components/WorkspaceFullScreenButton.js b/src/components/WorkspaceFullScreenButton.js
index 0b0d30bcc180ce486c57c3ea534e59c47cbe859f..09fd5528144325ede9faed174e9e7f9c3bc1255a 100644
--- a/src/components/WorkspaceFullScreenButton.js
+++ b/src/components/WorkspaceFullScreenButton.js
@@ -1,9 +1,8 @@
import React, { Component } from 'react';
-import IconButton from '@material-ui/core/IconButton';
import FullscreenIcon from '@material-ui/icons/FullscreenSharp';
import FullscreenExitIcon from '@material-ui/icons/FullscreenExitSharp';
import PropTypes from 'prop-types';
-
+import { MiradorMenuButton } from './MiradorMenuButton';
/**
*/
export class WorkspaceFullScreenButton extends Component {
@@ -16,17 +15,13 @@ export class WorkspaceFullScreenButton extends Component {
classes, isFullscreenEnabled, setWorkspaceFullscreen, t,
} = this.props;
return (
- <IconButton
- className={classes.ctrlBtn}
+ <MiradorMenuButton
aria-label={isFullscreenEnabled ? t('exitFullScreen') : t('workspaceFullScreen')}
+ className={classes.ctrlBtn}
onClick={() => setWorkspaceFullscreen(!isFullscreenEnabled)}
>
- {
- isFullscreenEnabled
- ? <FullscreenExitIcon />
- : <FullscreenIcon />
- }
- </IconButton>
+ {isFullscreenEnabled ? <FullscreenExitIcon /> : <FullscreenIcon />}
+ </MiradorMenuButton>
);
}
}
diff --git a/src/components/WorkspaceMenuButton.js b/src/components/WorkspaceMenuButton.js
index 6357d5a33862b62312bddb8f579b9927e7f0a171..18980d48b8831fd14876206de704014889653425 100644
--- a/src/components/WorkspaceMenuButton.js
+++ b/src/components/WorkspaceMenuButton.js
@@ -1,9 +1,9 @@
import React, { Component } from 'react';
-import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/MenuSharp';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import WorkspaceMenu from '../containers/WorkspaceMenu';
+import { MiradorMenuButton } from './MiradorMenuButton';
/**
*/
@@ -48,17 +48,16 @@ export class WorkspaceMenuButton extends Component {
return (
<>
- <IconButton
- color="default"
- id="menuBtn"
+ <MiradorMenuButton
+ aria-haspopup="true"
aria-label={t('workspaceMenu')}
+ aria-owns={anchorEl ? 'workspace-menu' : undefined}
className={classNames(classes.ctrlBtn, (anchorEl ? classes.ctrlBtnSelected : null))}
- aria-haspopup="true"
+ id="menuBtn"
onClick={this.handleMenuClick}
- aria-owns={anchorEl ? 'workspace-menu' : undefined}
>
<MenuIcon />
- </IconButton>
+ </MiradorMenuButton>
<WorkspaceMenu
anchorEl={anchorEl}
handleClose={this.handleMenuClose}
diff --git a/src/components/ZoomControls.js b/src/components/ZoomControls.js
index 718a9ec9fd9cd2a7eed4e084dee4908b7cee7848..591f8a5cf22a54932a57233da2ecbbfe2c7b993e 100644
--- a/src/components/ZoomControls.js
+++ b/src/components/ZoomControls.js
@@ -1,9 +1,10 @@
import React, { Component } from 'react';
-import IconButton from '@material-ui/core/IconButton';
import AddCircleIcon from '@material-ui/icons/AddCircleOutlineSharp';
import RemoveCircleIcon from '@material-ui/icons/RemoveCircleOutlineSharp';
import PropTypes from 'prop-types';
import RestoreZoomIcon from './icons/RestoreZoomIcon';
+import { MiradorMenuButton } from './MiradorMenuButton';
+
/**
*/
export class ZoomControls extends Component {
@@ -72,15 +73,15 @@ export class ZoomControls extends Component {
}
return (
<div className={classes.zoom_controls}>
- <IconButton aria-label={t('zoomIn')} onClick={this.handleZoomInClick}>
+ <MiradorMenuButton aria-label={t('zoomIn')} onClick={this.handleZoomInClick}>
<AddCircleIcon />
- </IconButton>
- <IconButton aria-label={t('zoomOut')} onClick={this.handleZoomOutClick}>
+ </MiradorMenuButton>
+ <MiradorMenuButton aria-label={t('zoomOut')} onClick={this.handleZoomOutClick}>
<RemoveCircleIcon />
- </IconButton>
- <IconButton aria-label={t('zoomReset')} onClick={this.handleZoomResetClick}>
+ </MiradorMenuButton>
+ <MiradorMenuButton aria-label={t('zoomReset')} onClick={this.handleZoomResetClick}>
<RestoreZoomIcon />
- </IconButton>
+ </MiradorMenuButton>
</div>
);
}
diff --git a/src/containers/CompanionArea.js b/src/containers/CompanionArea.js
index 90c4c6b81ea1f4fcf1c77cde6f44617199341954..253e5d7e74829350e6c3f2624c90c26d8fe33dce 100644
--- a/src/containers/CompanionArea.js
+++ b/src/containers/CompanionArea.js
@@ -1,6 +1,7 @@
import { compose } from 'redux';
import { connect } from 'react-redux';
import { withStyles } from '@material-ui/core';
+import { withTranslation } from 'react-i18next';
import { getCompanionWindowsOfWindow } from '../state/selectors';
import * as actions from '../state/actions';
import { CompanionArea } from '../components/CompanionArea';
@@ -42,6 +43,7 @@ const styles = theme => ({
});
const enhance = compose(
+ withTranslation(),
withStyles(styles),
connect(mapStateToProps, mapDispatchToProps),
);