#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 e78185dd5da0dd99823e6d968637c62bd2d35a93..0850f8815a7c6bb712b4c8f935f3f0da7f38c9bf 100644 (file)
--- 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 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;
 
 interface ArvadosThemeOptions extends ThemeOptions {
     customs: any;


@@ -21,7 +22,7 @@ const grey600 = grey["600"];
 const themeOptions: ArvadosThemeOptions = {
     customs: {
         colors: {
 const themeOptions: ArvadosThemeOptions = {
     customs: {
         colors: {

-            
+            green700: green["700"]

         }
     },
     overrides: {
         }
     },
     overrides: {

diff --git a/src/components/attribute/attribute.tsx b/src/components/attribute/attribute.tsx
new file mode 100644 (file)
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 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"]

        }
 });
 
        }
 });