[arvados-workbench2] created: 2.4.0-460-gb7322ddc
git repository hosting
git at public.arvados.org
Tue Dec 20 19:25:34 UTC 2022
at b7322ddccea570a1c563da84215daed067273859 (commit)
commit b7322ddccea570a1c563da84215daed067273859
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Tue Dec 20 14:25:16 2022 -0500
19434: moved toggle icon inside left panel, accounted for window resizing, disabled panel resize while collapsed
Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at 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 86aed88f..60ce68e9 100644
--- 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
index 00000000..b5f5dd9b
--- /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 de271203..6814a31e 100644
--- 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 b4caef23..2509e56e 100644
--- 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 543e9c63..e5514d8e 100644
--- 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 35105e56..87f004b3 100644
--- 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}>
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list