Update details panel layout

[arvados-workbench2.git] / src / views-components / details-panel / details-panel.tsx

diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx
index 70c026d3d3385440dad0035ac6d657b2387c1f4e..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,24 +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';
 
-type CssRules = 'drawerPaper' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'headerTitle' | 'tabContainer';
+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) => ({
-    container: {
+    root: {
         width: 0,
-        position: 'relative',
-        height: 'auto',
-        transition: 'width 0.5s ease',
-        '&$opened': {
-            width: drawerWidth
-        }
+        overflow: 'hidden',
+        transition: `width ${SLIDE_TIMEOUT}ms ease`,
+        background: theme.palette.background.paper,
+        borderLeft: `1px solid ${theme.palette.divider}`,
+        height: '100%',
+    },
+    opened: {
+        width: DRAWER_WIDTH,
+    },
+    container: {
+        width: DRAWER_WIDTH,
     },
-    opened: {},
     drawerPaper: {
         position: 'relative',
-        width: drawerWidth
+        width: DRAWER_WIDTH
     },
     headerContainer: {
         color: theme.palette.grey["600"],
@@ -48,10 +55,12 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         fontSize: '2.125rem'
     },
     headerTitle: {
-        wordBreak: 'break-all'
+        overflowWrap: 'break-word',
+        wordWrap: 'break-word'
     },
     tabContainer: {
-        padding: theme.spacing.unit * 3
+        padding: theme.spacing.unit * 3,
+        overflow: 'auto',
     }
 });
 
@@ -69,10 +78,13 @@ const getItem = (resource: DetailsResource): DetailsData => {
     }
 };
 
-const mapStateToProps = ({ detailsPanel }: RootState) => ({
-    isOpened: detailsPanel.isOpened,
-    item: getItem(detailsPanel.item as DetailsResource)
-});
+const mapStateToProps = ({ detailsPanel, resources }: RootState) => {
+    const resource = getResource(detailsPanel.resourceUuid)(resources) as DetailsResource;
+    return {
+        isOpened: detailsPanel.isOpened,
+        item: getItem(resource)
+    };
+};
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
     onCloseDrawer: () => {
@@ -99,51 +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 (
-                    <Typography component="div"
-                                className={classnames([classes.container, { [classes.opened]: isOpened }])}>
-                        <Drawer variant="permanent" anchor="right" classes={{ paper: classes.drawerPaper }}>
-                            <Typography component="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>
-                            </Typography>
-                            <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"/>
-                            )}
-                        </Drawer>
-                    </Typography>
+                    <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 >;
+            }
         }
     )
 );