diff --git a/__tests__/src/components/MosaicRenderPreview.test.js b/__tests__/src/components/MosaicRenderPreview.test.js index 6dd35aba66280fd2d1730c465f0188534507069f..3f925ce877b6039419b888a9c1dca1ca088a5bd3 100644 --- a/__tests__/src/components/MosaicRenderPreview.test.js +++ b/__tests__/src/components/MosaicRenderPreview.test.js @@ -1,5 +1,6 @@ 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'); }); }); diff --git a/src/components/MinimalWindow.js b/src/components/MinimalWindow.js index 3ee7430e7dc06c236cc3e5053412c6de02ae283c..7db511ac7de2dc555be0b30e0d6ba24e65b2a219 100644 --- a/src/components/MinimalWindow.js +++ b/src/components/MinimalWindow.js @@ -1,9 +1,11 @@ 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, }; diff --git a/src/components/MosaicRenderPreview.js b/src/components/MosaicRenderPreview.js index a66f781ed90fd5320165806a5169c84b1709bf3b..c196a19bc0f1932c18a58767eb045ee0240469e4 100644 --- a/src/components/MosaicRenderPreview.js +++ b/src/components/MosaicRenderPreview.js @@ -1,31 +1,27 @@ 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: '', }; diff --git a/src/containers/MinimalWindow.js b/src/containers/MinimalWindow.js index 13cc4683741278f6f1d7c3f7635db1b608ae690d..20351e144ade292a3c697df3e71516433cf0abe1 100644 --- a/src/containers/MinimalWindow.js +++ b/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,