From 1961328a13d238ba235458dca8822b65d94cd290 Mon Sep 17 00:00:00 2001 From: Chris Beer <chris@cbeer.info> Date: Tue, 19 Dec 2023 16:36:17 -0800 Subject: [PATCH] Use flexbox to lay out the workspace --- __tests__/src/components/Workspace.test.js | 20 ++--------------- src/components/Workspace.js | 25 +++++----------------- src/components/WorkspaceAdd.js | 7 ------ src/components/WorkspaceArea.js | 21 ++++++++++++------ src/components/WorkspaceControlPanel.js | 5 ++--- src/containers/Workspace.js | 1 - 6 files changed, 24 insertions(+), 55 deletions(-) diff --git a/__tests__/src/components/Workspace.test.js b/__tests__/src/components/Workspace.test.js index 3f1fd853e..493598f75 100644 --- a/__tests__/src/components/Workspace.test.js +++ b/__tests__/src/components/Workspace.test.js @@ -83,22 +83,6 @@ describe('Workspace', () => { }); }); - describe('when the workspace control panel is displayed', () => { - it('has the *-with-control-panel class applied', () => { - const { container } = createWrapper(); - - expect(container.querySelector('.mirador-workspace-with-control-panel')).toBeInTheDocument(); - }); - }); - - describe('when the workspace control panel is not displayed', () => { - it('does not have the *-with-control-panel class applied', () => { - const { container } = createWrapper({ isWorkspaceControlPanelVisible: false }); - - expect(container.querySelector('.mirador-workspace-with-control-panel')).not.toBeInTheDocument(); - }); - }); - describe('drag and drop', () => { it('adds a new catalog entry from a manifest', async () => { const manifestJson = '{ "data": "123" }'; @@ -106,7 +90,7 @@ describe('Workspace', () => { const addWindow = jest.fn(); const { container } = createWrapper({ addWindow }); - const dropTarget = container.querySelector('.mirador-workspace-with-control-panel'); + const dropTarget = container.querySelector('.mirador-workspace-viewport'); const file = new File([manifestJson], 'manifest.json', { type: 'application/json' }); const dataTransfer = { @@ -129,7 +113,7 @@ describe('Workspace', () => { const { container } = createWrapper({ addWindow, allowNewWindows: false }); - const dropTarget = container.querySelector('.mirador-workspace-with-control-panel'); + const dropTarget = container.querySelector('.mirador-workspace-viewport'); const file = new File([manifestJson], 'manifest.json', { type: 'application/json' }); const dataTransfer = { diff --git a/src/components/Workspace.js b/src/components/Workspace.js index 8963e1823..b8d48d33a 100644 --- a/src/components/Workspace.js +++ b/src/components/Workspace.js @@ -12,23 +12,10 @@ import WorkspaceElastic from '../containers/WorkspaceElastic'; import ns from '../config/css-ns'; import { IIIFDropTarget } from './IIIFDropTarget'; -const Root = styled('div', { name: 'Workspace', slot: 'root' })(({ ownerState, theme }) => ({ - '@media (min-width: 600px)': { - ...(ownerState.isWorkspaceControlPanelVisible && { - paddingLeft: theme.spacing(8.5), - paddingTop: 0, - }), - }, - ...(ownerState.isWorkspaceControlPanelVisible && { - paddingTop: theme.spacing(9.25), - }), - bottom: 0, - left: 0, - margin: 0, - overflow: 'hidden', - position: 'absolute', - right: 0, - top: 0, +const Root = styled('div', { name: 'Workspace', slot: 'root' })(() => ({ + height: '100%', + position: 'relative', + width: '100%', })); /** @@ -135,7 +122,7 @@ export class Workspace extends Component { * render */ render() { - const { isWorkspaceControlPanelVisible, t } = this.props; + const { t } = this.props; return ( <IIIFDropTarget onDrop={this.handleDrop}> @@ -144,7 +131,6 @@ export class Workspace extends Component { className={ classNames( ns('workspace-viewport'), - (isWorkspaceControlPanelVisible && ns('workspace-with-control-panel')), ) } > @@ -159,7 +145,6 @@ export class Workspace extends Component { Workspace.propTypes = { addWindow: PropTypes.func, allowNewWindows: PropTypes.bool, - isWorkspaceControlPanelVisible: PropTypes.bool.isRequired, maximizedWindowIds: PropTypes.arrayOf(PropTypes.string), t: PropTypes.func.isRequired, windowIds: PropTypes.arrayOf(PropTypes.string), diff --git a/src/components/WorkspaceAdd.js b/src/components/WorkspaceAdd.js index cced34789..6e744878c 100644 --- a/src/components/WorkspaceAdd.js +++ b/src/components/WorkspaceAdd.js @@ -25,13 +25,6 @@ const StyledWorkspaceAdd = styled('div')(() => ({ height: '100%', overflowX: 'hidden', overflowY: 'auto', - paddingTop: 68, - // injection order matters - // eslint-disable-next-line sort-keys - '@media (min-width: 600px)': { - paddingLeft: 68, - paddingTop: 0, - }, })); const StyledMiradorMenuButton = styled(MiradorMenuButton)(() => ({ diff --git a/src/components/WorkspaceArea.js b/src/components/WorkspaceArea.js index 66479271a..f5c93a146 100644 --- a/src/components/WorkspaceArea.js +++ b/src/components/WorkspaceArea.js @@ -8,20 +8,29 @@ import WorkspaceAdd from '../containers/WorkspaceAdd'; import BackgroundPluginArea from '../containers/BackgroundPluginArea'; import ns from '../config/css-ns'; -const Root = styled('main', { name: 'WorkspaceArea', slot: 'root' })(({ theme }) => { +const Root = styled('div', { name: 'WorkspaceArea', slot: 'root' })(({ theme }) => { const getBackgroundColor = theme.palette.mode === 'light' ? darken : lighten; return { background: getBackgroundColor(theme.palette.grey.A200, 0.1), bottom: 0, + display: 'flex', + flexDirection: 'column', left: 0, - overflow: 'hidden', position: 'absolute', right: 0, top: 0, + [theme.breakpoints.up('sm')]: { + flexDirection: 'row', + }, }; }); +const ViewerArea = styled('main', { name: 'WorkspaceArea', slot: 'viewer' })(() => ({ + flexGrow: 1, + position: 'relative', +})); + /** * This is the top level Mirador component. * @prop {Object} manifests @@ -42,12 +51,12 @@ export class WorkspaceArea extends Component { } = this.props; return ( - <> + <Root ownerState={this.props}> { isWorkspaceControlPanelVisible && <WorkspaceControlPanel variant={controlPanelVariant} /> } - <Root + <ViewerArea className={ns('viewer')} lang={lang} aria-label={t('workspace')} @@ -60,8 +69,8 @@ export class WorkspaceArea extends Component { } <ErrorDialog /> <BackgroundPluginArea /> - </Root> - </> + </ViewerArea> + </Root> ); } } diff --git a/src/components/WorkspaceControlPanel.js b/src/components/WorkspaceControlPanel.js index ddcd96728..133134133 100644 --- a/src/components/WorkspaceControlPanel.js +++ b/src/components/WorkspaceControlPanel.js @@ -14,10 +14,9 @@ const Root = styled(AppBar, { name: 'WorkspaceControlPanel', slot: 'root' })(({ height: 64, padding: theme.spacing(1), paddingBottom: 0, + position: 'relative', [theme.breakpoints.up('sm')]: { - height: '100%', - left: 0, - right: 'auto', + height: 'auto', width: ownerState.variant === 'wide' ? 'auto' : 64, }, ...(ownerState.variant === 'wide' && { diff --git a/src/containers/Workspace.js b/src/containers/Workspace.js index b7a8881f8..f9288e8d9 100644 --- a/src/containers/Workspace.js +++ b/src/containers/Workspace.js @@ -17,7 +17,6 @@ import * as actions from '../state/actions'; const mapStateToProps = state => ( { allowNewWindows: getConfig(state).workspace.allowNewWindows, - isWorkspaceControlPanelVisible: getConfig(state).workspaceControlPanel.enabled, maximizedWindowIds: getMaximizedWindowsIds(state), windowIds: getWindowIds(state), workspaceId: getWorkspace(state).id, -- GitLab