Update details panel layout

Feature #14135

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/package.json b/package.json
index 0e6435ebf536da29d695f224423f56780f4fca40..84d1510f5660226cf8a1f7abac8a1ca20a2c0509 100644 (file)
--- 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 c0d4797fa50f68ac89f8dc11b1781b636dfbbdd4..65c2761b7c6c61ebb3f9b62222814b91f42c7e8e 100644 (file)
--- 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 67c12647b4625337eae116a1f6feea7f9322da8e..359927100d4493eca58c01ca52ccc458a55361eb 100644 (file)
--- 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@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: