diff --git a/src/components/Window.js b/src/components/Window.js index 167feda6472639506d788be1c9f35be3cbd6fcf8..bd4eb4c366f4b456a2fa1d744a857bb522c6fa61 100644 --- a/src/components/Window.js +++ b/src/components/Window.js @@ -42,7 +42,7 @@ export class Window extends Component { */ render() { const { - label, manifest, window, classes, t, thumbnailNavigationPosition, + focusWindow, label, manifest, window, classes, t, thumbnailNavigationPosition, } = this.props; if (!window) { @@ -51,6 +51,7 @@ export class Window extends Component { return ( <Paper + onFocus={focusWindow} component="section" elevation={1} id={window.id} @@ -115,6 +116,7 @@ Window.propTypes = { workspaceType: PropTypes.string, t: PropTypes.func.isRequired, label: PropTypes.string, + focusWindow: PropTypes.func, }; Window.defaultProps = { @@ -124,4 +126,5 @@ Window.defaultProps = { classes: {}, label: null, thumbnailNavigationPosition: 'off', + focusWindow: () => {}, }; diff --git a/src/components/WindowTopBar.js b/src/components/WindowTopBar.js index 9b87f235ad8b2e2772fa4320a2a9cdab74cb7300..3a25435d445df7e52b7ddb6c9571344a4c42c8cf 100644 --- a/src/components/WindowTopBar.js +++ b/src/components/WindowTopBar.js @@ -25,11 +25,11 @@ export class WindowTopBar extends Component { render() { const { removeWindow, windowId, classes, toggleWindowSideBar, t, manifestTitle, - maximizeWindow, maximized, minimizeWindow, + maximizeWindow, maximized, minimizeWindow, focused, } = this.props; return ( <AppBar position="relative"> - <Toolbar disableGutters className={classNames(classes.windowTopBarStyle, ns('window-top-bar'))} variant="dense"> + <Toolbar disableGutters className={classNames(classes.windowTopBarStyle, focused ? classes.focused : null, ns('window-top-bar'))} variant="dense"> <MiradorMenuButton aria-label={t('toggleWindowSideBar')} color="inherit" @@ -74,6 +74,7 @@ WindowTopBar.propTypes = { classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types toggleWindowSideBar: PropTypes.func.isRequired, t: PropTypes.func, + focused: PropTypes.bool, }; WindowTopBar.defaultProps = { @@ -82,4 +83,5 @@ WindowTopBar.defaultProps = { maximized: false, minimizeWindow: () => {}, t: key => key, + focused: false, }; diff --git a/src/containers/Window.js b/src/containers/Window.js index e338e0836058dbcf9763830e9cc456c66ebd4a45..97cb5938035074a8af3659970b4ba2b245db3211 100644 --- a/src/containers/Window.js +++ b/src/containers/Window.js @@ -2,6 +2,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withStyles } from '@material-ui/core'; import { withTranslation } from 'react-i18next'; +import * as actions from '../state/actions'; import { Window } from '../components/Window'; import { getWindowManifest, getManifestTitle, getThumbnailNavigationPosition } from '../state/selectors'; @@ -19,6 +20,15 @@ const mapStateToProps = (state, props) => ({ thumbnailNavigationPosition: getThumbnailNavigationPosition(state, props.window.id), }); +/** + * mapDispatchToProps - used to hook up connect to action creators + * @memberof ManifestListItem + * @private + */ +const mapDispatchToProps = (dispatch, { window }) => ({ + focusWindow: () => dispatch(actions.focusWindow(window.id)), +}); + /** * @param theme */ @@ -75,7 +85,7 @@ const styles = theme => ({ const enhance = compose( withTranslation(), withStyles(styles), - connect(mapStateToProps), + connect(mapStateToProps, mapDispatchToProps), ); export default enhance(Window); diff --git a/src/containers/WindowTopBar.js b/src/containers/WindowTopBar.js index 4da895501bcb5148bcabae0a33234f761d7d8faf..c7bc091b1e9abef24638b66aa247170275975e41 100644 --- a/src/containers/WindowTopBar.js +++ b/src/containers/WindowTopBar.js @@ -10,6 +10,7 @@ import { WindowTopBar } from '../components/WindowTopBar'; const mapStateToProps = (state, { windowId }) => ({ manifestTitle: getManifestTitle(getWindowManifest(state, windowId)), maximized: state.windows[windowId].maximized, + focused: state.workspace.focusedWindowId === windowId, }); /** @@ -38,6 +39,10 @@ const styles = theme => ({ minHeight: 32, paddingLeft: 4, backgroundColor: theme.palette.primary.light, + borderTop: '2px solid transparent', + }, + focused: { + borderTop: `2px solid ${theme.palette.secondary.main}`, }, });