From 81c25c77744bad0fe8a625a0f089cbaed0d536d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Wed, 8 Jun 2022 08:33:39 +0100 Subject: [PATCH] fix: constraint-related UI fixes (#1069) * fix: constraint-related UI fixes * test spans on values list * fix: values truncation, misc UI fixes * fix: no longer assign const variable (debug) --- .../ConstraintAccordion.styles.ts | 28 ++--- .../ConstraintAccordionList.styles.ts | 1 + .../ConstraintAccordionViewBody.tsx | 18 ++- .../ConstraintAccordionViewHeader.tsx | 109 ++++++++++++------ .../FeatureOverviewExecutionChips.styles.ts | 1 + .../FeatureOverviewSegment.styles.ts | 4 +- .../project/ProjectCard/ProjectCard.styles.ts | 4 + 7 files changed, 104 insertions(+), 61 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts index e8b48942ac..61e799332e 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts @@ -3,13 +3,11 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ constraintIconContainer: { backgroundColor: theme.palette.primary.main, - height: '28px', - width: '28px', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', - marginRight: '2rem', + marginRight: theme.spacing(2), [theme.breakpoints.down(650)]: { marginBottom: '1rem', marginRight: 0, @@ -17,8 +15,6 @@ export const useStyles = makeStyles()(theme => ({ }, constraintIcon: { fill: '#fff', - width: '26px', - height: '26px', }, accordion: { border: `1px solid ${theme.palette.grey[300]}`, @@ -44,7 +40,7 @@ export const useStyles = makeStyles()(theme => ({ display: 'flex', alignItems: 'center', width: '100%', - [theme.breakpoints.down(650)]: { + [theme.breakpoints.down(710)]: { flexDirection: 'column', alignItems: 'center', position: 'relative', @@ -56,10 +52,13 @@ export const useStyles = makeStyles()(theme => ({ }, headerValues: { fontSize: theme.fontSizes.smallBody, - color: theme.palette.primary.main, }, headerValuesExpand: { fontSize: theme.fontSizes.smallBody, + color: theme.palette.primary.dark, + [theme.breakpoints.down(710)]: { + textAlign: 'center', + }, }, headerConstraintContainer: { minWidth: '220px', @@ -69,11 +68,6 @@ export const useStyles = makeStyles()(theme => ({ paddingRight: 0, }, }, - headerViewValuesContainer: { - [theme.breakpoints.down(990)]: { - display: 'none', - }, - }, editingBadge: { borderRadius: theme.shape.borderRadiusExtraLarge, padding: '0.25rem 0.5rem', @@ -122,9 +116,8 @@ export const useStyles = makeStyles()(theme => ({ headerActions: { marginLeft: 'auto', whiteSpace: 'nowrap', - [theme.breakpoints.down(660)]: { - marginLeft: '0', - marginTop: '0.5rem', + [theme.breakpoints.down(710)]: { + display: 'none', }, }, accordionDetails: { @@ -140,9 +133,8 @@ export const useStyles = makeStyles()(theme => ({ summary: { border: 'none', padding: '0.25rem 1rem', - height: '85px', - [theme.breakpoints.down(770)]: { - height: '200px', + '&:hover .valuesExpandLabel': { + textDecoration: 'underline', }, }, settingsParagraph: { diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts index a881661a9c..43067815e7 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts @@ -2,6 +2,7 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ container: { + width: '100%', display: 'grid', gap: '1rem', }, diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx index edc99c06a4..16a47142ef 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx @@ -72,9 +72,9 @@ const SingleValue = ({ value, operator }: ISingleValueProps) => { } className={styles.chip} @@ -95,7 +95,15 @@ const MultipleValues = ({ values }: IMultipleValuesProps) => { return ( <> - + 20} + show={ + + } + /> {values .filter(value => value.includes(filter)) .map((value, index) => ( @@ -103,9 +111,9 @@ const MultipleValues = ({ values }: IMultipleValuesProps) => { key={`${value}-${index}`} label={ } diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx index 41e8365daf..8521bdadf4 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx @@ -1,5 +1,4 @@ -import StringTruncator from 'component/common/StringTruncator/StringTruncator'; -import { Chip, useMediaQuery, IconButton, Tooltip } from '@mui/material'; +import { Chip, IconButton, Tooltip, styled } from '@mui/material'; import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon'; import { Delete, Edit } from '@mui/icons-material'; import { IConstraint } from 'interfaces/strategy'; @@ -10,6 +9,44 @@ import React from 'react'; import { formatConstraintValue } from 'utils/formatConstraintValue'; import { useLocationSettings } from 'hooks/useLocationSettings'; import { ConstraintOperator } from 'component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator'; +import classnames from 'classnames'; + +const StyledHeaderText = styled('span')(({ theme }) => ({ + display: '-webkit-box', + WebkitLineClamp: 3, + WebkitBoxOrient: 'vertical', + overflow: 'hidden', + maxWidth: '100px', + minWidth: '100px', + marginRight: '10px', + wordBreak: 'break-word', + fontSize: theme.fontSizes.smallBody, + [theme.breakpoints.down(710)]: { + textAlign: 'center', + padding: theme.spacing(1, 0), + marginRight: 'inherit', + maxWidth: 'inherit', + }, +})); + +const StyledValuesSpan = styled('span')(({ theme }) => ({ + display: '-webkit-box', + WebkitLineClamp: 2, + WebkitBoxOrient: 'vertical', + overflow: 'hidden', + wordBreak: 'break-word', + fontSize: theme.fontSizes.smallBody, + [theme.breakpoints.down(710)]: { + margin: theme.spacing(1, 0), + textAlign: 'center', + }, +})); + +const StyledSingleValueChip = styled(Chip)(({ theme }) => ({ + [theme.breakpoints.down(710)]: { + margin: theme.spacing(1, 0), + }, +})); interface IConstraintAccordionViewHeaderProps { compact: boolean; @@ -28,9 +65,6 @@ export const ConstraintAccordionViewHeader = ({ }: IConstraintAccordionViewHeaderProps) => { const { classes: styles } = useStyles(); const { locationSettings } = useLocationSettings(); - const smallScreen = useMediaQuery(`(max-width:${790}px)`); - - const minWidthHeader = compact || smallScreen ? '100px' : '175px'; const onEditClick = onEdit && @@ -50,42 +84,43 @@ export const ConstraintAccordionViewHeader = ({
-
- -
+ + + {constraint.contextName} + +
-
- + } + elseShow={ +
+ + {constraint?.values + ?.map(value => value) + .join(', ')} + +

- } - elseShow={ -

-

- {constraint?.values?.length}{' '} - {constraint?.values?.length === 1 - ? 'value' - : 'values'} -

-

- Expand to view -

-
- } - /> -
+ > + Expand to view all ({constraint?.values?.length} + ) +

+
+ } + />
({ margin: '0.25rem', }, paragraph: { + display: 'inline', margin: '0.25rem 0', maxWidth: '95%', textAlign: 'center', diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles.ts index 9c80cb3bf1..0892fc7382 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles.ts +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles.ts @@ -13,6 +13,8 @@ export const useStyles = makeStyles()(theme => ({ link: { textDecoration: 'none', fontWeight: theme.fontWeight.bold, - color: theme.palette.primary.main, + '&:hover': { + textDecoration: 'underline', + }, }, })); diff --git a/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts b/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts index dfa0cb67ce..2fdecd2dda 100644 --- a/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts +++ b/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts @@ -14,6 +14,10 @@ export const useStyles = makeStyles()(theme => ({ [theme.breakpoints.down('sm')]: { justifyContent: 'center', }, + '&:hover': { + transition: 'background-color 0.2s ease-in-out', + backgroundColor: theme.palette.grey[100], + }, }, header: { display: 'flex',