Skip to content

Commit 2bc46f4

Browse files
jeraderjerader
authored
refactor(protocol-designer): refine ui for multi-channel substeps (#19022)
closes AUTH-1998
1 parent aeea720 commit 2bc46f4

File tree

7 files changed

+93
-56
lines changed

7 files changed

+93
-56
lines changed

‎components/src/atoms/StyledText/PlaceholderStyledText.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ export const PlaceholderStyledText = (
3737
desktopStyle != null ? styleMap[desktopStyle as StyleKey] : null,
3838
oddStyle != null ? styleMap[oddStyle as StyleKey] : null
3939
)
40-
4140
return (
4241
<text className={combinedClassName} style={{ color: color ?? '' }}>
4342
{children}

‎components/src/atoms/StyledText/placeholderstyledtext.module.css

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
1-
.heading_small_bold {
2-
@media not (height: 600px) and (width: 1024px) {
3-
font: var(--font-weight-bold) 1.125rem/var(--line-height-24);
1+
@media not all and (width: 1024px) and (height: 600px) {
2+
.heading_small_bold {
3+
font-size: 1.125rem;
4+
font-weight: var(--font-weight-bold);
5+
line-height: var(--line-height-24);
46
}
5-
}
67

7-
.caption_bold {
8-
@media not (height: 600px) and (width: 1024px) {
9-
font: var(--font-weight-bold) var(--font-size-h4)/var(--line-height-16);
8+
.caption_bold {
9+
font-size: 0.75rem;
10+
font-weight: var(--font-weight-bold);
1011
}
11-
}
1212

13-
.body_default_semi_bold {
14-
@media not (height: 600px) and (width: 1024px) {
15-
font: var(--font-weight-semi-bold) var(--font-size-h3)/var(--line-height-20);
13+
.body_default_semi_bold {
14+
font-size: var(--font-size-h3);
15+
font-weight: var(--font-weight-semi-bold);
16+
line-height: var(--line-height-20);
1617
}
1718
}
1819

19-
.small_body_text_bold {
20-
@media (height: 600px) and (width: 1024px) {
20+
@media (width: 1024px) and (height: 600px) {
21+
.small_body_text_bold {
2122
font-size: var(--font-size-20);
2223
font-weight: var(--font-weight-bold);
2324
line-height: var(--font-height-24);

‎protocol-designer/src/assets/localization/en/protocol_steps.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
"heater_shaker_state": "Heater-Shaker state",
8383
"in": "in",
8484
"into": "into",
85+
"individual_wells": "Individual wells",
8586
"labware_in": "Labware in",
8687
"labware_to": "{{labware}} to",
8788
"liquids": "{{num}} liquids",

‎protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/MultichannelSubstep.tsx

Lines changed: 71 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,14 @@ import { useTranslation } from 'react-i18next'
33

44
import {
55
ALIGN_CENTER,
6+
Btn,
7+
COLORS,
68
DeckInfoLabel,
79
DIRECTION_COLUMN,
810
Flex,
11+
Icon,
912
JUSTIFY_SPACE_BETWEEN,
10-
ListButton,
13+
ListItem,
1114
SPACING,
1215
StyledText,
1316
Tag,
@@ -81,55 +84,86 @@ export function MultichannelSubstep(
8184
selectSubstep(null)
8285
}}
8386
>
84-
<ListButton type="noActive" onClick={handleToggleCollapsed}>
87+
<ListItem type="default">
8588
<Flex
8689
flexDirection={DIRECTION_COLUMN}
8790
gridGap={SPACING.spacing4}
91+
padding={SPACING.spacing12}
8892
width="100%"
93+
height={collapsed ? '3rem' : 'auto'}
8994
>
9095
<Flex
91-
padding={SPACING.spacing12}
9296
justifyContent={JUSTIFY_SPACE_BETWEEN}
93-
width="100%"
94-
gridGap={SPACING.spacing8}
9597
alignItems={ALIGN_CENTER}
9698
>
97-
<StyledText desktopStyle="bodyDefaultRegular">
98-
{titleCopy}
99-
</StyledText>
100-
<Tag
101-
text={`${formatVolume(rowGroup[0].volume)} ${t(
102-
'units.microliter'
103-
)}`}
104-
type="default"
105-
shrinkToContent
106-
/>
107-
<StyledText desktopStyle="bodyDefaultRegular">
108-
{firstChannelSource != null && firstChannelDest == null
109-
? t('protocol_steps:from')
110-
: t('protocol_steps:into')}
111-
</StyledText>
112-
{deckLabel}
99+
<Flex
100+
gridGap={SPACING.spacing4}
101+
paddingRight={SPACING.spacing12}
102+
alignItems={ALIGN_CENTER}
103+
>
104+
<StyledText desktopStyle="bodyDefaultRegular">
105+
{titleCopy}
106+
</StyledText>
107+
<Tag
108+
text={`${formatVolume(rowGroup[0].volume)} ${t(
109+
'units.microliter'
110+
)}`}
111+
type="default"
112+
shrinkToContent
113+
/>
114+
<StyledText desktopStyle="bodyDefaultRegular">
115+
{firstChannelSource != null && firstChannelDest == null
116+
? t('protocol_steps:from')
117+
: t('protocol_steps:into')}
118+
</StyledText>
119+
{deckLabel}
120+
</Flex>
121+
<Btn onClick={handleToggleCollapsed}>
122+
<Icon
123+
name={collapsed ? 'chevron-down' : 'chevron-up'}
124+
size="1.5rem"
125+
/>
126+
</Btn>
113127
</Flex>
114128
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
115-
{!collapsed &&
116-
rowGroup.map((row, rowKey) => {
117-
return (
118-
<Substep
119-
trashName={trashName}
120-
key={rowKey}
121-
volume={row.volume}
122-
source={row.source}
123-
dest={row.dest}
124-
stepId={stepId}
125-
substepIndex={substepIndex}
126-
isSameLabware={isSameLabware}
127-
/>
128-
)
129-
})}
129+
{!collapsed ? (
130+
<Flex
131+
flexDirection={DIRECTION_COLUMN}
132+
paddingTop={SPACING.spacing8}
133+
gridGap={SPACING.spacing8}
134+
>
135+
<StyledText
136+
color={COLORS.grey60}
137+
desktopStyle="bodyDefaultRegular"
138+
>
139+
{t('protocol_steps:individual_wells')}
140+
</StyledText>
141+
<Flex
142+
flexDirection={DIRECTION_COLUMN}
143+
gridGap={SPACING.spacing4}
144+
alignItems={ALIGN_CENTER}
145+
>
146+
{rowGroup.map((row, rowKey) => {
147+
return (
148+
<Substep
149+
isNested
150+
trashName={trashName}
151+
key={rowKey}
152+
volume={row.volume}
153+
source={row.source}
154+
dest={row.dest}
155+
stepId={stepId}
156+
substepIndex={substepIndex}
157+
isSameLabware={isSameLabware}
158+
/>
159+
)
160+
})}
161+
</Flex>
162+
</Flex>
163+
) : null}
130164
</Flex>
131165
</Flex>
132-
</ListButton>
166+
</ListItem>
133167
</Flex>
134168
)
135169
}

‎protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/PipettingSubsteps.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export function PipettingSubsteps(props: PipettingSubstepsProps): JSX.Element {
5454
})
5555
: substeps.rows.map((row, substepIndex) => (
5656
<Substep
57+
isNested={false}
5758
trashName={trashName}
5859
key={substepIndex}
5960
selectSubstep={selectSubstep}

‎protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubStepsToolbox.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { useDispatch, useSelector } from 'react-redux'
44
import {
55
COLORS,
66
Flex,
7-
FLEX_MAX_CONTENT,
87
Icon,
98
PrimaryButton,
109
StyledText,
@@ -65,7 +64,7 @@ export function SubStepsToolbox(
6564
<Toolbox
6665
maxHeight={`calc(100vh - ${NAV_BAR_HEIGHT_REM}rem - 1.5rem)`}
6766
height="100%"
68-
width={FLEX_MAX_CONTENT}
67+
width="20.5625rem"
6968
closeButton={<Icon size="2rem" name="close" />}
7069
onCloseClick={handleClose}
7170
confirmButton={

‎protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/Substep.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ interface SubstepProps {
2323
trashName: AdditionalEquipmentName | null
2424
stepId: string
2525
substepIndex: number
26+
isNested: boolean
2627
volume?: number | string | null
2728
source?: SubstepWellData
2829
dest?: SubstepWellData
@@ -44,6 +45,7 @@ function SubstepComponent(props: SubstepProps): JSX.Element {
4445
isSameLabware,
4546
aspirateVolume,
4647
dispenseVolume,
48+
isNested,
4749
} = props
4850
const { i18n, t } = useTranslation([
4951
'application',
@@ -90,7 +92,7 @@ function SubstepComponent(props: SubstepProps): JSX.Element {
9092
gridGap={SPACING.spacing4}
9193
>
9294
{isMix ? (
93-
<ListItem type="default">
95+
<ListItem type={isNested ? 'defaultOnColor' : 'default'}>
9496
<Flex
9597
gridGap={SPACING.spacing4}
9698
padding={SPACING.spacing12}
@@ -120,7 +122,7 @@ function SubstepComponent(props: SubstepProps): JSX.Element {
120122
) : (
121123
<>
122124
{source != null ? (
123-
<ListItem type="default">
125+
<ListItem type={isNested ? 'defaultOnColor' : 'default'}>
124126
<Flex
125127
gridGap={SPACING.spacing4}
126128
padding={SPACING.spacing12}
@@ -149,7 +151,7 @@ function SubstepComponent(props: SubstepProps): JSX.Element {
149151
</ListItem>
150152
) : null}
151153
{dest != null ? (
152-
<ListItem type="default">
154+
<ListItem type={isNested ? 'defaultOnColor' : 'default'}>
153155
<Flex
154156
gridGap={SPACING.spacing4}
155157
padding={SPACING.spacing12}

0 commit comments

Comments
 (0)