[arvados-workbench2] updated: 2.7.0-171-g9fe1e9ff
git repository hosting
git at public.arvados.org
Thu Nov 2 18:40:00 UTC 2023
Summary of changes:
.../side-panel-toggle/side-panel-toggle.tsx | 7 +-
.../side-panel/side-panel-collapsed.tsx | 100 +++++++++++++++++++++
src/views-components/side-panel/side-panel.tsx | 8 +-
src/views/workbench/workbench.tsx | 2 +-
4 files changed, 112 insertions(+), 5 deletions(-)
create mode 100644 src/views-components/side-panel/side-panel-collapsed.tsx
via 9fe1e9ff7d9af167f0ee350ab5a68ded128d8043 (commit)
from 45dab1a8d772d04484cdd8a5f7487cb74a105ad9 (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 9fe1e9ff7d9af167f0ee350ab5a68ded128d8043
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Thu Nov 2 14:39:55 2023 -0400
19302: side panel icons in place 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 0bcfbd3d..0de66d45 100644
--- a/src/views-components/side-panel-toggle/side-panel-toggle.tsx
+++ b/src/views-components/side-panel-toggle/side-panel-toggle.tsx
@@ -20,7 +20,8 @@ const SidePanelToggle = (props: collapseButtonProps) => {
root: {
width: `${COLLAPSE_ICON_SIZE}px`,
height: `${COLLAPSE_ICON_SIZE}px`,
- marginTop: '0.4rem'
+ marginTop: '0.4rem',
+ marginLeft: '0.6rem'
},
icon: {
opacity: '0.5',
@@ -31,9 +32,9 @@ const SidePanelToggle = (props: collapseButtonProps) => {
<IconButton style={collapseButtonIconStyles.root} onClick={() => { props.toggleSidePanel(props.isCollapsed) }}>
<div>
{props.isCollapsed ?
- <img style={collapseButtonIconStyles.icon} src='/mui-start-icon.svg'/>
+ <img style={collapseButtonIconStyles.icon} src='/mui-start-icon.svg' alt='an arrow pointing right'/>
:
- <img style={{ ...collapseButtonIconStyles.icon, transform: "rotate(180deg)"}} src='/mui-start-icon.svg'/>}
+ <img style={{ ...collapseButtonIconStyles.icon, transform: "rotate(180deg)"}} src='/mui-start-icon.svg' alt='an arrow pointing right'/>}
</div>
</IconButton>
</Tooltip>
diff --git a/src/views-components/side-panel/side-panel-collapsed.tsx b/src/views-components/side-panel/side-panel-collapsed.tsx
new file mode 100644
index 00000000..e25fff6e
--- /dev/null
+++ b/src/views-components/side-panel/side-panel-collapsed.tsx
@@ -0,0 +1,100 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import React, { ReactElement } from 'react'
+import { ProjectIcon, ProcessIcon, FavoriteIcon, ShareMeIcon, TrashIcon, PublicFavoriteIcon, GroupsIcon } from 'components/icon/icon'
+import { List, ListItem, Tooltip } from '@material-ui/core'
+import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles'
+import { ArvadosTheme } from 'common/custom-theme'
+import { navigateTo } from 'store/navigation/navigation-action'
+
+type CssRules = 'root' | 'icon'
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ root: {},
+ icon: {
+ color: theme.customs.colors.grey700,
+ },
+})
+
+enum SidePanelCollapsedCategory {
+ PROJECTS = 'Home Projects',
+ SHARED_WITH_ME = 'Shared with me',
+ PUBLIC_FAVORITES = 'Public Favorites',
+ FAVORITES = 'My Favorites',
+ TRASH = 'Trash',
+ ALL_PROCESSES = 'All Processes',
+ GROUPS = 'Groups',
+}
+
+type TCollapsedCategory = {
+ name: SidePanelCollapsedCategory
+ icon: ReactElement
+ navTarget: string
+}
+
+const sidePanelCollapsedCategories: TCollapsedCategory[] = [
+ {
+ name: SidePanelCollapsedCategory.PROJECTS,
+ icon: <ProjectIcon />,
+ navTarget: 'foo',
+ },
+ {
+ name: SidePanelCollapsedCategory.SHARED_WITH_ME,
+ icon: <ShareMeIcon />,
+ navTarget: 'foo',
+ },
+ {
+ name: SidePanelCollapsedCategory.PUBLIC_FAVORITES,
+ icon: <PublicFavoriteIcon />,
+ navTarget: 'public-favorites',
+ },
+ {
+ name: SidePanelCollapsedCategory.FAVORITES,
+ icon: <FavoriteIcon />,
+ navTarget: 'foo',
+ },
+ {
+ name: SidePanelCollapsedCategory.GROUPS,
+ icon: <GroupsIcon />,
+ navTarget: 'foo',
+ },
+ {
+ name: SidePanelCollapsedCategory.ALL_PROCESSES,
+ icon: <ProcessIcon />,
+ navTarget: 'foo',
+ },
+ {
+ name: SidePanelCollapsedCategory.TRASH,
+ icon: <TrashIcon />,
+ navTarget: 'foo',
+ },
+]
+
+export const SidePanelCollapsed = withStyles(styles)(({ classes }: WithStyles) => {
+
+ const handleClick = (navTarget: string) => {
+ console.log(navTarget)
+ navigateTo(navTarget)
+ }
+
+ return (
+ <List>
+ {sidePanelCollapsedCategories.map(cat => (
+ <ListItem
+ key={cat.name}
+ className={classes.icon}
+ onClick={()=> handleClick(cat.navTarget)}
+ >
+ <Tooltip
+ title={cat.name}
+ disableFocusListener
+ >
+ {cat.icon}
+ </Tooltip>
+ </ListItem>
+ ))}
+ </List>
+ )
+})
diff --git a/src/views-components/side-panel/side-panel.tsx b/src/views-components/side-panel/side-panel.tsx
index 4953022d..18aed873 100644
--- a/src/views-components/side-panel/side-panel.tsx
+++ b/src/views-components/side-panel/side-panel.tsx
@@ -13,6 +13,7 @@ import { Grid } from '@material-ui/core';
import { SidePanelButton } from 'views-components/side-panel-button/side-panel-button';
import { RootState } from 'store/store';
import SidePanelToggle from 'views-components/side-panel-toggle/side-panel-toggle';
+import { SidePanelCollapsed } from './side-panel-collapsed';
const DRAWER_WIDTH = 240;
@@ -47,7 +48,12 @@ export const SidePanel = withStyles(styles)(
connect(mapStateToProps, mapDispatchToProps)(
({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps & { currentRoute: string }) =>
<Grid item xs>
- {props.isCollapsed ? <SidePanelToggle /> :
+ {props.isCollapsed ?
+ <>
+ <SidePanelToggle />
+ <SidePanelCollapsed />
+ </>
+ :
<>
<Grid className={classes.topButtonContainer}>
<SidePanelButton key={props.currentRoute} />
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 385ffeff..4a2cd700 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -292,7 +292,7 @@ const applyCollapsedState = isCollapsed => {
const totalWidth: number = document.getElementsByClassName("splitter-layout")[0]?.clientWidth;
const rightPanelExpandedWidth = (totalWidth - COLLAPSE_ICON_SIZE) / (totalWidth / 100);
if (rightPanel) {
- rightPanel.setAttribute("style", `width: ${isCollapsed ? rightPanelExpandedWidth : getSplitterInitialSize()}%`);
+ rightPanel.setAttribute("style", `width: ${isCollapsed ? `calc(${rightPanelExpandedWidth}% - 1rem)` : `${getSplitterInitialSize()}%`}`);
}
const splitter = document.getElementsByClassName("layout-splitter")[0];
isCollapsed ? splitter?.classList.add("layout-splitter-disabled") : splitter?.classList.remove("layout-splitter-disabled");
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list