diff options
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | ui/app/app.js | 109 | ||||
| -rw-r--r-- | ui/app/css/transitions.css | 5 |
3 files changed, 75 insertions, 41 deletions
diff --git a/package.json b/package.json index c1b228272..98d0708a4 100644 --- a/package.json +++ b/package.json @@ -108,6 +108,7 @@ "pumpify": "^1.3.4", "qrcode-npm": "0.0.3", "react": "^15.0.2", + "react-addons-css-transition-group": "^15.6.0", "react-burger-menu": "^2.1.4", "react-dom": "^15.5.4", "react-hyperscript": "^2.2.2", @@ -116,6 +117,7 @@ "react-select": "^1.0.0-rc.2", "react-simple-file-input": "^1.0.0", "react-tooltip-component": "^0.3.0", + "react-transition-group": "^2.2.0", "readable-stream": "^2.1.2", "redux": "^3.0.5", "redux-logger": "^2.10.2", diff --git a/ui/app/app.js b/ui/app/app.js index 3279e0333..9bda4966d 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -35,6 +35,7 @@ const QrView = require('./components/qr-code') const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') +const ReactCSSTransitionGroup = require('react-addons-css-transition-group') module.exports = connect(mapStateToProps)(App) @@ -119,49 +120,75 @@ App.prototype.render = function () { } App.prototype.renderSidebar = function() { - if (!this.props.sidebarOpen) { - return null; - } + // if (!this.props.sidebarOpen) { + // return null; + // } - return h('div.phone-visible', {}, [ - // content - h(WalletView, { - responsiveDisplayClassname: '.phone-visible', - style: { - zIndex: 26, - position: 'fixed', - top: '6%', - left: '0px', - right: '0px', - bottom: '0px', - opacity: '1', - visibility: 'visible', - transition: 'transform 0.3s ease-out', - willChange: 'transform', - transform: 'translateX(0%)', - overflowY: 'auto', - boxShadow: 'rgba(0, 0, 0, 0.15) 2px 2px 4px', - width: '85%', - height: '100%', - }, - }), - - // overlay - // TODO: add onClick for overlay to close sidebar - h('div', { - style: { - zIndex: 25, - position: 'fixed', - top: '6%', - left: '0px', - right: '0px', - bottom: '0px', - opacity: '1', - visibility: 'visible', - transition: 'opacity 0.3s ease-out, visibility 0.3s ease-out', - backgroundColor: 'rgba(0, 0, 0, 0.3)', + return h('div', { + }, [ + h('style', ` + .sidebar-enter { + transition: transform 500ms ease-in-out; + transform: translateX(-100%); + } + .sidebar-enter.sidebar-enter-active { + transition: transform 500ms ease-in-out; + transform: translateX(0%); + } + .sidebar-leave { + transition: transform 500ms ease-in-out; + transform: translateX(0%); } - }, []) + .sidebar-leave.sidebar-leave-active { + transition: transform 500ms ease-in-out; + transform: translateX(-100%); + } + `), + + h(ReactCSSTransitionGroup, { + transitionName: 'sidebar', + transitionEnterTimeout: 500, + transitionLeaveTimeout: 500, + }, [ + // content + this.props.sidebarOpen ? h(WalletView, { + responsiveDisplayClassname: '.sidebar', + style: { + zIndex: 26, + position: 'fixed', + top: '6%', + left: '0px', + right: '0px', + bottom: '0px', + opacity: '1', + visibility: 'visible', + // transition: 'transform 1s ease-in', + willChange: 'transform', + // transform: 'translateX(300px)', + overflowY: 'auto', + boxShadow: 'rgba(0, 0, 0, 0.15) 2px 2px 4px', + width: '85%', + height: '100%', + }, + }) : undefined, + + // overlay + // TODO: add onClick for overlay to close sidebar + this.props.sidebarOpen ? h('div', { + style: { + zIndex: 25, + position: 'fixed', + top: '6%', + left: '0px', + right: '0px', + bottom: '0px', + opacity: '1', + visibility: 'visible', + // transition: 'opacity 0.3s ease-out, visibility 0.3s ease-out', + backgroundColor: 'rgba(0, 0, 0, 0.3)', + } + }, []) : undefined, + ]) ]) } diff --git a/ui/app/css/transitions.css b/ui/app/css/transitions.css index 393a944f9..5f9f31ed7 100644 --- a/ui/app/css/transitions.css +++ b/ui/app/css/transitions.css @@ -22,6 +22,11 @@ transition: transform 300ms ease-in; } +.sidebar.from-left { + transform: translateX(-320px); + transition: transform 300ms ease-in; +} + /* loader transitions */ .loader-enter, .loader-leave-active { opacity: 0.0; |