19434: moved toggle icon inside left panel, accounted for window resizing, disabled...

Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>

diff --git a/src/views-components/main-app-bar/main-app-bar.tsx b/src/views-components/main-app-bar/main-app-bar.tsx
index 86aed88f1e1e893f9c39b2ed72cf55c03bdb42cc..60ce68e99dce95c147267033e443bd0626aa5ac7 100644 (file)
--- a/src/views-components/main-app-bar/main-app-bar.tsx
+++ b/src/views-components/main-app-bar/main-app-bar.tsx
@@ -15,7 +15,6 @@ import { HelpMenu } from 'views-components/main-app-bar/help-menu';
 import { ReactNode } from "react";
 import { AdminMenu } from "views-components/main-app-bar/admin-menu";
 import { pluginConfig } from 'plugins';
-import { CollapseLeftPanelTrigger } from 'views-components/side-panel/side-panel'
 
 type CssRules = 'toolbar' | 'link';
 
@@ -26,7 +25,6 @@ const styles: StyleRulesCallback<CssRules> = () => ({
     },
     toolbar: {
         height: '56px',
-        paddingLeft: '0'
     }
 });
 
@@ -37,7 +35,6 @@ interface MainAppBarDataProps {
     uuidPrefix: string;
     siteBanner: string;
     sidePanelIsCollapsed: boolean;
-    toggleSidePanel: (collapsedState:boolean) => void
 }
 
 export type MainAppBarProps = MainAppBarDataProps & WithStyles<CssRules>;
@@ -46,9 +43,6 @@ export const MainAppBar = withStyles(styles)(
     (props: MainAppBarProps) => {
         return <AppBar position="absolute">
             <Toolbar className={props.classes.toolbar}>
-                <CollapseLeftPanelTrigger sidePanelIsCollapsed={props.sidePanelIsCollapsed} 
-                toggleSidePanel={props.toggleSidePanel}
-                />
                 <Grid container justify="space-between">
                     {pluginConfig.appBarLeft || <Grid container item xs={3} direction="column" justify="center">
                         <Typography variant='h6' color="inherit" noWrap>

diff --git a/src/views-components/side-panel-toggle/side-panel-toggle.tsx b/src/views-components/side-panel-toggle/side-panel-toggle.tsx
new file mode 100644 (file)
index 0000000..b5f5dd9
--- /dev/null
+++ b/src/views-components/side-panel-toggle/side-panel-toggle.tsx
@@ -0,0 +1,50 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import React from 'react';
+import { Tooltip, IconButton  } from '@material-ui/core';
+import { connect } from 'react-redux';
+import { toggleSidePanel } from "store/side-panel/side-panel-action";
+import { RootState } from 'store/store';
+
+type collapseButtonProps = {
+  isCollapsed: boolean;
+  toggleSidePanel: (collapsedState: boolean) => void
+}
+
+export const COLLAPSE_ICON_SIZE = 20
+
+const SidePanelToggle = (props: collapseButtonProps) =>{ 
+const collapseButtonIconStyles = {
+  root: {
+    width: `${COLLAPSE_ICON_SIZE}px`,
+    padding: '10px'
+  },
+  icon: {
+  }
+}
+
+
+  return <Tooltip disableFocusListener title="Toggle Side Panel">
+              <IconButton style={collapseButtonIconStyles.root} onClick={()=>{props.toggleSidePanel(props.isCollapsed)}}>
+                <div style={collapseButtonIconStyles.icon}>{props.isCollapsed ? '>' : '<'}</div>
+              </IconButton>
+          </Tooltip>
+  };
+
+const mapStateToProps = (state: RootState) => {
+  return {
+    isCollapsed: state.sidePanel.collapsedState
+  }
+}
+
+  const mapDispatchToProps = (dispatch) => {
+    return {
+        toggleSidePanel: (collapsedState)=>{
+            return dispatch(toggleSidePanel(collapsedState))
+        }
+    }
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(SidePanelToggle)
\ No newline at end of file

diff --git a/src/views-components/side-panel-tree/side-panel-tree.tsx b/src/views-components/side-panel-tree/side-panel-tree.tsx
index de271203e870cc4e86b8aa5e42954d9ea001e4c0..6814a31eb1b8a5b0459ed0609b0dcc9792e4d0d0 100644 (file)
--- a/src/views-components/side-panel-tree/side-panel-tree.tsx
+++ b/src/views-components/side-panel-tree/side-panel-tree.tsx
@@ -20,6 +20,7 @@ import { GroupClass } from "models/group";
 export interface SidePanelTreeProps {
     onItemActivation: (id: string) => void;
     sidePanelProgress?: boolean;
+    isCollapsed?: boolean
 }
 
 type SidePanelTreeActionProps = Pick<TreePickerProps<ProjectResource | string>, 'onContextMenu' | 'toggleItemActive' | 'toggleItemOpen' | 'toggleItemSelection'>;

diff --git a/src/views-components/side-panel/side-panel.tsx b/src/views-components/side-panel/side-panel.tsx
index b4caef23d0f177cf5730189baa9f024764549129..2509e56eaa76140a8aa52d039fd13471963312ba 100644 (file)
--- a/src/views-components/side-panel/side-panel.tsx
+++ b/src/views-components/side-panel/side-panel.tsx
@@ -13,6 +13,7 @@ import { Grid, Tooltip, IconButton  } from '@material-ui/core';
 import { SidePanelButton } from 'views-components/side-panel-button/side-panel-button';
 import { RootState } from 'store/store';
 import MenuIcon from "@material-ui/icons/Menu";
+import SidePanelToggle from 'views-components/side-panel-toggle/side-panel-toggle';
 
 const DRAWER_WIDTH = 240;
 
@@ -34,36 +35,22 @@ const mapDispatchToProps = (dispatch: Dispatch): SidePanelTreeProps => ({
     }
 });
 
-const mapStateToProps = ({ router }: RootState) => ({
+const mapStateToProps = ({ router, sidePanel }: RootState) => ({
     currentRoute: router.location ? router.location.pathname : '',
+    isCollapsed: sidePanel.collapsedState
 });
 
 export const SidePanel = withStyles(styles)(
     connect(mapStateToProps, mapDispatchToProps)(
         ({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps & { currentRoute: string }) =>
             <Grid item xs>
-                <SidePanelButton key={props.currentRoute} />
-                <SidePanelTree {...props} />
+                {props.isCollapsed ? <SidePanelToggle /> :
+                <>
+                    <Grid style={{display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap-reverse'}}>
+                        <SidePanelButton key={props.currentRoute} />
+                        <SidePanelToggle/>
+                    </Grid>
+                    <SidePanelTree {...props} />
+                </>}
             </Grid>
     ));
-
-type collapseButtonIconProps = {
-    sidePanelIsCollapsed: boolean;
-    toggleSidePanel: (collapsedState: boolean) => void
-}
-
-const collapseButtonIconStyles = {
-    menuIcon: {
-        height: '4rem',
-        width: '4rem', 
-        paddingBottom: '0.25rem'
-    }
-}
-
-export const CollapseLeftPanelTrigger = (props: collapseButtonIconProps) =>{ 
-    return <Tooltip disableFocusListener title="Toggle Side Panel">
-                <IconButton onClick={()=>{props.toggleSidePanel(props.sidePanelIsCollapsed)}}>
-                    <MenuIcon style={collapseButtonIconStyles.menuIcon} aria-label="Toggle Side Panel" />
-                </IconButton>
-            </Tooltip>
-    };
\ No newline at end of file

diff --git a/src/views/main-panel/main-panel-root.tsx b/src/views/main-panel/main-panel-root.tsx
index 543e9c635190e89068e3b9ce8079ccf5f30b352b..e5514d8ef687dcbc41e4321d86fdd068a5f21a90 100644 (file)
--- a/src/views/main-panel/main-panel-root.tsx
+++ b/src/views/main-panel/main-panel-root.tsx
@@ -54,7 +54,6 @@ export const MainPanelRoot = withStyles(styles)(
                 uuidPrefix={uuidPrefix}
                 siteBanner={siteBanner}
                 sidePanelIsCollapsed={sidePanelIsCollapsed}
-                toggleSidePanel={toggleSidePanel}
                 >
                 {working
                     ? <LinearProgress color="secondary" data-cy="linear-progress" />

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 35105e56ccc02b265050cfaad9a51b7d15e0e03d..87f004b335693b7df95a32102415f2b7232b75be 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -99,6 +99,7 @@ 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'
 
 type CssRules = 'root' | 'container' | 'splitter' | 'asidePanel' | 'contentWrapper' | 'content';
 
@@ -112,7 +113,11 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
     splitter: {
         '& > .layout-splitter': {
-            width: '2px'
+            width: '2px',
+        },
+        '& > .layout-splitter-disabled': {
+            pointerEvents: 'none',
+            cursor: 'pointer'
         }
     },
     asidePanel: {
@@ -188,14 +193,23 @@ routes = React.createElement(React.Fragment, null, pluginConfig.centerPanelList.
 
 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 ? 100 : getSplitterInitialSize()}%`)
+        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) =>{
+
+        //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}>