[ARVADOS-WORKBENCH2] created: 1.2.0-339-g9759948
Git user
git at public.curoverse.com
Mon Sep 10 05:17:42 EDT 2018
at 97599484adf25a991f6733854334676dd55f7260 (commit)
commit 97599484adf25a991f6733854334676dd55f7260
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Mon Sep 10 11:17:30 2018 +0200
Update details panel layout
Feature #14135
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/package.json b/package.json
index 0e6435e..84d1510 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"react-router-dom": "4.3.1",
"react-router-redux": "5.0.0-alpha.9",
"react-scripts-ts": "2.17.0",
+ "react-transition-group": "2.4.0",
"redux": "4.0.0",
"redux-thunk": "2.3.0",
"unionize": "2.1.2"
diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx
index c0d4797..65c2761 100644
--- a/src/views-components/details-panel/details-panel.tsx
+++ b/src/views-components/details-panel/details-panel.tsx
@@ -3,8 +3,9 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { Drawer, IconButton, Tabs, Tab, Typography, Grid } from '@material-ui/core';
+import { IconButton, Tabs, Tab, Typography, Grid, Tooltip } from '@material-ui/core';
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
+import { Transition } from 'react-transition-group';
import { ArvadosTheme } from '~/common/custom-theme';
import * as classnames from "classnames";
import { connect } from 'react-redux';
@@ -20,29 +21,30 @@ import { ProcessDetails } from "./process-details";
import { EmptyDetails } from "./empty-details";
import { DetailsData } from "./details-data";
import { DetailsResource } from "~/models/details";
-import { getResource } from '../../store/resources/resources';
+import { getResource } from '~/store/resources/resources';
type CssRules = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'headerTitle' | 'tabContainer';
-const drawerWidth = 320;
+const DRAWER_WIDTH = 320;
+const SLIDE_TIMEOUT = 500;
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
width: 0,
- overflowX: 'hidden',
- transition: 'width 0.5s ease',
+ overflow: 'hidden',
+ transition: `width ${SLIDE_TIMEOUT}ms ease`,
background: theme.palette.background.paper,
borderLeft: `1px solid ${theme.palette.divider}`,
height: '100%',
},
opened: {
- width: drawerWidth,
+ width: DRAWER_WIDTH,
},
container: {
- width: drawerWidth,
+ width: DRAWER_WIDTH,
},
drawerPaper: {
position: 'relative',
- width: drawerWidth
+ width: DRAWER_WIDTH
},
headerContainer: {
color: theme.palette.grey["600"],
@@ -57,7 +59,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
wordWrap: 'break-word'
},
tabContainer: {
- padding: theme.spacing.unit * 3
+ padding: theme.spacing.unit * 3,
+ overflow: 'auto',
}
});
@@ -108,50 +111,61 @@ export const DetailsPanel = withStyles(styles)(
this.setState({ tabsValue: value });
}
- renderTabContainer = (children: React.ReactElement<any>) =>
- <Typography className={this.props.classes.tabContainer} component="div">
- {children}
- </Typography>
-
render() {
- const { classes, onCloseDrawer, isOpened, item } = this.props;
- const { tabsValue } = this.state;
+ const { classes, isOpened } = this.props;
return (
- <div className={classnames([classes.root, { [classes.opened]: isOpened }])}>
- <div className={classes.container}>
- <div className={classes.headerContainer}>
- <Grid container alignItems='center' justify='space-around'>
- <Grid item xs={2}>
- {item.getIcon(classes.headerIcon)}
- </Grid>
- <Grid item xs={8}>
- <Typography variant="title" className={classes.headerTitle}>
- {item.getTitle()}
- </Typography>
- </Grid>
- <Grid item>
- <IconButton color="inherit" onClick={onCloseDrawer}>
- {<CloseIcon />}
- </IconButton>
- </Grid>
- </Grid>
- </div>
- <Tabs value={tabsValue} onChange={this.handleChange}>
- <Tab disableRipple label="Details" />
- <Tab disableRipple label="Activity" disabled />
- </Tabs>
- {tabsValue === 0 && this.renderTabContainer(
- <Grid container direction="column">
- {item.getDetails()}
- </Grid>
- )}
- {tabsValue === 1 && this.renderTabContainer(
- <Grid container direction="column" />
- )}
- </div>
- </div>
+ <Grid
+ container
+ direction="column"
+ className={classnames([classes.root, { [classes.opened]: isOpened }])}>
+ <Transition
+ in={isOpened}
+ timeout={SLIDE_TIMEOUT}
+ unmountOnExit>
+ {this.renderContent()}
+ </Transition>
+ </Grid>
);
}
+
+ renderContent() {
+ const { classes, onCloseDrawer, item } = this.props;
+ const { tabsValue } = this.state;
+ return <Grid container direction="column" item xs className={classes.container} >
+ <Grid item className={classes.headerContainer}>
+ <Grid container alignItems='center' justify='space-around' wrap="nowrap">
+ <Grid item xs={2}>
+ {item.getIcon(classes.headerIcon)}
+ </Grid>
+ <Grid item xs={8}>
+ <Tooltip title={item.getTitle()}>
+ <Typography variant="title" noWrap className={classes.headerTitle}>
+ {item.getTitle()}
+ </Typography>
+ </Tooltip>
+ </Grid>
+ <Grid item>
+ <IconButton color="inherit" onClick={onCloseDrawer}>
+ {<CloseIcon />}
+ </IconButton>
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item>
+ <Tabs value={tabsValue} onChange={this.handleChange}>
+ <Tab disableRipple label="Details" />
+ <Tab disableRipple label="Activity" disabled />
+ </Tabs>
+ </Grid>
+ <Grid item xs className={this.props.classes.tabContainer} >
+ <Grid container direction="column">
+ {tabsValue === 0
+ ? item.getDetails()
+ : null}
+ </Grid>
+ </Grid>
+ </Grid >;
+ }
}
)
);
diff --git a/yarn.lock b/yarn.lock
index 67c1264..3599271 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6307,7 +6307,7 @@ react-test-renderer@^16.0.0-0:
prop-types "^15.6.0"
react-is "^16.4.1"
-react-transition-group@^2.2.1:
+react-transition-group at 2.4.0, react-transition-group@^2.2.1:
version "2.4.0"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.4.0.tgz#1d9391fabfd82e016f26fabd1eec329dbd922b5a"
dependencies:
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list