[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