import { CreateProjectDialog } from '~/views-components/dialog-forms/create-project-dialog';
import { CreateCollectionDialog } from '~/views-components/dialog-forms/create-collection-dialog';
import { CopyCollectionDialog } from '~/views-components/dialog-forms/copy-collection-dialog';
+import { CopyProcessDialog } from '~/views-components/dialog-forms/copy-process-dialog';
import { UpdateCollectionDialog } from '~/views-components/dialog-forms/update-collection-dialog';
+import { UpdateProcessDialog } from '~/views-components/dialog-forms/update-process-dialog';
import { UpdateProjectDialog } from '~/views-components/dialog-forms/update-project-dialog';
import { MoveProcessDialog } from '~/views-components/dialog-forms/move-process-dialog';
import { MoveProjectDialog } from '~/views-components/dialog-forms/move-project-dialog';
import { FilesUploadCollectionDialog } from '~/views-components/dialog-forms/files-upload-collection-dialog';
import { PartialCopyCollectionDialog } from '~/views-components/dialog-forms/partial-copy-collection-dialog';
import { TrashPanel } from "~/views/trash-panel/trash-panel";
-import { MainContentBar } from '../../views-components/main-content-bar/main-content-bar';
-import { Grid } from '@material-ui/core';
+import { MainContentBar } from '~/views-components/main-content-bar/main-content-bar';
+import { Grid, LinearProgress } from '@material-ui/core';
+import { SharedWithMePanel } from '../shared-with-me-panel/shared-with-me-panel';
+import SplitterLayout from 'react-splitter-layout';
+import { ProcessCommandDialog } from '~/views-components/process-command-dialog/process-command-dialog';
+import { isSystemWorking } from "~/store/progress-indicator/progress-indicator-reducer";
-type CssRules = 'root' | 'contentWrapper' | 'content' | 'appBar';
+type CssRules = 'root' | 'container' | 'splitter' | 'asidePanel' | 'contentWrapper' | 'content' | 'appBar';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
overflow: 'hidden',
width: '100vw',
- height: '100vh'
+ height: '100vh',
+ paddingTop: theme.spacing.unit * 8
+ },
+ container: {
+ position: 'relative'
+ },
+ splitter: {
+ '& > .layout-splitter': {
+ width: '2px'
+ }
+ },
+ asidePanel: {
+ height: '100%',
+ background: theme.palette.background.default
},
contentWrapper: {
background: theme.palette.background.default,
},
content: {
minWidth: 0,
- overflow: 'auto',
paddingLeft: theme.spacing.unit * 3,
paddingRight: theme.spacing.unit * 3,
},
interface WorkbenchDataProps {
user?: User;
currentToken?: string;
+ working: boolean;
}
interface WorkbenchGeneralProps {
(state: RootState) => ({
user: state.auth.user,
currentToken: state.auth.apiToken,
+ working: isSystemWorking(state.progressIndicator)
})
)(
class extends React.Component<WorkbenchProps, WorkbenchState> {
state = {
searchText: "",
};
-
render() {
+ const { classes } = this.props;
return <>
- <Grid
- container
- direction="column"
- className={this.props.classes.root}>
- <Grid className={this.props.classes.appBar}>
- <MainAppBar
- searchText={this.state.searchText}
- user={this.props.user}
- onSearch={this.onSearch}
- buildInfo={this.props.buildInfo} />
- </Grid>
+ <MainAppBar
+ searchText={this.state.searchText}
+ user={this.props.user}
+ onSearch={this.onSearch}
+ buildInfo={this.props.buildInfo}>
+ {this.props.working ? <LinearProgress color="secondary" /> : null}
+ </MainAppBar>
+ <Grid container direction="column" className={classes.root}>
{this.props.user &&
- <Grid
- container
- item
- xs
- alignItems="stretch"
- wrap="nowrap">
- <Grid item>
- <SidePanel />
- </Grid>
- <Grid
- container
- item
- xs
- component="main"
- direction="column"
- className={this.props.classes.contentWrapper}>
- <Grid item>
- <MainContentBar />
- </Grid>
- <Grid item xs className={this.props.classes.content}>
- <Switch>
- <Route path={Routes.PROJECTS} component={ProjectPanel} />
- <Route path={Routes.COLLECTIONS} component={CollectionPanel} />
- <Route path={Routes.FAVORITES} component={FavoritePanel} />
- <Route path={Routes.PROCESSES} component={ProcessPanel} />
- <Route path={Routes.TRASH} component={TrashPanel} />
- <Route path={Routes.PROCESS_LOGS} component={ProcessLogPanel} />
- </Switch>
- </Grid>
+ <Grid container item xs alignItems="stretch" wrap="nowrap">
+ <Grid container item className={classes.container}>
+ <SplitterLayout customClassName={classes.splitter} percentage={true}
+ primaryIndex={0} primaryMinSize={20} secondaryInitialSize={80} secondaryMinSize={40}>
+ <Grid container item xs component='aside' direction='column' className={classes.asidePanel}>
+ <SidePanel />
+ </Grid>
+ <Grid container item xs component="main" direction="column" className={classes.contentWrapper}>
+ <Grid item>
+ <MainContentBar />
+ </Grid>
+ <Grid item xs className={classes.content}>
+ <Switch>
+ <Route path={Routes.PROJECTS} component={ProjectPanel} />
+ <Route path={Routes.COLLECTIONS} component={CollectionPanel} />
+ <Route path={Routes.FAVORITES} component={FavoritePanel} />
+ <Route path={Routes.PROCESSES} component={ProcessPanel} />
+ <Route path={Routes.TRASH} component={TrashPanel} />
+ <Route path={Routes.PROCESS_LOGS} component={ProcessLogPanel} />
+ <Route path={Routes.SHARED_WITH_ME} component={SharedWithMePanel} />
+ </Switch>
+ </Grid>
+ </Grid>
+ </SplitterLayout>
</Grid>
<Grid item>
<DetailsPanel />
</Grid>
- </Grid>}
+ </Grid>
+ }
</Grid>
<ContextMenu />
- <Snackbar />
- <CreateProjectDialog />
+ <CopyCollectionDialog />
+ <CopyProcessDialog />
<CreateCollectionDialog />
- <RenameFileDialog />
- <PartialCopyCollectionDialog />
+ <CreateProjectDialog />
+ <CurrentTokenDialog />
<FileRemoveDialog />
- <CopyCollectionDialog />
<FileRemoveDialog />
- <MultipleFilesRemoveDialog />
- <UpdateCollectionDialog />
<FilesUploadCollectionDialog />
- <UpdateProjectDialog />
<MoveCollectionDialog />
<MoveProcessDialog />
<MoveProjectDialog />
- <CurrentTokenDialog />
+ <MultipleFilesRemoveDialog />
+ <PartialCopyCollectionDialog />
+ <ProcessCommandDialog />
+ <RenameFileDialog />
+ <Snackbar />
+ <UpdateCollectionDialog />
+ <UpdateProcessDialog />
+ <UpdateProjectDialog />
</>;
}