[ARVADOS-WORKBENCH2] updated: 4cdf454b772363d262eb7a391c3f37c55800d853

[Git user]

Summary of changes:
 src/components/tree/tree.tsx      |  4 ++--
 src/views/workbench/workbench.tsx | 28 +++++++++++++++++++---------
 2 files changed, 21 insertions(+), 11 deletions(-)

       via  4cdf454b772363d262eb7a391c3f37c55800d853 (commit)
      from  c92ee19217ebd5cce3c17f757b45bcfa1d5bc702 (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 4cdf454b772363d262eb7a391c3f37c55800d853
Author: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
Date:   Tue Jun 5 12:09:23 2018 +0200

    Added scrollability, styles for tree
    
    Feature #13535
    
    Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>

diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index 93e90c7..bb6c93e 100644
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -25,10 +25,10 @@ interface TreeProps<T> {
 class Tree<T> extends React.Component<TreeProps<T>, {}> {
     render(): ReactElement<any> {
         const level = this.props.level ? this.props.level : 0;
-        return <List component="div">
+        return <List component="div" style={{paddingBottom: '3px', paddingTop: '3px'}}>
             {this.props.items && this.props.items.map((it: TreeItem<T>, idx: number) =>
              <div key={`item/${level}/${idx}`}>      
-                <ListItem button onClick={() => this.props.toggleItem(it.id)} style={{paddingLeft: (level + 1) * 20}}>  
+                <ListItem button onClick={() => this.props.toggleItem(it.id)} style={{paddingLeft: (level + 1) * 15, paddingBottom: '3px', paddingTop: '3px'}}>  
                     <i style={{marginRight: "10px"}} className={it.open ? "fas fa-caret-down" : "fas fa-caret-right"} />
                     {this.props.render(it.data)}
                 </ListItem>
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index b11a136..8d9e35e 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -23,7 +23,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
 
 const drawerWidth = 240;
 
-type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'row' | 'toolbar';
+type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'row' | 'treeContainer' | 'toolbar';
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     root: {
@@ -50,7 +50,15 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         minWidth: 0,
     },
     row: {
-        display: 'flex'
+        display: 'flex',
+        alignItems: 'center'
+    },
+    treeContainer: {
+        position: 'absolute',        
+        overflowX: 'visible',
+        marginTop: '80px',
+        minWidth: drawerWidth,
+        whiteSpace: 'nowrap'
     },
     toolbar: theme.mixins.toolbar
 });
@@ -81,13 +89,15 @@ class Workbench extends React.Component<WorkbenchProps & WithStyles<CssRules>, W
                         paper: classes.drawerPaper,
                     }}>
                     <div className={classes.toolbar}/>
-                    <Tree items={projects}
-                        toggleItem={this.props.toggleProjectTreeItem}
-                        render={(p: Project) => <span className={classes.row}>
-                            <div style={{marginTop: "3px"}}><ListItemIcon>{p.icon}</ListItemIcon></div>
-                            <div><ListItemText primary={p.name}/></div>
-                        </span>}
-                        />
+                    <div className={classes.treeContainer}>
+                        <Tree items={projects}
+                            toggleItem={this.props.toggleProjectTreeItem}
+                            render={(p: Project) => <span className={classes.row}>
+                                <div><ListItemIcon>{p.icon}</ListItemIcon></div>
+                                <div><ListItemText primary={p.name}/></div>
+                            </span>}
+                            />
+                    </div>
                 </Drawer>
                 <main className={classes.content}>
                     <div className={classes.toolbar}/>

-----------------------------------------------------------------------


hooks/post-receive
--