From 34d04255de22bb35b4760ff7533e7a80eab71836 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Tue, 31 Jan 2017 01:58:25 -0500 Subject: [PATCH 1/2] Convert load screens to use CSS --- js/component/load_screen.js | 22 +++------------------- scss/_global.scss | 1 + scss/all.scss | 1 + scss/component/_load-screen.scss | 27 +++++++++++++++++++++++++++ 4 files changed, 32 insertions(+), 19 deletions(-) create mode 100644 scss/component/_load-screen.scss diff --git a/js/component/load_screen.js b/js/component/load_screen.js index 57d8e4f50..c06864d7e 100644 --- a/js/component/load_screen.js +++ b/js/component/load_screen.js @@ -2,22 +2,6 @@ import React from 'react'; import lbry from '../lbry.js'; import {BusyMessage, Icon} from './common.js'; -var loadScreenStyle = { - color: 'white', - backgroundImage: 'url(' + lbry.imagePath('lbry-bg.png') + ')', - backgroundSize: 'cover', - minHeight: '100vh', - minWidth: '100vw', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center' -}, loadScreenMessageStyle = { - marginTop: '24px', - width: '325px', - textAlign: 'center', -}; - var LoadScreen = React.createClass({ propTypes: { message: React.PropTypes.string.isRequired, @@ -39,13 +23,13 @@ var LoadScreen = React.createClass({ render: function() { var imgSrc = lbry.imagePath('lbry-white-485x160.png'); return ( -
+
LBRY -
+

- {this.props.details} + {this.props.isWarning ? : null} {this.props.details}
); diff --git a/scss/_global.scss b/scss/_global.scss index 5997470d7..9977c7e98 100644 --- a/scss/_global.scss +++ b/scss/_global.scss @@ -10,6 +10,7 @@ $color-light-alt: hsl(hue($color-primary), 15, 85); $color-text-dark: #000; $color-help: rgba(0,0,0,.6); $color-notice: #921010; +$color-warning: #c3c3c3; $color-canvas: #f5f5f5; $color-bg: #ffffff; $color-bg-alt: #D9D9D9; diff --git a/scss/all.scss b/scss/all.scss index 5193fe5e1..452cbbcac 100644 --- a/scss/all.scss +++ b/scss/all.scss @@ -9,4 +9,5 @@ @import "component/_file-tile.scss"; @import "component/_menu.scss"; @import "component/_tooltip.scss"; +@import "component/_load-screen.scss"; @import "page/_developer.scss"; \ No newline at end of file diff --git a/scss/component/_load-screen.scss b/scss/component/_load-screen.scss new file mode 100644 index 000000000..feb0b5427 --- /dev/null +++ b/scss/component/_load-screen.scss @@ -0,0 +1,27 @@ +@import "../global"; + +.load-screen { + color: white; + background-image: url("/img/lbry-bg.png"); + background-size: cover; + min-height: 100vh; + min-width: 100vw; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.load-screen__message { + margin-top: 24px; + width: 325px; + text-align: center; +} + +.load-screen__details--warning { + color: $color-warning; +} + +.load-screen__cancel-link { + color: white; +} From 810b94fa77b65f0d5dc49fa354c60c2b96146b4f Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Tue, 31 Jan 2017 02:02:15 -0500 Subject: [PATCH 2/2] Add Cancel link when loading screen is lagging --- js/component/load_screen.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/js/component/load_screen.js b/js/component/load_screen.js index c06864d7e..9bfe1e046 100644 --- a/js/component/load_screen.js +++ b/js/component/load_screen.js @@ -1,6 +1,7 @@ import React from 'react'; import lbry from '../lbry.js'; import {BusyMessage, Icon} from './common.js'; +import {Link} from '../component/link.js' var LoadScreen = React.createClass({ propTypes: { @@ -8,6 +9,9 @@ var LoadScreen = React.createClass({ details: React.PropTypes.string, isWarning: React.PropTypes.bool, }, + handleCancelClick: function() { + history.back(); + }, getDefaultProps: function() { return { isWarning: false, @@ -21,7 +25,7 @@ var LoadScreen = React.createClass({ } }, render: function() { - var imgSrc = lbry.imagePath('lbry-white-485x160.png'); + const imgSrc = lbry.imagePath('lbry-white-485x160.png'); return (
LBRY @@ -29,7 +33,10 @@ var LoadScreen = React.createClass({

- {this.props.isWarning ? : null} {this.props.details} + {!this.props.isWarning ? : null} {this.props.details} + {!this.props.isWarning + ?
+ : null}
);