Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(protocol-designer): add vertical spacing back to form fields #2644

Merged
merged 3 commits into from
Nov 8, 2018
Merged

fix(protocol-designer): add vertical spacing back to form fields #2644

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2a87adb
fix(protocol-designer): add vertical spacing back to form fields
b-cooper Nov 8, 2018
8aafd3a
include last child
b-cooper Nov 8, 2018
b3f5e5a
also on edit pipette
b-cooper Nov 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions protocol-designer/src/components/FilePage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
OutlineButton,
PrimaryButton,
} from '@opentrons/components'
import cx from 'classnames'
import i18n from '../localization'
import type {FormConnector} from '../utils'
import {Portal} from './portals/MainPageModalPortal'
Expand Down Expand Up @@ -46,7 +47,7 @@ class FilePage extends React.Component<Props, State> {
<div className={styles.file_page}>
<Card title='Information'>
<form onSubmit={this.handleSubmit} className={styles.card_content}>
<div className={formStyles.row_wrapper}>
<div className={cx(formStyles.row_wrapper, formStyles.stacked_row)}>
<FormGroup label='Protocol Name:' className={formStyles.column_1_2}>
<InputField placeholder='Untitled' {...formConnector('protocol-name')} />
</FormGroup>
Expand All @@ -56,7 +57,7 @@ class FilePage extends React.Component<Props, State> {
</FormGroup>
</div>

<FormGroup label='Description:'>
<FormGroup label='Description:' className={formStyles.stacked_row}>
<InputField {...formConnector('description')}/>
</FormGroup>
<div className={styles.button_row}>
Expand Down
12 changes: 9 additions & 3 deletions protocol-designer/src/components/StepEditForm/PauseForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,15 @@ function PauseForm (props: PauseFormProps): React.Element<'div'> {
name="pauseForAmountOfTime"
options={[{name: 'Pause for an amount of time', value: 'true'}]}
{...focusHandlers} />
<StepInputField units="hr" name="pauseHour" {...focusHandlers} />
<StepInputField units="m" name="pauseMinute" {...focusHandlers} />
<StepInputField units="s" name="pauseSecond" {...focusHandlers} />
<FormGroup className={formStyles.stacked_row}>
<StepInputField units="hr" name="pauseHour" {...focusHandlers} />
</FormGroup>
<FormGroup className={formStyles.stacked_row}>
<StepInputField units="m" name="pauseMinute" {...focusHandlers} />
</FormGroup>
<FormGroup className={formStyles.stacked_row}>
<StepInputField units="s" name="pauseSecond" {...focusHandlers} />
</FormGroup>
</div>
<div className={formStyles.column_1_2}>
<StepRadioGroup
Expand Down
4 changes: 4 additions & 0 deletions protocol-designer/src/components/forms.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@
padding-bottom: 1rem;
}

.stacked_row {
margin-bottom: 0.5rem;
}

/* NOTE: explicit column classes should only be used for forms with a layout
* that doesn't match the layout of transfer/distribute/consolidate/mix.
* Eg the Pause form is an example of an exceptional layout.
Expand Down
17 changes: 13 additions & 4 deletions protocol-designer/src/components/modals/EditPipettesModal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {

import PipetteDiagram from '../NewFileModal/PipetteDiagram'
import TiprackDiagram from '../NewFileModal/TiprackDiagram'
import formStyles from '../../forms.css'
import styles from './EditPipettesModal.css'
import modalStyles from '../modal.css'
import StepChangesWarningModal from './StepChangesWarningModal'
Expand Down Expand Up @@ -139,14 +140,18 @@ class EditPipettesModal extends React.Component<Props, State> {

<div className={styles.mount_fields_row}>
<div className={styles.mount_column}>
<FormGroup key="leftPipetteModel" label="Left Pipette">
<FormGroup key="leftPipetteModel" label="Left Pipette" className={formStyles.stacked_row}>
<DropdownField
tabIndex={2}
options={pipetteOptionsWithNone}
value={this.state.left.pipetteModel}
onChange={this.makeHandleMountChange('left', 'pipetteModel')} />
</FormGroup>
<FormGroup disabled={isEmpty(this.state.left.pipetteModel)} key={'leftTiprackModel'} label={`${startCase('left')} Tiprack*`}>
<FormGroup
disabled={isEmpty(this.state.left.pipetteModel)}
key={'leftTiprackModel'}
label={`${startCase('left')} Tiprack*`}
className={formStyles.stacked_row}>
<DropdownField
tabIndex={3}
disabled={isEmpty(this.state.left.pipetteModel)}
Expand All @@ -156,14 +161,18 @@ class EditPipettesModal extends React.Component<Props, State> {
</FormGroup>
</div>
<div className={styles.mount_column}>
<FormGroup key="rightPipetteModel" label="Right Pipette">
<FormGroup key="rightPipetteModel" label="Right Pipette" className={formStyles.stacked_row}>
<DropdownField
tabIndex={4}
options={pipetteOptionsWithNone}
value={this.state.right.pipetteModel}
onChange={this.makeHandleMountChange('right', 'pipetteModel')} />
</FormGroup>
<FormGroup disabled={isEmpty(this.state.right.pipetteModel)} key={'rightTiprackModel'} label={`${startCase('right')} Tiprack*`}>
<FormGroup
disabled={isEmpty(this.state.right.pipetteModel)}
key={'rightTiprackModel'}
label={`${startCase('right')} Tiprack*`}
className={formStyles.stacked_row}>
<DropdownField
tabIndex={5}
disabled={isEmpty(this.state.right.pipetteModel)}
Expand Down
17 changes: 13 additions & 4 deletions protocol-designer/src/components/modals/NewFileModal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {pipetteOptions} from '../../../pipettes/pipetteData'
import PipetteDiagram from './PipetteDiagram'
import TiprackDiagram from './TiprackDiagram'
import styles from './NewFileModal.css'
import formStyles from '../../forms.css'
import modalStyles from '../modal.css'
import type {NewProtocolFields, PipetteFields} from '../../../load-file'

Expand Down Expand Up @@ -125,14 +126,18 @@ export default class NewFileModal extends React.Component<Props, State> {

<div className={styles.mount_fields_row}>
<div className={styles.mount_column}>
<FormGroup key="leftPipetteModel" label="Left Pipette">
<FormGroup key="leftPipetteModel" label="Left Pipette" className={formStyles.stacked_row}>
<DropdownField
tabIndex={2}
options={this.state.left.pipetteModel === USER_HAS_NOT_SELECTED ? pipetteOptionsWithInvalid : pipetteOptionsWithNone}
value={this.state.left.pipetteModel}
onChange={this.makeHandleMountChange('left', 'pipetteModel')} />
</FormGroup>
<FormGroup disabled={isEmpty(this.state.left.pipetteModel)} key={'leftTiprackModel'} label={`${startCase('left')} Tiprack*`}>
<FormGroup
disabled={isEmpty(this.state.left.pipetteModel)}
key={'leftTiprackModel'}
label={`${startCase('left')} Tiprack*`}
className={formStyles.stacked_row}>
<DropdownField
tabIndex={3}
disabled={isEmpty(this.state.left.pipetteModel)}
Expand All @@ -142,14 +147,18 @@ export default class NewFileModal extends React.Component<Props, State> {
</FormGroup>
</div>
<div className={styles.mount_column}>
<FormGroup key="rightPipetteModel" label="Right Pipette">
<FormGroup key="rightPipetteModel" label="Right Pipette" className={formStyles.stacked_row}>
<DropdownField
tabIndex={4}
options={this.state.right.pipetteModel === USER_HAS_NOT_SELECTED ? pipetteOptionsWithInvalid : pipetteOptionsWithNone}
value={this.state.right.pipetteModel}
onChange={this.makeHandleMountChange('right', 'pipetteModel')} />
</FormGroup>
<FormGroup disabled={isEmpty(this.state.right.pipetteModel)} key={'rightTiprackModel'} label={`${startCase('right')} Tiprack*`}>
<FormGroup
disabled={isEmpty(this.state.right.pipetteModel)}
key={'rightTiprackModel'}
label={`${startCase('right')} Tiprack*`}
className={formStyles.stacked_row}>
<DropdownField
tabIndex={5}
disabled={isEmpty(this.state.right.pipetteModel)}
Expand Down