[arvados] updated: 2.7.0-6039-g527ccb41e9
git repository hosting
git at public.arvados.org
Fri Feb 23 20:49:29 UTC 2024
Summary of changes:
.../project-details-card/project-details-card.tsx | 122 +++++++++++----------
1 file changed, 64 insertions(+), 58 deletions(-)
via 527ccb41e9cba93d8a0a4b07441cd08b2063b34e (commit)
from 48be312b0a5ad415d3fd5a21625cb48678010d6d (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 527ccb41e9cba93d8a0a4b07441cd08b2063b34e
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Fri Feb 23 15:49:22 2024 -0500
21224: css tweaks Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
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 c102e478fd..7307af67ae 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
@@ -32,14 +32,12 @@ type CssRules =
| 'descriptionLabel'
| 'showMore'
| 'noDescription'
- | 'nameContainer'
+ | 'userNameContainer'
| 'cardContent'
- | 'subHeader'
| 'namePlate'
| 'faveIcon'
| 'frozenIcon'
| 'contextMenuSection'
- | 'chipSection'
| 'tag'
| 'description';
@@ -48,7 +46,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
width: '100%',
marginBottom: '1rem',
flex: '0 0 auto',
- paddingTop: '0.2rem',
+ padding: 0,
border: '2px solid transparent',
},
selected: {
@@ -62,32 +60,25 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
color: theme.palette.grey['600'],
fontStyle: 'italic',
},
- nameContainer: {
+ userNameContainer: {
display: 'flex',
},
cardHeader: {
- paddingTop: '0.4rem',
+ padding: '0.2rem 0.4rem 0.1rem 1rem',
},
descriptionLabel: {
- paddingTop: '1rem',
- marginBottom: 0,
- minHeight: '2.5rem',
- marginRight: '0.8rem',
},
cardContent: {
display: 'flex',
flexDirection: 'column',
- transition: 'height 0.3s ease',
- },
- subHeader: {
- display: 'flex',
- flexDirection: 'row',
- justifyContent: 'space-between',
- marginTop: '-2rem',
+ marginTop: '-1.75rem',
},
namePlate: {
display: 'flex',
flexDirection: 'row',
+ alignItems: 'center',
+ margin: 0,
+ paddingBottom: '0.5rem',
},
faveIcon: {
fontSize: '0.8rem',
@@ -97,7 +88,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
frozenIcon: {
fontSize: '0.5rem',
marginLeft: '0.3rem',
- marginTop: '0.57rem',
+ marginTop: '0.1rem',
height: '1rem',
color: theme.palette.text.primary,
},
@@ -105,11 +96,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
- marginTop: '0.6rem',
- },
- chipSection: {
- display: 'flex',
- flexWrap: 'wrap',
+ paddingTop: '0.25rem',
},
tag: {
marginRight: '1rem',
@@ -240,11 +227,15 @@ const UserCard: React.FC<UserCardProps> = ({ classes, currentResource, handleCon
const { fullName, uuid } = currentResource as UserResource & { fullName: string };
return (
- <Card className={classNames(classes.root, isSelected ? classes.selected : '')} onClick={()=>handleCardClick(uuid)} data-cy='user-details-card'>
+ <Card
+ className={classNames(classes.root, isSelected ? classes.selected : '')}
+ onClick={() => handleCardClick(uuid)}
+ data-cy='user-details-card'
+ >
<CardHeader
className={classes.cardHeader}
title={
- <section className={classes.nameContainer}>
+ <section className={classes.userNameContainer}>
<Typography
noWrap
variant='h6'
@@ -288,7 +279,11 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
};
return (
- <Card className={classNames(classes.root, isSelected ? classes.selected : '')} onClick={()=>handleCardClick(uuid)} data-cy='project-details-card'>
+ <Card
+ className={classNames(classes.root, isSelected ? classes.selected : '')}
+ onClick={() => handleCardClick(uuid)}
+ data-cy='project-details-card'
+ >
<CardHeader
className={classes.cardHeader}
title={
@@ -321,10 +316,31 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
}
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
- >
+ >
<IconButton
aria-label='More options'
onClick={(ev) => handleContextMenu(ev, currentResource as any, isAdmin)}
@@ -335,40 +351,30 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
</section>
}
/>
- <CardContent className={classes.cardContent}>
- <section className={classes.subHeader}>
- <section className={classes.chipSection}>
+ {typeof currentResource.properties === 'object' && Object.keys(currentResource.properties).length > 0 && (
+ <CardContent className={classes.cardContent}>
<Typography component='div'>
- {typeof currentResource.properties === 'object' &&
- 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)
- )}
+ {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>
- </section>
- <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>
+ </CardContent>
+ )}
+ <Collapse
+ in={showDescription}
+ timeout='auto'
+ >
+ <section onClick={(ev) => ev.stopPropagation()}>
+ <Typography
+ className={classes.description}
+ data-cy='project-description'
+ >
+ {description}
+ </Typography>
</section>
- <Collapse in={showDescription} timeout='auto'>
- <section onClick={(ev)=>ev.stopPropagation()}>
- <Typography className={classes.description} data-cy='project-description'>
- {description}
- </Typography>
- </section>
- </Collapse>
- </CardContent>
+ </Collapse>
</Card>
);
};
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list