21224: expando works Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>

[arvados.git] / services / workbench2 / src / views-components / project-details-card / project-details-card.tsx

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 a3a1458accb69637f8e5a7612e54d7a193a5ef74..141d5d7ceb0ca340ee6ae40633812b5371e75968 100644 (file)
--- 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,16 +24,18 @@ 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'
     | 'selected'
     | 'cardHeader'
-    | 'descriptionLabel'
+    | 'descriptionToggle'
     | 'showMore'
     | 'noDescription'
     | 'userNameContainer'
     | 'cardContent'
+    | 'nameSection'
     | 'namePlate'
     | 'faveIcon'
     | 'frozenIcon'
@@ -53,8 +55,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         border: '2px solid #ccc',
     },
     showMore: {
-        color: theme.palette.primary.main,
         cursor: 'pointer',
+        background: 'linear-gradient(to right, black, transparent)',
+        backgroundClip: 'text',
+        color: 'transparent',
     },
     noDescription: {
         color: theme.palette.grey['600'],
@@ -66,13 +70,23 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     cardHeader: {
         padding: '0.2rem 0.4rem 0.1rem 1rem',
     },
-    descriptionLabel: {
+    descriptionToggle: {
+        display: 'flex',
+        flexDirection: 'row',
+        cursor: 'pointer',
+        paddingBottom: '0.5rem',
     },
     cardContent: {
         display: 'flex',
         flexDirection: 'column',
         marginTop: '-1.75rem',
     },
+    nameSection: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
     namePlate: {
         display: 'flex',
         flexDirection: 'row',
@@ -100,10 +114,11 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
     tag: {
         marginRight: '1rem',
-        marginTop: '0.5rem',
+        marginTop: '1rem',
     },
     description: {
-        marginTop: '1rem',
+        maxWidth: '90%',
+        marginTop: 0,
     },
 });
 
@@ -287,56 +302,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,30 +360,37 @@ 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)
-                            )}
-                        </Typography>
-                </CardContent>
-            )}
-            <Collapse
-                in={showDescription}
-                timeout='auto'
-            >
-                <section onClick={(ev) => ev.stopPropagation()}>
+            <section onClick={(ev) => ev.stopPropagation()}>
+                {description ? (
+                    <section
+                        onClick={toggleDescription}
+                        className={classes.descriptionToggle}
+                    >
+                        <ExpandChevronRight expanded={showDescription} />
+                        <section className={classes.showMore}>
+                        <Collapse
+                            in={showDescription}
+                            timeout='auto'
+                            collapsedHeight='1.25rem'
+                        >
+                            <Typography
+                                className={classes.description}
+                                data-cy='project-description'
+                            >
+                                {description}
+                            </Typography>
+                        </Collapse>
+                        </section>
+                    </section>
+                ) : (
                     <Typography
-                        className={classes.description}
-                        data-cy='project-description'
+                        className={classes.noDescription}
+                        data-cy='no-description'
                     >
-                        {description}
+                        no description available
                     </Typography>
-                </section>
-            </Collapse>
+                )}
+            </section>
         </Card>
     );
 };