[arvados-workbench2] updated: 2.7.0-173-gb4d518c9

git repository hosting git at public.arvados.org
Fri Nov 3 15:17:46 UTC 2023


Summary of changes:
 .../side-panel-toggle/side-panel-toggle.tsx        |  2 +-
 .../side-panel/side-panel-collapsed.tsx            | 31 +++++++++++++++++-----
 2 files changed, 25 insertions(+), 8 deletions(-)

       via  b4d518c97713bc542abfb8f4041ae25b82db3764 (commit)
      from  c314adae7b1551ef6682d4a3760bda5787b989ce (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 b4d518c97713bc542abfb8f4041ae25b82db3764
Author: Lisa Knox <lisaknox83 at gmail.com>
Date:   Fri Nov 3 11:17:38 2023 -0400

    19302: side panel selected highlight works Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>

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 0de66d45..dada57d8 100644
--- 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 ba829f6c..a813b703 100644
--- 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

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


hooks/post-receive
-- 




More information about the arvados-commits mailing list