18219: Improves property chips styling in both 1 or 2 column configurations.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>

diff --git a/src/views-components/details-panel/collection-details.tsx b/src/views-components/details-panel/collection-details.tsx
index 369c93e5379fd754ce3c6c3ef9e04cb1d38a99e8..5edfbc37e1b36354df7fb5c848763f3613e7ec72 100644 (file)
--- a/src/views-components/details-panel/collection-details.tsx
+++ b/src/views-components/details-panel/collection-details.tsx
@@ -22,7 +22,8 @@ export type CssRules = 'versionBrowserHeader'
     | 'versionBrowserItem'
     | 'versionBrowserField'
     | 'editButton'
-    | 'editIcon';
+    | 'editIcon'
+    | 'tag';
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
     versionBrowserHeader: {
@@ -44,6 +45,10 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
         padding: '2px 10px 2px 5px',
         fontSize: '0.75rem'
     },
+    tag: {
+        marginRight: theme.spacing.unit / 2,
+        marginBottom: theme.spacing.unit / 2
+    },
 });
 
 export class CollectionDetails extends DetailsData<CollectionResource> {
@@ -114,7 +119,7 @@ const CollectionInfo = withStyles(styles)(
                         onClick={() => editCollection(currentCollection)}>
                         <RenameIcon className={classes.editIcon} /> Edit
                     </Button>
-                    <CollectionDetailsAttributes twoCol={false} item={currentCollection} />
+                    <CollectionDetailsAttributes classes={classes} twoCol={false} item={currentCollection} />
                 </div>
                 : <div />
     )

diff --git a/src/views-components/details-panel/project-details.tsx b/src/views-components/details-panel/project-details.tsx
index 8ed15b317fb308c8c901f59906f01fb2d2f8b077..d410076734dcd96e1f847b07bd3a862e7b8aded9 100644 (file)
--- a/src/views-components/details-panel/project-details.tsx
+++ b/src/views-components/details-panel/project-details.tsx
@@ -37,8 +37,8 @@ type CssRules = 'tag' | 'editIcon' | 'editButton';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     tag: {
-        marginRight: theme.spacing.unit,
-        marginBottom: theme.spacing.unit
+        marginRight: theme.spacing.unit / 2,
+        marginBottom: theme.spacing.unit / 2,
     },
     editIcon: {
         paddingRight: theme.spacing.unit/2,

diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index 2c7a8f2c1a2067e151be9f812674682f2dd388f6..d513cfb48db2ed329427150ddd541456cca097cc 100644 (file)
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -77,8 +77,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         color: theme.customs.colors.yellow700
     },
     tag: {
-        marginRight: theme.spacing.unit,
-        marginBottom: theme.spacing.unit
+        marginRight: theme.spacing.unit / 2,
+        marginBottom: theme.spacing.unit / 2
     },
     label: {
         fontSize: '0.875rem'
@@ -333,7 +333,12 @@ export const CollectionDetailsAttributes = (props: CollectionDetailsProps) => {
             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
                 label='Storage classes' value={item.storageClassesDesired.join(', ')} />
         </Grid>
-        <Grid item xs={12} md={mdSize}>
+
+        {/*
+            NOTE: The property list should be kept at the bottom, because it spans
+            the entire available width, without regards of the twoCol prop.
+        */}
+        <Grid item xs={12} md={12}>
             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
                 label='Properties' />
             { Object.keys(item.properties).length > 0