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