X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/8d374520f28b507e8934d57be46374044fb93e2f..5da46a24f0381fb708e8b06f8daba6c9df6cd274:/src/views/workbench/workbench.tsx diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index 28fae4cd..7103efd1 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -33,7 +33,6 @@ import { MoveProjectDialog } from 'views-components/dialog-forms/move-project-di 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'; @@ -100,6 +99,8 @@ import { RestoreCollectionVersionDialog } from 'views-components/collections-dia 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'; @@ -113,7 +114,11 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ }, splitter: { '& > .layout-splitter': { - width: '2px' + width: '2px', + }, + '& > .layout-splitter-disabled': { + pointerEvents: 'none', + cursor: 'pointer' } }, asidePanel: { @@ -138,6 +143,7 @@ interface WorkbenchDataProps { isUserActive: boolean; isNotLinking: boolean; sessionIdleTimeout: number; + sidePanelIsCollapsed: boolean; } type WorkbenchPanelProps = WithStyles & WorkbenchDataProps; @@ -186,9 +192,26 @@ const reduceRoutesFn: (a: React.ReactElement[], 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) => - + 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 {props.sessionIdleTimeout > 0 && } - @@ -272,6 +294,7 @@ export const WorkbenchPanel = + {React.createElement(React.Fragment, null, pluginConfig.dialogs)} - + } );