From acaca5f65caecd6147fcd24b4b5bc69c0251f8ac Mon Sep 17 00:00:00 2001 From: IanLondon Date: Fri, 22 Mar 2019 15:10:38 -0400 Subject: [PATCH 1/7] feat(protocol-designer): update change tip tooltips (#3214) --- .../StepEditForm/fields/ChangeTip/ChangeTip.js | 5 +++-- .../src/localization/en/form.json | 18 +++++++++--------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/protocol-designer/src/components/StepEditForm/fields/ChangeTip/ChangeTip.js b/protocol-designer/src/components/StepEditForm/fields/ChangeTip/ChangeTip.js index 08203ca58b7..b968c51023d 100644 --- a/protocol-designer/src/components/StepEditForm/fields/ChangeTip/ChangeTip.js +++ b/protocol-designer/src/components/StepEditForm/fields/ChangeTip/ChangeTip.js @@ -18,10 +18,11 @@ const ChangeTipField = (props: Props) => { const {name, disabledOptions} = props const options = props.options.map((value) => { - const toolTip = i18n.t(`form.step_edit_form.field.change_tip.option_tooltip.${value}`) + const tooltip =
+ {i18n.t(`form.step_edit_form.field.change_tip.option_tooltip.${value}`)}
const option = i18n.t(`form.step_edit_form.field.change_tip.option.${value}`) const label = ( - + {(hoverTooltipHandlers) =>
{option}
}
) diff --git a/protocol-designer/src/localization/en/form.json b/protocol-designer/src/localization/en/form.json index e8f18213629..a242538141a 100644 --- a/protocol-designer/src/localization/en/form.json +++ b/protocol-designer/src/localization/en/form.json @@ -44,18 +44,18 @@ "change_tip": { "label": "change tip", "option": { - "always": "Always", - "once": "Once", - "perSource": "Per Source Well", - "perDest": "Per Destination Well", + "always": "Before every aspirate", + "once": "Once at the start of step", + "perSource": "Per source well", + "perDest": "Per destination well", "never": "Never" }, "option_tooltip": { - "always": "Avoid contaminating both source & destination wells", - "once": "Only at start of step", - "perSource": "Avoid cross-contaminating source wells", - "perDest": "Avoid cross-contaminating destination wells", - "never": "Use same tip as last step" + "always": "Always aspirate with a fresh tip.", + "once": "Get one new tip to use for the whole step.", + "perSource": "Get a new tip when aspirating from a new source well. Keep tip for repeat aspirations from the same source well.", + "perDest": "Get a new tip when dispensing into a new destination well. Keep tip for repeat dispenses into the same destination well.", + "never": "Use same tip as the previous step." } }, "tip_position": {"label": "tip position"}, From 8ff58370f49d3eef5f55629a54b00648a582a3c9 Mon Sep 17 00:00:00 2001 From: IanLondon Date: Fri, 22 Mar 2019 15:28:51 -0400 Subject: [PATCH 2/7] add well order tooltip --- .../StepEditForm/fields/WellOrder/index.js | 45 +++++++++++-------- 1 file changed, 27 insertions(+), 18 deletions(-) diff --git a/protocol-designer/src/components/StepEditForm/fields/WellOrder/index.js b/protocol-designer/src/components/StepEditForm/fields/WellOrder/index.js index e9bdd54a696..271dcd20010 100644 --- a/protocol-designer/src/components/StepEditForm/fields/WellOrder/index.js +++ b/protocol-designer/src/components/StepEditForm/fields/WellOrder/index.js @@ -1,15 +1,18 @@ // @flow import * as React from 'react' import {connect} from 'react-redux' -import {FormGroup} from '@opentrons/components' +import {HoverTooltip, FormGroup} from '@opentrons/components' import cx from 'classnames' +import i18n from '../../../../localization' import {selectors as stepFormSelectors} from '../../../../step-forms' -import styles from './WellOrderInput.css' -import stepEditStyles from '../../StepEditForm.css' -import WellOrderModal from './WellOrderModal' import ZIG_ZAG_IMAGE from '../../../../images/zig_zag_icon.svg' +import WellOrderModal from './WellOrderModal' + import type {BaseState} from '../../../../types' +import stepEditStyles from '../../StepEditForm.css' +import styles from './WellOrderInput.css' + type OP = { className?: ?string, label?: string, @@ -30,20 +33,26 @@ class WellOrderInput extends React.Component { [stepEditStyles.no_label]: !this.props.label, }) return ( - - - - + + {(hoverTooltipHandlers) => +
+ + + + +
+ } +
) } } From 014393f822e848e16c14f8e5214e128943039f63 Mon Sep 17 00:00:00 2001 From: IanLondon Date: Tue, 26 Mar 2019 09:43:27 -0400 Subject: [PATCH 3/7] add touch tip & well order tooltips --- .../src/components/StepEditForm/fields/TipPosition/index.js | 4 ++-- protocol-designer/src/components/StepEditForm/forms/Mix.js | 1 + .../StepEditForm/forms/MoveLiquid/SourceDestFields.js | 1 + protocol-designer/src/components/StepEditForm/utils.js | 4 +--- protocol-designer/src/localization/en/application.json | 1 + protocol-designer/src/localization/en/form.json | 2 +- protocol-designer/src/localization/en/tooltip.json | 5 ++++- 7 files changed, 11 insertions(+), 7 deletions(-) diff --git a/protocol-designer/src/components/StepEditForm/fields/TipPosition/index.js b/protocol-designer/src/components/StepEditForm/fields/TipPosition/index.js index 54ffb3006b8..75a3d6d1aaf 100644 --- a/protocol-designer/src/components/StepEditForm/fields/TipPosition/index.js +++ b/protocol-designer/src/components/StepEditForm/fields/TipPosition/index.js @@ -49,7 +49,7 @@ class TipPositionInput extends React.Component { const isTouchTipField = getIsTouchTipField(this.props.fieldName) const Wrapper = ({children, hoverTooltipHandlers}) => isTouchTipField - ? {children} + ?
{children}
: { readOnly onClick={this.handleOpen} value={String(value)} - units="mm" /> + units={i18n.t('application.units.millimeter')} /> )}
diff --git a/protocol-designer/src/components/StepEditForm/forms/Mix.js b/protocol-designer/src/components/StepEditForm/forms/Mix.js index c62cf2511e5..ac17db2a6e0 100644 --- a/protocol-designer/src/components/StepEditForm/forms/Mix.js +++ b/protocol-designer/src/components/StepEditForm/forms/Mix.js @@ -97,6 +97,7 @@ class MixForm extends React.Component { diff --git a/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestFields.js b/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestFields.js index 5fb4d08c557..0a30d83facf 100644 --- a/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestFields.js +++ b/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestFields.js @@ -66,6 +66,7 @@ function SourceDestFields (props: Props) { } diff --git a/protocol-designer/src/components/StepEditForm/utils.js b/protocol-designer/src/components/StepEditForm/utils.js index 301d9964e90..d0ab486d969 100644 --- a/protocol-designer/src/components/StepEditForm/utils.js +++ b/protocol-designer/src/components/StepEditForm/utils.js @@ -71,11 +71,9 @@ export function getTooltipForField (stepType: ?string, name: string): ?React.Nod : name // specificity cascade for names. - // first level: try getting from step_fields.moveLiquid, fallback to step_fields.default + // first level: "disabled" wins out if disabled arg is true // second level: prefix. "aspirate_foo" wins over "foo" const text: string = i18n.t([ - `tooltip.step_fields.${stepType}.${name}`, - `tooltip.step_fields.${stepType}.${nameWithoutPrefix}`, `tooltip.step_fields.defaults.${name}`, `tooltip.step_fields.defaults.${nameWithoutPrefix}`, '', diff --git a/protocol-designer/src/localization/en/application.json b/protocol-designer/src/localization/en/application.json index c3c9950719c..6a52a00f17b 100644 --- a/protocol-designer/src/localization/en/application.json +++ b/protocol-designer/src/localization/en/application.json @@ -5,6 +5,7 @@ "pause": "pause" }, "units": { + "millimeter": "mm", "microliter": "μL", "microliterPerSec": "μL/s", "times": "x", diff --git a/protocol-designer/src/localization/en/form.json b/protocol-designer/src/localization/en/form.json index a242538141a..097cbc2363e 100644 --- a/protocol-designer/src/localization/en/form.json +++ b/protocol-designer/src/localization/en/form.json @@ -61,7 +61,7 @@ "tip_position": {"label": "tip position"}, "volume": {"label": "volume"}, "well_order": { - "label": "Well Order", + "label": "Well order", "option": { "l2r": "Left to right", "r2l": "Right to left", diff --git a/protocol-designer/src/localization/en/tooltip.json b/protocol-designer/src/localization/en/tooltip.json index 63778446170..d19ab290b83 100644 --- a/protocol-designer/src/localization/en/tooltip.json +++ b/protocol-designer/src/localization/en/tooltip.json @@ -24,7 +24,10 @@ "changeTip": "Choose when the robot picks up fresh tips", "preWetTip": "Pre-wet pipette tip by aspirating and dispensing 2/3 of the tip's max volume", "tipPosition": "Distance from the bottom of the well", - "touchTip_checkbox": "Touch tip to 4 sides of the well", + + "aspirate_touchTip_checkbox": "Touch tip to each side of well after aspirating", + "dispense_touchTip_checkbox": "Touch tip to each side of well after dispensing", + "mix_touchTip_checkbox": "Touch tip to each side of the well after mixing", "volume": "Volume to dispense in each well" } From 509bd72528296798e3e514445b5116b46ca896fb Mon Sep 17 00:00:00 2001 From: IanLondon Date: Tue, 26 Mar 2019 09:49:58 -0400 Subject: [PATCH 4/7] move mix field around (closes #3041) --- .../forms/MoveLiquid/SourceDestFields.js | 38 +++++++++++-------- 1 file changed, 23 insertions(+), 15 deletions(-) diff --git a/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestFields.js b/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestFields.js index 0a30d83facf..67f5eeb9259 100644 --- a/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestFields.js +++ b/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestFields.js @@ -29,6 +29,24 @@ function SourceDestFields (props: Props) { const {className, focusHandlers, prefix} = props const addFieldNamePrefix = makeAddFieldNamePrefix(prefix) + const mixFields = ( + + + + + ) + return (
@@ -48,6 +66,7 @@ function SourceDestFields (props: Props) { label={i18n.t('form.step_edit_form.field.preWetTip.label')} className={styles.small_field} /> + {mixFields} } + + {prefix === 'dispense' && mixFields} + - - - - + {prefix === 'dispense' && Date: Tue, 26 Mar 2019 09:59:35 -0400 Subject: [PATCH 5/7] fixup typo --- .../StepEditForm/forms/MoveLiquid/SourceDestFields.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestFields.js b/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestFields.js index 67f5eeb9259..c8c8a2b3983 100644 --- a/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestFields.js +++ b/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestFields.js @@ -88,7 +88,7 @@ function SourceDestFields (props: Props) { From 9a2cc6cd034c9985693219da15d72a452512f06b Mon Sep 17 00:00:00 2001 From: IanLondon Date: Tue, 26 Mar 2019 10:43:21 -0400 Subject: [PATCH 6/7] remove unnecessary vendor prefixes on textarea_field style --- protocol-designer/src/components/StepEditForm/StepEditForm.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/protocol-designer/src/components/StepEditForm/StepEditForm.css b/protocol-designer/src/components/StepEditForm/StepEditForm.css index 427d229694d..b0150fc0359 100644 --- a/protocol-designer/src/components/StepEditForm/StepEditForm.css +++ b/protocol-designer/src/components/StepEditForm/StepEditForm.css @@ -58,8 +58,6 @@ border: none; overflow: auto; outline: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; box-shadow: none; resize: none; } From e41538ba2d6932313c3ce3803644109d63e5850a Mon Sep 17 00:00:00 2001 From: IanLondon Date: Tue, 26 Mar 2019 15:30:42 -0400 Subject: [PATCH 7/7] fix tooltip misalignment --- .../StepEditForm/fields/ChangeTip/ChangeTip.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/protocol-designer/src/components/StepEditForm/fields/ChangeTip/ChangeTip.js b/protocol-designer/src/components/StepEditForm/fields/ChangeTip/ChangeTip.js index b968c51023d..09e1559a845 100644 --- a/protocol-designer/src/components/StepEditForm/fields/ChangeTip/ChangeTip.js +++ b/protocol-designer/src/components/StepEditForm/fields/ChangeTip/ChangeTip.js @@ -18,12 +18,20 @@ const ChangeTipField = (props: Props) => { const {name, disabledOptions} = props const options = props.options.map((value) => { - const tooltip =
- {i18n.t(`form.step_edit_form.field.change_tip.option_tooltip.${value}`)}
+ const tooltip = ( +
+ {i18n.t(`form.step_edit_form.field.change_tip.option_tooltip.${value}`)} +
+ ) + const option = i18n.t(`form.step_edit_form.field.change_tip.option.${value}`) const label = ( - - {(hoverTooltipHandlers) =>
{option}
} + {(hoverTooltipHandlers) =>
{option}
}
) return {