From c3e9b49e1291bbafc26f542471e57b4fe56aa3e9 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Wed, 27 Jul 2022 14:50:47 +0300 Subject: [PATCH] Fix/constraint card adjustments (#1154) * style fixes * Constraint card styling adjustments * Style Fixes * lint and fmt * lint and fmt * Changed the way the expandable property is evaluated to use the text.length Co-authored-by: Tymoteusz Czech --- .../ConstraintAccordion.styles.ts | 12 +++++ .../StyledToggleButton/StyledToggleButton.tsx | 9 ++++ .../ConstraintAccordionList.styles.ts | 10 +++- .../ConstraintAccordionList.tsx | 52 +++++++++++-------- .../ConstraintAccordionView.tsx | 7 ++- .../ConstraintAccordionViewBody.tsx | 33 +----------- .../ConstraintAccordionViewHeaderInfo.tsx | 6 ++- ...raintAccordionViewHeaderMultipleValues.tsx | 35 ++++--------- ...straintAccordionViewHeaderSingleValue.tsx} | 9 +++- .../StyledIconWrapper/StyledIconWrapper.tsx | 4 +- .../ConstraintOperatorSelect.styles.ts | 6 +++ .../ConstraintOperatorSelect.tsx | 7 ++- .../common/ConstraintAccordion/helpers.ts | 13 ----- .../FormTemplate/FormTemplate.styles.ts | 1 + .../SidebarModal/SidebarModal.styles.ts | 2 +- .../FeatureStrategySegment.styles.ts | 3 ++ .../FeatureStrategySegment.tsx | 2 + .../FeatureStrategySegmentList.styles.ts | 3 ++ .../FeatureStrategySegmentList.tsx | 8 +++ .../ProjectAccessAssign.tsx | 2 - 20 files changed, 121 insertions(+), 103 deletions(-) rename frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/{ContraintAccordionViewHeaderSingleValue.tsx => ConstraintAccordionViewHeaderSingleValue.tsx} (88%) delete mode 100644 frontend/src/component/common/ConstraintAccordion/helpers.ts diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts index ab801c3e3d..e6b9d79490 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts @@ -12,6 +12,9 @@ export const useStyles = makeStyles()(theme => ({ marginBottom: '1rem', marginRight: 0, }, + [theme.breakpoints.between(1101, 1365)]: { + marginRight: '8px', + }, }, constraintIcon: { fill: '#fff', @@ -59,6 +62,7 @@ export const useStyles = makeStyles()(theme => ({ }, headerValuesExpand: { fontSize: theme.fontSizes.smallBody, + marginTop: '4px', color: theme.palette.primary.dark, [theme.breakpoints.down(710)]: { textAlign: 'center', @@ -71,6 +75,10 @@ export const useStyles = makeStyles()(theme => ({ [theme.breakpoints.down(650)]: { paddingRight: 0, }, + [theme.breakpoints.between(1101, 1365)]: { + minWidth: '152px', + paddingRight: '0.5rem', + }, }, editingBadge: { borderRadius: theme.shape.borderRadiusExtraLarge, @@ -108,6 +116,10 @@ export const useStyles = makeStyles()(theme => ({ headerSelect: { marginRight: '1rem', width: '200px', + [theme.breakpoints.between(1101, 1365)]: { + width: '170px', + marginRight: '8px', + }, }, chip: { margin: '0 0.5rem 0.5rem 0', diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx index 6e6e60110b..e4cef7dae5 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx @@ -5,6 +5,7 @@ export const StyledToggleButtonOff = styled(IconButton)(({ theme }) => ({ width: '28px', minWidth: '28px', maxWidth: '28px', + height: 'auto', backgroundColor: theme.palette.tertiary.background, borderRadius: theme.shape.borderRadius, padding: '0 1px 0', @@ -12,6 +13,10 @@ export const StyledToggleButtonOff = styled(IconButton)(({ theme }) => ({ '&:hover': { background: theme.palette.tertiary.contrast[300], }, + [theme.breakpoints.between(1101, 1365)]: { + marginRight: '0.5rem', + alignItems: 'center', + }, })); export const StyledToggleButtonOn = styled(IconButton)(({ theme }) => ({ @@ -27,4 +32,8 @@ export const StyledToggleButtonOn = styled(IconButton)(({ theme }) => ({ color: theme.palette.primary.contrastText, backgroundColor: theme.palette.primary.main, }, + [theme.breakpoints.between(1101, 1365)]: { + marginRight: '0.5rem', + alignItems: 'center', + }, })); diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts index 8d9e3f4602..192606a2e2 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts @@ -11,12 +11,18 @@ export const useStyles = makeStyles()(theme => ({ [theme.breakpoints.down(860)]: { display: 'none', }, - marginLeft: '0.75rem', + }, + helpWrapper: { + marginLeft: '12px', + height: '24px', }, addCustomLabel: { display: 'flex', flexDirection: 'row', justifyContent: 'start', - margin: '0.75rem 0', + margin: '0.75rem 0 ', + }, + customConstraintLabel: { + color: theme.palette.text.secondary, }, })); diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx index 88e4ba3300..6f99bbb3fd 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx @@ -1,6 +1,6 @@ -import React, { forwardRef, Fragment, useImperativeHandle } from 'react'; +import React, { forwardRef, useImperativeHandle } from 'react'; import { Button, Tooltip } from '@mui/material'; -import { Help } from '@mui/icons-material'; +import { HelpOutline } from '@mui/icons-material'; import { IConstraint } from 'interfaces/strategy'; import { ConstraintAccordion } from 'component/common/ConstraintAccordion/ConstraintAccordion'; import produce from 'immer'; @@ -10,7 +10,6 @@ import { objectId } from 'utils/objectId'; import { useStyles } from './ConstraintAccordionList.styles'; import { createEmptyConstraint } from 'component/common/ConstraintAccordion/ConstraintAccordionList/createEmptyConstraint'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; interface IConstraintAccordionListProps { constraints: IConstraint[]; @@ -100,13 +99,37 @@ export const ConstraintAccordionList = forwardRef< return (
+ 0} + show={ +

+ Custom constraints +

+ } + /> + {constraints.map((constraint, index) => ( + + ))}

Add any number of custom constraints

- + - +
@@ -123,30 +146,13 @@ export const ConstraintAccordionList = forwardRef< onClick={onAdd} variant="outlined" color="secondary" + sx={{ mb: 2 }} > Add custom constraint
} /> - {constraints.map((constraint, index) => ( - - 0} - show={} - /> - - - ))} ); }); diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx index 44aa810358..d7df4b83d7 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx @@ -42,12 +42,17 @@ export const ConstraintAccordionView = ({ className={styles.accordion} classes={{ root: styles.accordionRoot }} expanded={expanded} - sx={{ cursor: expandable ? 'pointer' : 'default' }} > { - const { classes: styles } = useAccordionStyles(); - const { classes } = useStyles(); + const { classes: styles } = useStyles(); const { locationSettings } = useLocationSettings(); return (
- - {' '} - Case insensitive setting is active -

- } - /> - - - {' '} - Operator is negated -

- } - /> -
} elseShow={ @@ -59,6 +60,7 @@ export const ConstraintAccordionViewHeaderInfo = ({ constraint={constraint} expanded={expanded} allowExpand={allowExpand} + maxLength={112} /> } /> diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx index 5367f42b53..99fcef67ba 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx @@ -3,12 +3,11 @@ import { oneOf } from '../../../../../../utils/oneOf'; import { stringOperators } from '../../../../../../constants/operators'; import { styled, Tooltip } from '@mui/material'; import { ReactComponent as CaseSensitive } from '../../../../../../assets/icons/24_Text format.svg'; -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import classnames from 'classnames'; import { StyledIconWrapper } from '../StyledIconWrapper/StyledIconWrapper'; import { IConstraint } from '../../../../../../interfaces/strategy'; import { useStyles } from '../../../ConstraintAccordion.styles'; -import { getTextWidth } from '../../../helpers'; const StyledValuesSpan = styled('span')(({ theme }) => ({ display: '-webkit-box', @@ -27,6 +26,7 @@ const StyledValuesSpan = styled('span')(({ theme }) => ({ interface ConstraintSingleValueProps { constraint: IConstraint; expanded: boolean; + maxLength: number; allowExpand: (shouldExpand: boolean) => void; } @@ -34,33 +34,22 @@ export const ConstraintAccordionViewHeaderMultipleValues = ({ constraint, expanded, allowExpand, + maxLength, }: ConstraintSingleValueProps) => { const { classes: styles } = useStyles(); - const elementRef = useRef(null); - - const [width, setWidth] = useState(0); - const [textWidth, setTextWidth] = useState(0); const [expandable, setExpandable] = useState(false); - useEffect(() => { - if (elementRef && elementRef.current != null) { - setTextWidth( - Math.round(getTextWidth(elementRef.current.innerText) / 2) // 2 lines - ); - setWidth(elementRef.current.clientWidth); - } - }, []); + const text = useMemo(() => { + return constraint?.values?.map(value => value).join(', '); + }, [constraint]); useEffect(() => { - if (textWidth && width) { - setExpandable(textWidth > width); + if (text) { + allowExpand((text?.length ?? 0) > maxLength); + setExpandable((text?.length ?? 0) > maxLength); } - }, [textWidth, width]); - - useEffect(() => { - allowExpand(expandable); - }, [expandable, allowExpand]); + }, [text, maxLength, allowExpand, setExpandable]); return (
@@ -78,9 +67,7 @@ export const ConstraintAccordionViewHeaderMultipleValues = ({ } />
- - {constraint?.values?.map(value => value).join(', ')} - + {text} ({ interface ConstraintSingleValueProps { constraint: IConstraint; + allowExpand: (shouldExpand: boolean) => void; } -export const ContraintAccordionViewHeaderSingleValue = ({ +export const ConstraintAccordionViewHeaderSingleValue = ({ constraint, + allowExpand, }: ConstraintSingleValueProps) => { const { locationSettings } = useLocationSettings(); const { classes: styles } = useStyles(); + useEffect(() => { + allowExpand(false); + }, [allowExpand]); + return (
({ export const StyledIconWrapper = forwardRef< HTMLDivElement, - { isPrefix?: boolean; children?: React.ReactNode } + { isPrefix?: boolean; children?: ReactNode } >(({ isPrefix, ...props }, ref) => ( ({ borderTopColor: theme.palette.grey[300], }, }, + formInput: { + [theme.breakpoints.between(1101, 1365)]: { + width: '170px', + marginRight: '8px', + }, + }, })); diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.tsx index e1a8b0c092..82e3c23d29 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.tsx @@ -48,7 +48,12 @@ export const ConstraintOperatorSelect = ({ }; return ( - + Operator