[ARVADOS-WORKBENCH2] updated: 1.1.4-179-gad2c0be
Git user
git at public.curoverse.com
Fri Jul 6 05:25:12 EDT 2018
Summary of changes:
src/common/custom-theme.ts | 3 +-
src/components/attribute/attribute.tsx | 46 +++++++++++++++++
.../details-panel/details-panel.tsx | 60 ++++++++++------------
3 files changed, 74 insertions(+), 35 deletions(-)
create mode 100644 src/components/attribute/attribute.tsx
via ad2c0bec0c54962c028b5b2db7a1c6be3d9d12c8 (commit)
from 5844264e8def16755e8da6e7e57a716e69a130ff (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit ad2c0bec0c54962c028b5b2db7a1c6be3d9d12c8
Author: Artur Janicki <artur.janicki at contractors.roche.com>
Date: Tue Jul 3 14:40:16 2018 +0200
#13704: add attribute comonent and clean code
Feature #13704
Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki at contractors.roche.com>
diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts
index e78185d..0850f88 100644
--- a/src/common/custom-theme.ts
+++ b/src/common/custom-theme.ts
@@ -7,6 +7,7 @@ import { ThemeOptions, Theme } from '@material-ui/core/styles/createMuiTheme';
import purple from '@material-ui/core/colors/purple';
import blue from '@material-ui/core/colors/blue';
import grey from '@material-ui/core/colors/grey';
+import green from '@material-ui/core/colors/green';
interface ArvadosThemeOptions extends ThemeOptions {
customs: any;
@@ -21,7 +22,7 @@ const grey600 = grey["600"];
const themeOptions: ArvadosThemeOptions = {
customs: {
colors: {
-
+ green700: green["700"]
}
},
overrides: {
diff --git a/src/components/attribute/attribute.tsx b/src/components/attribute/attribute.tsx
new file mode 100644
index 0000000..131d629
--- /dev/null
+++ b/src/components/attribute/attribute.tsx
@@ -0,0 +1,46 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import Typography from '@material-ui/core/Typography';
+import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
+import { ArvadosTheme } from 'src/common/custom-theme';
+
+interface AttributeDataProps {
+ label: string;
+}
+
+type AttributeProps = AttributeDataProps & WithStyles<CssRules>;
+
+class Attribute extends React.Component<AttributeProps> {
+
+ render() {
+ const { label, children, classes } = this.props;
+ return <Typography component="div" className={classes.attribute}>
+ <span className={classes.label}>{label}</span>
+ <span className={classes.value}>{children}</span>
+ </Typography>;
+ }
+
+}
+
+type CssRules = 'attribute' | 'label' | 'value';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ attribute: {
+ display: 'flex',
+ alignItems: 'center',
+ marginBottom: theme.spacing.unit
+ },
+ label: {
+ color: theme.palette.grey["500"],
+ width: '40%'
+ },
+ value: {
+ display: 'flex',
+ alignItems: 'center'
+ }
+});
+
+export default withStyles(styles)(Attribute);
\ No newline at end of file
diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx
index a864d50..be257e8 100644
--- 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 FolderIcon from '@material-ui/icons/Folder';
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';
@@ -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'>
+ <i className="fas fa-cogs fa-lg" />
<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(
- <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 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>
@@ -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) => ({
@@ -113,14 +105,14 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
},
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
- },
- tabSelected: {},
- gridLabel: {
- color: theme.palette.grey["500"]
}
});
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list