From f04cad17a02835b728d9724fede0fafdadd54399 Mon Sep 17 00:00:00 2001 From: jimbo Date: Thu, 14 Jun 2018 16:45:24 -0700 Subject: [PATCH 1/2] Refactor the Page component and its children To accommodate drawers and other top-level elements, the page components needs to be refactored. Also, the introduction of the router broke the navigation, since it was being wired by the App component, which is now defunct. This commit uses a new global reducer, `app`, replacing the old `navigation` one. It will manage drawer and overlay state. The header and footer have been moved into the Main component. This will preempt some stacking context issues. A mask has been added to the app when a drawer is open. Further masking may be added in the future for a modal dialog component. --- .../src/components/Header/cartTrigger.css | 5 +++ .../src/components/Header/cartTrigger.js | 39 +++++++++++++++++++ .../src/components/Header/header.css | 3 +- .../src/components/Header/header.js | 20 +++------- .../src/components/Header/navTrigger.css | 5 +++ .../src/components/Header/navTrigger.js | 39 +++++++++++++++++++ .../src/components/Main/main.css | 9 +++++ .../venia-concept/src/components/Main/main.js | 19 +++++++-- .../src/components/Navigation/navigation.css | 14 ++++--- .../src/components/Navigation/navigation.js | 8 ++-- .../src/components/Navigation/trigger.js | 27 +++++++------ .../src/components/Page/mask.css | 26 +++++++++++++ .../venia-concept/src/components/Page/mask.js | 25 ++++++++++++ .../src/components/Page/page.css | 5 ++- .../venia-concept/src/components/Page/page.js | 37 +++++++++++------- packages/venia-concept/src/index.css | 6 ++- packages/venia-concept/src/index.js | 8 +++- .../venia-concept/src/store/reducers/app.js | 23 +++++++++++ .../src/store/reducers/navigation.js | 29 -------------- 19 files changed, 260 insertions(+), 87 deletions(-) create mode 100644 packages/venia-concept/src/components/Header/cartTrigger.css create mode 100644 packages/venia-concept/src/components/Header/cartTrigger.js create mode 100644 packages/venia-concept/src/components/Header/navTrigger.css create mode 100644 packages/venia-concept/src/components/Header/navTrigger.js create mode 100644 packages/venia-concept/src/components/Page/mask.css create mode 100644 packages/venia-concept/src/components/Page/mask.js create mode 100644 packages/venia-concept/src/store/reducers/app.js delete mode 100644 packages/venia-concept/src/store/reducers/navigation.js diff --git a/packages/venia-concept/src/components/Header/cartTrigger.css b/packages/venia-concept/src/components/Header/cartTrigger.css new file mode 100644 index 0000000000..18a8b965d1 --- /dev/null +++ b/packages/venia-concept/src/components/Header/cartTrigger.css @@ -0,0 +1,5 @@ +.root { + composes: root from "../button.css"; + height: 3rem; + width: 3rem; +} diff --git a/packages/venia-concept/src/components/Header/cartTrigger.js b/packages/venia-concept/src/components/Header/cartTrigger.js new file mode 100644 index 0000000000..17d4e6e25e --- /dev/null +++ b/packages/venia-concept/src/components/Header/cartTrigger.js @@ -0,0 +1,39 @@ +import { Component, createElement } from 'react'; +import { connect } from 'react-redux'; +import { compose } from 'redux'; +import PropTypes from 'prop-types'; + +import classify from 'src/classify'; +import defaultClasses from './cartTrigger.css'; + +class Trigger extends Component { + static propTypes = { + children: PropTypes.node, + classes: PropTypes.shape({ + root: PropTypes.string + }), + openCart: PropTypes.func + }; + + render() { + const { children, classes, openCart } = this.props; + + return ( + + ); + } +} + +const mapDispatchToProps = dispatch => ({ + openCart: () => dispatch({ type: 'TOGGLE_DRAWER', payload: 'cart' }) +}); + +export default compose( + classify(defaultClasses), + connect( + null, + mapDispatchToProps + ) +)(Trigger); diff --git a/packages/venia-concept/src/components/Header/header.css b/packages/venia-concept/src/components/Header/header.css index 8d038ad3f4..79127b869a 100644 --- a/packages/venia-concept/src/components/Header/header.css +++ b/packages/venia-concept/src/components/Header/header.css @@ -1,12 +1,11 @@ .root { background-color: rgb(var(--venia-grey)); - box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); + box-shadow: 0 1px rgba(0, 0, 0, 0.12); display: grid; grid-auto-columns: 100%; grid-auto-flow: row; grid-auto-rows: auto; grid-row-gap: 0.5rem; - position: relative; } .toolbar { diff --git a/packages/venia-concept/src/components/Header/header.js b/packages/venia-concept/src/components/Header/header.js index 2906697e70..b3456de96b 100644 --- a/packages/venia-concept/src/components/Header/header.js +++ b/packages/venia-concept/src/components/Header/header.js @@ -1,19 +1,17 @@ import { Component, createElement } from 'react'; -import { Link } from 'react-router-dom'; import PropTypes from 'prop-types'; import classify from 'src/classify'; -import { Trigger as NavTrigger } from 'src/components/Navigation'; import Icon from 'src/components/Icon'; +import CartTrigger from './cartTrigger'; +import NavTrigger from './navTrigger'; import defaultClasses from './header.css'; import logo from './logo.svg'; class Header extends Component { static propTypes = { classes: PropTypes.shape({ - cartTrigger: PropTypes.string, logo: PropTypes.string, - navTrigger: PropTypes.string, primaryActions: PropTypes.string, root: PropTypes.string, searchBlock: PropTypes.string, @@ -24,14 +22,6 @@ class Header extends Component { }) }; - get triggerClasses() { - const { classes } = this.props; - - return { - root: classes.navTrigger - }; - } - render() { const { classes } = this.props; @@ -46,7 +36,7 @@ class Header extends Component { title="Venia" />
- +
@@ -54,9 +44,9 @@ class Header extends Component { - + - +
diff --git a/packages/venia-concept/src/components/Header/navTrigger.css b/packages/venia-concept/src/components/Header/navTrigger.css new file mode 100644 index 0000000000..18a8b965d1 --- /dev/null +++ b/packages/venia-concept/src/components/Header/navTrigger.css @@ -0,0 +1,5 @@ +.root { + composes: root from "../button.css"; + height: 3rem; + width: 3rem; +} diff --git a/packages/venia-concept/src/components/Header/navTrigger.js b/packages/venia-concept/src/components/Header/navTrigger.js new file mode 100644 index 0000000000..f8099ba80b --- /dev/null +++ b/packages/venia-concept/src/components/Header/navTrigger.js @@ -0,0 +1,39 @@ +import { Component, createElement } from 'react'; +import { connect } from 'react-redux'; +import { compose } from 'redux'; +import PropTypes from 'prop-types'; + +import classify from 'src/classify'; +import defaultClasses from './navTrigger.css'; + +class Trigger extends Component { + static propTypes = { + children: PropTypes.node, + classes: PropTypes.shape({ + root: PropTypes.string + }), + openNav: PropTypes.func + }; + + render() { + const { children, classes, openNav } = this.props; + + return ( + + ); + } +} + +const mapDispatchToProps = dispatch => ({ + openNav: () => dispatch({ type: 'TOGGLE_DRAWER', payload: 'nav' }) +}); + +export default compose( + classify(defaultClasses), + connect( + null, + mapDispatchToProps + ) +)(Trigger); diff --git a/packages/venia-concept/src/components/Main/main.css b/packages/venia-concept/src/components/Main/main.css index c3bd9cb357..63cb2dbe76 100644 --- a/packages/venia-concept/src/components/Main/main.css +++ b/packages/venia-concept/src/components/Main/main.css @@ -1,4 +1,13 @@ .root { background-color: white; color: rgb(var(--venia-text)); + position: relative; + z-index: 1; +} + +/* state: masked */ + +.root_masked { + composes: root; + filter: grayscale(1); } diff --git a/packages/venia-concept/src/components/Main/main.js b/packages/venia-concept/src/components/Main/main.js index 3cf39d3ccc..75d2e7664d 100644 --- a/packages/venia-concept/src/components/Main/main.js +++ b/packages/venia-concept/src/components/Main/main.js @@ -2,19 +2,30 @@ import { Component, createElement } from 'react'; import PropTypes from 'prop-types'; import classify from 'src/classify'; +import Footer from 'src/components/Footer'; +import Header from 'src/components/Header'; import defaultClasses from './main.css'; class Main extends Component { static propTypes = { classes: PropTypes.shape({ - root: PropTypes.string - }) + root: PropTypes.string, + root_masked: PropTypes.string + }), + isMasked: PropTypes.bool }; render() { - const { children, classes } = this.props; + const { children, classes, isMasked } = this.props; + const className = isMasked ? classes.root_masked : classes.root; - return
{children}
; + return ( +
+
+ {children} +
+
+ ); } } diff --git a/packages/venia-concept/src/components/Navigation/navigation.css b/packages/venia-concept/src/components/Navigation/navigation.css index feb5a693c1..398d98683b 100644 --- a/packages/venia-concept/src/components/Navigation/navigation.css +++ b/packages/venia-concept/src/components/Navigation/navigation.css @@ -4,17 +4,18 @@ display: grid; grid-template-rows: auto 1fr auto; left: 0; - position: absolute; - right: 0; + position: fixed; top: 0; transition-property: opacity, transform, visibility; + width: 360px; + z-index: 3; } .header { align-content: center; align-items: center; background-color: rgb(var(--venia-grey)); - box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); + box-shadow: 0 1px rgb(var(--venia-border)); display: grid; grid-auto-columns: auto; grid-auto-flow: column; @@ -29,10 +30,11 @@ .title { align-items: center; display: inline-flex; - font-size: 1.25rem; + font-size: 1rem; font-weight: 400; margin: 0 auto 0 0; padding: 0 1rem; + text-transform: uppercase; } .navTrigger { @@ -77,7 +79,7 @@ .closed { composes: root; opacity: 0; - transform: translate3d(-100vw, 0, 0); + transform: translate3d(-100%, 0, 0); transition-duration: 192ms; transition-timing-function: cubic-bezier(0.4, 0, 1, 1); visibility: hidden; @@ -85,7 +87,7 @@ .open { composes: root; - box-shadow: 0px -1px rgb(var(--venia-border)); + box-shadow: 1px 0 rgb(var(--venia-border)); opacity: 1; transform: translate3d(0, 0, 0); transition-duration: 224ms; diff --git a/packages/venia-concept/src/components/Navigation/navigation.js b/packages/venia-concept/src/components/Navigation/navigation.js index 776a3fda0b..a759c3f638 100644 --- a/packages/venia-concept/src/components/Navigation/navigation.js +++ b/packages/venia-concept/src/components/Navigation/navigation.js @@ -28,12 +28,12 @@ class Navigation extends Component { classes: PropTypes.shape({ root: PropTypes.string }), - nav: PropTypes.bool + isOpen: PropTypes.bool }; render() { - const { classes, nav } = this.props; - const className = nav ? classes.open : classes.closed; + const { classes, isOpen } = this.props; + const className = isOpen ? classes.open : classes.closed; return (
diff --git a/packages/venia-concept/src/components/Navigation/trigger.js b/packages/venia-concept/src/components/Navigation/trigger.js index e4f57e77b2..ab6068995e 100644 --- a/packages/venia-concept/src/components/Navigation/trigger.js +++ b/packages/venia-concept/src/components/Navigation/trigger.js @@ -1,34 +1,39 @@ import { Component, createElement } from 'react'; -import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { compose } from 'redux'; +import PropTypes from 'prop-types'; import classify from 'src/classify'; import defaultClasses from './trigger.css'; -class Trigger extends Component { +class NavTrigger extends Component { static propTypes = { + children: PropTypes.node, classes: PropTypes.shape({ root: PropTypes.string - }) + }), + closeNav: PropTypes.func }; render() { - const { children, classes } = this.props; + const { children, classes, closeNav } = this.props; return ( - ); } - - handleClick = () => { - this.props.dispatch({ type: 'TOGGLE_NAVIGATION' }); - }; } +const mapDispatchToProps = dispatch => ({ + closeNav: () => dispatch({ type: 'TOGGLE_DRAWER', payload: null }) +}); + export default compose( classify(defaultClasses), - connect() -)(Trigger); + connect( + null, + mapDispatchToProps + ) +)(NavTrigger); diff --git a/packages/venia-concept/src/components/Page/mask.css b/packages/venia-concept/src/components/Page/mask.css new file mode 100644 index 0000000000..90eccc3636 --- /dev/null +++ b/packages/venia-concept/src/components/Page/mask.css @@ -0,0 +1,26 @@ +.root { + background-image: repeating-linear-gradient(-45deg, #080808, #080808 20px, black 20px, black 40px); + cursor: pointer; + display: block; + height: 100vh; + left: 0; + opacity: 0; + position: fixed; + top: 0; + transition-duration: 192ms; + transition-property: opacity, visibility; + transition-timing-function: linear; + visibility: hidden; + width: 100vw; + z-index: 2; + -webkit-appearance: none; +} + +/* state: active */ + +.root_active { + composes: root; + opacity: 0.5; + transition-duration: 224ms; + visibility: visible; +} diff --git a/packages/venia-concept/src/components/Page/mask.js b/packages/venia-concept/src/components/Page/mask.js new file mode 100644 index 0000000000..6e75062190 --- /dev/null +++ b/packages/venia-concept/src/components/Page/mask.js @@ -0,0 +1,25 @@ +import { Component, createElement } from 'react'; +import PropTypes from 'prop-types'; + +import classify from 'src/classify'; +import defaultClasses from './mask.css'; + +class Mask extends Component { + static propTypes = { + classes: PropTypes.shape({ + root: PropTypes.string, + root_active: PropTypes.string + }), + dismiss: PropTypes.func, + isActive: PropTypes.bool + }; + + render() { + const { classes, dismiss, isActive } = this.props; + const className = isActive ? classes.root_active : classes.root; + + return ); diff --git a/packages/venia-concept/src/store/reducers/app.js b/packages/venia-concept/src/store/reducers/app.js index 957927837f..b516e703e3 100644 --- a/packages/venia-concept/src/store/reducers/app.js +++ b/packages/venia-concept/src/store/reducers/app.js @@ -18,6 +18,6 @@ const reducer = (state = initialState, { payload, type }) => { } }; -const selectAppState = ({ app }) => ({ app: app || initialState }); +const selectAppState = ({ app }) => ({ app }); export { reducer as default, selectAppState };