//
// SPDX-License-Identifier: AGPL-3.0
-import React, { useState, useCallback } from 'react';
+import React from 'react';
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
import { Route, Switch } from "react-router";
import { ProjectPanel } from "views/project-panel/project-panel";
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 Banner = () => {
- const [visible, setVisible] = useState(true);
- const hideBanner = useCallback(() => setVisible(false), []);
-
- return visible ?
- <div id="banner" onClick={hideBanner} className="app-banner">
- <span>
- This is important message
- </span>
- </div> : null;
+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}
<WebDavS3InfoDialog />
<Banner />
{React.createElement(React.Fragment, null, pluginConfig.dialogs)}
- </Grid>
+ </Grid>}
);