19302: side panel selected highlight works Arvados-DCO-1.1-Signed-off-by: Lisa Knox...

diff --git a/src/views-components/side-panel-toggle/side-panel-toggle.tsx b/src/views-components/side-panel-toggle/side-panel-toggle.tsx
index 0de66d4500f47a8739faa2b04f02d06a05dc84ae..dada57d81d0e20d1b3e4013db8ba4ca24c2f2d3b 100644 (file)
--- a/src/views-components/side-panel-toggle/side-panel-toggle.tsx
+++ b/src/views-components/side-panel-toggle/side-panel-toggle.tsx
@@ -21,7 +21,7 @@ const SidePanelToggle = (props: collapseButtonProps) => {
             width: `${COLLAPSE_ICON_SIZE}px`,
             height: `${COLLAPSE_ICON_SIZE}px`,
             marginTop: '0.4rem',
-            marginLeft: '0.6rem'
+            marginLeft: '0.7rem',
         },
         icon: {
             opacity: '0.5',

diff --git a/src/views-components/side-panel/side-panel-collapsed.tsx b/src/views-components/side-panel/side-panel-collapsed.tsx
index ba829f6c30870ca337dcf606ed3743658a0df130..a813b703def6cf491f1622bf7ada03bb13927951 100644 (file)
--- a/src/views-components/side-panel/side-panel-collapsed.tsx
+++ b/src/views-components/side-panel/side-panel-collapsed.tsx
@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useState } from 'react'
 import { connect } from 'react-redux'
 import { ProjectsIcon, ProcessIcon, FavoriteIcon, ShareMeIcon, TrashIcon, PublicFavoriteIcon, GroupsIcon } from 'components/icon/icon'
 import { List, ListItem, Tooltip } from '@material-ui/core'
@@ -20,14 +20,18 @@ import {
     navigateToTrash,
 } from 'store/navigation/navigation-action'
 import { RouterAction } from 'react-router-redux'
+import { Tree } from 'models/tree'
 
-type CssRules = 'root' | 'icon'
+type CssRules = 'root' | 'unselected' | 'selected'
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {},
-    icon: {
+    unselected: {
         color: theme.customs.colors.grey700,
     },
+    selected: {
+        color: theme.palette.primary.main,
+    },
 })
 
 enum SidePanelCollapsedCategory {
@@ -84,9 +88,19 @@ const sidePanelCollapsedCategories: TCollapsedCategory[] = [
     },
 ]
 
+const findSelectedPath = (tree: Tree<any>) => {
+    for (const category in tree) {
+        if (tree[category].active === true) {
+            return tree[category].id
+        }
+    }
+    return null
+}
+
 const mapStateToProps = (state: RootState) => {
     return {
         user: state.auth.user,
+        selectedPath: findSelectedPath(state.treePicker.sidePanelTree),
     }
 }
 
@@ -98,19 +112,22 @@ const mapDispatchToProps = (dispatch: Dispatch) => {
 }
 
 export const SidePanelCollapsed = withStyles(styles)(
-    connect(mapStateToProps, mapDispatchToProps)(({ classes, user, navToHome, navTo }: WithStyles & any) => {
+    connect(mapStateToProps, mapDispatchToProps)(({ classes, user, selectedPath, navToHome, navTo }: WithStyles & any) => {
+        const [selectedIcon, setSelectedIcon] = useState(selectedPath)
 
         const handleClick = (cat: TCollapsedCategory) => {
+            setSelectedIcon(cat.name)
             if (cat.name === SidePanelCollapsedCategory.PROJECTS) navToHome(user.uuid)
             else navTo(cat.navTarget)
         }
 
+        const { root, unselected, selected } = classes
         return (
-            <List>
-                {sidePanelCollapsedCategories.map(cat => (
+            <List className={root}>
+                {sidePanelCollapsedCategories.map((cat) => (
                     <ListItem
                         key={cat.name}
-                        className={classes.icon}
+                        className={selectedIcon === cat.name ? selected : unselected}
                         onClick={() => handleClick(cat)}
                     >
                         <Tooltip