Merge pull request #2013 from ProjectMirador/1974-full-screen-app

Change WorkspaceFullScreenButton to include the workspace sidebar as well

__tests__/src/components/WorkspaceFullScreenButton.test.js

@@ -2,24 +2,66 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { WorkspaceFullScreenButton } from '../../../src/components/WorkspaceFullScreenButton';
 
-describe('WorkspaceFullScreenButton', () => {
-  let wrapper;
-  let setWorkspaceFullscreen;
-  beforeEach(() => {
-    setWorkspaceFullscreen = jest.fn();
-    wrapper = shallow(
+/** */
+function createWrapper(props) {
+  return shallow(
     <WorkspaceFullScreenButton
       classes={{}}
-        setWorkspaceFullscreen={setWorkspaceFullscreen}
+      setWorkspaceFullscreen={() => {}}
+      isFullscreenEnabled={false}
+      {...props}
     />,
   );
-  });
+}
+
+describe('WorkspaceFullScreenButton', () => {
+  let wrapper;
 
   it('renders without an error', () => {
+    wrapper = createWrapper();
+
     expect(wrapper.find('WithStyles(IconButton)').length).toBe(1);
   });
-  it('when clicked, sets the fullscreen state', () => {
+
+  describe('when not in fullscreen', () => {
+    let setWorkspaceFullscreen;
+    beforeAll(() => {
+      setWorkspaceFullscreen = jest.fn();
+      wrapper = createWrapper({ setWorkspaceFullscreen });
+    });
+
+    it('has the FullscreenIcon', () => {
+      expect(wrapper.find('pure(FullscreenSharpIcon)').length).toBe(1);
+    });
+
+    it('has the proper aria-label i18n key', () => {
+      expect(wrapper.find('WithStyles(IconButton)[aria-label="fullScreen"]').length).toBe(1);
+    });
+
+    it('triggers the setWorkspaceFullscreen prop with the appropriate boolean', () => {
       wrapper.find('WithStyles(IconButton)').simulate('click');
       expect(setWorkspaceFullscreen).toHaveBeenCalledWith(true);
     });
   });
+
+  describe('when in fullscreen', () => {
+    let setWorkspaceFullscreen;
+    beforeAll(() => {
+      setWorkspaceFullscreen = jest.fn();
+      wrapper = createWrapper({ setWorkspaceFullscreen, isFullscreenEnabled: true });
+    });
+
+    it('has the FullscreenExitIcon', () => {
+      expect(wrapper.find('pure(FullscreenExitSharpIcon)').length).toBe(1);
+    });
+
+    it('has the proper aria-label', () => {
+      expect(wrapper.find('WithStyles(IconButton)[aria-label="exitFullScreen"]').length).toBe(1);
+    });
+
+    it('triggers the setWorkspaceFullscreen prop with the appropriate boolean', () => {
+      wrapper.find('WithStyles(IconButton)').simulate('click');
+      expect(setWorkspaceFullscreen).toHaveBeenCalledWith(false);
+    });
+  });
+});

locales/en/translation.json

@@ -19,6 +19,7 @@
     "dismiss": "Dismiss",
     "downloadExport": "Download/Export",
     "downloadExportWorkspace": "Download/export workspace",
+    "exitFullScreen": "Exit full screen",
     "fetchManifest": "Add",
     "fullScreen": "Full Screen",
     "hideZoomControls": "Hide zoom controls",

src/components/App.js

@@ -57,19 +57,18 @@ export class App extends Component {
     });
 
     return (
-      <div className={classNames(classes.background, ns('viewer'))}>
-        <I18nextProvider i18n={this.i18n}>
-          <MuiThemeProvider theme={createMuiTheme(theme)}>
       <Fullscreen
         enabled={isFullscreenEnabled}
         onChange={setWorkspaceFullscreen}
       >
+        <div className={classNames(classes.background, ns('viewer'))}>
+          <I18nextProvider i18n={this.i18n}>
+            <MuiThemeProvider theme={createMuiTheme(theme)}>
               {
                 isWorkspaceAddVisible
                   ? <WorkspaceAdd />
                   : <Workspace />
                }
-            </Fullscreen>
               {
                 isWorkspaceControlPanelVisible
                   && <WorkspaceControlPanel />
@@ -77,6 +76,7 @@ export class App extends Component {
             </MuiThemeProvider>
           </I18nextProvider>
         </div>
+      </Fullscreen>
     );
   }
 }

src/components/WorkspaceFullScreenButton.js

 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';
 
 /**
@@ -11,21 +12,33 @@ export class WorkspaceFullScreenButton extends Component {
    * @return
    */
   render() {
-    const { classes, setWorkspaceFullscreen, t } = this.props;
+    const {
+      classes, isFullscreenEnabled, setWorkspaceFullscreen, t,
+    } = this.props;
     return (
-      <IconButton className={classes.ctrlBtn} aria-label={t('fullScreen')} onClick={() => setWorkspaceFullscreen(true)}>
-        <FullscreenIcon />
+      <IconButton
+        className={classes.ctrlBtn}
+        aria-label={isFullscreenEnabled ? t('exitFullScreen') : t('fullScreen')}
+        onClick={() => setWorkspaceFullscreen(!isFullscreenEnabled)}
+      >
+        {
+          isFullscreenEnabled
+            ? <FullscreenExitIcon />
+            : <FullscreenIcon />
+        }
       </IconButton>
     );
   }
 }
 
 WorkspaceFullScreenButton.propTypes = {
+  isFullscreenEnabled: PropTypes.bool,
   setWorkspaceFullscreen: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   t: PropTypes.func,
 };
 
 WorkspaceFullScreenButton.defaultProps = {
+  isFullscreenEnabled: false,
   t: key => key,
 };

src/containers/WorkspaceFullScreenButton.js

@@ -7,6 +7,15 @@ import * as actions from '../state/actions';
 import { WorkspaceFullScreenButton }
   from '../components/WorkspaceFullScreenButton';
 
+/**
+ * mapStateToProps - to hook up connect
+ * @memberof WorkspaceFullScreenButton
+ * @private
+ */
+const mapStateToProps = state => ({
+  isFullscreenEnabled: state.workspace.isFullscreenEnabled,
+});
+
 /**
  * mapDispatchToProps - used to hook up connect to action creators
  * @memberof ManifestListItem
@@ -28,7 +37,7 @@ const styles = theme => ({
 const enhance = compose(
   withTranslation(),
   withStyles(styles),
-  connect(null, mapDispatchToProps),
+  connect(mapStateToProps, mapDispatchToProps),
   miradorWithPlugins,
 );