Skip to content
Snippets Groups Projects
Commit 1961328a authored by Chris Beer's avatar Chris Beer
Browse files

Use flexbox to lay out the workspace

parent 5ebf51f7
Branches
No related tags found
1 merge request!19Draft: Merge video support into mui5
......@@ -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 = {
......
......@@ -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),
......
......@@ -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)(() => ({
......
......@@ -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 />
</ViewerArea>
</Root>
</>
);
}
}
......
......@@ -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' && {
......
......@@ -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,
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment