diff --git a/src/components/Window.js b/src/components/Window.js index 7f1c22fe7c2c0a065b0862110b0225b4714e7d55..c2f6b3a5bb0527e3e68e77432bea9290c3c1ce10 100644 --- a/src/components/Window.js +++ b/src/components/Window.js @@ -12,6 +12,23 @@ import ErrorContent from '../containers/ErrorContent'; import IIIFAuthentication from '../containers/IIIFAuthentication'; import { PluginHook } from './PluginHook'; +const Root = styled(Paper)(({ ownerState, theme }) => ({ + backgroundColor: theme.palette.shades?.dark, + borderRadius: 0, + display: 'flex', + flexDirection: 'column', + height: '100%', + minHeight: 0, + overflow: 'hidden', + width: '100%', + ...(ownerState?.maximized && { + left: 0, + position: 'absolute', + top: 0, + zIndex: theme.zIndex.modal - 1, + }), +})); + const StyledMiddle = styled('div')(() => ({ display: 'flex', flex: '1', @@ -96,7 +113,7 @@ export class Window extends Component { */ render() { const { - focusWindow, label, isFetching, maximized, sideBarOpen, + focusWindow, label, isFetching, sideBarOpen, view, windowId, t, manifestError, } = this.props; @@ -112,27 +129,12 @@ export class Window extends Component { } return ( - <Paper + <Root onFocus={focusWindow} + ownerState={this.props} component="section" elevation={1} id={windowId} - sx={theme => ({ - bgcolor: 'shades?.dark', - borderRadius: 0, - display: 'flex', - flexDirection: 'column', - height: '100%', - minHeight: 0, - overflow: 'hidden', - width: '100%', - ...(maximized && { - left: 0, - position: 'absolute', - top: 0, - zIndex: theme.zIndex.modal - 1, - }), - })} className={ns('window')} aria-label={t('window', { label })} > @@ -159,7 +161,7 @@ export class Window extends Component { </StyledMiddle> <CompanionArea windowId={windowId} position="far-bottom" /> <PluginHook {...this.props} /> - </Paper> + </Root> ); } }