Merge pull request #2349 from ProjectMirador/2343-icons

Updates the Window and Workspace fullscreen icons

__tests__/src/selectors/config.test.js

@@ -3,7 +3,6 @@ import {
   getShowZoomControlsConfig,
   getTheme,
   getWorkspaceType,
-  getFullScreenEnabled,
   getContainerId,
 } from '../../../src/state/selectors';
 
@@ -57,15 +56,6 @@ describe('getWorkspaceType', () => {
   });
 });
 
-
-describe('getFullScreenEnabled', () => {
-  it('returns the workspace configuration for full screen', () => {
-    const state = { config: { workspace: { isFullscreenEnabled: true } } };
-    expect(getFullScreenEnabled(state)).toEqual(true);
-  });
-});
-
-
 describe('getContainerId', () => {
   it('returns the container id', () => {
     const state = { config: { id: 'mirador' } };

__tests__/src/selectors/workspace.test.js

+import {
+  getFullScreenEnabled,
+} from '../../../src/state/selectors';
+
+describe('getFullScreenEnabled', () => {
+  it('returns the workspace configuration for full screen', () => {
+    const state = { workspace: { isFullscreenEnabled: true } };
+    expect(getFullScreenEnabled(state)).toEqual(true);
+  });
+});

src/components/WindowTopBar.js

@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
 import MenuIcon from '@material-ui/icons/MenuSharp';
 import CloseIcon from '@material-ui/icons/CloseSharp';
-import FullscreenIcon from '@material-ui/icons/FullscreenSharp';
-import FullscreenExitIcon from '@material-ui/icons/FullscreenExitSharp';
 import Toolbar from '@material-ui/core/Toolbar';
 import AppBar from '@material-ui/core/AppBar';
 import classNames from 'classnames';
 import WindowTopMenuButton from '../containers/WindowTopMenuButton';
 import WindowTopBarButtons from '../containers/WindowTopBarButtons';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
+import WindowMaxIcon from './icons/WindowMaxIcon';
+import WindowMinIcon from './icons/WindowMinIcon';
 import ns from '../config/css-ns';
 
 
@@ -49,7 +49,7 @@ export class WindowTopBar extends Component {
               color="inherit"
               onClick={(maximized ? minimizeWindow : maximizeWindow)}
             >
-              {(maximized ? <FullscreenExitIcon /> : <FullscreenIcon />)}
+              {(maximized ? <WindowMinIcon /> : <WindowMaxIcon />)}
             </MiradorMenuButton>
           )}
           {allowClose && (

src/components/icons/WindowMaxIcon.js

+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+/**
+ * WindowMaxIcon ~
+*/
+export default function WindowMaxIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path d="M7,14H5v5h5V17H7Zm7-9V7h3v3h2V5Z" />
+        <path d="M22.517,1.524H1.736V22.37H22.517Zm-2,18.845H3.736V3.524H20.517Z" />
+      </svg>
+    </SvgIcon>
+  );
+}

src/components/icons/WindowMinIcon.js

+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+/**
+ * WindowMinIcon ~
+*/
+export default function WindowMinIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path d="M5,16H8v3h2V14H5ZM16,8V5H14v5h5V8Z" />
+        <path d="M22.517,1.524H1.736V22.37H22.517Zm-2,18.845H3.736V3.524H20.517Z" />
+      </svg>
+    </SvgIcon>
+  );
+}

src/state/selectors/config.js

@@ -34,11 +34,6 @@ export const getWorkspaceType = createSelector(
   ({ workspace }) => workspace.type,
 );
 
-export const getFullScreenEnabled = createSelector(
-  [getConfig],
-  ({ workspace }) => workspace.isFullscreenEnabled,
-);
-
 export const getContainerId = createSelector(
   [getConfig],
   ({ id }) => id,

src/state/selectors/index.js

@@ -3,3 +3,4 @@ export * from './canvases';
 export * from './config';
 export * from './manifests';
 export * from './windows';
+export * from './workspace';

src/state/selectors/workspace.js

+import { createSelector } from 'reselect';
+
+/** */
+function getWorkspace(state) {
+  return state.workspace;
+}
+
+export const getFullScreenEnabled = createSelector(
+  [getWorkspace],
+  workspace => workspace.isFullscreenEnabled,
+);