From 2e9665097d1efc298e001882052662a5cc25d9a4 Mon Sep 17 00:00:00 2001
From: Chris Beer <cabeer@stanford.edu>
Date: Wed, 13 Mar 2019 16:14:49 -0700
Subject: [PATCH] Add a visual indicator for a window that has focus; fixes
 #2095

---
 src/components/Window.js       |  5 ++++-
 src/components/WindowTopBar.js |  6 ++++--
 src/containers/Window.js       | 12 +++++++++++-
 src/containers/WindowTopBar.js |  5 +++++
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/Window.js b/src/components/Window.js
index 167feda64..bd4eb4c36 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 9b87f235a..3a25435d4 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 e338e0836..97cb59380 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 4da895501..c7bc091b1 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}`,
   },
 });
 
-- 
GitLab