[arvados] updated: 2.7.0-5795-g3456de80d2
git repository hosting
git at public.arvados.org
Thu Jan 11 14:29:51 UTC 2024
Summary of changes:
services/workbench2/src/components/icon/icon.tsx | 7 ++
.../multiselect-toolbar/MultiselectToolbar.tsx | 104 +++++++++---------
.../ms-toolbar-overflow-menu.tsx | 122 +++++++++++----------
.../ms-toolbar-overflow-wrapper.tsx | 20 +---
4 files changed, 124 insertions(+), 129 deletions(-)
via 3456de80d25dfb480133bd8afd9f51cdb1d942ee (commit)
from 08fb678c7ff12d3f420477f34610383960b65482 (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 3456de80d25dfb480133bd8afd9f51cdb1d942ee
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Thu Jan 11 09:29:28 2024 -0500
21317: toolbar css good Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
diff --git a/services/workbench2/src/components/icon/icon.tsx b/services/workbench2/src/components/icon/icon.tsx
index 8ec4c59b87..a54bc999e9 100644
--- a/services/workbench2/src/components/icon/icon.tsx
+++ b/services/workbench2/src/components/icon/icon.tsx
@@ -171,6 +171,13 @@ export const TerminalIcon: IconType = (props: any) => (
</SvgIcon>
)
+//https://pictogrammers.com/library/mdi/icon/chevron-double-right/
+export const DoubleRightArrows: IconType = (props: any) => (
+ <SvgIcon {...props}>
+ <path d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z" />
+ </SvgIcon>
+)
+
export type IconType = React.SFC<{ className?: string; style?: object }>;
export const AddIcon: IconType = props => <Add {...props} />;
diff --git a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
index 5017e99dd8..375b7212f6 100644
--- a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
+++ b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
@@ -38,7 +38,7 @@ import { IntersectionObserverWrapper } from "./ms-toolbar-overflow-wrapper";
const WIDTH_TRANSITION = 150
-type CssRules = "root" | "transition" | "button" | "iconContainer";
+type CssRules = "root" | "transition" | "button" | "iconContainer" | "icon";
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
@@ -49,20 +49,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
padding: 0,
margin: "1rem auto auto 0.5rem",
transition: `width ${WIDTH_TRANSITION}ms`,
- overflowY: 'auto',
- scrollBehavior: 'smooth',
- '&::-webkit-scrollbar': {
- width: 0,
- height: 2
- },
- '&::-webkit-scrollbar-track': {
- width: 0,
- height: 2
- },
- '&::-webkit-scrollbar-thumb': {
- backgroundColor: '#757575',
- borderRadius: 2
- }
+ overflow: 'hidden',
},
transition: {
display: "flex",
@@ -77,9 +64,13 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
button: {
width: "2.5rem",
height: "2.5rem ",
+ paddingLeft: 0
},
iconContainer: {
- height: '100%'
+ height: '100%',
+ },
+ icon: {
+ marginLeft: '-0.5rem'
}
});
@@ -131,49 +122,52 @@ export const MultiselectToolbar = connect(
<React.Fragment>
<Toolbar
className={isTransitioning ? classes.transition: classes.root}
- style={{ width: `${(actions.length * 2.5) + 1}rem` }}
+ style={{ width: `${(actions.length * 2.5) + 6}rem` }}
data-cy='multiselect-toolbar'
>
{actions.length ? (
<IntersectionObserverWrapper>
- {actions.map((action, i) =>{
- const { hasAlts, useAlts, name, altName, icon, altIcon } = action;
- return hasAlts ? (
- <Tooltip
- className={classes.button}
- title={currentPathIsTrash || (useAlts && useAlts(singleSelectedUuid, iconProps)) ? altName : name}
- data-targetid={name}
- key={i}
- disableFocusListener
- >
- <span className={classes.iconContainer}>
- <IconButton
- data-cy='multiselect-button'
- disabled={disabledButtons.has(name)}
- onClick={() => props.executeMulti(action, checkedList, iconProps.resources)}
- >
- {currentPathIsTrash || (useAlts && useAlts(singleSelectedUuid, iconProps)) ? altIcon && altIcon({}) : icon({})}
- </IconButton>
- </span>
- </Tooltip>
- ) : (
- <Tooltip
- className={classes.button}
- title={action.name}
- key={i}
- disableFocusListener
- >
- <span className={classes.iconContainer}>
- <IconButton
- data-cy='multiselect-button'
- onClick={() => props.executeMulti(action, checkedList, iconProps.resources)}
- >
- {action.icon({})}
- </IconButton>
- </span>
- </Tooltip>
- );
- })}
+ {actions.map((action, i) =>{
+ const { hasAlts, useAlts, name, altName, icon, altIcon } = action;
+ return hasAlts ? (
+ <Tooltip
+ className={classes.button}
+ title={currentPathIsTrash || (useAlts && useAlts(singleSelectedUuid, iconProps)) ? altName : name}
+ data-targetid={name}
+ key={i}
+ disableFocusListener
+ >
+ <span className={classes.iconContainer}>
+ <IconButton
+ data-cy='multiselect-button'
+ disabled={disabledButtons.has(name)}
+ onClick={() => props.executeMulti(action, checkedList, iconProps.resources)}
+ className={classes.icon}
+ >
+ {currentPathIsTrash || (useAlts && useAlts(singleSelectedUuid, iconProps)) ? altIcon && altIcon({}) : icon({})}
+ </IconButton>
+ </span>
+ </Tooltip>
+ ) : (
+ <Tooltip
+ className={classes.button}
+ title={action.name}
+ data-targetid={name}
+ key={i}
+ disableFocusListener
+ >
+ <span className={classes.iconContainer}>
+ <IconButton
+ data-cy='multiselect-button'
+ onClick={() => props.executeMulti(action, checkedList, iconProps.resources)}
+ className={classes.icon}
+ >
+ {action.icon({})}
+ </IconButton>
+ </span>
+ </Tooltip>
+ );
+ })}
</IntersectionObserverWrapper>
) : (
<></>
diff --git a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-menu.tsx b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-menu.tsx
index 1f5be3b85d..a2b23f9143 100644
--- a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-menu.tsx
+++ b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-menu.tsx
@@ -2,71 +2,75 @@
//
// SPDX-License-Identifier: AGPL-3.0
-import React, { useState, useMemo } from "react";
-import MoreVertIcon from "@material-ui/icons/MoreVert";
-import classnames from "classnames";
-import { IconButton, Menu, MenuItem, StyleRulesCallback, WithStyles, withStyles } from "@material-ui/core";
-import { ArvadosTheme } from "common/custom-theme";
+import React, { useState, useMemo } from 'react';
+import { DoubleRightArrows } from 'components/icon/icon';
+import classnames from 'classnames';
+import { IconButton, Menu, MenuItem, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
+import { ArvadosTheme } from 'common/custom-theme';
-type CssRules = 'inOverflowMenu'
+type CssRules = 'inOverflowMenu' | 'iconButton';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- inOverflowMenu: {
- "&:hover": {
- backgroundColor: "transparent"
- }
- }
+ inOverflowMenu: {
+ '&:hover': {
+ backgroundColor: 'transparent',
+ },
+ },
+ iconButton: {
+ right: '10px',
+ },
});
export const OverflowMenu = withStyles(styles)((props: any & WithStyles<CssRules>) => {
- const { children, className, visibilityMap, classes } = props
- const [anchorEl, setAnchorEl] = useState(null);
- const open = Boolean(anchorEl);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
+ const { children, className, visibilityMap, classes } = props;
+ const [anchorEl, setAnchorEl] = useState(null);
+ const open = Boolean(anchorEl);
+ const handleClick = (event) => {
+ setAnchorEl(event.currentTarget);
+ };
- const handleClose = () => {
- setAnchorEl(null);
- };
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
- const shouldShowMenu = useMemo(
- () => Object.values(visibilityMap).some((v) => v === false),
- [visibilityMap]
- );
- if (!shouldShowMenu) {
- return null;
- }
- return (
- <div className={className}>
- <IconButton
- aria-label="more"
- aria-controls="long-menu"
- aria-haspopup="true"
- onClick={handleClick}
- >
- <MoreVertIcon />
- </IconButton>
- <Menu
- id="long-menu"
- anchorEl={anchorEl}
- keepMounted
- open={open}
- onClose={handleClose}
- >
- {React.Children.map(children, (child:any) => {
- if (!visibilityMap[child.props["data-targetid"]]) {
- return (
- <MenuItem key={child} onClick={handleClose}>
- {React.cloneElement(child, {
- className: classnames(child.className, classes.inOverflowMenu)
+ const shouldShowMenu = useMemo(() => Object.values(visibilityMap).some((v) => v === false), [visibilityMap]);
+ if (!shouldShowMenu) {
+ return null;
+ }
+ return (
+ <div className={className}>
+ <IconButton
+ aria-label='more'
+ aria-controls='long-menu'
+ aria-haspopup='true'
+ onClick={handleClick}
+ className={classes.iconButton}
+ >
+ <DoubleRightArrows />
+ </IconButton>
+ <Menu
+ id='long-menu'
+ anchorEl={anchorEl}
+ keepMounted
+ open={open}
+ onClose={handleClose}
+ >
+ {React.Children.map(children, (child: any) => {
+ if (!visibilityMap[child.props['data-targetid']]) {
+ return (
+ <MenuItem
+ key={child}
+ onClick={handleClose}
+ >
+ {React.cloneElement(child, {
+ className: classnames(child.className, classes.inOverflowMenu),
+ })}
+ </MenuItem>
+ );
+ }
+ return null;
})}
- </MenuItem>
- );
- }
- return null;
- })}
- </Menu>
- </div>
- );
-})
\ No newline at end of file
+ </Menu>
+ </div>
+ );
+});
diff --git a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx
index d97c2f0fc8..e63225b05f 100644
--- a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx
+++ b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx
@@ -4,6 +4,7 @@
import React, { useState, useRef, useEffect } from 'react';
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
+import classnames from 'classnames'
import { ArvadosTheme } from 'common/custom-theme';
import { OverflowMenu } from './ms-toolbar-overflow-menu';
@@ -24,12 +25,12 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
display: 'flex',
overflow: 'hidden',
padding: '0 20px',
- width: '75%',
+ width: '100%',
},
overflowStyle: {
order: 99,
position: 'sticky',
- right: '0',
+ right: '-2rem',
backgroundColor: 'white',
},
});
@@ -44,7 +45,6 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: any & With
const updatedEntries = {};
entries.forEach((entry) => {
const targetid = entry.target.dataset.targetid;
- console.log(entry, targetid);
if (entry.isIntersecting) {
updatedEntries[targetid] = true;
} else {
@@ -60,9 +60,10 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: any & With
useEffect((): any => {
const observer = new IntersectionObserver(handleIntersection, {
root: navRef.current,
+ rootMargin: '0px -20px 0px 0px',
threshold: 1,
});
- // We are addting observers to child elements of the container div
+ // We are adding observers to child elements of the container div
// with ref as navRef. Notice that we are adding observers
// only if we have the data attribute targetid on the child element
if (navRef.current)
@@ -95,14 +96,3 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: any & With
</div>
);
});
-
-const classnames = (...args: Array<string | Record<string, boolean>>) => {
- return args.reduce((output: string, currentArg: any) => {
- if (typeof currentArg === 'string') output += currentArg + ' ';
- else
- for (const entry in currentArg) {
- if (currentArg[entry] === true) output += entry + ' ';
- }
- return output;
- }, '');
-};
\ No newline at end of file
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list