Merge pull request #3142 from ProjectMirador/1981-minimal-preview

Use the minimal window as the mosaic drag preview

__tests__/src/components/MosaicRenderPreview.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
+import MinimalWindow from '../../../src/containers/MinimalWindow';
 import { MosaicRenderPreview } from '../../../src/components/MosaicRenderPreview';
 
 describe('MosaicRenderPreview', () => {
@@ -12,9 +13,9 @@ describe('MosaicRenderPreview', () => {
       />,
     );
 
-    expect(wrapper.find('.mosaic-window-body').length).toBe(1);
+    expect(wrapper.find(MinimalWindow).length).toBe(1);
     expect(
-      wrapper.find('.mosaic-window-body').children().text(),
+      wrapper.find(MinimalWindow).prop('label'),
     ).toEqual('previewWindowTitle The Title Prop');
   });
 });

src/components/MinimalWindow.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import MenuIcon from '@material-ui/icons/MenuSharp';
 import cn from 'classnames';
 import Paper from '@material-ui/core/Paper';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
 import CloseIcon from '@material-ui/icons/CloseSharp';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 import ns from '../config/css-ns';
@@ -14,6 +16,7 @@ export class MinimalWindow extends Component {
   render() {
     const {
       allowClose,
+      allowWindowSideBar,
       children,
       classes,
       label,
@@ -28,7 +31,7 @@ export class MinimalWindow extends Component {
         elevation={1}
         id={windowId}
         className={
-          cn(classes.window, ns('window'))}
+          cn(classes.window, ns('placeholder-window'))}
         aria-label={t('window', { label })}
       >
         <AppBar position="relative" color="default">
@@ -40,7 +43,18 @@ export class MinimalWindow extends Component {
             )}
             variant="dense"
           >
-            {allowClose && (
+            {allowWindowSideBar && (
+              <MiradorMenuButton
+                aria-label={t('toggleWindowSideBar')}
+                disabled
+              >
+                <MenuIcon />
+              </MiradorMenuButton>
+            )}
+            <Typography variant="h2" noWrap color="inherit" className={classes.title}>
+              {label}
+            </Typography>
+            {allowClose && removeWindow && (
               <MiradorMenuButton
                 aria-label={t('closeWindow')}
                 className={cn(classes.button, ns('window-close'))}
@@ -59,17 +73,21 @@ export class MinimalWindow extends Component {
 
 MinimalWindow.propTypes = {
   allowClose: PropTypes.bool,
+  allowWindowSideBar: PropTypes.bool,
   children: PropTypes.node,
-  classes: PropTypes.objectOf(PropTypes.string).isRequired,
+  classes: PropTypes.objectOf(PropTypes.string),
   label: PropTypes.string,
-  removeWindow: PropTypes.func.isRequired,
+  removeWindow: PropTypes.func,
   t: PropTypes.func,
   windowId: PropTypes.string.isRequired,
 };
 
 MinimalWindow.defaultProps = {
   allowClose: true,
+  allowWindowSideBar: true,
   children: null,
+  classes: {},
   label: '',
+  removeWindow: () => {},
   t: key => key,
 };

src/components/MosaicRenderPreview.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import MinimalWindow from '../containers/MinimalWindow';
 
 /**
  * MosaicRenderPreview is used to for the preview when dragging a mosaic window/tile
 */
 export function MosaicRenderPreview(props) {
   const {
-    classes, t, title,
+    t, title, windowId,
   } = props;
 
   return (
-    <div className={classNames('mosaic-window-body', classes.preview)}>
-      {t('previewWindowTitle', { title })}
-    </div>
+    <MinimalWindow windowId={`${windowId}-preview`} label={t('previewWindowTitle', { title })} />
   );
 }
 
 MosaicRenderPreview.propTypes = {
-  classes: PropTypes.objectOf(PropTypes.string),
   t: PropTypes.func,
   title: PropTypes.string,
   windowId: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
 };
 
 MosaicRenderPreview.defaultProps = {
-  classes: {},
   t: k => k,
   title: '',
 };

src/containers/MinimalWindow.js

@@ -9,6 +9,7 @@ import { MinimalWindow } from '../components/MinimalWindow';
 /** mapStateToProps */
 const mapStateToProps = (state, { windowId }) => ({
   allowClose: state.config.window.allowClose,
+  allowWindowSideBar: state.config.window.allowWindowSideBar,
 });
 
 /**
@@ -29,6 +30,11 @@ const styles = theme => ({
   button: {
     marginLeft: 'auto',
   },
+  title: {
+    ...theme.typography.h6,
+    flexGrow: 1,
+    paddingLeft: theme.spacing(0.5),
+  },
   window: {
     backgroundColor: theme.palette.shades.dark,
     borderRadius: 0,