projects
/
arvados-workbench2.git
/ blobdiff
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
#13704: add attribute comonent and clean code
[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 a864d5078a46ff3d4c5905a35002cfe11a96218b..be257e8382ac4b6e935fdc980c8ae5343e081395 100644
(file)
--- a/
src/views-components/details-panel/details-panel.tsx
+++ b/
src/views-components/details-panel/details-panel.tsx
@@
-6,8
+6,10
@@
import * as React from 'react';
import Drawer from '@material-ui/core/Drawer';
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from '@material-ui/icons/Close';
import Drawer from '@material-ui/core/Drawer';
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from '@material-ui/icons/Close';
+import FolderIcon from '@material-ui/icons/Folder';
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
import { ArvadosTheme } from '../../common/custom-theme';
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
import { ArvadosTheme } from '../../common/custom-theme';
+import Attribute from '../../components/attribute/attribute';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
@@
-41,6
+43,7
@@
class DetailsPanel extends React.Component<DetailsPanelProps & WithStyles<CssRul
<Drawer variant="permanent" anchor="right" classes={{ paper: classes.drawerPaper }}>
<Typography component="div" className={classes.headerContainer}>
<Grid container alignItems='center' justify='space-around'>
<Drawer variant="permanent" anchor="right" classes={{ paper: classes.drawerPaper }}>
<Typography component="div" className={classes.headerContainer}>
<Grid container alignItems='center' justify='space-around'>
+ <i className="fas fa-cogs fa-lg" />
<Typography variant="title">
Tutorial pipeline
</Typography>
<Typography variant="title">
Tutorial pipeline
</Typography>
@@
-54,36
+57,26
@@
class DetailsPanel extends React.Component<DetailsPanelProps & WithStyles<CssRul
<Tab disableRipple label="Activity" />
</Tabs>
{tabsValue === 0 && this.renderTabContainer(
<Tab disableRipple label="Activity" />
</Tabs>
{tabsValue === 0 && this.renderTabContainer(
- <Grid container>
- <Grid item xs={6} sm={4} className={classes.gridLabel}>
- <p>Type</p>
- <p>Size</p>
- <p>Location</p>
- <p>Owner</p>
- </Grid>
- <Grid item xs={6} sm={4}>
- <p>Process</p>
- <p>---</p>
- <p>Projects</p>
- <p>me</p>
- </Grid>
+ <Grid container direction="column">
+ <Attribute label="Type">Process</Attribute>
+ <Attribute label="Size">---</Attribute>
+ <Attribute label="Location">
+ <FolderIcon />
+ Projects
+ </Attribute>
+ <Attribute label="Owner">me</Attribute>
</Grid>
)}
{tabsValue === 1 && this.renderTabContainer(
</Grid>
)}
{tabsValue === 1 && this.renderTabContainer(
- <Grid container>
- <Grid item xs={6} sm={4} className={classes.gridLabel}>
- <p>Type</p>
- <p>Size</p>
- <p>Location</p>
- <p>Owner</p>
- </Grid>
- <Grid item xs={6} sm={4}>
- <p>Process</p>
- <p>---</p>
- <p>Projects</p>
- <p>me</p>
- </Grid>
- </Grid>
+ <Grid container direction="column">
+ <Attribute label="Type">Process</Attribute>
+ <Attribute label="Size">---</Attribute>
+ <Attribute label="Location">
+ <FolderIcon />
+ Projects
+ </Attribute>
+ <Attribute label="Owner">me</Attribute>
+ </Grid>
)}
</Drawer>
</div>
)}
</Drawer>
</div>
@@
-92,8
+85,7
@@
class DetailsPanel extends React.Component<DetailsPanelProps & WithStyles<CssRul
}
}
-type CssRules = 'drawerPaper' | 'container' | 'opened' | 'headerContainer'
- | 'tabContainer' | 'tabSelected' | 'gridLabel';
+type CssRules = 'drawerPaper' | 'container' | 'opened' | 'headerContainer' | 'tabContainer';
const drawerWidth = 320;
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
const drawerWidth = 320;
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
@@
-113,14
+105,14
@@
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
},
headerContainer: {
color: theme.palette.grey["600"],
},
headerContainer: {
color: theme.palette.grey["600"],
- margin: `${theme.spacing.unit}px 0`
+ margin: `${theme.spacing.unit}px 0`,
+ '& .fa-cogs': {
+ fontSize: "24px",
+ color: theme.customs.colors.green700
+ }
},
tabContainer: {
padding: theme.spacing.unit * 3
},
tabContainer: {
padding: theme.spacing.unit * 3
- },
- tabSelected: {},
- gridLabel: {
- color: theme.palette.grey["500"]
}
});
}
});