Make the workspace toolbar responsive; fixes #1837

__tests__/src/components/WorkspaceControlPanel.test.js

@@ -20,7 +20,7 @@ describe('WorkspaceControlPanel', () => {
   });
 
   it('renders without an error', () => {
-    expect(wrapper.find('WithStyles(Drawer)').length).toBe(1);
+    expect(wrapper.find('WithStyles(AppBar)').length).toBe(1);
     expect(wrapper.find('Connect(miradorWithPlugins(WorkspaceControlPanelButtons))').length).toBe(1);
   });
 });

__tests__/src/components/WorkspaceControlPanelButtons.test.js

@@ -11,7 +11,6 @@ describe('WorkspaceControlPanelButtons', () => {
   });
 
   it('renders without an error', () => {
-    expect(wrapper.find('WithStyles(List)').length).toBe(1);
     expect(wrapper.find(WorkspaceFullScreenButton).length).toBe(1);
   });
 });

src/components/WorkspaceAddButton.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import ListItem from '@material-ui/core/ListItem';
 import Fab from '@material-ui/core/Fab';
 import AddIcon from '@material-ui/icons/AddSharp';
 import CloseIcon from '@material-ui/icons/CloseSharp';
@@ -17,7 +16,6 @@ export class WorkspaceAddButton extends Component {
       classes, t, setWorkspaceAddVisibility, isWorkspaceAddVisible,
     } = this.props;
     return (
-      <ListItem>
       <Fab
         color="secondary"
         id="addBtn"
@@ -31,7 +29,6 @@ export class WorkspaceAddButton extends Component {
             : <AddIcon />
         }
       </Fab>
-      </ListItem>
     );
   }
 }

src/components/WorkspaceControlPanel.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Drawer from '@material-ui/core/Drawer';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
 import WorkspaceControlPanelButtons
   from '../containers/WorkspaceControlPanelButtons';
 import ns from '../config/css-ns';
@@ -17,16 +18,15 @@ export class WorkspaceControlPanel extends Component {
   render() {
     const { classes } = this.props;
     return (
-      <Drawer
-        className={classNames(classes.drawer, ns('workspace-control-panel'))}
-        variant="permanent"
-        anchor="left"
-        classes={{ paper: classNames(classes.drawer) }}
-        PaperProps={{ style: { position: 'absolute' } }}
-        open
+      <AppBar
+        className={classNames(classes.root, ns('workspace-control-panel'))}
+        color="default"
+        position="absolute"
       >
+        <Toolbar className={classes.toolbar}>
           <WorkspaceControlPanelButtons />
-      </Drawer>
+        </Toolbar>
+      </AppBar>
     );
   }
 }

src/components/WorkspaceControlPanelButtons.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import List from '@material-ui/core/List';
 import WorkspaceFullScreenButton from '../containers/WorkspaceFullScreenButton';
 import WorkspaceAddButton from '../containers/WorkspaceAddButton';
 import WorkspaceMenuButton from '../containers/WorkspaceMenuButton';
@@ -17,12 +16,12 @@ export class WorkspaceControlPanelButtons extends Component {
   render() {
     const { children } = this.props;
     return (
-      <List>
+      <>
         <WorkspaceAddButton />
         <WorkspaceMenuButton />
         <WorkspaceFullScreenButton />
         {children}
-      </List>
+      </>
     );
   }
 }

src/components/WorkspaceFullScreenButton.js

 import React, { Component } from 'react';
 import IconButton from '@material-ui/core/IconButton';
 import FullscreenIcon from '@material-ui/icons/FullscreenSharp';
-import ListItem from '@material-ui/core/ListItem';
 import PropTypes from 'prop-types';
 
 /**
@@ -14,11 +13,9 @@ export class WorkspaceFullScreenButton extends Component {
   render() {
     const { classes, setWorkspaceFullscreen, t } = this.props;
     return (
-      <ListItem>
       <IconButton className={classes.ctrlBtn} aria-label={t('fullScreen')} onClick={() => setWorkspaceFullscreen(true)}>
         <FullscreenIcon />
       </IconButton>
-      </ListItem>
     );
   }
 }

src/components/WorkspaceMenuButton.js

 import React, { Component } from 'react';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/MenuSharp';
-import ListItem from '@material-ui/core/ListItem';
 import PropTypes from 'prop-types';
 import WorkspaceMenu from '../containers/WorkspaceMenu';
 
@@ -48,7 +47,6 @@ export class WorkspaceMenuButton extends Component {
 
     return (
       <>
-        <ListItem>
         <IconButton
           color="default"
           id="menuBtn"
@@ -60,7 +58,6 @@ export class WorkspaceMenuButton extends Component {
         >
           <MenuIcon />
         </IconButton>
-        </ListItem>
         <WorkspaceMenu
           anchorEl={anchorEl}
           handleClose={this.handleMenuClose}

src/containers/WorkspaceAddButton.js

@@ -31,8 +31,9 @@ const mapDispatchToProps = { setWorkspaceAddVisibility: actions.setWorkspaceAddV
  * @returns {{ctrlBtn: {margin: (number|string)}}}
  */
 const styles = theme => ({
-  ctrlBtn: {
+  fab: {
     margin: theme.spacing.unit,
+    marginLeft: theme.spacing.unit / 2,
   },
 });
 

src/containers/WorkspaceControlPanel.js

@@ -8,6 +8,21 @@ import { WorkspaceControlPanel } from '../components/WorkspaceControlPanel';
  * drawer: {overflowX: string, height: string}}}
  */
 const styles = theme => ({
+  root: {
+    [theme.breakpoints.up('sm')]: {
+      left: 0,
+      right: 'auto',
+      width: 96,
+      height: '100%',
+    },
+  },
+  toolbar: {
+    [theme.breakpoints.up('sm')]: {
+      display: 'block',
+      paddingLeft: theme.spacing.unit * 2,
+      paddingRight: theme.spacing.unit * 2,
+    },
+  },
   ctrlBtn: {
     margin: theme.spacing.unit,
   },

src/styles/index.scss

@@ -28,13 +28,25 @@
   }
 
   &-workspace-with-control-panel {
-    padding-left: 100px; // The width of the control panel
+    padding-top: 74px; // The height of the control panel
   }
 
   &-workspace-add {
-    padding-left: 110px;
-    padding-right: 20px;
-    padding-top: 20px;
+    padding-left: 6px;
+    padding-right: 6px;
+    padding-top: 92px;
+  }
+
+  @media (min-width: 600px) {
+    &-workspace-with-control-panel {
+      padding-left: 100px;
+      padding-top: 0;
+    }
+
+    &-workspace-add {
+      padding-left: 100px;
+      padding-top: 18px;
+    }
   }
 
   &-window-middle-content {