[arvados] updated: 2.7.0-6041-gc4360c5cf5
git repository hosting
git at public.arvados.org
Mon Feb 26 14:48:45 UTC 2024
Summary of changes:
.../expand-chevron-right/expand-chevron-right.tsx | 48 ++++++++
.../project-details-card/project-details-card.tsx | 128 ++++++++++++---------
2 files changed, 121 insertions(+), 55 deletions(-)
create mode 100644 services/workbench2/src/components/expand-chevron-right/expand-chevron-right.tsx
via c4360c5cf5c952786860d03f5d426ac555e03955 (commit)
from cb52974675e851527b63ca98ab33f79c6d6f4ce8 (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 c4360c5cf5c952786860d03f5d426ac555e03955
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Mon Feb 26 09:48:41 2024 -0500
21224: added chevron, moved description section Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
diff --git a/services/workbench2/src/components/expand-chevron-right/expand-chevron-right.tsx b/services/workbench2/src/components/expand-chevron-right/expand-chevron-right.tsx
new file mode 100644
index 0000000000..7bb0b14fa2
--- /dev/null
+++ b/services/workbench2/src/components/expand-chevron-right/expand-chevron-right.tsx
@@ -0,0 +1,48 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import React from 'react';
+import { ChevronRight } from '@material-ui/icons';
+import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
+import { ArvadosTheme } from 'common/custom-theme';
+
+type CssRules = 'root' | 'default' | 'expanded';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ root: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ width: '24px',
+ height: '24px',
+ cursor: 'pointer',
+ },
+ default: {
+ transition: 'all 0.1s ease',
+ transform: 'rotate(0deg)',
+ },
+ expanded: {
+ transition: 'all 0.1s ease',
+ transform: 'rotate(90deg)',
+ },
+});
+
+export interface ExpandChevronRightDataProps {
+ expanded: boolean;
+}
+
+type ExpandChevronRightProps = ExpandChevronRightDataProps & WithStyles<CssRules>;
+
+export const ExpandChevronRight = withStyles(styles)(
+ class extends React.Component<ExpandChevronRightProps, {}> {
+ render() {
+ const { classes, expanded } = this.props;
+ return (
+ <div className={classes.root}>
+ <ChevronRight className={expanded ? classes.expanded : classes.default} />
+ </div>
+ );
+ }
+ }
+);
\ No newline at end of file
diff --git a/services/workbench2/src/views-components/project-details-card/project-details-card.tsx b/services/workbench2/src/views-components/project-details-card/project-details-card.tsx
index a3a1458acc..5447dd58bf 100644
--- a/services/workbench2/src/views-components/project-details-card/project-details-card.tsx
+++ b/services/workbench2/src/views-components/project-details-card/project-details-card.tsx
@@ -24,6 +24,7 @@ import { ContextMenuKind } from 'views-components/context-menu/context-menu';
import { Dispatch } from 'redux';
import classNames from 'classnames';
import { loadDetailsPanel } from 'store/details-panel/details-panel-action';
+import { ExpandChevronRight } from 'components/expand-chevron-right/expand-chevron-right';
type CssRules =
| 'root'
@@ -34,6 +35,7 @@ type CssRules =
| 'noDescription'
| 'userNameContainer'
| 'cardContent'
+ | 'nameSection'
| 'namePlate'
| 'faveIcon'
| 'frozenIcon'
@@ -67,12 +69,22 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
padding: '0.2rem 0.4rem 0.1rem 1rem',
},
descriptionLabel: {
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ cursor: 'pointer',
},
cardContent: {
display: 'flex',
flexDirection: 'column',
marginTop: '-1.75rem',
},
+ nameSection: {
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ },
namePlate: {
display: 'flex',
flexDirection: 'row',
@@ -287,56 +299,50 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
<CardHeader
className={classes.cardHeader}
title={
- <section className={classes.namePlate}>
- <Typography
- noWrap
- variant='h6'
- style={{ marginRight: '1rem' }}
- >
- {name}
- </Typography>
- <FavoriteStar
- className={classes.faveIcon}
- resourceUuid={currentResource.uuid}
- />
- <PublicFavoriteStar
- className={classes.faveIcon}
- resourceUuid={currentResource.uuid}
- />
- {!!frozenByFullName && (
- <Tooltip
- className={classes.frozenIcon}
- disableFocusListener
- title={<span>Project was frozen by {frozenByFullName}</span>}
+ <section className={classes.nameSection}>
+ <section className={classes.namePlate}>
+ <Typography
+ noWrap
+ variant='h6'
+ style={{ marginRight: '1rem' }}
>
- <FreezeIcon style={{ fontSize: 'inherit' }} />
- </Tooltip>
- )}
+ {name}
+ </Typography>
+ <FavoriteStar
+ className={classes.faveIcon}
+ resourceUuid={currentResource.uuid}
+ />
+ <PublicFavoriteStar
+ className={classes.faveIcon}
+ resourceUuid={currentResource.uuid}
+ />
+ {!!frozenByFullName && (
+ <Tooltip
+ className={classes.frozenIcon}
+ disableFocusListener
+ title={<span>Project was frozen by {frozenByFullName}</span>}
+ >
+ <FreezeIcon style={{ fontSize: 'inherit' }} />
+ </Tooltip>
+ )}
+ </section>
+ <section onClick={(ev) => ev.stopPropagation()}>
+ {typeof currentResource.properties === 'object' && Object.keys(currentResource.properties).length > 0 && (
+ <CardContent className={classes.cardContent}>
+ <Typography component='div'>
+ {Object.keys(currentResource.properties).map((k) =>
+ Array.isArray(currentResource.properties[k])
+ ? currentResource.properties[k].map((v: string) => getPropertyChip(k, v, undefined, classes.tag))
+ : getPropertyChip(k, currentResource.properties[k], undefined, classes.tag)
+ )}
+ </Typography>
+ </CardContent>
+ )}
+ </section>
</section>
}
action={
<section className={classes.contextMenuSection}>
- <section
- className={classes.descriptionLabel}
- onClick={(ev) => ev.stopPropagation()}
- >
- {description ? (
- <Typography
- className={classes.showMore}
- onClick={toggleDescription}
- data-cy='toggle-description'
- >
- {!showDescription ? 'Show full description' : 'Hide full description'}
- </Typography>
- ) : (
- <Typography
- className={classes.noDescription}
- data-cy='no-description'
- >
- no description available
- </Typography>
- )}
- </section>
<Tooltip
title='More options'
disableFocusListener
@@ -351,17 +357,29 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
</section>
}
/>
- {typeof currentResource.properties === 'object' && Object.keys(currentResource.properties).length > 0 && (
- <CardContent className={classes.cardContent}>
- <Typography component='div'>
- {Object.keys(currentResource.properties).map((k) =>
- Array.isArray(currentResource.properties[k])
- ? currentResource.properties[k].map((v: string) => getPropertyChip(k, v, undefined, classes.tag))
- : getPropertyChip(k, currentResource.properties[k], undefined, classes.tag)
- )}
+ <section onClick={(ev) => ev.stopPropagation()}>
+ {description ? (
+ <section
+ className={classes.descriptionLabel}
+ onClick={toggleDescription}
+ >
+ <ExpandChevronRight expanded={showDescription} />
+ <Typography
+ className={classes.showMore}
+ data-cy='toggle-description'
+ >
+ {!showDescription ? 'Show full description' : 'Hide full description'}
</Typography>
- </CardContent>
- )}
+ </section>
+ ) : (
+ <Typography
+ className={classes.noDescription}
+ data-cy='no-description'
+ >
+ no description available
+ </Typography>
+ )}
+ </section>
<Collapse
in={showDescription}
timeout='auto'
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list