From 5eb3d5d485b17b98b19443d8def2f03dec9b38ef Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 3 Jul 2017 15:39:25 -0700 Subject: Make folder for responsive UI --- ui/app/components/loading.js | 53 -------------------------------------------- 1 file changed, 53 deletions(-) delete mode 100644 ui/app/components/loading.js (limited to 'ui/app/components/loading.js') diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js deleted file mode 100644 index 87d6f5d20..000000000 --- a/ui/app/components/loading.js +++ /dev/null @@ -1,53 +0,0 @@ -const inherits = require('util').inherits -const Component = require('react').Component -const h = require('react-hyperscript') -const ReactCSSTransitionGroup = require('react-addons-css-transition-group') - - -inherits(LoadingIndicator, Component) -module.exports = LoadingIndicator - -function LoadingIndicator () { - Component.call(this) -} - -LoadingIndicator.prototype.render = function () { - const { isLoading, loadingMessage } = this.props - - return ( - h(ReactCSSTransitionGroup, { - className: 'css-transition-group', - transitionName: 'loader', - transitionEnterTimeout: 150, - transitionLeaveTimeout: 150, - }, [ - - isLoading ? h('div', { - style: { - zIndex: 10, - position: 'absolute', - flexDirection: 'column', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - height: '100%', - width: '100%', - background: 'rgba(255, 255, 255, 0.8)', - }, - }, [ - h('img', { - src: 'images/loading.svg', - }), - - h('br'), - - showMessageIfAny(loadingMessage), - ]) : null, - ]) - ) -} - -function showMessageIfAny (loadingMessage) { - if (!loadingMessage) return null - return h('span', loadingMessage) -} -- cgit v1.2.3 From 86d367957fe8ac04462f716fe0ba2bfa4e5ff3f6 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 20 Jul 2017 12:38:38 -0700 Subject: Move responsive ui into its own folder for easier merges --- ui/app/components/loading.js | 53 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 ui/app/components/loading.js (limited to 'ui/app/components/loading.js') diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js new file mode 100644 index 000000000..87d6f5d20 --- /dev/null +++ b/ui/app/components/loading.js @@ -0,0 +1,53 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const h = require('react-hyperscript') +const ReactCSSTransitionGroup = require('react-addons-css-transition-group') + + +inherits(LoadingIndicator, Component) +module.exports = LoadingIndicator + +function LoadingIndicator () { + Component.call(this) +} + +LoadingIndicator.prototype.render = function () { + const { isLoading, loadingMessage } = this.props + + return ( + h(ReactCSSTransitionGroup, { + className: 'css-transition-group', + transitionName: 'loader', + transitionEnterTimeout: 150, + transitionLeaveTimeout: 150, + }, [ + + isLoading ? h('div', { + style: { + zIndex: 10, + position: 'absolute', + flexDirection: 'column', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + height: '100%', + width: '100%', + background: 'rgba(255, 255, 255, 0.8)', + }, + }, [ + h('img', { + src: 'images/loading.svg', + }), + + h('br'), + + showMessageIfAny(loadingMessage), + ]) : null, + ]) + ) +} + +function showMessageIfAny (loadingMessage) { + if (!loadingMessage) return null + return h('span', loadingMessage) +} -- cgit v1.2.3 From 0ea6749dbc923a6e796b1de4bbd301d931739b9d Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 25 Jul 2017 18:22:31 -0700 Subject: Lots of flex rearrangement on account detail view Includes removal of ReactCssTransitionGroup for a simpler UI refactor. --- ui/app/components/loading.js | 47 ++++++++++++++++++-------------------------- 1 file changed, 19 insertions(+), 28 deletions(-) (limited to 'ui/app/components/loading.js') diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js index 87d6f5d20..92d17ccd6 100644 --- a/ui/app/components/loading.js +++ b/ui/app/components/loading.js @@ -1,7 +1,6 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') -const ReactCSSTransitionGroup = require('react-addons-css-transition-group') inherits(LoadingIndicator, Component) @@ -15,35 +14,27 @@ LoadingIndicator.prototype.render = function () { const { isLoading, loadingMessage } = this.props return ( - h(ReactCSSTransitionGroup, { - className: 'css-transition-group', - transitionName: 'loader', - transitionEnterTimeout: 150, - transitionLeaveTimeout: 150, + isLoading ? h('div', { + style: { + zIndex: 10, + position: 'absolute', + flexDirection: 'column', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + height: '100%', + width: '100%', + background: 'rgba(255, 255, 255, 0.8)', + }, }, [ + h('img', { + src: 'images/loading.svg', + }), - isLoading ? h('div', { - style: { - zIndex: 10, - position: 'absolute', - flexDirection: 'column', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - height: '100%', - width: '100%', - background: 'rgba(255, 255, 255, 0.8)', - }, - }, [ - h('img', { - src: 'images/loading.svg', - }), - - h('br'), - - showMessageIfAny(loadingMessage), - ]) : null, - ]) + h('br'), + + showMessageIfAny(loadingMessage), + ]) : null ) } -- cgit v1.2.3 From 56496f1ea08c1f4f2786e3d1be11026adf0f5900 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 27 Jul 2017 14:13:53 -0700 Subject: Fix loading indication placement --- ui/app/components/loading.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/loading.js') diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js index 92d17ccd6..933321983 100644 --- a/ui/app/components/loading.js +++ b/ui/app/components/loading.js @@ -14,7 +14,7 @@ LoadingIndicator.prototype.render = function () { const { isLoading, loadingMessage } = this.props return ( - isLoading ? h('div', { + isLoading ? h('.full-flex-height', { style: { zIndex: 10, position: 'absolute', -- cgit v1.2.3 From 9a1cf2a0d424c54c760fd18644a2fad7c582959a Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 27 Jul 2017 14:15:56 -0700 Subject: Ensure loading indication is full screen --- ui/app/components/loading.js | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/components/loading.js') diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js index 933321983..163792584 100644 --- a/ui/app/components/loading.js +++ b/ui/app/components/loading.js @@ -16,6 +16,7 @@ LoadingIndicator.prototype.render = function () { return ( isLoading ? h('.full-flex-height', { style: { + left: '0px', zIndex: 10, position: 'absolute', flexDirection: 'column', -- cgit v1.2.3