[arvados-workbench2] created: 2.4.0-413-g05cafa96
git repository hosting
git at public.arvados.org
Mon Dec 19 14:36:47 UTC 2022
at 05cafa96eea1840c14bed54f5a726e2c79d48a98 (commit)
commit 05cafa96eea1840c14bed54f5a726e2c79d48a98
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Sun Dec 18 20:06:10 2022 -0500
strengthened type checking in various new components Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
diff --git a/src/store/side-panel/side-panel-reducer.tsx b/src/store/side-panel/side-panel-reducer.tsx
index c37d7e51..a6ed03b6 100644
--- a/src/store/side-panel/side-panel-reducer.tsx
+++ b/src/store/side-panel/side-panel-reducer.tsx
@@ -4,11 +4,15 @@
import { sidePanelActions } from "./side-panel-action"
+interface SidePanelState {
+ collapsedState: boolean
+}
+
const sidePanelInitialState = {
collapsedState: false
}
-export const sidePanelReducer = (state = sidePanelInitialState, action)=>{
+export const sidePanelReducer = (state: SidePanelState = sidePanelInitialState, action)=>{
if(action.type === sidePanelActions.TOGGLE_COLLAPSE) return {...state, collapsedState: action.payload}
return state
}
\ 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 ea3ad41c..543e9c63 100644
--- a/src/views/main-panel/main-panel-root.tsx
+++ b/src/views/main-panel/main-panel-root.tsx
@@ -35,34 +35,38 @@ export interface MainPanelRootDataProps {
sidePanelIsCollapsed: boolean;
}
-type MainPanelRootProps = MainPanelRootDataProps & WithStyles<CssRules>;
+interface MainPanelRootDispatchProps {
+ toggleSidePanel: () => void
+}
+
+type MainPanelRootProps = MainPanelRootDataProps & MainPanelRootDispatchProps & WithStyles<CssRules>;
export const MainPanelRoot = withStyles(styles)(
- (props: MainPanelRootProps | any) =>{
- const{ classes, loading, working, user, buildInfo, uuidPrefix,
- isNotLinking, isLinkingPath, siteBanner, sessionIdleTimeout, sidePanelIsCollapsed } = props
- return loading
+ ({ classes, loading, working, user, buildInfo, uuidPrefix,
+ isNotLinking, isLinkingPath, siteBanner, sessionIdleTimeout,
+ sidePanelIsCollapsed, toggleSidePanel }: MainPanelRootProps) =>{
+ return loading
? <WorkbenchLoadingScreen />
: <>
- {isNotLinking && <MainAppBar
- user={user}
- buildInfo={buildInfo}
- uuidPrefix={uuidPrefix}
- siteBanner={siteBanner}
- sidePanelIsCollapsed={sidePanelIsCollapsed}
- toggleSidePanel={props.toggleSidePanel}
- >
- {working
- ? <LinearProgress color="secondary" data-cy="linear-progress" />
- : null}
- </MainAppBar>}
- <Grid container direction="column" className={classes.root}>
- {user
- ? (user.isActive || (!user.isActive && isLinkingPath)
- ? <WorkbenchPanel isNotLinking={isNotLinking} isUserActive={user.isActive} sessionIdleTimeout={sessionIdleTimeout} sidePanelIsCollapsed={sidePanelIsCollapsed}/>
- : <InactivePanel />)
- : <LoginPanel />}
- </Grid>
- </>
-}
+ {isNotLinking && <MainAppBar
+ user={user}
+ buildInfo={buildInfo}
+ uuidPrefix={uuidPrefix}
+ siteBanner={siteBanner}
+ sidePanelIsCollapsed={sidePanelIsCollapsed}
+ toggleSidePanel={toggleSidePanel}
+ >
+ {working
+ ? <LinearProgress color="secondary" data-cy="linear-progress" />
+ : null}
+ </MainAppBar>}
+ <Grid container direction="column" className={classes.root}>
+ {user
+ ? (user.isActive || (!user.isActive && isLinkingPath)
+ ? <WorkbenchPanel isNotLinking={isNotLinking} isUserActive={user.isActive} sessionIdleTimeout={sessionIdleTimeout} sidePanelIsCollapsed={sidePanelIsCollapsed}/>
+ : <InactivePanel />)
+ : <LoginPanel />}
+ </Grid>
+ </>
+ }
);
commit 595695460da3256554e3651c03ffb49322f0558f
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Sun Dec 18 19:45:34 2022 -0500
minor cleanup Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
diff --git a/src/store/side-panel/side-panel-reducer.tsx b/src/store/side-panel/side-panel-reducer.tsx
new file mode 100644
index 00000000..c37d7e51
--- /dev/null
+++ b/src/store/side-panel/side-panel-reducer.tsx
@@ -0,0 +1,14 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { sidePanelActions } from "./side-panel-action"
+
+const sidePanelInitialState = {
+ collapsedState: false
+}
+
+export const sidePanelReducer = (state = sidePanelInitialState, action)=>{
+ if(action.type === sidePanelActions.TOGGLE_COLLAPSE) return {...state, collapsedState: action.payload}
+ return state
+}
\ No newline at end of file
commit 1fd27a3f5cbf1ac44f2f70e0abcfb7072ed43684
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Sun Dec 18 19:41:40 2022 -0500
added side-panel-reducer file, minor code cleanup Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
diff --git a/src/store/side-panel/side-panel-action.ts b/src/store/side-panel/side-panel-action.ts
index 9e8da283..e4f53cea 100644
--- a/src/store/side-panel/side-panel-action.ts
+++ b/src/store/side-panel/side-panel-action.ts
@@ -5,7 +5,17 @@
import { Dispatch } from 'redux';
import { navigateTo } from 'store/navigation/navigation-action';
+export const sidePanelActions = {
+ TOGGLE_COLLAPSE: 'TOGGLE_COLLAPSE'
+}
+
export const navigateFromSidePanel = (id: string) =>
(dispatch: Dispatch) => {
dispatch<any>(navigateTo(id));
};
+
+export const toggleSidePanel = (collapsedState: boolean) => {
+ return (dispatch) => {
+ dispatch({type: sidePanelActions.TOGGLE_COLLAPSE, payload: !collapsedState})
+ }
+}
\ No newline at end of file
diff --git a/src/store/store.ts b/src/store/store.ts
index 2925d8f9..303b9dc0 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -73,6 +73,7 @@ import { ALL_PROCESSES_PANEL_ID } from './all-processes-panel/all-processes-pane
import { Config } from 'common/config';
import { pluginConfig } from 'plugins';
import { MiddlewareListReducer } from 'common/plugintypes';
+import { sidePanelReducer } from './side-panel/side-panel-reducer'
declare global {
interface Window {
@@ -185,22 +186,6 @@ export function configureStore(history: History, services: ServiceRepository, co
return createStore(rootReducer, enhancer);
}
-//TODO: put sidePanel items in separate file and import
-export const toggleSidePanel = (collapsedState: boolean) => {
- return (dispatch) => {
- dispatch({type: 'TOGGLE_COLLAPSE', payload: !collapsedState})
- }
-}
-
-const sidePanelInitialState = {
- collapsedState: false
-}
-
-const sidePanelReducer = (state = sidePanelInitialState, action)=>{
- if(action.type === 'TOGGLE_COLLAPSE') return {...state, collapsedState: action.payload}
- return state
-}
-
const createRootReducer = (services: ServiceRepository) => combineReducers({
auth: authReducer(services),
collectionPanel: collectionPanelReducer,
diff --git a/src/views-components/side-panel/side-panel.tsx b/src/views-components/side-panel/side-panel.tsx
index dce8217a..3c4d19f8 100644
--- a/src/views-components/side-panel/side-panel.tsx
+++ b/src/views-components/side-panel/side-panel.tsx
@@ -50,7 +50,6 @@ export const SidePanel = withStyles(styles)(
));
export const CollapseLeftPanelTrigger = (props) =>{
- console.log(props)
return <Tooltip disableFocusListener title="Toggle Side Panel">
<IconButton onClick={()=>{props.toggleSidePanel(props.sidepanelcollapsed)}}>
<MenuIcon aria-label="Toggle Side Panel" />
diff --git a/src/views/main-panel/main-panel-root.tsx b/src/views/main-panel/main-panel-root.tsx
index 2019f7bc..ea3ad41c 100644
--- a/src/views/main-panel/main-panel-root.tsx
+++ b/src/views/main-panel/main-panel-root.tsx
@@ -11,7 +11,6 @@ import { LoginPanel } from 'views/login-panel/login-panel';
import { InactivePanel } from 'views/inactive-panel/inactive-panel';
import { WorkbenchLoadingScreen } from 'views/workbench/workbench-loading-screen';
import { MainAppBar } from 'views-components/main-app-bar/main-app-bar';
-import { toggleSidePanel } from 'store/store';
type CssRules = 'root';
@@ -41,7 +40,7 @@ type MainPanelRootProps = MainPanelRootDataProps & WithStyles<CssRules>;
export const MainPanelRoot = withStyles(styles)(
(props: MainPanelRootProps | any) =>{
const{ classes, loading, working, user, buildInfo, uuidPrefix,
- isNotLinking, isLinkingPath, siteBanner, sessionIdleTimeout, sidePanelIsCollapsed: sidePanelIsCollapsed } = props
+ isNotLinking, isLinkingPath, siteBanner, sessionIdleTimeout, sidePanelIsCollapsed } = props
return loading
? <WorkbenchLoadingScreen />
: <>
diff --git a/src/views/main-panel/main-panel.tsx b/src/views/main-panel/main-panel.tsx
index 0be47f48..fac3da67 100644
--- a/src/views/main-panel/main-panel.tsx
+++ b/src/views/main-panel/main-panel.tsx
@@ -10,7 +10,7 @@ import { isSystemWorking } from 'store/progress-indicator/progress-indicator-red
import { isWorkbenchLoading } from 'store/workbench/workbench-actions';
import { LinkAccountPanelStatus } from 'store/link-account-panel/link-account-panel-reducer';
import { matchLinkAccountRoute } from 'routes/routes';
-import { toggleSidePanel } from "store/store";
+import { toggleSidePanel } from "store/side-panel/side-panel-action";
const mapStateToProps = (state: RootState): MainPanelRootDataProps => {
return {
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index d7ab911e..030ed6df 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -2,7 +2,7 @@
//
// SPDX-License-Identifier: AGPL-3.0
-import React, { useState } 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";
commit 818979d32a30f9b0bdbf5cee646124c131386d70
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Sun Dec 18 18:08:29 2022 -0500
collapse toggle button in main app bar, redux store set up to handle state change Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
diff --git a/src/store/store.ts b/src/store/store.ts
index 94f110a0..2925d8f9 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -185,6 +185,22 @@ export function configureStore(history: History, services: ServiceRepository, co
return createStore(rootReducer, enhancer);
}
+//TODO: put sidePanel items in separate file and import
+export const toggleSidePanel = (collapsedState: boolean) => {
+ return (dispatch) => {
+ dispatch({type: 'TOGGLE_COLLAPSE', payload: !collapsedState})
+ }
+}
+
+const sidePanelInitialState = {
+ collapsedState: false
+}
+
+const sidePanelReducer = (state = sidePanelInitialState, action)=>{
+ if(action.type === 'TOGGLE_COLLAPSE') return {...state, collapsedState: action.payload}
+ return state
+}
+
const createRootReducer = (services: ServiceRepository) => combineReducers({
auth: authReducer(services),
collectionPanel: collectionPanelReducer,
@@ -212,5 +228,6 @@ const createRootReducer = (services: ServiceRepository) => combineReducers({
virtualMachines: virtualMachinesReducer,
repositories: repositoriesReducer,
keepServices: keepServicesReducer,
- linkAccountPanel: linkAccountPanelReducer
+ linkAccountPanel: linkAccountPanelReducer,
+ sidePanel: sidePanelReducer
});
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 442b9034..fd0bc6ca 100644
--- a/src/views-components/main-app-bar/main-app-bar.tsx
+++ b/src/views-components/main-app-bar/main-app-bar.tsx
@@ -15,6 +15,8 @@ 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'
+// import { toggleSidePanel } from "store/store";
type CssRules = 'toolbar' | 'link';
@@ -34,6 +36,8 @@ interface MainAppBarDataProps {
children?: ReactNode;
uuidPrefix: string;
siteBanner: string;
+ sidePanelIsCollapsed: boolean;
+ toggleSidePanel: (collapsedState:boolean) => void
}
export type MainAppBarProps = MainAppBarDataProps & WithStyles<CssRules>;
@@ -42,6 +46,9 @@ export const MainAppBar = withStyles(styles)(
(props: MainAppBarProps) => {
return <AppBar position="absolute">
<Toolbar className={props.classes.toolbar}>
+ <CollapseLeftPanelTrigger sidepanelcollapsed={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>
@@ -49,7 +56,9 @@ export const MainAppBar = withStyles(styles)(
<span dangerouslySetInnerHTML={{ __html: props.siteBanner }} /> ({props.uuidPrefix})
</Link>
</Typography>
- <Typography variant="caption" color="inherit">{props.buildInfo}</Typography>
+ <Typography variant="caption" color="inherit">
+
+ {props.buildInfo}</Typography>
</Grid>}
<Grid
item
diff --git a/src/views-components/side-panel/side-panel.tsx b/src/views-components/side-panel/side-panel.tsx
index 429e984d..dce8217a 100644
--- a/src/views-components/side-panel/side-panel.tsx
+++ b/src/views-components/side-panel/side-panel.tsx
@@ -9,9 +9,12 @@ import { SidePanelTree, SidePanelTreeProps } from 'views-components/side-panel-t
import { Dispatch } from 'redux';
import { connect } from 'react-redux';
import { navigateFromSidePanel } from 'store/side-panel/side-panel-action';
-import { Grid } from '@material-ui/core';
+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 { IconButtonProps } from '@material-ui/core/IconButton';
+// import { toggleSidePanel } from 'store/store';
const DRAWER_WIDTH = 240;
@@ -45,3 +48,12 @@ export const SidePanel = withStyles(styles)(
<SidePanelTree {...props} />
</Grid>
));
+
+export const CollapseLeftPanelTrigger = (props) =>{
+ console.log(props)
+ return <Tooltip disableFocusListener title="Toggle Side Panel">
+ <IconButton onClick={()=>{props.toggleSidePanel(props.sidepanelcollapsed)}}>
+ <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 5853acb0..2019f7bc 100644
--- a/src/views/main-panel/main-panel-root.tsx
+++ b/src/views/main-panel/main-panel-root.tsx
@@ -11,6 +11,7 @@ import { LoginPanel } from 'views/login-panel/login-panel';
import { InactivePanel } from 'views/inactive-panel/inactive-panel';
import { WorkbenchLoadingScreen } from 'views/workbench/workbench-loading-screen';
import { MainAppBar } from 'views-components/main-app-bar/main-app-bar';
+import { toggleSidePanel } from 'store/store';
type CssRules = 'root';
@@ -32,21 +33,26 @@ export interface MainPanelRootDataProps {
isLinkingPath: boolean;
siteBanner: string;
sessionIdleTimeout: number;
+ sidePanelIsCollapsed: boolean;
}
type MainPanelRootProps = MainPanelRootDataProps & WithStyles<CssRules>;
export const MainPanelRoot = withStyles(styles)(
- ({ classes, loading, working, user, buildInfo, uuidPrefix,
- isNotLinking, isLinkingPath, siteBanner, sessionIdleTimeout }: MainPanelRootProps) =>
- loading
+ (props: MainPanelRootProps | any) =>{
+ const{ classes, loading, working, user, buildInfo, uuidPrefix,
+ isNotLinking, isLinkingPath, siteBanner, sessionIdleTimeout, sidePanelIsCollapsed: sidePanelIsCollapsed } = props
+ return loading
? <WorkbenchLoadingScreen />
: <>
{isNotLinking && <MainAppBar
user={user}
buildInfo={buildInfo}
uuidPrefix={uuidPrefix}
- siteBanner={siteBanner}>
+ siteBanner={siteBanner}
+ sidePanelIsCollapsed={sidePanelIsCollapsed}
+ toggleSidePanel={props.toggleSidePanel}
+ >
{working
? <LinearProgress color="secondary" data-cy="linear-progress" />
: null}
@@ -54,9 +60,10 @@ export const MainPanelRoot = withStyles(styles)(
<Grid container direction="column" className={classes.root}>
{user
? (user.isActive || (!user.isActive && isLinkingPath)
- ? <WorkbenchPanel isNotLinking={isNotLinking} isUserActive={user.isActive} sessionIdleTimeout={sessionIdleTimeout} />
- : <InactivePanel />)
+ ? <WorkbenchPanel isNotLinking={isNotLinking} isUserActive={user.isActive} sessionIdleTimeout={sessionIdleTimeout} sidePanelIsCollapsed={sidePanelIsCollapsed}/>
+ : <InactivePanel />)
: <LoginPanel />}
</Grid>
</>
+}
);
diff --git a/src/views/main-panel/main-panel.tsx b/src/views/main-panel/main-panel.tsx
index 2968499d..0be47f48 100644
--- a/src/views/main-panel/main-panel.tsx
+++ b/src/views/main-panel/main-panel.tsx
@@ -10,6 +10,7 @@ import { isSystemWorking } from 'store/progress-indicator/progress-indicator-red
import { isWorkbenchLoading } from 'store/workbench/workbench-actions';
import { LinkAccountPanelStatus } from 'store/link-account-panel/link-account-panel-reducer';
import { matchLinkAccountRoute } from 'routes/routes';
+import { toggleSidePanel } from "store/store";
const mapStateToProps = (state: RootState): MainPanelRootDataProps => {
return {
@@ -21,10 +22,17 @@ const mapStateToProps = (state: RootState): MainPanelRootDataProps => {
isNotLinking: state.linkAccountPanel.status === LinkAccountPanelStatus.NONE || state.linkAccountPanel.status === LinkAccountPanelStatus.INITIAL,
isLinkingPath: state.router.location ? matchLinkAccountRoute(state.router.location.pathname) !== null : false,
siteBanner: state.auth.config.clusterConfig.Workbench.SiteName,
- sessionIdleTimeout: parse(state.auth.config.clusterConfig.Workbench.IdleTimeout, 's') || 0
+ sessionIdleTimeout: parse(state.auth.config.clusterConfig.Workbench.IdleTimeout, 's') || 0,
+ sidePanelIsCollapsed: state.sidePanel.collapsedState,
};
};
-const mapDispatchToProps = null;
+const mapDispatchToProps = (dispatch) => {
+ return {
+ toggleSidePanel: (collapsedState)=>{
+ return dispatch(toggleSidePanel(collapsedState))
+ }
+ }
+};
export const MainPanel = connect(mapStateToProps, mapDispatchToProps)(MainPanelRoot);
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 22ed30e9..d7ab911e 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 { toggleSidePanel } from 'store/store'
type CssRules = 'root' | 'container' | 'splitter' | 'asidePanel' | 'contentWrapper' | 'content';
@@ -137,6 +138,7 @@ interface WorkbenchDataProps {
isUserActive: boolean;
isNotLinking: boolean;
sessionIdleTimeout: number;
+ sidePanelIsCollapsed: boolean;
}
type WorkbenchPanelProps = WithStyles<CssRules> & WorkbenchDataProps;
@@ -185,16 +187,16 @@ 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]
+ if(rightPanel) {
+ rightPanel.setAttribute('style', `width: ${isCollapsed ? 100 : getSplitterInitialSize()}%`)
+ }
+}
+
export const WorkbenchPanel =
withStyles(styles)((props: WorkbenchPanelProps) =>{
- const [isExpanded, setIsExpanded] = useState<boolean>(false)
-
- const expandRightPanel = (): void=> {
- const rightPanel: Element = document.getElementsByClassName('layout-pane')[1]
- rightPanel.setAttribute('style', `width: ${isExpanded ? getSplitterInitialSize() : 100}%`)
- setIsExpanded(!isExpanded)
- }
-
+ applyCollapsedState(props.sidePanelIsCollapsed)
return <Grid container item xs className={props.classes.root}>
{props.sessionIdleTimeout > 0 && <AutoLogout />}
<Grid container item xs className={props.classes.container}>
@@ -206,7 +208,6 @@ export const WorkbenchPanel =
<SidePanel />
</Grid>}
<Grid container item xs component="main" direction="column" className={props.classes.contentWrapper}>
- <button onClick={expandRightPanel}>moveSplitter</button>
<Grid item xs>
{props.isNotLinking && <MainContentBar />}
</Grid>
commit cee5b3efd5287a0e88254f3088b1d4ef80a38dd9
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Sat Dec 17 13:48:32 2022 -0500
css-only collapse working Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index df76a71d..22ed30e9 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -187,7 +187,14 @@ routes = React.createElement(React.Fragment, null, pluginConfig.centerPanelList.
export const WorkbenchPanel =
withStyles(styles)((props: WorkbenchPanelProps) =>{
- const [collapsedState, setCollapsedState] = useState<boolean>(false)
+ const [isExpanded, setIsExpanded] = useState<boolean>(false)
+
+ const expandRightPanel = (): void=> {
+ const rightPanel: Element = document.getElementsByClassName('layout-pane')[1]
+ rightPanel.setAttribute('style', `width: ${isExpanded ? getSplitterInitialSize() : 100}%`)
+ setIsExpanded(!isExpanded)
+ }
+
return <Grid container item xs className={props.classes.root}>
{props.sessionIdleTimeout > 0 && <AutoLogout />}
<Grid container item xs className={props.classes.container}>
@@ -195,11 +202,11 @@ export const WorkbenchPanel =
primaryIndex={0} primaryMinSize={10}
secondaryInitialSize={getSplitterInitialSize()} secondaryMinSize={40}
onSecondaryPaneSizeChange={saveSplitterSize}>
- {props.isUserActive && props.isNotLinking && !collapsedState && <Grid container item xs component='aside' direction='column' className={props.classes.asidePanel}>
+ {props.isUserActive && props.isNotLinking && <Grid container item xs component='aside' direction='column' className={props.classes.asidePanel}>
<SidePanel />
</Grid>}
<Grid container item xs component="main" direction="column" className={props.classes.contentWrapper}>
- <button onClick={()=>setCollapsedState(!collapsedState)}>collpase</button>
+ <button onClick={expandRightPanel}>moveSplitter</button>
<Grid item xs>
{props.isNotLinking && <MainContentBar />}
</Grid>
commit 69fe13bc122eb2da2f5c7f7f6746394b04b09a8b
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Fri Dec 16 16:36:28 2022 -0500
initial collapse functionality, also fixed random typo Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
diff --git a/src/views-components/side-panel/side-panel.tsx b/src/views-components/side-panel/side-panel.tsx
index 218b624c..429e984d 100644
--- a/src/views-components/side-panel/side-panel.tsx
+++ b/src/views-components/side-panel/side-panel.tsx
@@ -13,7 +13,7 @@ import { Grid } from '@material-ui/core';
import { SidePanelButton } from 'views-components/side-panel-button/side-panel-button';
import { RootState } from 'store/store';
-const DRAWER_WITDH = 240;
+const DRAWER_WIDTH = 240;
type CssRules = 'root';
@@ -23,7 +23,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
borderRight: `1px solid ${theme.palette.divider}`,
height: '100%',
overflowX: 'auto',
- width: DRAWER_WITDH,
+ width: DRAWER_WIDTH,
}
});
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index a6c49e34..df76a71d 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -2,7 +2,7 @@
//
// SPDX-License-Identifier: AGPL-3.0
-import React from 'react';
+import React, { useState } 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";
@@ -186,18 +186,20 @@ const reduceRoutesFn: (a: React.ReactElement[],
routes = React.createElement(React.Fragment, null, pluginConfig.centerPanelList.reduce(reduceRoutesFn, React.Children.toArray(routes.props.children)));
export const WorkbenchPanel =
- withStyles(styles)((props: WorkbenchPanelProps) =>
- <Grid container item xs className={props.classes.root}>
+ withStyles(styles)((props: WorkbenchPanelProps) =>{
+ const [collapsedState, setCollapsedState] = useState<boolean>(false)
+ 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}
primaryIndex={0} primaryMinSize={10}
secondaryInitialSize={getSplitterInitialSize()} secondaryMinSize={40}
onSecondaryPaneSizeChange={saveSplitterSize}>
- {props.isUserActive && props.isNotLinking && <Grid container item xs component='aside' direction='column' className={props.classes.asidePanel}>
+ {props.isUserActive && props.isNotLinking && !collapsedState && <Grid container item xs component='aside' direction='column' className={props.classes.asidePanel}>
<SidePanel />
</Grid>}
<Grid container item xs component="main" direction="column" className={props.classes.contentWrapper}>
+ <button onClick={()=>setCollapsedState(!collapsedState)}>collpase</button>
<Grid item xs>
{props.isNotLinking && <MainContentBar />}
</Grid>
@@ -271,5 +273,5 @@ export const WorkbenchPanel =
<FedLogin />
<WebDavS3InfoDialog />
{React.createElement(React.Fragment, null, pluginConfig.dialogs)}
- </Grid>
+ </Grid>}
);
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list