From 0b93776db62cb8aaceb7943e75408d26fb5bd6db Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Thu, 4 Aug 2022 10:13:07 +0200 Subject: [PATCH] Update UI for strategies - segmentation and for mobile devices (#1189) * fix: strategies rwd ui updates * rwd updates to strategies * add item numbers to strategies * update strategy segmentation styles --- .../ConstraintAccordion.styles.ts | 18 +++++-- .../StrategySeparator/StrategySeparator.tsx | 48 +++++++++++-------- .../FeatureStrategyEmpty.styles.ts | 1 + .../FeatureStrategyEmpty.tsx | 2 +- .../PresetCard/PresetCard.tsx | 9 +++- .../FeatureStrategySegment.styles.ts | 5 -- .../FeatureStrategySegment.tsx | 6 ++- .../FeatureStrategySegmentList.styles.ts | 8 ++-- .../StrategyDraggableItem.tsx | 32 +++++++++---- .../ConstraintItem/ConstraintItem.styles.ts | 2 +- .../StrategyExecution.styles.ts | 2 +- .../StrategyItem/StrategyItem.styles.ts | 3 ++ .../StrategyItem/StrategyItem.tsx | 8 +++- .../FeatureOverviewEnvironment.styles.ts | 6 ++- .../FeatureOverviewEnvironment.tsx | 22 ++++----- .../SectionSeparator/SectionSeparator.tsx | 4 +- .../FeatureOverviewSegment.tsx | 8 +++- .../RolloutSlider/RolloutSlider.tsx | 4 +- frontend/src/themes/theme.ts | 5 ++ frontend/src/themes/themeTypes.ts | 3 +- 20 files changed, 129 insertions(+), 67 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts index bceadae3df..ad759801b2 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts @@ -8,8 +8,7 @@ export const useStyles = makeStyles()(theme => ({ alignItems: 'center', justifyContent: 'center', marginRight: theme.spacing(1), - [theme.breakpoints.down(650)]: { - marginBottom: '1rem', + [theme.breakpoints.down(710)]: { marginRight: 0, }, }, @@ -17,8 +16,8 @@ export const useStyles = makeStyles()(theme => ({ fill: '#fff', }, accordion: { - border: `1px solid ${theme.palette.grey[400]}`, - borderRadius: '8px', + border: `1px solid ${theme.palette.dividerAlternative}`, + borderRadius: theme.shape.borderRadiusMedium, backgroundColor: '#fff', boxShadow: 'none', margin: 0, @@ -27,6 +26,9 @@ export const useStyles = makeStyles()(theme => ({ '&:before': { opacity: '0 !important', }, + '&:first-of-type, &:last-of-type': { + borderRadius: theme.shape.borderRadiusMedium, + }, }, accordionEdit: { backgroundColor: '#F6F6FA', @@ -34,7 +36,10 @@ export const useStyles = makeStyles()(theme => ({ headerMetaInfo: { display: 'flex', alignItems: 'stretch', - [theme.breakpoints.down(710)]: { flexDirection: 'column' }, + [theme.breakpoints.down(710)]: { + flexDirection: 'column', + alignItems: 'center', + }, }, headerContainer: { display: 'flex', @@ -76,6 +81,9 @@ export const useStyles = makeStyles()(theme => ({ minWidth: '152px', paddingRight: '0.5rem', }, + [theme.breakpoints.down(710)]: { + paddingRight: 0, + }, }, editingBadge: { borderRadius: theme.shape.borderRadiusExtraLarge, diff --git a/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx b/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx index 3678a96c44..1b97041f76 100644 --- a/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx +++ b/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx @@ -1,18 +1,12 @@ -import { styled } from '@mui/material'; +import { Box, styled, useTheme } from '@mui/material'; import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender'; interface IStrategySeparatorProps { text: 'AND' | 'OR'; } -const StyledContainer = styled('div')(({ theme }) => ({ - height: theme.spacing(1), - position: 'relative', - width: '100%', -})); - const StyledContent = styled('div')(({ theme }) => ({ - padding: theme.spacing(0.75, 1.5), + padding: theme.spacing(0.75, 1), color: theme.palette.text.primary, fontSize: theme.fontSizes.smallerBody, backgroundColor: theme.palette.secondaryContainer, @@ -20,26 +14,38 @@ const StyledContent = styled('div')(({ theme }) => ({ position: 'absolute', zIndex: theme.zIndex.fab, top: '50%', - left: theme.spacing(3), + left: theme.spacing(2), transform: 'translateY(-50%)', + lineHeight: 1, })); const StyledCenteredContent = styled(StyledContent)(({ theme }) => ({ top: '50%', left: '50%', transform: 'translate(-50%, -50%)', - backgroundColor: theme.palette.secondary.light, + backgroundColor: theme.palette.activityIndicators.primary, border: `1px solid ${theme.palette.primary.border}`, + borderRadius: theme.shape.borderRadiusLarge, })); -export const StrategySeparator = ({ text }: IStrategySeparatorProps) => ( - - {text}} - elseShow={() => ( - {text} - )} - /> - -); +export const StrategySeparator = ({ text }: IStrategySeparatorProps) => { + const theme = useTheme(); + + return ( + + {text}} + elseShow={() => ( + {text} + )} + /> + + ); +}; diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.styles.ts b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.styles.ts index fd2b71c21f..5f7fc7bf8c 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.styles.ts +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.styles.ts @@ -6,6 +6,7 @@ export const useStyles = makeStyles()(theme => ({ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', + paddingTop: theme.spacing(2), }, title: { fontSize: theme.fontSizes.bodySize, diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx index c1490eea47..c604d24b4b 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx @@ -161,7 +161,7 @@ export const FeatureStrategyEmpty = ({ display: 'grid', width: '100%', gap: 2, - gridTemplateColumns: '1fr 1fr', + gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr' }, }} > = ({ {children} - + ({ - title: { - margin: 0, - fontSize: theme.fontSizes.bodySize, - fontWeight: theme.fontWeight.bold, - }, divider: { border: `1px dashed ${theme.palette.divider}`, }, diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx index 604dbb7d7c..6320b7238a 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx @@ -9,7 +9,7 @@ import { FeatureStrategySegmentList } from 'component/feature/FeatureStrategy/Fe import { useStyles } from 'component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.styles'; import { SegmentDocsStrategyWarning } from 'component/segments/SegmentDocs/SegmentDocs'; import { useSegmentLimits } from 'hooks/api/getters/useSegmentLimits/useSegmentLimits'; -import { Divider } from '@mui/material'; +import { Divider, Typography } from '@mui/material'; interface IFeatureStrategySegmentProps { segments: ISegment[]; @@ -53,7 +53,9 @@ export const FeatureStrategySegment = ({ return ( <> -

Segmentation

+ + Segmentation + {atStrategySegmentsLimit && }

Add a predefined segment to constrain this feature toggle:

({ fontSize: theme.fontSizes.smallerBody, border: '1px solid', borderColor: theme.palette.grey[300], - paddingInline: '0.4rem', - marginBlock: '0.2rem', - display: 'grid', + padding: theme.spacing(0.75, 1), + display: 'block', + marginTop: 'auto', + marginBottom: 'auto', alignItems: 'center', borderRadius: theme.shape.borderRadius, + lineHeight: 1, }, selectedSegmentsLabel: { color: theme.palette.text.secondary, diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem.tsx index 080e1731e2..be568736a8 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem.tsx @@ -1,3 +1,4 @@ +import { Box, styled } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; import { MoveListItem, useDragItem } from 'hooks/useDragItem'; @@ -13,6 +14,18 @@ interface IStrategyDraggableItemProps { onDragAndDrop: MoveListItem; } +const StyledIndexLabel = styled('div')(({ theme }) => ({ + fontSize: theme.typography.fontSize, + color: theme.palette.text.secondary, + position: 'absolute', + display: 'none', + right: 'calc(100% + 6px)', + top: theme.spacing(2.5), + [theme.breakpoints.up('md')]: { + display: 'block', + }, +})); + export const StrategyDraggableItem = ({ strategy, index, @@ -23,17 +36,20 @@ export const StrategyDraggableItem = ({ const ref = useDragItem(index, onDragAndDrop); return ( -
+ 0} show={} /> - -
+ + {index + 1} + + + ); }; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/ConstraintItem/ConstraintItem.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/ConstraintItem/ConstraintItem.styles.ts index fb8f37bb11..dc31d5fc97 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/ConstraintItem/ConstraintItem.styles.ts +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/ConstraintItem/ConstraintItem.styles.ts @@ -4,7 +4,7 @@ export const useStyles = makeStyles()(theme => ({ container: { width: '100%', padding: theme.spacing(2, 3), - borderRadius: theme.shape.borderRadius, + borderRadius: theme.shape.borderRadiusMedium, border: `1px solid ${theme.palette.divider}`, }, chip: { diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.styles.ts index d1fa29e035..a570236fbd 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.styles.ts +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.styles.ts @@ -4,7 +4,7 @@ export const useStyles = makeStyles()(theme => ({ valueContainer: { padding: theme.spacing(2, 3), border: `1px solid ${theme.palette.dividerAlternative}`, - borderRadius: theme.shape.borderRadius, + borderRadius: theme.shape.borderRadiusMedium, }, valueSeparator: { color: theme.palette.grey[700], diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.styles.ts index 3cc43a4599..4ef86b1b6d 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.styles.ts +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.styles.ts @@ -17,6 +17,9 @@ export const useStyles = makeStyles()(theme => ({ borderBottom: `1px solid ${theme.palette.divider}`, fontWeight: theme.typography.fontWeightMedium, }, + headerDraggable: { + paddingLeft: theme.spacing(1), + }, icon: { fill: theme.palette.inactiveIcon, }, diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx index be80809709..e4b0bfcfb9 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx @@ -1,6 +1,7 @@ import { DragIndicator, Edit } from '@mui/icons-material'; import { styled, useTheme, IconButton } from '@mui/material'; import { Link } from 'react-router-dom'; +import classNames from 'classnames'; import { IFeatureEnvironment } from 'interfaces/featureToggle'; import { IFeatureStrategy } from 'interfaces/strategy'; import { @@ -52,7 +53,11 @@ export const StrategyItem = ({ return (
-
+
( @@ -60,6 +65,7 @@ export const StrategyItem = ({ )} diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts index b5c55e7728..50fe9d44e5 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts @@ -28,9 +28,13 @@ export const useStyles = makeStyles()(theme => ({ borderBottomLeftRadius: theme.shape.borderRadiusLarge, borderBottomRightRadius: theme.shape.borderRadiusLarge, borderBottom: `4px solid ${theme.palette.primary.light}`, + + [theme.breakpoints.down('md')]: { + padding: theme.spacing(2, 1), + }, }, accordionDetailsDisabled: { - borderBottom: `4px solid ${theme.palette.dividerAlternative}`, + borderBottom: `4px solid ${theme.palette.neutral.border}`, }, accordionBody: { width: '100%', diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx index 1ae3818743..37f86b3e94 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx @@ -85,18 +85,18 @@ const FeatureOverviewEnvironment = ({ maxWidth="100" maxLength={15} /> - - } - />
+ + } + />
({ transform: 'translateY(-50%)', height: 2, width: '100%', - backgroundColor: theme.palette.divider, + backgroundColor: theme.palette.dividerAlternative, }, })); @@ -25,7 +25,7 @@ const SeparatorContent = styled('span')(({ theme }) => ({ background: theme.palette.secondaryContainer, position: 'relative', maxWidth: '80%', - color: theme.palette.text.secondary, + color: theme.palette.text.primary, })); export const SectionSeparator: FC = ({ children }) => ( diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx index d81dcb8bdd..e4ad150dae 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx @@ -3,6 +3,8 @@ import { Link } from 'react-router-dom'; import { DonutLarge } from '@mui/icons-material'; import { useStyles } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles'; import { useSegments } from 'hooks/api/getters/useSegments/useSegments'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; interface IFeatureOverviewSegmentProps { strategyId: string; @@ -20,8 +22,12 @@ export const FeatureOverviewSegment = ({ return ( <> - {segments.map(segment => ( + {segments.map((segment, index) => ( + 0} + show={} + />
Segment:{' '} {name} diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts index 695d4f5cfa..6d83f80aa3 100644 --- a/frontend/src/themes/theme.ts +++ b/frontend/src/themes/theme.ts @@ -26,6 +26,10 @@ export default createTheme({ fontSize: '1.5rem', lineHeight: 1.875, }, + h3: { + fontSize: '1rem', + fontWeight: '700', + }, caption: { fontSize: `${12 / 16}rem`, }, @@ -128,6 +132,7 @@ export default createTheme({ recent: colors.green[100], inactive: colors.orange[200], abandoned: colors.red[200], + primary: colors.purple[100], }, inactiveIcon: colors.grey[600], }, diff --git a/frontend/src/themes/themeTypes.ts b/frontend/src/themes/themeTypes.ts index 9e61141b28..e218bf42a1 100644 --- a/frontend/src/themes/themeTypes.ts +++ b/frontend/src/themes/themeTypes.ts @@ -46,13 +46,14 @@ declare module '@mui/material/styles' { background: string; }; /** - * For 'Seen' column on feature toggles list. + * For 'Seen' column on feature toggles list and other. */ activityIndicators: { unknown: string; recent: string; inactive: string; abandoned: string; + primary: string; }; dividerAlternative: string; /**