aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--package.json2
-rw-r--r--ui/app/app.js109
-rw-r--r--ui/app/css/transitions.css5
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;