src/views-components/details-panel/details-panel.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import Drawer from '@material-ui/core/Drawer';
   7 import IconButton from "@material-ui/core/IconButton";
   8 import CloseIcon from '@material-ui/icons/Close';
   9 import { StyleRulesCallback, WithStyles, withStyles, Theme } from "@material-ui/core/styles";
  10 import Tabs from '@material-ui/core/Tabs';
  11 import Tab from '@material-ui/core/Tab';
  12 import Typography from '@material-ui/core/Typography';
  13 import Grid from '@material-ui/core/Grid';
  14 import * as classnames from "classnames";
  15
  16 export interface DetailsPanelProps {
  17     closeDrawer: () => void;
  18     isOpened: boolean;
  19 }
  20
  21 class DetailsPanel extends React.Component<DetailsPanelProps & WithStyles<CssRules>, {}> {
  22         state = {
  23                 tabsValue: 0,
  24         };
  25
  26         handleChange = (event: any, value: boolean) => {
  27                 this.setState({ tabsValue: value });
  28         }
  29
  30     renderTabContainer = (children: React.ReactElement<any>) => {
  31         return (
  32             <Typography className={this.props.classes.tabContainer} component="div">
  33                 {children}
  34             </Typography>
  35         );
  36     }
  37
  38         render() {
  39         const { classes, closeDrawer, isOpened } = this.props;
  40                 const { tabsValue } = this.state;
  41         return (
  42             <div className={classnames([classes.container, { [classes.opened]: isOpened }])}>
  43                 <Drawer variant="permanent" anchor="right" classes={{ paper: classes.drawerPaper }}>
  44                                         <Typography component="div" className={classes.headerContainer}>
  45                                                 <Grid container alignItems='center' justify='space-around'>
  46                                                         <Typography variant="title">
  47                                                                 Tutorial pipeline
  48                                                         </Typography>
  49                             <IconButton color="inherit" onClick={closeDrawer}>
  50                                                                 <CloseIcon />
  51                                                         </IconButton>
  52                                                 </Grid>
  53                                         </Typography>
  54                                         <Tabs value={tabsValue} onChange={this.handleChange}
  55                                                 classes={{ indicator: classes.tabsIndicator }}>
  56                                                 <Tab
  57                                                         disableRipple
  58                                                         classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
  59                                                         label="Details" />
  60                                                 <Tab
  61                                                         disableRipple
  62                                                         classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
  63                                                         label="Activity" />
  64                                         </Tabs>
  65                     {tabsValue === 0 && this.renderTabContainer(
  66                                                 <Grid container>
  67                                                         <Grid item xs={6} sm={4} className={classes.gridLabel}>
  68                                                                 <p>Type</p>
  69                                                                 <p>Size</p>
  70                                                                 <p>Location</p>
  71                                                                 <p>Owner</p>
  72                                                         </Grid>
  73                                                         <Grid item xs={6} sm={4}>
  74                                                                 <p>Process</p>
  75                                                                 <p>---</p>
  76                                                                 <p>Projects</p>
  77                                                                 <p>me</p>
  78                                                         </Grid>
  79                                                 </Grid>
  80                                         )}
  81                     {tabsValue === 1 && this.renderTabContainer(
  82                                                 <Grid container>
  83                                                         <Grid item xs={6} sm={4} className={classes.gridLabel}>
  84                                                                 <p>Type</p>
  85                                                                 <p>Size</p>
  86                                                                 <p>Location</p>
  87                                                                 <p>Owner</p>
  88                                                         </Grid>
  89                                                         <Grid item xs={6} sm={4}>
  90                                                                 <p>Process</p>
  91                                                                 <p>---</p>
  92                                                                 <p>Projects</p>
  93                                                                 <p>me</p>
  94                                                         </Grid>
  95                                                 </Grid>
  96                                         )}
  97                 </Drawer>
  98             </div>
  99         );
 100     }
 101
 102 }
 103
 104 type CssRules = 'drawerPaper' | 'container' | 'opened' | 'headerContainer'
 105         | 'tabsIndicator' | 'tabRoot' | 'tabContainer' | 'tabSelected' | 'gridLabel';
 106
 107 const drawerWidth = 320;
 108 const colorPurple = '#692498';
 109 const colorLightGray = '#A1A1A1';
 110 const colorVeryLightGray = '#999999';
 111 const colorGray = '#333';
 112
 113 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
 114         container: {
 115         width: 0,
 116                 position: 'relative',
 117         height: 'auto',
 118         transition: 'width 0.5s ease',
 119         '&$opened': {
 120             width: drawerWidth
 121         }
 122     },
 123     opened: {},
 124     drawerPaper: {
 125         position: 'relative',
 126         width: drawerWidth
 127         },
 128         headerContainer: {
 129         color: colorLightGray,
 130                 margin: `${theme.spacing.unit}px 0`
 131         },
 132         tabsIndicator: {
 133         backgroundColor: colorPurple
 134         },
 135         tabRoot: {
 136         color: colorGray,
 137                 '&$tabSelected': {
 138                         fontWeight: 700,
 139             color: colorPurple
 140                 }
 141         },
 142         tabContainer: {
 143                 padding: theme.spacing.unit * 3
 144         },
 145         tabSelected: {},
 146         gridLabel: {
 147         color: colorVeryLightGray,
 148         }
 149 });
 150
 151 export default withStyles(styles)(DetailsPanel);