From 0f156b7effdb9b3e43f36c2aec36867d5fdcf674 Mon Sep 17 00:00:00 2001 From: Christopher Hanna Johnson <chjohnson39@gmail.com> Date: Fri, 22 Feb 2019 15:47:24 +0100 Subject: [PATCH] moves withStyles to containers (#1949) * moves withStyles to containers removes dive where applied and modifies tests closes #1948 * adds jsdoc to styles --- __tests__/src/components/App.test.js | 4 +-- .../src/components/CompanionWindow.test.js | 2 +- .../src/components/ManifestListItem.test.js | 2 +- .../components/ManifestListItemError.test.js | 3 +- .../src/components/WindowSideBar.test.js | 2 +- .../WindowSideBarCanvasPanel.test.js | 2 +- .../components/WindowSideBarInfoPanel.test.js | 4 +-- __tests__/src/components/WindowTopBar.test.js | 2 +- .../components/WindowTopMenuButton.test.js | 2 +- __tests__/src/components/WorkspaceAdd.test.js | 14 ++++---- .../src/components/WorkspaceAddButton.test.js | 2 +- .../components/WorkspaceControlPanel.test.js | 7 +++- .../WorkspaceFullScreenButton.test.js | 2 +- .../components/WorkspaceMenuButton.test.js | 2 +- __tests__/src/components/ZoomControls.test.js | 6 ++-- src/components/App.js | 16 +++------ src/components/CompanionWindow.js | 19 +--------- src/components/ManifestListItem.js | 14 +------- src/components/ManifestListItemError.js | 18 +--------- src/components/WindowSideBar.js | 21 +---------- src/components/WindowSideBarCanvasPanel.js | 18 +--------- src/components/WindowSideBarInfoPanel.js | 11 +----- src/components/WindowTopBar.js | 14 +------- src/components/WindowTopMenuButton.js | 12 +------ src/components/WorkspaceAdd.js | 26 +------------- src/components/WorkspaceAddButton.js | 12 +------ src/components/WorkspaceControlPanel.js | 16 +-------- src/components/WorkspaceFullScreenButton.js | 12 +------ src/components/WorkspaceMenuButton.js | 12 +------ src/components/ZoomControls.js | 17 +-------- src/containers/App.js | 14 +++++++- src/containers/CompanionWindow.js | 24 +++++++++++-- src/containers/ManifestForm.js | 3 +- src/containers/ManifestListItem.js | 20 +++++++++-- src/containers/ManifestListItemError.js | 22 ++++++++++-- src/containers/WindowIcon.js | 16 ++++++++- src/containers/WindowList.js | 3 +- src/containers/WindowSideBar.js | 23 +++++++++++- src/containers/WindowSideBarButtons.js | 3 +- src/containers/WindowSideBarCanvasPanel.js | 21 ++++++++++- src/containers/WindowSideBarInfoPanel.js | 15 ++++++-- src/containers/WindowSideBarPanel.js | 3 +- src/containers/WindowThumbnailSettings.js | 2 +- src/containers/WindowTopBar.js | 17 +++++++-- src/containers/WindowTopMenuButton.js | 14 +++++++- src/containers/WindowViewSettings.js | 3 +- src/containers/WorkspaceAdd.js | 35 +++++++++++++++++-- src/containers/WorkspaceAddButton.js | 15 +++++++- src/containers/WorkspaceControlPanel.js | 20 +++++++++++ src/containers/WorkspaceExport.js | 3 +- src/containers/WorkspaceFullScreenButton.js | 16 +++++++-- src/containers/WorkspaceMenu.js | 3 +- src/containers/WorkspaceMenuButton.js | 13 +++++++ src/containers/WorkspaceSettings.js | 3 +- src/containers/ZoomControls.js | 23 ++++++++++-- 55 files changed, 345 insertions(+), 283 deletions(-) create mode 100644 src/containers/WorkspaceControlPanel.js diff --git a/__tests__/src/components/App.test.js b/__tests__/src/components/App.test.js index b992db59b..0a84c0f45 100644 --- a/__tests__/src/components/App.test.js +++ b/__tests__/src/components/App.test.js @@ -2,7 +2,7 @@ import React from 'react'; import { shallow } from 'enzyme'; import { MuiThemeProvider } from '@material-ui/core/styles'; import Fullscreen from 'react-fullscreen-crossbrowser'; -import WorkspaceControlPanel from '../../../src/components/WorkspaceControlPanel'; +import WorkspaceControlPanel from '../../../src/containers/WorkspaceControlPanel'; import Workspace from '../../../src/containers/Workspace'; import WorkspaceAdd from '../../../src/containers/WorkspaceAdd'; import App from '../../../src/components/App'; @@ -21,7 +21,7 @@ function createWrapper(props) { classes={{}} {...props} />, - ).dive(); // to unwrapp HOC created by withStyle() + ); } describe('App', () => { diff --git a/__tests__/src/components/CompanionWindow.test.js b/__tests__/src/components/CompanionWindow.test.js index f155abd8e..13ba8c1de 100644 --- a/__tests__/src/components/CompanionWindow.test.js +++ b/__tests__/src/components/CompanionWindow.test.js @@ -14,7 +14,7 @@ function createWrapper(props) { position="right" {...props} />, - ).dive(); // unwrap HOC created by withStyles() + ); } describe('CompanionWindow', () => { diff --git a/__tests__/src/components/ManifestListItem.test.js b/__tests__/src/components/ManifestListItem.test.js index f3c85f267..142af43e4 100644 --- a/__tests__/src/components/ManifestListItem.test.js +++ b/__tests__/src/components/ManifestListItem.test.js @@ -15,7 +15,7 @@ function createWrapper(props) { t={t => t} {...props} />, - ).dive(); // to unwrapp HOC created by withStyle() + ); } describe('ManifestListItem', () => { diff --git a/__tests__/src/components/ManifestListItemError.test.js b/__tests__/src/components/ManifestListItemError.test.js index 9606b3de0..5d84fd79a 100644 --- a/__tests__/src/components/ManifestListItemError.test.js +++ b/__tests__/src/components/ManifestListItemError.test.js @@ -9,13 +9,14 @@ import ManifestListItemError from '../../../src/components/ManifestListItemError function createWrapper(props) { return shallow( <ManifestListItemError + classes={{}} manifestId="http://example.com" onDismissClick={() => {}} onTryAgainClick={() => {}} t={key => key} {...props} />, - ).dive(); // unwrap HOC created by withStyles() + ); } describe('ManifestListItemError', () => { diff --git a/__tests__/src/components/WindowSideBar.test.js b/__tests__/src/components/WindowSideBar.test.js index 74d0d0150..be0694041 100644 --- a/__tests__/src/components/WindowSideBar.test.js +++ b/__tests__/src/components/WindowSideBar.test.js @@ -5,7 +5,7 @@ import WindowSideBar from '../../../src/components/WindowSideBar'; describe('WindowSideBar', () => { let wrapper; beforeEach(() => { - wrapper = shallow(<WindowSideBar windowId="1" classes={{}} />).dive(); + wrapper = shallow(<WindowSideBar windowId="1" classes={{}} />); }); it('renders without an error', () => { diff --git a/__tests__/src/components/WindowSideBarCanvasPanel.test.js b/__tests__/src/components/WindowSideBarCanvasPanel.test.js index 8f1de0a17..3ca22f646 100644 --- a/__tests__/src/components/WindowSideBarCanvasPanel.test.js +++ b/__tests__/src/components/WindowSideBarCanvasPanel.test.js @@ -27,7 +27,7 @@ describe('WindowSideBarCanvasPanel', () => { setCanvas={setCanvas} config={{ canvasNavigation: { height: 100 } }} />, - ).dive(); + ); }); it('renders all needed elements', () => { diff --git a/__tests__/src/components/WindowSideBarInfoPanel.test.js b/__tests__/src/components/WindowSideBarInfoPanel.test.js index c9cbc2cb7..ec625de88 100644 --- a/__tests__/src/components/WindowSideBarInfoPanel.test.js +++ b/__tests__/src/components/WindowSideBarInfoPanel.test.js @@ -21,7 +21,7 @@ describe('WindowSideBarInfoPanel', () => { manifestMetadata={metadata} t={str => str} />, - ).dive(); + ); }); it('renders header', () => { @@ -89,7 +89,7 @@ describe('WindowSideBarInfoPanel', () => { beforeEach(() => { wrapper = shallow( <WindowSideBarInfoPanel />, - ).dive(); + ); }); it('does render header', () => { diff --git a/__tests__/src/components/WindowTopBar.test.js b/__tests__/src/components/WindowTopBar.test.js index 4fe237023..94c0c0f2d 100644 --- a/__tests__/src/components/WindowTopBar.test.js +++ b/__tests__/src/components/WindowTopBar.test.js @@ -24,7 +24,7 @@ function createWrapper(props) { toggleWindowSideBar={() => {}} {...props} />, - ).dive(); // unwrap HOC created by withStyles() + ); } describe('WindowTopBar', () => { diff --git a/__tests__/src/components/WindowTopMenuButton.test.js b/__tests__/src/components/WindowTopMenuButton.test.js index 4a0dea265..7da21e820 100644 --- a/__tests__/src/components/WindowTopMenuButton.test.js +++ b/__tests__/src/components/WindowTopMenuButton.test.js @@ -14,7 +14,7 @@ function createWrapper(props) { t={str => str} {...props} />, - ).dive(); // unwrap HOC created by withStyles() + ); } describe('WindowTopMenuButton', () => { diff --git a/__tests__/src/components/WorkspaceAdd.test.js b/__tests__/src/components/WorkspaceAdd.test.js index 91a63ca19..cd0c32b0e 100644 --- a/__tests__/src/components/WorkspaceAdd.test.js +++ b/__tests__/src/components/WorkspaceAdd.test.js @@ -1,7 +1,9 @@ import React from 'react'; import { shallow } from 'enzyme'; import WorkspaceAdd from '../../../src/components/WorkspaceAdd'; +import ManifestListItem from '../../../src/containers/ManifestListItem'; import fixture from '../../fixtures/version-2/002.json'; +import ManifestForm from '../../../src/containers/ManifestForm'; /** create wrapper */ function createWrapper(props) { @@ -13,20 +15,20 @@ function createWrapper(props) { t={str => str} {...props} />, - ).dive(); + ); } -describe('WorkspaceAddButton', () => { +describe('WorkspaceAdd', () => { it('renders a list item for each manifest in the state', () => { const wrapper = createWrapper(); - expect(wrapper.find('Connect(LoadNamespace(WithStyles(ManifestListItem)))').length).toBe(2); + expect(wrapper.find(ManifestListItem).length).toBe(2); }); it('toggles the workspace visibility', () => { const setWorkspaceAddVisibility = jest.fn(); const wrapper = createWrapper({ setWorkspaceAddVisibility }); - wrapper.find('Connect(LoadNamespace(WithStyles(ManifestListItem)))').first().props().handleClose(); + wrapper.find(ManifestListItem).first().props().handleClose(); expect(setWorkspaceAddVisibility).toHaveBeenCalledWith(false); }); @@ -54,8 +56,8 @@ describe('WorkspaceAddButton', () => { const wrapper = createWrapper(); wrapper.setState({ addResourcesOpen: true }); - expect(wrapper.find('WithStyles(Drawer) Connect(LoadNamespace(ManifestForm))').length).toBe(1); - wrapper.find('WithStyles(Drawer) Connect(LoadNamespace(ManifestForm))').props().onCancel(); + expect(wrapper.find('WithStyles(Drawer)').find(ManifestForm).length).toBe(1); + wrapper.find('WithStyles(Drawer)').find(ManifestForm).props().onCancel(); expect(wrapper.find('WithStyles(Drawer)').props().open).toBe(false); }); }); diff --git a/__tests__/src/components/WorkspaceAddButton.test.js b/__tests__/src/components/WorkspaceAddButton.test.js index 7ab45d043..9c1fea083 100644 --- a/__tests__/src/components/WorkspaceAddButton.test.js +++ b/__tests__/src/components/WorkspaceAddButton.test.js @@ -13,7 +13,7 @@ function createWrapper(props) { t={str => str} {...props} />, - ).dive(); // unwrap HOC created by withStyles() + ); } describe('WorkspaceAddButton', () => { diff --git a/__tests__/src/components/WorkspaceControlPanel.test.js b/__tests__/src/components/WorkspaceControlPanel.test.js index 8da2654d1..31e59d0a4 100644 --- a/__tests__/src/components/WorkspaceControlPanel.test.js +++ b/__tests__/src/components/WorkspaceControlPanel.test.js @@ -11,7 +11,12 @@ describe('WorkspaceControlPanel', () => { beforeEach(() => { store.dispatch(actions.receiveManifest('foo', fixture)); store.dispatch(actions.receiveManifest('bar', fixture)); - wrapper = shallow(<WorkspaceControlPanel store={store} />).dive(); + wrapper = shallow( + <WorkspaceControlPanel + classes={{}} + store={store} + />, + ); }); it('renders without an error', () => { diff --git a/__tests__/src/components/WorkspaceFullScreenButton.test.js b/__tests__/src/components/WorkspaceFullScreenButton.test.js index 4fcb48a6b..88598ae50 100644 --- a/__tests__/src/components/WorkspaceFullScreenButton.test.js +++ b/__tests__/src/components/WorkspaceFullScreenButton.test.js @@ -12,7 +12,7 @@ describe('WorkspaceFullScreenButton', () => { classes={{}} setWorkspaceFullscreen={setWorkspaceFullscreen} />, - ).dive(); + ); }); it('renders without an error', () => { diff --git a/__tests__/src/components/WorkspaceMenuButton.test.js b/__tests__/src/components/WorkspaceMenuButton.test.js index 9d127c5c7..ba48a869e 100644 --- a/__tests__/src/components/WorkspaceMenuButton.test.js +++ b/__tests__/src/components/WorkspaceMenuButton.test.js @@ -7,7 +7,7 @@ describe('WorkspaceMenuButton', () => { beforeEach(() => { wrapper = shallow( <WorkspaceMenuButton classes={{}} />, - ).dive(); + ); }); it('renders without an error', () => { diff --git a/__tests__/src/components/ZoomControls.test.js b/__tests__/src/components/ZoomControls.test.js index ad3cc9910..1b8efb89d 100644 --- a/__tests__/src/components/ZoomControls.test.js +++ b/__tests__/src/components/ZoomControls.test.js @@ -12,12 +12,13 @@ describe('ZoomControls', () => { updateViewport = jest.fn(); wrapper = shallow( <ZoomControls + classes={{}} windowId="xyz" viewer={viewer} showZoomControls={showZoomControls} updateViewport={updateViewport} />, - ).dive(); + ); }); describe('with showZoomControls=false', () => { @@ -32,12 +33,13 @@ describe('ZoomControls', () => { updateViewport = jest.fn(); wrapper = shallow( <ZoomControls + classes={{}} windowId="xyz" viewer={viewer} showZoomControls updateViewport={updateViewport} />, - ).dive(); + ); }); it('renders a couple buttons', () => { diff --git a/src/components/App.js b/src/components/App.js index e4b236f02..cee00e4bc 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,10 +1,10 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { MuiThemeProvider, createMuiTheme, withStyles } from '@material-ui/core/styles'; +import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; import Fullscreen from 'react-fullscreen-crossbrowser'; import { I18nextProvider } from 'react-i18next'; -import WorkspaceControlPanel from './WorkspaceControlPanel'; +import WorkspaceControlPanel from '../containers/WorkspaceControlPanel'; import Workspace from '../containers/Workspace'; import WorkspaceAdd from '../containers/WorkspaceAdd'; import ns from '../config/css-ns'; @@ -68,14 +68,6 @@ App.defaultProps = { isFullscreenEnabled: false, isWorkspaceAddVisible: false, }; -/** - Material UI style overrides - @private - */ -const styles = theme => ({ - background: { - background: theme.palette.background.default, - }, -}); -export default withStyles(styles)(App); + +export default App; diff --git a/src/components/CompanionWindow.js b/src/components/CompanionWindow.js index b26f2f84c..4e373821a 100644 --- a/src/components/CompanionWindow.js +++ b/src/components/CompanionWindow.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import CloseIcon from '@material-ui/icons/Close'; import IconButton from '@material-ui/core/IconButton'; import Paper from '@material-ui/core/Paper'; -import { withStyles } from '@material-ui/core/styles'; import ns from '../config/css-ns'; import WindowSideBarInfoPanel from '../containers/WindowSideBarInfoPanel'; import WindowSideBarCanvasPanel from '../containers/WindowSideBarCanvasPanel'; @@ -76,20 +75,4 @@ CompanionWindow.defaultProps = { t: key => key, }; -/** - * Styles for Material-UI HOC - */ -const styles = theme => ({ - closeButton: { - position: 'absolute', - right: 0, - top: 0, - }, - root: { - ...theme.mixins.gutters(), - width: '200px', - overflowY: 'scroll', - }, -}); - -export default withStyles(styles)(CompanionWindow); +export default CompanionWindow; diff --git a/src/components/ManifestListItem.js b/src/components/ManifestListItem.js index 6f91563f5..c827ef8c5 100644 --- a/src/components/ManifestListItem.js +++ b/src/components/ManifestListItem.js @@ -1,6 +1,5 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; import Paper from '@material-ui/core/Paper'; import ButtonBase from '@material-ui/core/ButtonBase'; import Grid from '@material-ui/core/Grid'; @@ -161,15 +160,4 @@ ManifestListItem.defaultProps = { isFetching: false, }; -/** */ -const styles = theme => ({ - root: { - ...theme.mixins.gutters(), - }, - label: { - textTransform: 'initial', - textAlign: 'left', - }, -}); - -export default withStyles(styles)(ManifestListItem); +export default ManifestListItem; diff --git a/src/components/ManifestListItemError.js b/src/components/ManifestListItemError.js index 2d4c82df3..24c1f419e 100644 --- a/src/components/ManifestListItemError.js +++ b/src/components/ManifestListItemError.js @@ -4,7 +4,6 @@ import Button from '@material-ui/core/Button'; import ErrorIcon from '@material-ui/icons/ErrorOutline'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; -import { withStyles } from '@material-ui/core/styles'; /** * ManifestListItemError renders a component displaying a @@ -61,19 +60,4 @@ ManifestListItemError.propTypes = { t: PropTypes.func.isRequired, }; -/** - Material UI styles - @private - */ -const styles = theme => ({ - errorIcon: { - color: theme.palette.error.main, - height: '2rem', - width: '2rem', - }, - manifestIdText: { - wordBreak: 'break-all', - }, -}); - -export default withStyles(styles)(ManifestListItemError); +export default ManifestListItemError; diff --git a/src/components/WindowSideBar.js b/src/components/WindowSideBar.js index 5d6e00d7a..77dba007c 100644 --- a/src/components/WindowSideBar.js +++ b/src/components/WindowSideBar.js @@ -2,7 +2,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import Drawer from '@material-ui/core/Drawer'; -import { withStyles } from '@material-ui/core/styles'; import List from '@material-ui/core/List'; import WindowSideBarButtons from '../containers/WindowSideBarButtons'; import WindowSideBarPanel from '../containers/WindowSideBarPanel'; @@ -74,22 +73,4 @@ WindowSideBar.defaultProps = { sideBarPanel: 'closed', }; -/** - Material UI style overrides - @private - */ -const styles = theme => ({ - toolbar: theme.mixins.toolbar, - drawer: { - overflowX: 'hidden', - left: 0, - width: 55, - flexShrink: 0, - height: '100%', - }, - grow: { - flexGrow: 1, - }, -}); - -export default withStyles(styles)(WindowSideBar); +export default WindowSideBar; diff --git a/src/components/WindowSideBarCanvasPanel.js b/src/components/WindowSideBarCanvasPanel.js index e0e241f5c..b77714480 100644 --- a/src/components/WindowSideBarCanvasPanel.js +++ b/src/components/WindowSideBarCanvasPanel.js @@ -4,7 +4,6 @@ import classNames from 'classnames'; import Typography from '@material-ui/core/Typography'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; -import { withStyles } from '@material-ui/core/styles'; import ValidationCanvas from './ValidationCanvas'; import CanvasThumbnail from './CanvasThumbnail'; import { getIdAndLabelOfCanvases } from '../state/selectors'; @@ -83,19 +82,4 @@ WindowSideBarCanvasPanel.propTypes = { windowId: PropTypes.string.isRequired, }; -/** - * @private - * custom style definitions - */ -const styles = theme => ({ - windowSideBarH2: theme.typography.h5, - clickable: { - cursor: 'pointer', - }, - label: { - fontSize: '8pt', - paddingLeft: 8, - }, -}); - -export default withStyles(styles)(WindowSideBarCanvasPanel); +export default WindowSideBarCanvasPanel; diff --git a/src/components/WindowSideBarInfoPanel.js b/src/components/WindowSideBarInfoPanel.js index 0bdf0f6b5..a93dd6537 100644 --- a/src/components/WindowSideBarInfoPanel.js +++ b/src/components/WindowSideBarInfoPanel.js @@ -2,7 +2,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Divider from '@material-ui/core/Divider'; import Typography from '@material-ui/core/Typography'; -import { withStyles } from '@material-ui/core/styles'; import LabelValueMetadata from './LabelValueMetadata'; import SanitizedHtml from './SanitizedHtml'; import ns from '../config/css-ns'; @@ -96,12 +95,4 @@ WindowSideBarInfoPanel.defaultProps = { t: key => key, }; -/** - * @private - */ -const styles = theme => ({ - windowSideBarH2: theme.typography.h5, - windowSideBarH3: theme.typography.h6, -}); - -export default withStyles(styles)(WindowSideBarInfoPanel); +export default WindowSideBarInfoPanel; diff --git a/src/components/WindowTopBar.js b/src/components/WindowTopBar.js index 846fe9578..61d1942c0 100644 --- a/src/components/WindowTopBar.js +++ b/src/components/WindowTopBar.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/Menu'; @@ -70,15 +69,4 @@ WindowTopBar.defaultProps = { t: key => key, }; -const styles = { - typographyBody: { - flexGrow: 1, - fontSize: '1em', - }, - reallyDense: { - minHeight: 32, - paddingLeft: 4, - }, -}; - -export default withStyles(styles)(WindowTopBar); +export default WindowTopBar; diff --git a/src/components/WindowTopMenuButton.js b/src/components/WindowTopMenuButton.js index a70bbb668..bbef7d000 100644 --- a/src/components/WindowTopMenuButton.js +++ b/src/components/WindowTopMenuButton.js @@ -1,7 +1,6 @@ import React, { Component } from 'react'; import IconButton from '@material-ui/core/IconButton'; import MoreVertIcon from '@material-ui/icons/MoreVert'; -import { withStyles } from '@material-ui/core/styles'; import PropTypes from 'prop-types'; import WindowTopMenu from '../containers/WindowTopMenu'; @@ -78,13 +77,4 @@ WindowTopMenuButton.defaultProps = { t: key => key, }; -/** - * @private - */ -const styles = theme => ({ - ctrlBtn: { - margin: theme.spacing.unit, - }, -}); - -export default withStyles(styles)(WindowTopMenuButton); +export default WindowTopMenuButton; diff --git a/src/components/WorkspaceAdd.js b/src/components/WorkspaceAdd.js index cd02c0766..256581132 100644 --- a/src/components/WorkspaceAdd.js +++ b/src/components/WorkspaceAdd.js @@ -9,7 +9,6 @@ import IconButton from '@material-ui/core/IconButton'; import Paper from '@material-ui/core/Paper'; import Toolbar from '@material-ui/core/Toolbar'; import Typography from '@material-ui/core/Typography'; -import { withStyles } from '@material-ui/core/styles'; import ns from '../config/css-ns'; import ManifestForm from '../containers/ManifestForm'; import ManifestListItem from '../containers/ManifestListItem'; @@ -106,27 +105,4 @@ WorkspaceAdd.defaultProps = { t: key => key, }; -/** */ -const styles = theme => ({ - form: { - ...theme.mixins.gutters(), - paddingTop: theme.spacing.unit * 2, - paddingBottom: theme.spacing.unit * 2, - marginTop: 64, - }, - fab: { - position: 'absolute', - bottom: theme.spacing.unit * 2, - right: theme.spacing.unit * 2, - }, - typographyBody: { - flexGrow: 1, - fontSize: '1em', - }, - menuButton: { - marginLeft: -12, - marginRight: 20, - }, -}); - -export default withStyles(styles)(WorkspaceAdd); +export default WorkspaceAdd; diff --git a/src/components/WorkspaceAddButton.js b/src/components/WorkspaceAddButton.js index 00de5550d..027326832 100644 --- a/src/components/WorkspaceAddButton.js +++ b/src/components/WorkspaceAddButton.js @@ -4,7 +4,6 @@ import ListItem from '@material-ui/core/ListItem'; import Fab from '@material-ui/core/Fab'; import AddIcon from '@material-ui/icons/Add'; import ClearIcon from '@material-ui/icons/Clear'; -import { withStyles } from '@material-ui/core/styles'; /** */ @@ -49,13 +48,4 @@ WorkspaceAddButton.defaultProps = { isWorkspaceAddVisible: false, }; -/** - * @private - */ -const styles = theme => ({ - ctrlBtn: { - margin: theme.spacing.unit, - }, -}); - -export default withStyles(styles)(WorkspaceAddButton); +export default WorkspaceAddButton; diff --git a/src/components/WorkspaceControlPanel.js b/src/components/WorkspaceControlPanel.js index be919a78c..59a89b7d8 100644 --- a/src/components/WorkspaceControlPanel.js +++ b/src/components/WorkspaceControlPanel.js @@ -1,7 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { withStyles } from '@material-ui/core/styles'; import Drawer from '@material-ui/core/Drawer'; import WorkspaceControlPanelButtons from '../containers/WorkspaceControlPanelButtons'; @@ -36,17 +35,4 @@ WorkspaceControlPanel.propTypes = { classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types }; -/** - * @private - */ -const styles = theme => ({ - ctrlBtn: { - margin: theme.spacing.unit, - }, - drawer: { - overflowX: 'hidden', - height: '100%', - }, -}); - -export default withStyles(styles)(WorkspaceControlPanel); +export default WorkspaceControlPanel; diff --git a/src/components/WorkspaceFullScreenButton.js b/src/components/WorkspaceFullScreenButton.js index 96bac8ab1..66867963d 100644 --- a/src/components/WorkspaceFullScreenButton.js +++ b/src/components/WorkspaceFullScreenButton.js @@ -2,7 +2,6 @@ import React, { Component } from 'react'; import IconButton from '@material-ui/core/IconButton'; import FullscreenIcon from '@material-ui/icons/Fullscreen'; import ListItem from '@material-ui/core/ListItem'; -import { withStyles } from '@material-ui/core/styles'; import PropTypes from 'prop-types'; /** @@ -34,13 +33,4 @@ WorkspaceFullScreenButton.defaultProps = { t: key => key, }; -/** - * @private - */ -const styles = theme => ({ - ctrlBtn: { - margin: theme.spacing.unit, - }, -}); - -export default withStyles(styles)(WorkspaceFullScreenButton); +export default WorkspaceFullScreenButton; diff --git a/src/components/WorkspaceMenuButton.js b/src/components/WorkspaceMenuButton.js index 913acac4a..3daaa8970 100644 --- a/src/components/WorkspaceMenuButton.js +++ b/src/components/WorkspaceMenuButton.js @@ -2,7 +2,6 @@ import React, { Component } from 'react'; import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/Menu'; import ListItem from '@material-ui/core/ListItem'; -import { withStyles } from '@material-ui/core/styles'; import PropTypes from 'prop-types'; import WorkspaceMenu from '../containers/WorkspaceMenu'; @@ -80,13 +79,4 @@ WorkspaceMenuButton.defaultProps = { t: key => key, }; -/** - * @private - */ -const styles = theme => ({ - ctrlBtn: { - margin: theme.spacing.unit, - }, -}); - -export default withStyles(styles)(WorkspaceMenuButton); +export default WorkspaceMenuButton; diff --git a/src/components/ZoomControls.js b/src/components/ZoomControls.js index 779032290..1896c60ac 100644 --- a/src/components/ZoomControls.js +++ b/src/components/ZoomControls.js @@ -1,5 +1,4 @@ import React, { Component } from 'react'; -import { withStyles } from '@material-ui/core/styles'; import IconButton from '@material-ui/core/IconButton'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; @@ -117,18 +116,4 @@ ZoomControls.defaultProps = { t: key => key, }; -/** - * @private - */ -const styles = theme => ({ - zoom_controls: { - position: 'absolute', - right: 0, - }, - ListItem: { - paddingTop: 0, - paddingBottom: 0, - }, -}); - -export default withStyles(styles)(ZoomControls); +export default ZoomControls; diff --git a/src/containers/App.js b/src/containers/App.js index 8b7f02d2e..87ebc50d9 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -1,5 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; +import { withStyles } from '@material-ui/core/styles'; import * as actions from '../state/actions'; import App from '../components/App'; @@ -27,9 +28,20 @@ const mapDispatchToProps = { setWorkspaceFullscreen: actions.setWorkspaceFullscreen, }; +/** + * + * @param theme + * @returns {{background: {background: string}}} + */ +const styles = theme => ({ + background: { + background: theme.palette.background.default, + }, +}); + const enhance = compose( + withStyles(styles), connect(mapStateToProps, mapDispatchToProps), - // further HOC go here ); export default enhance(App); diff --git a/src/containers/CompanionWindow.js b/src/containers/CompanionWindow.js index 0572435bf..6f67db4c4 100644 --- a/src/containers/CompanionWindow.js +++ b/src/containers/CompanionWindow.js @@ -1,6 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withNamespaces } from 'react-i18next'; +import { withStyles } from '@material-ui/core'; import * as actions from '../state/actions'; import miradorWithPlugins from '../lib/miradorWithPlugins'; import CompanionWindow from '../components/CompanionWindow'; @@ -30,11 +31,30 @@ const mapDispatchToProps = { onCloseClick: actions.closeCompanionWindow, }; +/** + * + * @param theme + * @returns {{closeButton: {top: number, position: string, right: number}, + * root: {overflowY: string, width: string}}} + */ +const styles = theme => ({ + closeButton: { + position: 'absolute', + right: 0, + top: 0, + }, + root: { + ...theme.mixins.gutters(), + width: '200px', + overflowY: 'scroll', + }, +}); + const enhance = compose( + withNamespaces(), + withStyles(styles), connect(mapStateToProps, mapDispatchToProps), miradorWithPlugins, - withNamespaces(), - // further HOC ); export default enhance(CompanionWindow); diff --git a/src/containers/ManifestForm.js b/src/containers/ManifestForm.js index baae7e3c2..f8c68e390 100644 --- a/src/containers/ManifestForm.js +++ b/src/containers/ManifestForm.js @@ -12,9 +12,8 @@ import ManifestForm from '../components/ManifestForm'; const mapDispatchToProps = { fetchManifest: actions.fetchManifest }; const enhance = compose( - connect(null, mapDispatchToProps), withNamespaces(), - // further HOC go here + connect(null, mapDispatchToProps), ); export default enhance(ManifestForm); diff --git a/src/containers/ManifestListItem.js b/src/containers/ManifestListItem.js index bd49edaf0..da4d5bfd9 100644 --- a/src/containers/ManifestListItem.js +++ b/src/containers/ManifestListItem.js @@ -1,6 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withNamespaces } from 'react-i18next'; +import { withStyles } from '@material-ui/core'; import { getManifestTitle, getManifestLogo, getManifestThumbnail, getManifestCanvases, getManifestProvider, } from '../state/selectors'; @@ -30,10 +31,25 @@ const mapStateToProps = (state, { manifestId }) => { */ const mapDispatchToProps = { addWindow: actions.addWindow, fetchManifest: actions.fetchManifest }; +/** + * + * @param theme + * @returns {{root: {}, label: {textAlign: string, textTransform: string}}} + */ +const styles = theme => ({ + root: { + ...theme.mixins.gutters(), + }, + label: { + textTransform: 'initial', + textAlign: 'left', + }, +}); + const enhance = compose( - connect(mapStateToProps, mapDispatchToProps), withNamespaces(), - // further HOC go here + withStyles(styles), + connect(mapStateToProps, mapDispatchToProps), ); export default enhance(ManifestListItem); diff --git a/src/containers/ManifestListItemError.js b/src/containers/ManifestListItemError.js index 237c17f9b..5aa930fd4 100644 --- a/src/containers/ManifestListItemError.js +++ b/src/containers/ManifestListItemError.js @@ -1,6 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withNamespaces } from 'react-i18next'; +import { withStyles } from '@material-ui/core/styles'; import { fetchManifest, removeManifest } from '../state/actions/manifest'; import ManifestListItemError from '../components/ManifestListItemError'; @@ -10,10 +11,27 @@ const mapDispatchToProps = { onTryAgainClick: fetchManifest, }; +/** + * + * @param theme + * @returns {{manifestIdText: {wordBreak: string}, + * errorIcon: {color: string, width: string, height: string}}} + */ +const styles = theme => ({ + errorIcon: { + color: theme.palette.error.main, + height: '2rem', + width: '2rem', + }, + manifestIdText: { + wordBreak: 'break-all', + }, +}); + const enhance = compose( - connect(null, mapDispatchToProps), withNamespaces(), - // further HOC + withStyles(styles), + connect(null, mapDispatchToProps), ); export default enhance(ManifestListItemError); diff --git a/src/containers/WindowIcon.js b/src/containers/WindowIcon.js index 49e61e703..ac57448d9 100644 --- a/src/containers/WindowIcon.js +++ b/src/containers/WindowIcon.js @@ -1,4 +1,6 @@ import { connect } from 'react-redux'; +import { withStyles } from '@material-ui/core'; +import { compose } from 'redux'; import { getWindowManifest, getManifestLogo } from '../state/selectors'; import WindowIcon from '../components/WindowIcon'; @@ -7,4 +9,16 @@ const mapStateToProps = (state, { windowId }) => ({ manifestLogo: getManifestLogo(getWindowManifest(state, windowId)), }); -export default connect(mapStateToProps)(WindowIcon); +const styles = { + logo: { + height: '2.5rem', + paddingRight: 8, + }, +}; + +const enhance = compose( + withStyles(styles), + connect(mapStateToProps), +); + +export default enhance(WindowIcon); diff --git a/src/containers/WindowList.js b/src/containers/WindowList.js index 86814d210..4679a79c7 100644 --- a/src/containers/WindowList.js +++ b/src/containers/WindowList.js @@ -26,9 +26,8 @@ const mapStateToProps = state => ( ); const enhance = compose( - connect(mapStateToProps, mapDispatchToProps), withNamespaces(), - // further HOC + connect(mapStateToProps, mapDispatchToProps), ); export default enhance(WindowList); diff --git a/src/containers/WindowSideBar.js b/src/containers/WindowSideBar.js index 0a7232205..ab74ea293 100644 --- a/src/containers/WindowSideBar.js +++ b/src/containers/WindowSideBar.js @@ -1,5 +1,6 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; +import { withStyles } from '@material-ui/core'; import miradorWithPlugins from '../lib/miradorWithPlugins'; import WindowSideBar from '../components/WindowSideBar'; @@ -15,10 +16,30 @@ const mapStateToProps = (state, props) => ( } ); +/** + * + * @param theme + * @returns {{toolbar: CSSProperties | toolbar | {minHeight}, grow: {flexGrow: number}, + * drawer: {overflowX: string, left: number, flexShrink: number, width: number, height: string}}} + */ +const styles = theme => ({ + toolbar: theme.mixins.toolbar, + drawer: { + overflowX: 'hidden', + left: 0, + width: 55, + flexShrink: 0, + height: '100%', + }, + grow: { + flexGrow: 1, + }, +}); + const enhance = compose( + withStyles(styles), connect(mapStateToProps, null), miradorWithPlugins, - // further HOC ); export default enhance(WindowSideBar); diff --git a/src/containers/WindowSideBarButtons.js b/src/containers/WindowSideBarButtons.js index b95a16ffd..6347829f0 100644 --- a/src/containers/WindowSideBarButtons.js +++ b/src/containers/WindowSideBarButtons.js @@ -29,10 +29,9 @@ const mapStateToProps = (state, { windowId }) => ({ const enhance = compose( + withNamespaces(), connect(mapStateToProps, mapDispatchToProps), miradorWithPlugins, - withNamespaces(), - // further HOC go here ); export default enhance(WindowSideBarButtons); diff --git a/src/containers/WindowSideBarCanvasPanel.js b/src/containers/WindowSideBarCanvasPanel.js index 4eb503529..dddabb541 100644 --- a/src/containers/WindowSideBarCanvasPanel.js +++ b/src/containers/WindowSideBarCanvasPanel.js @@ -1,6 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withNamespaces } from 'react-i18next'; +import { withStyles } from '@material-ui/core/styles'; import * as actions from '../state/actions'; import WindowSideBarCanvasPanel from '../components/WindowSideBarCanvasPanel'; import { @@ -23,9 +24,27 @@ const mapStateToProps = (state, { windowId }) => { const mapDispatchToProps = { setCanvas: actions.setCanvas }; +/** + * + * @param theme + * @returns {{clickable: {cursor: string}, + * label: {fontSize: string, paddingLeft: number}, windowSideBarH2: *}} + */ +const styles = theme => ({ + windowSideBarH2: theme.typography.h5, + clickable: { + cursor: 'pointer', + }, + label: { + fontSize: '8pt', + paddingLeft: 8, + }, +}); + const enhance = compose( - connect(mapStateToProps, mapDispatchToProps), withNamespaces(), + withStyles(styles), + connect(mapStateToProps, mapDispatchToProps), ); export default enhance(WindowSideBarCanvasPanel); diff --git a/src/containers/WindowSideBarInfoPanel.js b/src/containers/WindowSideBarInfoPanel.js index 8214fc347..13b272b5f 100644 --- a/src/containers/WindowSideBarInfoPanel.js +++ b/src/containers/WindowSideBarInfoPanel.js @@ -1,6 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withNamespaces } from 'react-i18next'; +import { withStyles } from '@material-ui/core'; import miradorWithPlugins from '../lib/miradorWithPlugins'; import { getDestructuredMetadata, @@ -30,11 +31,21 @@ const mapStateToProps = (state, { windowId }) => ({ manifestMetadata: getDestructuredMetadata(getWindowManifest(state, windowId).manifestation), }); +/** + * + * @param theme + * @returns {{windowSideBarH2: *, windowSideBarH3: *}} + */ +const styles = theme => ({ + windowSideBarH2: theme.typography.h5, + windowSideBarH3: theme.typography.h6, +}); + const enhance = compose( - connect(mapStateToProps, null), withNamespaces(), + withStyles(styles), + connect(mapStateToProps, null), miradorWithPlugins, - // further HOC ); export default enhance(WindowSideBarInfoPanel); diff --git a/src/containers/WindowSideBarPanel.js b/src/containers/WindowSideBarPanel.js index e35523329..8773ac5ae 100644 --- a/src/containers/WindowSideBarPanel.js +++ b/src/containers/WindowSideBarPanel.js @@ -16,8 +16,7 @@ const mapStateToProps = (state, { windowId }) => ({ }); export default compose( + withNamespaces(), connect(mapStateToProps, mapDispatchToProps), miradorWithPlugins, - withNamespaces(), - // further HOC )(WindowSideBarPanel); diff --git a/src/containers/WindowThumbnailSettings.js b/src/containers/WindowThumbnailSettings.js index a0463090f..2f721a632 100644 --- a/src/containers/WindowThumbnailSettings.js +++ b/src/containers/WindowThumbnailSettings.js @@ -25,8 +25,8 @@ const mapStateToProps = (state, props) => ( ); const enhance = compose( - connect(mapStateToProps, mapDispatchToProps), withNamespaces(), + connect(mapStateToProps, mapDispatchToProps), miradorWithPlugins, // further HOC go here ); diff --git a/src/containers/WindowTopBar.js b/src/containers/WindowTopBar.js index 191ebb59c..245fca7d1 100644 --- a/src/containers/WindowTopBar.js +++ b/src/containers/WindowTopBar.js @@ -1,6 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withNamespaces } from 'react-i18next'; +import { withStyles } from '@material-ui/core'; import * as actions from '../state/actions'; import miradorWithPlugins from '../lib/miradorWithPlugins'; import { getWindowManifest, getManifestTitle } from '../state/selectors'; @@ -21,11 +22,23 @@ const mapDispatchToProps = (dispatch, { windowId }) => ({ toggleWindowSideBar: () => dispatch(actions.toggleWindowSideBar(windowId)), }); + +const styles = { + typographyBody: { + flexGrow: 1, + fontSize: '1em', + }, + reallyDense: { + minHeight: 32, + paddingLeft: 4, + }, +}; + const enhance = compose( + withNamespaces(), + withStyles(styles), connect(mapStateToProps, mapDispatchToProps), miradorWithPlugins, - withNamespaces(), - // further HOC go here ); export default enhance(WindowTopBar); diff --git a/src/containers/WindowTopMenuButton.js b/src/containers/WindowTopMenuButton.js index ebfedfeb3..c3ea20eca 100644 --- a/src/containers/WindowTopMenuButton.js +++ b/src/containers/WindowTopMenuButton.js @@ -1,12 +1,24 @@ import { compose } from 'redux'; import { withNamespaces } from 'react-i18next'; +import { withStyles } from '@material-ui/core'; import miradorWithPlugins from '../lib/miradorWithPlugins'; import WindowTopMenuButton from '../components/WindowTopMenuButton'; +/** + * + * @param theme + * @returns {{ctrlBtn: {margin: (number|string)}}} + */ +const styles = theme => ({ + ctrlBtn: { + margin: theme.spacing.unit, + }, +}); + const enhance = compose( withNamespaces(), + withStyles(styles), miradorWithPlugins, - // further HOC ); export default enhance(WindowTopMenuButton); diff --git a/src/containers/WindowViewSettings.js b/src/containers/WindowViewSettings.js index 0b83fe4f2..b7e709397 100644 --- a/src/containers/WindowViewSettings.js +++ b/src/containers/WindowViewSettings.js @@ -25,10 +25,9 @@ const mapStateToProps = (state, props) => ( ); const enhance = compose( - connect(mapStateToProps, mapDispatchToProps), withNamespaces(), + connect(mapStateToProps, mapDispatchToProps), miradorWithPlugins, - // further HOC go here ); export default enhance(WindowViewSettings); diff --git a/src/containers/WorkspaceAdd.js b/src/containers/WorkspaceAdd.js index 62fee859f..92a277f6f 100644 --- a/src/containers/WorkspaceAdd.js +++ b/src/containers/WorkspaceAdd.js @@ -1,6 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withNamespaces } from 'react-i18next'; +import { withStyles } from '@material-ui/core'; import * as actions from '../state/actions'; import WorkspaceAdd from '../components/WorkspaceAdd'; @@ -18,10 +19,40 @@ const mapStateToProps = state => ({ manifests: state.manifests }); */ const mapDispatchToProps = { setWorkspaceAddVisibility: actions.setWorkspaceAddVisibility }; +/** + * + * @param theme + * @returns {{typographyBody: {flexGrow: number, fontSize: string}, + * form: {paddingBottom: number, paddingTop: number, marginTop: number}, + * fab: {bottom: number, position: string, right: number}, + * menuButton: {marginRight: number, marginLeft: number}}} + */ +const styles = theme => ({ + form: { + ...theme.mixins.gutters(), + paddingTop: theme.spacing.unit * 2, + paddingBottom: theme.spacing.unit * 2, + marginTop: 64, + }, + fab: { + position: 'absolute', + bottom: theme.spacing.unit * 2, + right: theme.spacing.unit * 2, + }, + typographyBody: { + flexGrow: 1, + fontSize: '1em', + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, +}); + const enhance = compose( - connect(mapStateToProps, mapDispatchToProps), withNamespaces(), - // further HOC go here + withStyles(styles), + connect(mapStateToProps, mapDispatchToProps), ); export default enhance(WorkspaceAdd); diff --git a/src/containers/WorkspaceAddButton.js b/src/containers/WorkspaceAddButton.js index b13dbd15f..a52d04d31 100644 --- a/src/containers/WorkspaceAddButton.js +++ b/src/containers/WorkspaceAddButton.js @@ -1,6 +1,7 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; import { withNamespaces } from 'react-i18next'; +import { withStyles } from '@material-ui/core'; import * as actions from '../state/actions'; import miradorWithPlugins from '../lib/miradorWithPlugins'; import WorkspaceAddButton from '../components/WorkspaceAddButton'; @@ -24,9 +25,21 @@ const mapStateToProps = state => ( */ const mapDispatchToProps = { setWorkspaceAddVisibility: actions.setWorkspaceAddVisibility }; +/** + * + * @param theme + * @returns {{ctrlBtn: {margin: (number|string)}}} + */ +const styles = theme => ({ + ctrlBtn: { + margin: theme.spacing.unit, + }, +}); + const enhance = compose( - connect(mapStateToProps, mapDispatchToProps), withNamespaces(), + withStyles(styles), + connect(mapStateToProps, mapDispatchToProps), miradorWithPlugins, ); diff --git a/src/containers/WorkspaceControlPanel.js b/src/containers/WorkspaceControlPanel.js new file mode 100644 index 000000000..d25f6a3e6 --- /dev/null +++ b/src/containers/WorkspaceControlPanel.js @@ -0,0 +1,20 @@ +import { withStyles } from '@material-ui/core/styles'; +import WorkspaceControlPanel from '../components/WorkspaceControlPanel'; + +/** + * + * @param theme + * @returns {{ctrlBtn: {margin: (number|string)}, + * drawer: {overflowX: string, height: string}}} + */ +const styles = theme => ({ + ctrlBtn: { + margin: theme.spacing.unit, + }, + drawer: { + overflowX: 'hidden', + height: '100%', + }, +}); + +export default withStyles(styles)(WorkspaceControlPanel); diff --git a/src/containers/WorkspaceExport.js b/src/containers/WorkspaceExport.js index 82dded070..5157cafc0 100644 --- a/src/containers/WorkspaceExport.js +++ b/src/containers/WorkspaceExport.js @@ -12,10 +12,9 @@ import WorkspaceExport from '../components/WorkspaceExport'; const mapStateToProps = state => ({ state }); const enhance = compose( + withNamespaces(), connect(mapStateToProps, {}), miradorWithPlugins, - withNamespaces(), - // further HOC go here ); export default enhance(WorkspaceExport); diff --git a/src/containers/WorkspaceFullScreenButton.js b/src/containers/WorkspaceFullScreenButton.js index 64f9bd732..a274b21e2 100644 --- a/src/containers/WorkspaceFullScreenButton.js +++ b/src/containers/WorkspaceFullScreenButton.js @@ -1,6 +1,7 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; import { withNamespaces } from 'react-i18next'; +import { withStyles } from '@material-ui/core'; import miradorWithPlugins from '../lib/miradorWithPlugins'; import * as actions from '../state/actions'; import WorkspaceFullScreenButton @@ -13,11 +14,22 @@ import WorkspaceFullScreenButton */ const mapDispatchToProps = { setWorkspaceFullscreen: actions.setWorkspaceFullscreen }; +/** + * + * @param theme + * @returns {{ctrlBtn: {margin: (number|string)}}} + */ +const styles = theme => ({ + ctrlBtn: { + margin: theme.spacing.unit, + }, +}); + const enhance = compose( - connect(null, mapDispatchToProps), withNamespaces(), + withStyles(styles), + connect(null, mapDispatchToProps), miradorWithPlugins, - // further HOC ); export default enhance(WorkspaceFullScreenButton); diff --git a/src/containers/WorkspaceMenu.js b/src/containers/WorkspaceMenu.js index aa1bdd2e3..38e36d2bb 100644 --- a/src/containers/WorkspaceMenu.js +++ b/src/containers/WorkspaceMenu.js @@ -22,10 +22,9 @@ const mapStateToProps = state => ( ); const enhance = compose( - connect(mapStateToProps, mapDispatchToProps), withNamespaces(), + connect(mapStateToProps, mapDispatchToProps), miradorWithPlugins, - // further HOC ); export default enhance(WorkspaceMenu); diff --git a/src/containers/WorkspaceMenuButton.js b/src/containers/WorkspaceMenuButton.js index 0ccd4218f..1273953f2 100644 --- a/src/containers/WorkspaceMenuButton.js +++ b/src/containers/WorkspaceMenuButton.js @@ -1,10 +1,23 @@ import { compose } from 'redux'; import { withNamespaces } from 'react-i18next'; +import { withStyles } from '@material-ui/core'; import miradorWithPlugins from '../lib/miradorWithPlugins'; import WorkspaceMenuButton from '../components/WorkspaceMenuButton'; +/** + * + * @param theme + * @returns {{ctrlBtn: {margin: (number|string)}}} + */ +const styles = theme => ({ + ctrlBtn: { + margin: theme.spacing.unit, + }, +}); + const enhance = compose( withNamespaces(), + withStyles(styles), miradorWithPlugins, // further HOC ); diff --git a/src/containers/WorkspaceSettings.js b/src/containers/WorkspaceSettings.js index 50b697135..1250a96fa 100644 --- a/src/containers/WorkspaceSettings.js +++ b/src/containers/WorkspaceSettings.js @@ -25,9 +25,8 @@ const mapStateToProps = state => ( ); const enhance = compose( - connect(mapStateToProps, mapDispatchToProps), withNamespaces(), - // further HOC go here + connect(mapStateToProps, mapDispatchToProps), ); export default enhance(WorkspaceSettings); diff --git a/src/containers/ZoomControls.js b/src/containers/ZoomControls.js index a7acfd982..a3640e2ff 100644 --- a/src/containers/ZoomControls.js +++ b/src/containers/ZoomControls.js @@ -1,6 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withNamespaces } from 'react-i18next'; +import { withStyles } from '@material-ui/core'; import * as actions from '../state/actions'; import ZoomControls from '../components/ZoomControls'; @@ -16,7 +17,6 @@ const mapStateToProps = (state, props) => ( } ); - /** * mapDispatchToProps - used to hook up connect to action creators * @memberof Workspace @@ -24,10 +24,27 @@ const mapStateToProps = (state, props) => ( */ const mapDispatchToProps = { updateViewport: actions.updateViewport }; +/** + * + * @param theme + * @returns {{zoom_controls: {position: string, right: number}, + * ListItem: {paddingBottom: number, paddingTop: number}}} + */ +const styles = theme => ({ + zoom_controls: { + position: 'absolute', + right: 0, + }, + ListItem: { + paddingTop: 0, + paddingBottom: 0, + }, +}); + const enhance = compose( - connect(mapStateToProps, mapDispatchToProps), withNamespaces(), - // further HOC go here + withStyles(styles), + connect(mapStateToProps, mapDispatchToProps), ); export default enhance(ZoomControls); -- GitLab