import { MoveCollectionDialog } from 'views-components/dialog-forms/move-collection-dialog';
import { FilesUploadCollectionDialog } from 'views-components/dialog-forms/files-upload-collection-dialog';
import { PartialCopyCollectionDialog } from 'views-components/dialog-forms/partial-copy-collection-dialog';
-import { ProcessCommandDialog } from 'views-components/process-command-dialog/process-command-dialog';
import { RemoveProcessDialog } from 'views-components/process-remove-dialog/process-remove-dialog';
import { MainContentBar } from 'views-components/main-content-bar/main-content-bar';
import { Grid } from '@material-ui/core';
import { WebDavS3InfoDialog } from 'views-components/webdav-s3-dialog/webdav-s3-dialog';
import { pluginConfig } from 'plugins';
import { ElementListReducer } from 'common/plugintypes';
+import { COLLAPSE_ICON_SIZE } from 'views-components/side-panel-toggle/side-panel-toggle'
+import { Banner } from 'views-components/baner/banner';
type CssRules = 'root' | 'container' | 'splitter' | 'asidePanel' | 'contentWrapper' | 'content';
},
splitter: {
'& > .layout-splitter': {
- width: '2px'
+ width: '2px',
+ },
+ '& > .layout-splitter-disabled': {
+ pointerEvents: 'none',
+ cursor: 'pointer'
}
},
asidePanel: {
isUserActive: boolean;
isNotLinking: boolean;
sessionIdleTimeout: number;
+ sidePanelIsCollapsed: boolean;
}
type WorkbenchPanelProps = WithStyles<CssRules> & WorkbenchDataProps;
routes = React.createElement(React.Fragment, null, pluginConfig.centerPanelList.reduce(reduceRoutesFn, React.Children.toArray(routes.props.children)));
+const applyCollapsedState = (isCollapsed) => {
+ const rightPanel: Element = document.getElementsByClassName('layout-pane')[1]
+ const totalWidth: number = document.getElementsByClassName('splitter-layout')[0]?.clientWidth
+ const rightPanelExpandedWidth = ((totalWidth-COLLAPSE_ICON_SIZE)) / (totalWidth/100)
+ if(rightPanel) {
+ rightPanel.setAttribute('style', `width: ${isCollapsed ? rightPanelExpandedWidth : getSplitterInitialSize()}%`)
+ }
+ const splitter = document.getElementsByClassName('layout-splitter')[0]
+ isCollapsed ? splitter?.classList.add('layout-splitter-disabled') : splitter?.classList.remove('layout-splitter-disabled')
+
+}
+
export const WorkbenchPanel =
- withStyles(styles)((props: WorkbenchPanelProps) =>
- <Grid container item xs className={props.classes.root}>
+ withStyles(styles)((props: WorkbenchPanelProps) =>{
+
+ //panel size will not scale automatically on window resize, so we do it manually
+ window.addEventListener('resize', ()=>applyCollapsedState(props.sidePanelIsCollapsed))
+ applyCollapsedState(props.sidePanelIsCollapsed)
+
+ return <Grid container item xs className={props.classes.root}>
{props.sessionIdleTimeout > 0 && <AutoLogout />}
<Grid container item xs className={props.classes.container}>
<SplitterLayout customClassName={props.classes.splitter} percentage={true}
<PublicKeyDialog />
<PartialCopyCollectionDialog />
<PartialCopyToCollectionDialog />
- <ProcessCommandDialog />
<ProcessInputDialog />
<RestoreCollectionVersionDialog />
<RemoveApiClientAuthorizationDialog />
<VirtualMachineAttributesDialog />
<FedLogin />
<WebDavS3InfoDialog />
+ <Banner />
{React.createElement(React.Fragment, null, pluginConfig.dialogs)}
- </Grid>
+ </Grid>}
);