Merge pull request #1997 from ProjectMirador/1975-scroll

Fix scrolling issues in window

__tests__/integration/mirador/basic.test.js

@@ -8,6 +8,7 @@ describe('Basic end to end Mirador', () => {
   });
   it('loads a manifest and displays it', async () => {
     await expect(page).toClick('#addBtn');
+    await expect(page).toClick('.mirador-add-resource-button');
     await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/sn904cj3439');
     await expect(page).toClick('#fetchBtn');
     await expect(page).toMatchElement('[data-manifestid="http://localhost:5000/api/sn904cj3439"] button');

__tests__/integration/mirador/embedding.html

@@ -18,6 +18,9 @@
        width: 800px;
        height: 600px;
      }
+     .mirador-app {
+       border: 2px solid black;
+     }
     </style>
     <title>Mirador</title>
   </head>

__tests__/integration/mirador/invalid-api-response.test.js

@@ -4,6 +4,7 @@ describe('Mirador Invalid API Response Handler Test', () => {
   });
   it('breaks Mirador', async () => {
     await expect(page).toClick('#addBtn');
+    await expect(page).toClick('.mirador-add-resource-button');
     await expect(page).toFill('#manifestURL', 'http://localhost:5000/invalid');
     await expect(page).toClick('#fetchBtn');
     await page.waitFor(1000);
@@ -17,6 +18,7 @@ describe('Mirador Invalid API Response Handler Test', () => {
 
   it('renders an error message when a manifest cannot be loaded (and allows it to be dismissed)', async () => {
     await expect(page).toClick('#addBtn');
+    await expect(page).toClick('.mirador-add-resource-button');
     await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/broken');
     await expect(page).toClick('#fetchBtn');
 

__tests__/integration/mirador/plugins.test.js

@@ -4,6 +4,7 @@ describe('Mirador plugin use', () => {
   beforeAll(async () => {
     await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/plugins.html');
     await expect(page).toClick('#addBtn');
+    await expect(page).toClick('.mirador-add-resource-button');
     await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/sn904cj3439');
     await expect(page).toClick('#fetchBtn');
 

__tests__/integration/mirador/window_actions.test.js

@@ -4,6 +4,7 @@ describe('Window actions', () => {
   });
   it('opens a window and closes it', async () => {
     await expect(page).toClick('#addBtn');
+    await expect(page).toClick('.mirador-add-resource-button');
     await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/sn904cj3439');
     await expect(page).toClick('#fetchBtn');
 

__tests__/integration/mirador/window_sidebar.test.js

@@ -5,6 +5,7 @@ describe('Window Sidebars', () => {
     await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/');
 
     await expect(page).toClick('#addBtn');
+    await expect(page).toClick('.mirador-add-resource-button');
     await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/001');
     await expect(page).toClick('#fetchBtn');
 

__tests__/src/components/App.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
 import { MuiThemeProvider } from '@material-ui/core/styles';
-import Fullscreen from 'react-fullscreen-crossbrowser';
+import Fullscreen from 'react-full-screen';
 import WorkspaceControlPanel from '../../../src/containers/WorkspaceControlPanel';
 import Workspace from '../../../src/containers/Workspace';
 import WorkspaceAdd from '../../../src/containers/WorkspaceAdd';

package.json

@@ -46,7 +46,7 @@
     "prop-types": "^15.6.2",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
-    "react-fullscreen-crossbrowser": "^1.0.9",
+    "react-full-screen": "^0.2.4",
     "react-i18next": "^10.2.0",
     "react-mosaic-component": "^2.1.0",
     "react-placeholder": "^3.0.1",

src/components/App.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
-import Fullscreen from 'react-fullscreen-crossbrowser';
+import Fullscreen from 'react-full-screen';
 import { I18nextProvider } from 'react-i18next';
 import WorkspaceControlPanel from '../containers/WorkspaceControlPanel';
 import Workspace from '../containers/Workspace';

src/components/WorkspaceAdd.js

 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import AddIcon from '@material-ui/icons/AddSharp';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMoreSharp';
 import AppBar from '@material-ui/core/AppBar';
@@ -56,12 +57,21 @@ export class WorkspaceAdd extends React.Component {
       <div className={ns('workspace-add')}>
         {manifestList}
 
-        <Fab variant="extended" disabled={addResourcesOpen} className={classes.fab} color="secondary" onClick={() => (this.setAddResourcesVisibility(true))}>
+        <Fab
+          variant="extended"
+          disabled={addResourcesOpen}
+          className={classNames(classes.fab, ns('add-resource-button'))}
+          color="secondary"
+          onClick={() => (this.setAddResourcesVisibility(true))}
+        >
           <AddIcon />
           {t('addResource')}
         </Fab>
 
         <Drawer
+          className={classNames({
+            [classes.displayNone]: !addResourcesOpen,
+          })}
           variant="persistent"
           anchor="bottom"
           open={addResourcesOpen}

src/containers/WorkspaceAdd.js

@@ -39,6 +39,9 @@ const styles = theme => ({
     bottom: theme.spacing.unit * 2,
     right: theme.spacing.unit * 2,
   },
+  displayNone: {
+    display: 'none',
+  },
   typographyBody: {
     flexGrow: 1,
     fontSize: '1em',

src/containers/WorkspaceControlPanel.js

@@ -13,7 +13,6 @@ const styles = theme => ({
   },
   drawer: {
     overflowX: 'hidden',
-    height: '100%',
   },
 });
 

src/styles/index.scss

@@ -22,7 +22,6 @@
     box-sizing: border-box;
     left: 0;
     margin: 0;
-    overflow: scroll;
     position: absolute;
     right: 0;
     top: 0;