Added color for active leaf of tree

Feature #13535

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>

diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index bb6c93e7a7c4c7a9dfe43a3cb8ad3603f8ada848..0be5499feaaf2aa358b471cc7665ef3d755e6a89 100644 (file)
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -12,16 +12,21 @@ export interface TreeItem<T> {
     data: T;
     id: string;
     open: boolean;
+    active: boolean;
     items?: Array<TreeItem<T>>;
 }
 
 interface TreeProps<T> {
     items?: Array<TreeItem<T>>;
-    render: (item: T) => ReactElement<{}>;
+    render: (item: TreeItem<T>) => ReactElement<{}>;
     toggleItem: (id: string) => any;
     level?: number;
 }
 
+function colorArrows(open: boolean, color: string){
+    return <i style={{marginRight: '10px', minWidth: '10px', color}} className={open ? "fas fa-caret-down" : "fas fa-caret-right"} />
+}
+
 class Tree<T> extends React.Component<TreeProps<T>, {}> {
     render(): ReactElement<any> {
         const level = this.props.level ? this.props.level : 0;
@@ -29,8 +34,8 @@ class Tree<T> extends React.Component<TreeProps<T>, {}> {
             {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) * 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)}
+                    {it.active ? colorArrows(it.open, "#4285F6") : colorArrows(it.open, "#333")}
+                    {this.props.render(it)}
                 </ListItem>
                 {it.items && it.items.length > 0 &&
                 <Collapse in={it.open} timeout="auto" unmountOnExit>

diff --git a/src/index.tsx b/src/index.tsx
index d99c3d1a310a6885370fcac69b75f01f8d11603f..9cc33feb8eba3de42328434b80fea6253dd14814 100644 (file)
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -35,9 +35,10 @@ function buildProjectTree(tree: any[], level = 0): Array<TreeItem<Project>> {
     const projects = tree.map((t, idx) => ({
         id: `l${level}i${idx}${t[0]}`,
         open: false,
+        active: false,
         data: {
             name: t[0],
-            icon: level === 0 ? <i className="icon-th"/> : <i className="fas fa-folder"/>,
+            icon: level === 0 ? <i className="fas fa-th"/> : <i className="fas fa-folder"/>,
             createdAt: '2018-05-05',
         },
         items: t.length > 1 ? buildProjectTree(t[1], level + 1) : []

diff --git a/src/store/project-reducer.ts b/src/store/project-reducer.ts
index f1056f3c63177fec4981f0f0611b984967c36009..42442ba5018522d07c164f1bc8055e4e796b44d5 100644 (file)
--- a/src/store/project-reducer.ts
+++ b/src/store/project-reducer.ts
@@ -23,6 +23,16 @@ function findTreeItem<T>(tree: Array<TreeItem<T>>, itemId: string): TreeItem<T>
     return item;
 }
 
+function resetTreeActivity<T>(tree: Array<TreeItem<T>>): boolean | undefined {
+    let item;
+    for (const leaf of tree) {
+        item = leaf.active === true
+            ? leaf.active = false
+            : resetTreeActivity(leaf.items ? leaf.items : []);
+    }
+    return item;
+}
+
 const projectsReducer = (state: ProjectState = [], action: ProjectAction) => {
     switch (action.type) {
         case getType(actions.createProject): {
@@ -31,9 +41,11 @@ const projectsReducer = (state: ProjectState = [], action: ProjectAction) => {
         case getType(actions.toggleProjectTreeItem): {
             const tree = _.cloneDeep(state);
             const itemId = action.payload;
+            resetTreeActivity(tree);
             const item = findTreeItem(tree, itemId);
             if (item) {
                 item.open = !item.open;
+                item.active = true;
             }
             return tree;
         }

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 8d9e35edc9ac7ca4d5ba77e22530d9382bf2686d..564360263c363461d5b558c1f298dce802b31498 100644 (file)
--- 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' | 'treeContainer' | 'toolbar';
+type CssRules = 'root' | 'appBar' | 'active' | 'drawerPaper' | 'content' | 'row' | 'treeContainer' | 'toolbar';
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     root: {
@@ -39,6 +39,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         zIndex: theme.zIndex.drawer + 1,
         backgroundColor: '#692498'
     },
+    active: {
+        color: '#4285F6',
+    },
     drawerPaper: {
         position: 'relative',
         width: drawerWidth,
@@ -51,14 +54,14 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     },
     row: {
         display: 'flex',
-        alignItems: 'center'
+        alignItems: 'center',
     },
     treeContainer: {
         position: 'absolute',        
         overflowX: 'visible',
         marginTop: '80px',
         minWidth: drawerWidth,
-        whiteSpace: 'nowrap'
+        whiteSpace: 'nowrap',
     },
     toolbar: theme.mixins.toolbar
 });
@@ -92,9 +95,9 @@ class Workbench extends React.Component<WorkbenchProps & WithStyles<CssRules>, W
                     <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>
+                            render={(project: TreeItem<Project>) => <span className={classes.row}>
+                                <div><ListItemIcon className={project.active ? classes.active : ''}>{project.data.icon}</ListItemIcon></div>
+                                <div><ListItemText primary={<Typography className={project.active ? classes.active : ''}>{project.data.name}</Typography>} /></div>
                             </span>}
                             />
                     </div>