From ffda954add95fc17049cd0f5386952dabfc4168b Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 30 Apr 2018 18:28:34 -0700 Subject: Fix styling of the app spinner --- .../loading-screen/loading-screen.component.js | 35 ++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 ui/app/components/loading-screen/loading-screen.component.js (limited to 'ui/app/components/loading-screen/loading-screen.component.js') diff --git a/ui/app/components/loading-screen/loading-screen.component.js b/ui/app/components/loading-screen/loading-screen.component.js new file mode 100644 index 000000000..bce2a4aac --- /dev/null +++ b/ui/app/components/loading-screen/loading-screen.component.js @@ -0,0 +1,35 @@ +const { Component } = require('react') +const h = require('react-hyperscript') +const PropTypes = require('prop-types') +const classnames = require('classnames') +const Spinner = require('../spinner') + +class LoadingScreen extends Component { + renderMessage () { + const { loadingMessage } = this.props + return loadingMessage && h('span', loadingMessage) + } + + render () { + return ( + h('.loading-overlay', { + className: classnames({ 'loading-overlay--full-screen': this.props.fullScreen }), + }, [ + h('.loading-overlay__container', [ + h(Spinner, { + color: '#F7C06C', + }), + + this.renderMessage(), + ]), + ]) + ) + } +} + +LoadingScreen.propTypes = { + loadingMessage: PropTypes.string, + fullScreen: PropTypes.bool, +} + +module.exports = LoadingScreen -- cgit v1.2.3 From 389346913bf076fde6190a61afc4e3e4cd210afc Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 30 May 2018 10:38:53 -0700 Subject: Prevent loading screen from overlaying the app bar (#4417) --- ui/app/components/loading-screen/loading-screen.component.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'ui/app/components/loading-screen/loading-screen.component.js') diff --git a/ui/app/components/loading-screen/loading-screen.component.js b/ui/app/components/loading-screen/loading-screen.component.js index bce2a4aac..6b843cfee 100644 --- a/ui/app/components/loading-screen/loading-screen.component.js +++ b/ui/app/components/loading-screen/loading-screen.component.js @@ -1,7 +1,6 @@ const { Component } = require('react') const h = require('react-hyperscript') const PropTypes = require('prop-types') -const classnames = require('classnames') const Spinner = require('../spinner') class LoadingScreen extends Component { @@ -12,9 +11,7 @@ class LoadingScreen extends Component { render () { return ( - h('.loading-overlay', { - className: classnames({ 'loading-overlay--full-screen': this.props.fullScreen }), - }, [ + h('.loading-overlay', [ h('.loading-overlay__container', [ h(Spinner, { color: '#F7C06C', @@ -29,7 +26,6 @@ class LoadingScreen extends Component { LoadingScreen.propTypes = { loadingMessage: PropTypes.string, - fullScreen: PropTypes.bool, } module.exports = LoadingScreen -- cgit v1.2.3