improve styling of material-tree-renderer

eclipsesource · Aug 30, 2018 · fc156cf · fc156cf
1 parent 93439dc
commit fc156cf
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 19 deletions.
diff --git a/packages/material-tree-renderer/src/tree/ObjectListItem.tsx b/packages/material-tree-renderer/src/tree/ObjectListItem.tsx
@@ -61,15 +61,13 @@ const styles:
       content: '""',
       position: 'absolute',
       left: '0.2em',
-      borderTop: '1px solid lightgrey',
       top: '0.5em',
       width: '1em'
     }, // tslint:disable-next-line:object-literal-key-quotes
     '&:after': {
       content: '""',
       position: 'absolute',
       left: '0.2em',
-      borderLeft: '1px solid lightgrey',
       top: '-0.5em',
       height: '100%'
     }
@@ -94,7 +92,14 @@ const styles:
       marginRight: '0.25em',
       backgroundRepeat: 'no-repeat',
       backgroundPosition: 'center'
-    }
+    }, // tslint:disable-next-line:object-literal-key-quotes
+    '&:hover': {
+      fontWeight: 'bold',
+      cursor: 'pointer',
+      opacity: 0.9,
+      backgroundColor: theme.palette.secondary.main,
+    },
+    alignItems: 'center'
   },
   label: {
     display: 'flex',
@@ -106,13 +111,6 @@ const styles:
       background: '#ffff00',
       maxHeight: '1.5em'
     }, // tslint:disable-next-line:object-literal-key-quotes
-    '&:hover': {
-      fontWeight: 'bold',
-      cursor: 'pointer',
-      color: 'white',
-      opacity: 0.9,
-      backgroundColor: theme.palette.secondary.main,
-    }, // tslint:disable-next-line:object-literal-key-quotes
     '&:hover $actionButton': {
       display: 'flex',
       justifyContent: 'center', // tslint:disable-next-line:object-literal-key-quotes

diff --git a/packages/material-tree-renderer/src/tree/TreeWithDetailRenderer.tsx b/packages/material-tree-renderer/src/tree/TreeWithDetailRenderer.tsx
@@ -104,7 +104,10 @@ const styles: StyleRulesCallback<'treeMasterDetailContent' |
     'treeMasterDetail' |
     'treeMasterDetailMaster' |
     'treeMasterDetailDetail'> = () => ({
-    treeMasterDetailContent: {},
+    treeMasterDetailContent: {
+      paddingTop: '1em',
+      paddingBottom: '1em'
+    },
     // tslint:disable-next-line: object-literal-key-quotes
     treeMasterDetail: {
         display: 'flex',
@@ -119,10 +122,9 @@ const styles: StyleRulesCallback<'treeMasterDetailContent' |
     treeMasterDetailMaster: {
         flex: 1,
         padding: '0.5em',
-        borderStyle: 'solid',
+        height: 'auto',
+        borderRight: '0.2em solid lightgrey',
         borderWidth: 'thin',
-        borderColor: 'lightgrey',
-        borderRadius: '0.2em',
         // tslint:disable-next-line:object-literal-key-quotes
         '& ul': {
             listStyleType: 'none',
@@ -135,7 +137,6 @@ const styles: StyleRulesCallback<'treeMasterDetailContent' |
                 content: '""',
                 position: 'absolute',
                 left: '0.2em',
-                borderLeft: '1px solid lightgrey',
                 height: '0.6em',
                 bottom: '0'
             }, // tslint:disable-next-line:object-literal-key-quotes
@@ -148,10 +149,8 @@ const styles: StyleRulesCallback<'treeMasterDetailContent' |
     treeMasterDetailDetail: {
         flex: 3,
         padding: '0.5em',
-        borderStyle: 'solid',
-        borderWidth: 'thin',
-        borderColor: 'lightgrey',
-        borderRadius: '0.2em', // tslint:disable-next-line:object-literal-key-quotes
+        paddingLeft: '1em',
+      // tslint:disable-next-line:object-literal-key-quotes
         '&:first-child': {
             marginRight: '0.25em'
         }