Add a visual indicator for a window that has focus; fixes #2095

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: () => {},
 };

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,
 };

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);

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}`,
   },
 });