diff --git a/app/src/components/App.js b/app/src/components/App.js index 8e162c349f1..f48702b8162 100644 --- a/app/src/components/App.js +++ b/app/src/components/App.js @@ -5,7 +5,7 @@ import NavBar from './nav-bar' import SidePanel from '../pages/SidePanel' import Robots from '../pages/Robots' -import AppSettingsPage from '../pages/AppSettings' +import More from '../pages/More' import Upload from '../pages/Upload' import Calibrate from '../pages/Calibrate' import Run from '../pages/Run' @@ -22,7 +22,7 @@ export default function App () { - + diff --git a/app/src/components/MenuPanel/index.js b/app/src/components/MenuPanel/index.js index 0e5d7049bcf..f98e8ed24d2 100644 --- a/app/src/components/MenuPanel/index.js +++ b/app/src/components/MenuPanel/index.js @@ -9,11 +9,15 @@ export default function MenuPanel () { return (
-
    +
      App + + Resources + +
diff --git a/app/src/components/MenuPanel/styles.css b/app/src/components/MenuPanel/styles.css index b6fe3875016..7bfe61658f0 100644 --- a/app/src/components/MenuPanel/styles.css +++ b/app/src/components/MenuPanel/styles.css @@ -8,13 +8,14 @@ .menu_list { list-style: none; - margin-left: 0; + margin: 1rem 0 0; } .menu_item { - margin-bottom: 0.5rem; text-transform: uppercase; font-size: var(--fs-body-2); + margin-bottom: 0.25rem; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); & > span { width: 100%; diff --git a/app/src/components/Resources/ResourceCard.js b/app/src/components/Resources/ResourceCard.js new file mode 100644 index 00000000000..9f0fb45caaf --- /dev/null +++ b/app/src/components/Resources/ResourceCard.js @@ -0,0 +1,27 @@ +// @flow +// resources page layout +import * as React from 'react' +import {Card, OutlineButton} from '@opentrons/components' + +type Props = { + title: React.Node, + description: React.Node, + url: string, +} + +export default function ResourceCard (props: Props) { + return ( + +

{props.description}

+ + View in Browser + +
+ ) +} diff --git a/app/src/components/Resources/index.js b/app/src/components/Resources/index.js new file mode 100644 index 00000000000..5b3e56e51ee --- /dev/null +++ b/app/src/components/Resources/index.js @@ -0,0 +1,28 @@ +// @flow +// resources page layout +import * as React from 'react' + +import ResourceCard from './ResourceCard' + +import styles from './styles.css' + +export default function Resources () { + return ( +
+
+ +
+
+ +
+
+ ) +} diff --git a/app/src/components/Resources/styles.css b/app/src/components/Resources/styles.css new file mode 100644 index 00000000000..e96c75e90cc --- /dev/null +++ b/app/src/components/Resources/styles.css @@ -0,0 +1,16 @@ +/* stylesheet for Resources page components */ +@import '@opentrons/components'; + +:root { + --resources_card_spacing: 0.75rem; +} + +.resources_page { + padding: 1.5rem; + font-size: var(--fs-body-1); +} + +.row { + width: 100%; + margin-bottom: var(--resources_card_spacing); +} diff --git a/app/src/components/nav-bar/NavButton.js b/app/src/components/nav-bar/NavButton.js index 0dffaa6c335..3a1c55adfee 100644 --- a/app/src/components/nav-bar/NavButton.js +++ b/app/src/components/nav-bar/NavButton.js @@ -67,7 +67,7 @@ function mapStateToProps (state: State, ownProps: OwnProps): StateProps { iconName: 'dots-horizontal', isBottom: true, title: 'more', - url: '/menu/app', + url: '/menu', notification: moreNotification } } diff --git a/app/src/pages/More/AppSettings.js b/app/src/pages/More/AppSettings.js new file mode 100644 index 00000000000..1648d152c4c --- /dev/null +++ b/app/src/pages/More/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/More/Resources.js b/app/src/pages/More/Resources.js new file mode 100644 index 00000000000..5f069f54d09 --- /dev/null +++ b/app/src/pages/More/Resources.js @@ -0,0 +1,10 @@ +import React from 'react' +import Page from '../../components/Page' +import Resources from '../../components/Resources' +export default function ResourcesPage () { + return ( + + + + ) +} diff --git a/app/src/pages/More/index.js b/app/src/pages/More/index.js new file mode 100644 index 00000000000..c178ec8301b --- /dev/null +++ b/app/src/pages/More/index.js @@ -0,0 +1,30 @@ +// @flow +// more nav button routes +import * as React from 'react' +import {Switch, Route, Redirect, type Match} from 'react-router' + +import AppSettings from './AppSettings' +import Resources from './Resources' + +type Props = { + match: Match +} + +export default function More (props: Props) { + const {match: {path}} = props + const appPath = `${path}/app` + + return ( + + + + + + ) +}