From: Artur Janicki <artur.janicki@contractors.roche.com>
Date: Tue, 3 Jul 2018 12:40:16 +0000 (+0200)
Subject: #13704: add attribute comonent and clean code
X-Git-Tag: 1.2.0~60^2~2
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/ad2c0bec0c54962c028b5b2db7a1c6be3d9d12c8

#13704: add attribute comonent and clean code

Feature #13704

Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki@contractors.roche.com>
---

diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts
index e78185dd..0850f881 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 00000000..131d629a
--- /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 a864d507..be257e83 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"]
 	}
 });