From 9f82f57f7ad56bb787d4502ac639423e0bd2740f Mon Sep 17 00:00:00 2001 From: Mike Cousins Date: Mon, 18 Jun 2018 14:08:42 -0400 Subject: [PATCH] Revert "refactor(app): Standardize modals and pages (#1705)" This reverts commit 9070b213272b9c4fd9743532c0a95d603cf996db. --- app/src/components/App.js | 21 +++-- .../components/LabwareCalibration/index.js | 51 +++++++++++-- .../components/LabwareCalibration/styles.css | 20 ++++- app/src/components/Page.css | 5 ++ app/src/components/Page.js | 16 ++++ app/src/components/Page/PageWrapper.js | 20 ----- app/src/components/Page/index.js | 25 ------ app/src/components/Page/styles.css | 17 ----- app/src/components/RobotSettings/index.js | 6 +- app/src/components/SessionHeader/index.js | 7 +- app/src/pages/AppSettings.js | 76 +++++++++++++++++++ app/src/pages/Calibrate/Instruments.js | 9 +-- app/src/pages/Calibrate/Labware.js | 67 ++++------------ app/src/pages/More/AppSettings.js | 12 +-- app/src/pages/More/Resources.js | 4 +- app/src/pages/Robots.js | 26 ++----- app/src/pages/Run.js | 13 ++-- .../__snapshots__/modals.test.js.snap | 2 +- components/src/modals/ModalPage.js | 2 +- components/src/modals/modals.css | 18 +---- components/src/styles/positioning.css | 6 -- 21 files changed, 221 insertions(+), 202 deletions(-) create mode 100644 app/src/components/Page.css create mode 100644 app/src/components/Page.js delete mode 100644 app/src/components/Page/PageWrapper.js delete mode 100644 app/src/components/Page/index.js delete mode 100644 app/src/components/Page/styles.css create mode 100644 app/src/pages/AppSettings.js diff --git a/app/src/components/App.js b/app/src/components/App.js index 4212229bf1d..f48702b8162 100644 --- a/app/src/components/App.js +++ b/app/src/components/App.js @@ -3,7 +3,6 @@ import {Switch, Route, Redirect} from 'react-router' import NavBar from './nav-bar' -import {PageWrapper} from '../components/Page' import SidePanel from '../pages/SidePanel' import Robots from '../pages/Robots' import More from '../pages/More' @@ -19,17 +18,15 @@ export default function App () {
- - - - - - - - - - - + + + + + + + + +
) } diff --git a/app/src/components/LabwareCalibration/index.js b/app/src/components/LabwareCalibration/index.js index c095589b8a7..eabaf987aad 100644 --- a/app/src/components/LabwareCalibration/index.js +++ b/app/src/components/LabwareCalibration/index.js @@ -1,21 +1,60 @@ // @flow // info panel and controls for labware calibration page import * as React from 'react' -import {withRouter} from 'react-router' -import type {Labware} from '../../robot' +import {connect} from 'react-redux' +import {Redirect, Route, withRouter} from 'react-router' +import {push} from 'react-router-redux' + +import { + selectors as robotSelectors, + type Labware +} from '../../robot' + import DeckMap from '../DeckMap' import InfoBox from './InfoBox' +import ConfirmModal from './ConfirmModal' -type Props = { - labware: ?Labware -} -export default withRouter(LabwareCalibration) +type OwnProps = {slot: ?string, url: string} +type StateProps = {labware: ?Labware} +type DispatchProps = {onBackClick: () => void} +type Props = StateProps & DispatchProps & OwnProps + +export default withRouter( + connect(mapStateToProps, mapDispatchToProps)(LabwareCalibration) +) function LabwareCalibration (props: Props) { + const {url, labware, onBackClick} = props + return (
+ { + if (!labware || labware.calibration === 'confirmed') { + return ( + + ) + } + + return ( + + ) + }} />
) } + +function mapStateToProps (state, ownProps: OwnProps): StateProps { + // TODO(mc, 2018-02-05): getCurrentLabware selector + const labware = robotSelectors.getLabware(state) + const currentLabware = labware.find((lw) => lw.slot === ownProps.slot) + + return {labware: currentLabware} +} + +function mapDispatchToProps (dispatch, ownProps: OwnProps): DispatchProps { + return { + onBackClick: () => { dispatch(push(ownProps.url)) } + } +} diff --git a/app/src/components/LabwareCalibration/styles.css b/app/src/components/LabwareCalibration/styles.css index ac7d0ae1665..a17b4362e4f 100644 --- a/app/src/components/LabwareCalibration/styles.css +++ b/app/src/components/LabwareCalibration/styles.css @@ -1,5 +1,11 @@ @import '@opentrons/components'; +.modal { + @apply --modal; + + padding: 6rem 4rem; +} + .title_bar { position: absolute; top: 0; @@ -7,6 +13,16 @@ right: 0; } +.modal_contents { + z-index: 1; + width: 100%; + max-width: 38rem; + margin: auto; + background-color: white; + padding: 2rem; + border-radius: 0.5rem; +} + .in_progress_contents { background-color: transparent; @@ -18,11 +34,11 @@ .position_diagram, .jog_container { width: 100%; - margin: 0.5rem 0; + margin: 1rem 0; } .position_diagram { - padding: 0.5rem 2rem; + padding: 1rem 2rem; } .diagram_title { diff --git a/app/src/components/Page.css b/app/src/components/Page.css new file mode 100644 index 00000000000..ed34046fec8 --- /dev/null +++ b/app/src/components/Page.css @@ -0,0 +1,5 @@ +.task { + flex: 1 1; + position: relative; + overflow-y: scroll; +} diff --git a/app/src/components/Page.js b/app/src/components/Page.js new file mode 100644 index 00000000000..2f46f7a55ee --- /dev/null +++ b/app/src/components/Page.js @@ -0,0 +1,16 @@ +// task component +import React from 'react' + +import styles from './Page.css' +import LostConnectionAlert from './LostConnectionAlert' +import {AnalyticsSettingsModal} from './analytics-settings' + +export default function Page (props) { + return ( +
+ {props.children} + + +
+ ) +} diff --git a/app/src/components/Page/PageWrapper.js b/app/src/components/Page/PageWrapper.js deleted file mode 100644 index 0fa87dca322..00000000000 --- a/app/src/components/Page/PageWrapper.js +++ /dev/null @@ -1,20 +0,0 @@ -// @flow -import * as React from 'react' - -import LostConnectionAlert from '../LostConnectionAlert' -import {AnalyticsSettingsModal} from '../analytics-settings' - -import styles from './styles.css' - -type Props = { - children: React.Node -} -export default function PageWrapper (props: Props) { - return ( -
- {props.children} - - -
- ) -} diff --git a/app/src/components/Page/index.js b/app/src/components/Page/index.js deleted file mode 100644 index 399370801d1..00000000000 --- a/app/src/components/Page/index.js +++ /dev/null @@ -1,25 +0,0 @@ -// @flow -import * as React from 'react' - -import styles from './styles.css' -import {TitleBar, type TitleBarProps} from '@opentrons/components' -import PageWrapper from './PageWrapper' - -type Props = { - titleBarProps?: TitleBarProps, - children: React.Node, -} - -export default function Page (props: Props) { - const {titleBarProps, children} = props - return ( -
- {titleBarProps && ( - - )} - {children} -
- ) -} - -export {PageWrapper} diff --git a/app/src/components/Page/styles.css b/app/src/components/Page/styles.css deleted file mode 100644 index e463536cdba..00000000000 --- a/app/src/components/Page/styles.css +++ /dev/null @@ -1,17 +0,0 @@ -:root { - --relative-fill: { - width: 100%; - height: 100%; - position: relative; - } -} - -.relative { - @apply --relative-fill; -} - -.task { - @apply --relative-fill; - - overflow-y: auto; -} diff --git a/app/src/components/RobotSettings/index.js b/app/src/components/RobotSettings/index.js index 93da24513bb..9472ba46f31 100644 --- a/app/src/components/RobotSettings/index.js +++ b/app/src/components/RobotSettings/index.js @@ -1,6 +1,7 @@ // @flow // robot status panel with connect button import * as React from 'react' +import {Route} from 'react-router' import type {Robot} from '../../robot' import StatusCard from './StatusCard' @@ -40,8 +41,11 @@ export default function RobotSettings (props: Props) { + ( + + )} /> ) } -export {ConnectAlertModal, UpdateModal} +export {ConnectAlertModal} diff --git a/app/src/components/SessionHeader/index.js b/app/src/components/SessionHeader/index.js index dd0360aa6ce..a94cf45ea6e 100644 --- a/app/src/components/SessionHeader/index.js +++ b/app/src/components/SessionHeader/index.js @@ -1,6 +1,7 @@ import React from 'react' import {connect} from 'react-redux' import {Link} from 'react-router-dom' +import {TitleBar} from '@opentrons/components' import { selectors as robotSelectors @@ -9,11 +10,15 @@ import { export default connect(mapStateToProps)(SessionHeader) function SessionHeader (props) { - return ( + const title = ( {props.sessionName} ) + + return ( + + ) } function mapStateToProps (state) { diff --git a/app/src/pages/AppSettings.js b/app/src/pages/AppSettings.js new file mode 100644 index 00000000000..fe9043c4b2a --- /dev/null +++ b/app/src/pages/AppSettings.js @@ -0,0 +1,76 @@ +// @flow +// view info about the app and update +import React from 'react' +import {connect} from 'react-redux' +import {Route, Switch, Redirect, type ContextRouter} from 'react-router' +import {push} from 'react-router-redux' + +import type {State} from '../types' +import type {ShellUpdate} from '../shell' +import { + getShellUpdate, + checkForShellUpdates, + downloadShellUpdate, + quitAndInstallShellUpdate, + setUpdateSeen +} from '../shell' + +import Page from '../components/Page' +import AppSettings, {AppUpdateModal} from '../components/AppSettings' + +type OP = ContextRouter + +type SP = { + update: ShellUpdate, +} + +type DP = { + checkForUpdates: () => mixed, + downloadUpdate: () => mixed, + quitAndInstall: () => mixed, + closeUpdateModal: () => mixed, +} + +type Props = OP & SP & DP + +export default connect(mapStateToProps, mapDispatchToProps)(AppSettingsPage) + +function AppSettingsPage (props: Props) { + const {update, match: {path}} = props + + return ( + + + + ( + + )} /> + { + if (update.available && !update.seen) { + return () + } + + return null + }} /> + + + ) +} + +function mapStateToProps (state: State): SP { + return { + update: getShellUpdate(state) + } +} + +function mapDispatchToProps (dispatch: Dispatch): DP { + return { + checkForUpdates: () => dispatch(checkForShellUpdates()), + downloadUpdate: () => dispatch(downloadShellUpdate()), + quitAndInstall: () => quitAndInstallShellUpdate(), + closeUpdateModal: () => { + dispatch(setUpdateSeen()) + dispatch(push('/menu/app')) + } + } +} diff --git a/app/src/pages/Calibrate/Instruments.js b/app/src/pages/Calibrate/Instruments.js index 0a36a29ab23..427149aca3e 100644 --- a/app/src/pages/Calibrate/Instruments.js +++ b/app/src/pages/Calibrate/Instruments.js @@ -37,18 +37,17 @@ function SetupInstrumentsPage (props: Props) { } return ( - )}} - > + + - {!!currentInstrument && ( + {currentInstrument && ( )} - {!!currentInstrument && ( + {currentInstrument && ( ( void} - -type Props = ContextRouter & StateProps & OwnProps & DispatchProps +type Props = ContextRouter & StateProps -export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SetupDeckPage)) +export default withRouter(connect(mapStateToProps)(SetupDeckPage)) function SetupDeckPage (props: Props) { - const {labware, deckPopulated, onBackClick, match: {url, params: {slot}}} = props + const {deckPopulated, match: {url, params: {slot}}} = props + return ( - - )}} - > - - + + + {!deckPopulated && ( )} - { - if (!labware || labware.calibration === 'confirmed') { - return ( - - ) - } - - return ( - - ) - }} /> - + ) } -function mapStateToProps (state, ownProps: OwnProps): StateProps { - const {match: {url, params: {slot}}} = ownProps - const labware = robotSelectors.getLabware(state) - const currentLabware = labware.find((lw) => lw.slot === slot) - - return { - deckPopulated: !!robotSelectors.getDeckPopulated(state), - labware: currentLabware, - slot, - url - } -} - -function mapDispatchToProps (dispatch, ownProps: OwnProps): DispatchProps { - const {match: {url}} = ownProps +function mapStateToProps (state): StateProps { return { - onBackClick: () => { dispatch(push(url)) } + deckPopulated: !!robotSelectors.getDeckPopulated(state) } } diff --git a/app/src/pages/More/AppSettings.js b/app/src/pages/More/AppSettings.js index dc402c3ec1d..1648d152c4c 100644 --- a/app/src/pages/More/AppSettings.js +++ b/app/src/pages/More/AppSettings.js @@ -1,6 +1,6 @@ // @flow // view info about the app and update -import * as React from 'react' +import React from 'react' import {connect} from 'react-redux' import {Route, Switch, Redirect, type ContextRouter} from 'react-router' import {push} from 'react-router-redux' @@ -39,12 +39,8 @@ function AppSettingsPage (props: Props) { const {update, match: {path}} = props return ( - - - - + + ( @@ -57,7 +53,7 @@ function AppSettingsPage (props: Props) { return null }} /> - + ) } diff --git a/app/src/pages/More/Resources.js b/app/src/pages/More/Resources.js index 70a3dda154a..5f069f54d09 100644 --- a/app/src/pages/More/Resources.js +++ b/app/src/pages/More/Resources.js @@ -3,9 +3,7 @@ import Page from '../../components/Page' import Resources from '../../components/Resources' export default function ResourcesPage () { return ( - + ) diff --git a/app/src/pages/Robots.js b/app/src/pages/Robots.js index 60910c0a32f..c58dbb8fdfc 100644 --- a/app/src/pages/Robots.js +++ b/app/src/pages/Robots.js @@ -1,6 +1,6 @@ // @flow // connect and configure robots page -import * as React from 'react' +import React from 'react' import {connect} from 'react-redux' import {withRouter, Route, Redirect, type ContextRouter} from 'react-router' @@ -9,12 +9,9 @@ import type {Robot} from '../robot' import {selectors as robotSelectors, actions as robotActions} from '../robot' import createLogger from '../logger' -import {Splash} from '@opentrons/components' +import {TitleBar, Splash} from '@opentrons/components' import Page from '../components/Page' -import RobotSettings, { - ConnectAlertModal, - UpdateModal -} from '../components/RobotSettings' +import RobotSettings, {ConnectAlertModal} from '../components/RobotSettings' import ChangePipette from '../components/ChangePipette' import CalibrateDeck from '../components/CalibrateDeck' import ConnectBanner from '../components/RobotSettings/ConnectBanner' @@ -60,17 +57,10 @@ function RobotSettingsPage (props: Props) { // TODO(mc, 2018-05-08): pass parentUrl to RobotSettings return ( - - - - - - - ( - - )} /> + + + + ( @@ -83,7 +73,7 @@ function RobotSettingsPage (props: Props) { {showConnectAlert && ( )} - + ) } diff --git a/app/src/pages/Run.js b/app/src/pages/Run.js index b8a868b60dc..c41899033e8 100644 --- a/app/src/pages/Run.js +++ b/app/src/pages/Run.js @@ -1,6 +1,6 @@ // @flow // run task component -import * as React from 'react' +import React from 'react' import {Route} from 'react-router' import Page from '../components/Page' import SessionHeader from '../components/SessionHeader' @@ -8,13 +8,10 @@ import RunLog, {ConfirmCancelModal} from '../components/RunLog' export default function RunPage () { return ( - - )}} - > - - + + + - + ) } diff --git a/components/src/__tests__/__snapshots__/modals.test.js.snap b/components/src/__tests__/__snapshots__/modals.test.js.snap index 4aaadab4710..b5d43ab27a0 100644 --- a/components/src/__tests__/__snapshots__/modals.test.js.snap +++ b/components/src/__tests__/__snapshots__/modals.test.js.snap @@ -145,7 +145,7 @@ exports[`modals Modal renders correctly with optional heading 1`] = ` exports[`modals ModalPage renders correctly 1`] = `
+
diff --git a/components/src/modals/modals.css b/components/src/modals/modals.css index f7648796453..20217e4cb7d 100644 --- a/components/src/modals/modals.css +++ b/components/src/modals/modals.css @@ -6,29 +6,18 @@ z-index: 1; width: 100%; max-width: 38rem; - margin: 0 auto; + margin: auto; padding: 1rem; border-radius: 0.5rem; } } .modal { - @apply --absolute-fill; - @apply --center-children; + @apply --modal; padding: 4rem; } -.modal_page { - @apply --absolute-fill; - - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; - padding: 5rem 2rem 1rem; -} - .overlay { @apply --absolute-fill; @@ -53,8 +42,7 @@ @apply --modal-contents; background-color: white; - max-height: 100%; - overflow-y: auto; + min-width: 38rem; } .modal_page_heading { diff --git a/components/src/styles/positioning.css b/components/src/styles/positioning.css index 39da9eb617e..0d18be3efc2 100644 --- a/components/src/styles/positioning.css +++ b/components/src/styles/positioning.css @@ -13,12 +13,6 @@ align-items: center; }; - --flex-start: { - display: flex; - justify-content: flex-start; - align-items: center; - } - --modal: { @apply --absolute-fill; @apply --center-children;