From 9d60470f5f0b57d3893e29bd78623a1d6b6c2f00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?= =?UTF-8?q?=E3=83=96?= Date: Fri, 17 May 2019 10:17:44 -0500 Subject: [PATCH 1/6] NEW splash --- src/ui/component/doodle/index.js | 7 +++ .../component/splash/internal/load-screen.jsx | 7 ++- src/ui/scss/component/_load-screen.scss | 63 ++++++++++++++----- 3 files changed, 59 insertions(+), 18 deletions(-) create mode 100644 src/ui/component/doodle/index.js diff --git a/src/ui/component/doodle/index.js b/src/ui/component/doodle/index.js new file mode 100644 index 000000000..0c5d79afd --- /dev/null +++ b/src/ui/component/doodle/index.js @@ -0,0 +1,7 @@ +import React from 'react'; +import 'css-doodle'; + +export default ([rule = '']) => () => ( + // eslint-disable-line + {rule} +); diff --git a/src/ui/component/splash/internal/load-screen.jsx b/src/ui/component/splash/internal/load-screen.jsx index 1111a2a3d..6320586c1 100644 --- a/src/ui/component/splash/internal/load-screen.jsx +++ b/src/ui/component/splash/internal/load-screen.jsx @@ -4,6 +4,7 @@ import React, { Fragment } from 'react'; import Icon from 'component/common/icon'; import Spinner from 'component/spinner'; import Button from 'component/button'; +import Doodle from 'component/doodle'; type Props = { message: string, @@ -12,6 +13,8 @@ type Props = { error: boolean, }; +const FancyDoodle = Doodle``; // this looks dumb but it prevents repetition from `_load-screen.scss` + class LoadScreen extends React.PureComponent { static defaultProps = { isWarning: false, @@ -22,7 +25,7 @@ class LoadScreen extends React.PureComponent { return (
-
+

{__('LBRY')} @@ -70,6 +73,8 @@ class LoadScreen extends React.PureComponent { )}

+ +
); } diff --git a/src/ui/scss/component/_load-screen.scss b/src/ui/scss/component/_load-screen.scss index 5d5bd6a88..301063874 100644 --- a/src/ui/scss/component/_load-screen.scss +++ b/src/ui/scss/component/_load-screen.scss @@ -1,26 +1,48 @@ .load-screen { - min-width: 100vw; - min-height: 100vh; + width: 100vw; + height: 100vh; align-items: center; - background-image: linear-gradient(to right, $lbry-teal-5, $lbry-cyan-5 100%); - background-size: cover; - color: $lbry-white; - cursor: default; + background-color: #270f34; display: flex; justify-content: center; - text-align: center; + overflow: hidden; - .spinner { - margin-right: auto; - margin-left: auto; + css-doodle { + width: 100%; + height: 100%; + + overflow: hidden; + position: absolute; + + --color: @p (var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5)); + + --rule: ( + : doodle {@grid: 30x1 / 18vmin; --deg: @p (-180deg, 180deg) ;}: container {perspective: 30vmin;}: before, + : after {@place-cell: @r (100%) @r (100%) ; @shape: star; @size: @r (6px) ; background-color: var(--color) ; + content: '' ;} @place-cell: center; @size: 100%; animation: scale-up 12s linear infinite; animation-delay: calc( + -12s / @size () * @i () + ) ; background-image: @m100 ( + radial-gradient(var(--color) 50%, transparent 0) @r (-20%, 120%) @r (-20%, 100%) / 1px 1px no-repeat + ) ; box-shadow: @m2 (0 0 50px var(--color)) ; will-change: transform, + opacity; @keyframes scale-up {0%, + 95.01%, + 100% {opacity: 0; transform: translateZ(0) rotate(0) ;} 10% {opacity: 1;} 95% {transform: translateZ(35vmin) rotateZ( + @var (--deg) + ) ;}} + ); } } +.load-screen__actions { + font-size: 1.2em; + margin-top: var(--spacing-vertical-medium); +} + .load-screen__button { - transition: none; - color: $lbry-white; border-bottom: 1px solid $lbry-white; + color: $lbry-white; + transition: none; &:hover { border-bottom: 1px solid $lbry-blue-1; @@ -52,6 +74,18 @@ margin-bottom: var(--spacing-vertical-medium); } +.load-screen__overlay { + @include center; + width: 100vw; + height: 100vh; + + color: $lbry-white; + flex-direction: column; + position: relative; + text-align: center; + z-index: 1; +} + .load-screen__title { font-size: 60px; font-weight: 700; @@ -79,8 +113,3 @@ font-size: 14px; padding-top: $spacing-vertical; } - -.load-screen__actions { - font-size: 1.2em; - margin-top: var(--spacing-vertical-medium); -} -- 2.43.4 From 17be6711af706cb7dbfbbd05a5c7566edb0a395d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?= =?UTF-8?q?=E3=83=96?= Date: Fri, 17 May 2019 10:32:13 -0500 Subject: [PATCH 2/6] Updated eslint ignore line --- src/ui/component/doodle/index.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/ui/component/doodle/index.js b/src/ui/component/doodle/index.js index 0c5d79afd..8516969b8 100644 --- a/src/ui/component/doodle/index.js +++ b/src/ui/component/doodle/index.js @@ -1,7 +1,6 @@ +/* eslint react/display-name: 0 */ + import React from 'react'; import 'css-doodle'; -export default ([rule = '']) => () => ( - // eslint-disable-line - {rule} -); +export default ([rule = '']) => () => {rule}; -- 2.43.4 From cca2ec68525596dee6a264978090b94d5d37b43b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?= =?UTF-8?q?=E3=83=96?= Date: Fri, 17 May 2019 11:00:45 -0500 Subject: [PATCH 3/6] Disable prettier for load-screen.scss --- .prettierignore | 1 + src/ui/scss/component/_load-screen.scss | 71 ++++++++++++++++++------- 2 files changed, 54 insertions(+), 18 deletions(-) create mode 100644 .prettierignore diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 000000000..cec9064c3 --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +src/ui/scss/component/_load-screen.scss diff --git a/src/ui/scss/component/_load-screen.scss b/src/ui/scss/component/_load-screen.scss index 301063874..25c0f856c 100644 --- a/src/ui/scss/component/_load-screen.scss +++ b/src/ui/scss/component/_load-screen.scss @@ -9,28 +9,62 @@ overflow: hidden; css-doodle { - width: 100%; - height: 100%; + width: 100%; height: 100%; overflow: hidden; position: absolute; - --color: @p (var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5)); + --color: @p(var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5)); --rule: ( - : doodle {@grid: 30x1 / 18vmin; --deg: @p (-180deg, 180deg) ;}: container {perspective: 30vmin;}: before, - : after {@place-cell: @r (100%) @r (100%) ; @shape: star; @size: @r (6px) ; background-color: var(--color) ; - content: '' ;} @place-cell: center; @size: 100%; animation: scale-up 12s linear infinite; animation-delay: calc( - -12s / @size () * @i () - ) ; background-image: @m100 ( - radial-gradient(var(--color) 50%, transparent 0) @r (-20%, 120%) @r (-20%, 100%) / 1px 1px no-repeat - ) ; box-shadow: @m2 (0 0 50px var(--color)) ; will-change: transform, - opacity; @keyframes scale-up {0%, - 95.01%, - 100% {opacity: 0; transform: translateZ(0) rotate(0) ;} 10% {opacity: 1;} 95% {transform: translateZ(35vmin) rotateZ( - @var (--deg) - ) ;}} - ); + :doodle { + @grid: 30x1 / 18vmin; + --deg: @p(-180deg, 180deg); + } + + :container { + perspective: 30vmin; + } + + :before, + :after { + @place-cell: @r(100%) @r(100%); + @shape: star; + @size: @r(6px); + background-color: var(--color); + content: ''; + } + + @place-cell: center; + @size: 100%; + + animation: scale-up 12s linear infinite; + animation-delay: calc(-12s / @size() * @i()); + background-image: @m100( + radial-gradient(var(--color) 50%, transparent 0) + @r(-20%, 120%) @r(-20%, 100%) / 1px 1px + no-repeat + ); + box-shadow: @m2(0 0 50px var(--color)); + will-change: transform, opacity; + + @keyframes scale-up { + 0%, + 95.01%, + 100% { + opacity: 0; + transform: translateZ(0) rotate(0); + } + + 10% { + opacity: 1; + } + + 95% { + transform: translateZ(35vmin) rotateZ(@var(--deg)); + } + } + ) } } @@ -76,8 +110,7 @@ .load-screen__overlay { @include center; - width: 100vw; - height: 100vh; + width: 100vw; height: 100vh; color: $lbry-white; flex-direction: column; @@ -109,6 +142,8 @@ } } + + .load-screen--help { font-size: 14px; padding-top: $spacing-vertical; -- 2.43.4 From ca776f78ca5192ad6d2ab3c7fe6fa7a7c8fb6d92 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Tue, 21 May 2019 18:40:21 -0400 Subject: [PATCH 4/6] centered animation --- src/ui/component/doodle/index.js | 3 +- .../component/splash/internal/load-screen.jsx | 57 +------ src/ui/component/splash/view.jsx | 16 +- src/ui/scss/component/_load-screen.scss | 146 ++++++++---------- 4 files changed, 77 insertions(+), 145 deletions(-) diff --git a/src/ui/component/doodle/index.js b/src/ui/component/doodle/index.js index 8516969b8..542124684 100644 --- a/src/ui/component/doodle/index.js +++ b/src/ui/component/doodle/index.js @@ -1,6 +1,5 @@ /* eslint react/display-name: 0 */ import React from 'react'; -import 'css-doodle'; -export default ([rule = '']) => () => {rule}; +export default ({ rule = '' }) => {rule}; diff --git a/src/ui/component/splash/internal/load-screen.jsx b/src/ui/component/splash/internal/load-screen.jsx index 6320586c1..ca8fd95cd 100644 --- a/src/ui/component/splash/internal/load-screen.jsx +++ b/src/ui/component/splash/internal/load-screen.jsx @@ -4,7 +4,8 @@ import React, { Fragment } from 'react'; import Icon from 'component/common/icon'; import Spinner from 'component/spinner'; import Button from 'component/button'; -import Doodle from 'component/doodle'; +// import Doodle from 'component/doodle'; +import 'css-doodle'; type Props = { message: string, @@ -13,7 +14,7 @@ type Props = { error: boolean, }; -const FancyDoodle = Doodle``; // this looks dumb but it prevents repetition from `_load-screen.scss` +// const FancyDoodle = Doodle``; // this looks dumb but it prevents repetition from `_load-screen.scss` class LoadScreen extends React.PureComponent { static defaultProps = { @@ -25,56 +26,8 @@ class LoadScreen extends React.PureComponent { return (
-
-
-

- {__('LBRY')} - beta -

-
- {error ? ( - -

{__('Uh oh. Sean must have messed something up. Try refreshing to fix it.')}

-
-
-
-

{__('If you still have issues, your anti-virus software or firewall may be preventing startup.')}

-

- {__('Reach out to hello@lbry.com for help, or check out')}{' '} -

- - ) : ( - - {isWarning ? ( - - - {` ${message}`} - - ) : ( -
{message}
- )} - - {details &&
{details}
} - - - )} -
- - +

{__('LBRY')}

+
); } diff --git a/src/ui/component/splash/view.jsx b/src/ui/component/splash/view.jsx index 5615dde20..34b5116e6 100644 --- a/src/ui/component/splash/view.jsx +++ b/src/ui/component/splash/view.jsx @@ -170,14 +170,14 @@ export default class SplashScreen extends React.PureComponent { const { daemonVersionMatched, onReadyToLaunch } = this.props; const { isRunning, launchWithIncompatibleDaemon } = this.state; - if (daemonVersionMatched) { - onReadyToLaunch(); - } else if (launchWithIncompatibleDaemon && isRunning) { - // The user may have decided to run the app with mismatched daemons - // They could make this decision before the daemon is finished starting up - // If it isn't running, this function will be called after the daemon is started - onReadyToLaunch(); - } + // if (daemonVersionMatched) { + // onReadyToLaunch(); + // } else if (launchWithIncompatibleDaemon && isRunning) { + // // The user may have decided to run the app with mismatched daemons + // // They could make this decision before the daemon is finished starting up + // // If it isn't running, this function will be called after the daemon is started + // onReadyToLaunch(); + // } } hasRecordedUser: boolean; diff --git a/src/ui/scss/component/_load-screen.scss b/src/ui/scss/component/_load-screen.scss index 25c0f856c..79aeb6f44 100644 --- a/src/ui/scss/component/_load-screen.scss +++ b/src/ui/scss/component/_load-screen.scss @@ -9,86 +9,75 @@ overflow: hidden; css-doodle { - width: 100%; height: 100%; - - overflow: hidden; - position: absolute; - --color: @p(var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5)); - --rule: ( :doodle { @grid: 30x1 / 18vmin; --deg: @p(-180deg, 180deg); } - :container { perspective: 30vmin; } - - :before, - :after { - @place-cell: @r(100%) @r(100%); - @shape: star; - @size: @r(6px); - background-color: var(--color); - content: ''; + :after, :before { + // content: ''; + // background: var(--color); + // @place-cell: @r(100%) @r(100%); + // @size: @r(6px); + // @shape: heart; } - + @place-cell: center; @size: 100%; - - animation: scale-up 12s linear infinite; - animation-delay: calc(-12s / @size() * @i()); - background-image: @m100( - radial-gradient(var(--color) 50%, transparent 0) + + box-shadow: @m2(0 0 50px var(--color)); + background: @m100( + radial-gradient(var(--color) 50%, transparent 0) @r(-20%, 120%) @r(-20%, 100%) / 1px 1px no-repeat ); - box-shadow: @m2(0 0 50px var(--color)); + will-change: transform, opacity; + animation: scale-up 12s linear infinite; + animation-delay: calc(-12s / @size() * @i()); @keyframes scale-up { - 0%, - 95.01%, - 100% { - opacity: 0; + 0%, 95.01%, 100% { transform: translateZ(0) rotate(0); + opacity: 0; } - - 10% { - opacity: 1; + 10% { + opacity: 1; } - 95% { - transform: translateZ(35vmin) rotateZ(@var(--deg)); + transform: + translateZ(35vmin) rotateZ(@var(--deg)); } } ) } } -.load-screen__actions { - font-size: 1.2em; - margin-top: var(--spacing-vertical-medium); -} +// .load-screen__actions { +// font-size: 1.2em; +// margin-top: var(--spacing-vertical-medium); +// } -.load-screen__button { - border-bottom: 1px solid $lbry-white; - color: $lbry-white; - transition: none; +// .load-screen__button { +// border-bottom: 1px solid $lbry-white; +// color: $lbry-white; +// transition: none; - &:hover { - border-bottom: 1px solid $lbry-blue-1; - color: $lbry-blue-1; - } -} +// &:hover { +// border-bottom: 1px solid $lbry-blue-1; +// color: $lbry-blue-1; +// } +// } -.load-screen__details { - font-weight: 600; - line-height: 1; - max-width: 400px; -} +// .load-screen__details { +// font-weight: 600; +// line-height: 1; +// max-width: 400px; +// } .load-screen__header { display: flex; @@ -96,55 +85,46 @@ margin-bottom: var(--spacing-vertical-medium); } -.load-screen__help { - font-size: 1.25rem; - padding-top: var(--spacing-vertical-large); -} - -.load-screen__message { - font-size: 16px; - font-weight: 800; - line-height: 1; - margin-bottom: var(--spacing-vertical-medium); -} - .load-screen__overlay { - @include center; - width: 100vw; height: 100vh; + // @include center; color: $lbry-white; flex-direction: column; + align-items: center; + justify-content: center; position: relative; text-align: center; z-index: 1; } .load-screen__title { - font-size: 60px; + font-size: 40px; font-weight: 700; line-height: 1; position: relative; + color: $lbry-white; + position: absolute; + + // sup { + // margin-left: -var(--spacing-vertical-tiny); + // padding: var(--spacing-vertical-miniscule) var(--spacing-vertical-small); - sup { - margin-left: -var(--spacing-vertical-tiny); - padding: var(--spacing-vertical-miniscule) var(--spacing-vertical-small); - - background-color: rgba($lbry-white, 0.3); - border-radius: 0.2rem; - color: $lbry-white; - font-size: 0.6rem; - font-weight: 400; - letter-spacing: 0.1rem; - line-height: 1; - position: absolute; - text-transform: uppercase; - top: 2.15rem; - } + // background-color: rgba($lbry-white, 0.3); + // border-radius: 0.2rem; + // color: $lbry-white; + // font-size: 0.6rem; + // font-weight: 400; + // letter-spacing: 0.1rem; + // line-height: 1; + // position: absolute; + // text-transform: uppercase; + // top: 1.5rem; + // } } -.load-screen--help { - font-size: 14px; - padding-top: $spacing-vertical; -} +// .load-screen--help { +// font-size: 14px; +// padding-top: $spacing-vertical; +// } -- 2.43.4 From 965fb5a2ba246a8e5168421da4f1f1ef302c6cea Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Wed, 29 May 2019 15:48:44 -0400 Subject: [PATCH 5/6] cleanup --- .prettierignore | 2 +- build/downloadDaemon.js | 10 +- package.json | 1 + src/platforms/electron/createWindow.js | 2 +- .../component/splash/internal/load-screen.jsx | 36 ----- src/ui/component/splash/view.jsx | 51 ++++--- src/ui/scss/all.scss | 2 +- src/ui/scss/component/_load-screen.scss | 130 ------------------ src/ui/scss/component/_modal.scss | 3 +- src/ui/scss/component/_splash.scss | 91 ++++++++++++ src/ui/scss/init/_vars.scss | 7 +- yarn.lock | 5 + 12 files changed, 142 insertions(+), 198 deletions(-) delete mode 100644 src/ui/component/splash/internal/load-screen.jsx delete mode 100644 src/ui/scss/component/_load-screen.scss create mode 100644 src/ui/scss/component/_splash.scss diff --git a/.prettierignore b/.prettierignore index cec9064c3..46bfc9b46 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1 +1 @@ -src/ui/scss/component/_load-screen.scss +src/ui/scss/component/_splash.scss diff --git a/build/downloadDaemon.js b/build/downloadDaemon.js index b8221e632..878272343 100644 --- a/build/downloadDaemon.js +++ b/build/downloadDaemon.js @@ -24,14 +24,13 @@ const downloadDaemon = targetPlatform => const daemonFilePath = path.join(daemonDir, daemonFileName); const daemonVersionPath = path.join(__dirname, 'daemon.ver'); const tmpZipPath = path.join(__dirname, '..', 'dist', 'daemon.zip'); - const daemonURL = daemonURLTemplate - .replace(/DAEMONVER/g, daemonVersion) - .replace(/OSNAME/g, daemonPlatform); + const daemonURL = daemonURLTemplate.replace(/DAEMONVER/g, daemonVersion).replace(/OSNAME/g, daemonPlatform); // If a daemon and daemon.ver exists, check to see if it matches the current daemon version const hasDaemonDownloaded = fs.existsSync(daemonFilePath); const hasDaemonVersion = fs.existsSync(daemonVersionPath); let downloadedDaemonVersion; + if (hasDaemonVersion) { downloadedDaemonVersion = fs.readFileSync(daemonVersionPath, 'utf8'); } @@ -65,6 +64,7 @@ const downloadDaemon = targetPlatform => }) ) .then(() => del(`${daemonFilePath}*`)) + .then() .then(() => decompress(tmpZipPath, daemonDir, { filter: file => path.basename(file.path) === daemonFileName, @@ -80,9 +80,7 @@ const downloadDaemon = targetPlatform => resolve('Done'); }) .catch(error => { - console.error( - `\x1b[31merror\x1b[0m Daemon download failed due to: \x1b[35m${error}\x1b[0m` - ); + console.error(`\x1b[31merror\x1b[0m Daemon download failed due to: \x1b[35m${error}\x1b[0m`); reject(error); }); } diff --git a/package.json b/package.json index c19c2f56a..43448d283 100644 --- a/package.json +++ b/package.json @@ -81,6 +81,7 @@ "copy-webpack-plugin": "^4.6.0", "country-data": "^0.0.31", "cross-env": "^5.2.0", + "css-doodle": "^0.7.1", "css-loader": "^2.1.0", "cssnano": "^4.1.10", "dat.gui": "^0.7.2", diff --git a/src/platforms/electron/createWindow.js b/src/platforms/electron/createWindow.js index 584e6d536..90fd4df29 100644 --- a/src/platforms/electron/createWindow.js +++ b/src/platforms/electron/createWindow.js @@ -16,7 +16,7 @@ export default appState => { }); const windowConfiguration = { - backgroundColor: '#2f9176', + backgroundColor: '#270f34', // Located in src/scss/init/_vars.scss `--color-background` minWidth: 950, minHeight: 600, autoHideMenuBar: true, diff --git a/src/ui/component/splash/internal/load-screen.jsx b/src/ui/component/splash/internal/load-screen.jsx deleted file mode 100644 index ca8fd95cd..000000000 --- a/src/ui/component/splash/internal/load-screen.jsx +++ /dev/null @@ -1,36 +0,0 @@ -// @flow -import * as ICONS from 'constants/icons'; -import React, { Fragment } from 'react'; -import Icon from 'component/common/icon'; -import Spinner from 'component/spinner'; -import Button from 'component/button'; -// import Doodle from 'component/doodle'; -import 'css-doodle'; - -type Props = { - message: string, - details: ?string, - isWarning: boolean, - error: boolean, -}; - -// const FancyDoodle = Doodle``; // this looks dumb but it prevents repetition from `_load-screen.scss` - -class LoadScreen extends React.PureComponent { - static defaultProps = { - isWarning: false, - }; - - render() { - const { details, message, isWarning, error } = this.props; - - return ( -
-

{__('LBRY')}

- -
- ); - } -} - -export default LoadScreen; diff --git a/src/ui/component/splash/view.jsx b/src/ui/component/splash/view.jsx index 34b5116e6..be7eb0d37 100644 --- a/src/ui/component/splash/view.jsx +++ b/src/ui/component/splash/view.jsx @@ -1,14 +1,15 @@ // @flow -import * as React from 'react'; import * as MODALS from 'constants/modal_types'; +import React from 'react'; import { Lbry } from 'lbry-redux'; +import Button from 'component/button'; import ModalWalletUnlock from 'modal/modalWalletUnlock'; import ModalIncompatibleDaemon from 'modal/modalIncompatibleDaemon'; import ModalUpgrade from 'modal/modalUpgrade'; import ModalDownloading from 'modal/modalDownloading'; -import LoadScreen from './internal/load-screen'; +import 'css-doodle'; -const ONE_MINUTE = 60 * 1000; +const FORTY_FIVE_SECONDS = 45 * 1000; type Props = { checkDaemonVersion: () => Promise, @@ -87,7 +88,7 @@ export default class SplashScreen extends React.PureComponent { // If nothing changes after 1 minute, show the error message. this.timeout = setTimeout(() => { this.setState({ error: true }); - }, ONE_MINUTE); + }, FORTY_FIVE_SECONDS); } updateStatus() { @@ -170,14 +171,14 @@ export default class SplashScreen extends React.PureComponent { const { daemonVersionMatched, onReadyToLaunch } = this.props; const { isRunning, launchWithIncompatibleDaemon } = this.state; - // if (daemonVersionMatched) { - // onReadyToLaunch(); - // } else if (launchWithIncompatibleDaemon && isRunning) { - // // The user may have decided to run the app with mismatched daemons - // // They could make this decision before the daemon is finished starting up - // // If it isn't running, this function will be called after the daemon is started - // onReadyToLaunch(); - // } + if (daemonVersionMatched) { + onReadyToLaunch(); + } else if (launchWithIncompatibleDaemon && isRunning) { + // The user may have decided to run the app with mismatched daemons + // They could make this decision before the daemon is finished starting up + // If it isn't running, this function will be called after the daemon is started + onReadyToLaunch(); + } } hasRecordedUser: boolean; @@ -206,16 +207,32 @@ export default class SplashScreen extends React.PureComponent { } render() { - const { message, details, error } = this.state; + const { error } = this.state; return ( - - +
+ +

LBRY

+ {error && ( +
+

{__('Uh oh. The flux in our Retro Encabulator must be out of whack. Try refreshing to fix it.')}

+
+
+
+

{__('If you still have issues, your anti-virus software or firewall may be preventing startup.')}

+

+ {__('Reach out to hello@lbry.com for help, or check out')}{' '} +

+
+ )} {/* Temp hack: don't show any modals on splash screen daemon is running; daemon doesn't let you quit during startup, so the "Quit" buttons - in the modals won't work. */} + in the modals won't work. */} {this.renderModals()} - +
); } } diff --git a/src/ui/scss/all.scss b/src/ui/scss/all.scss index bd7a12ae3..5088d6a1b 100644 --- a/src/ui/scss/all.scss +++ b/src/ui/scss/all.scss @@ -24,7 +24,6 @@ @import 'component/header'; @import 'component/icon'; @import 'component/item-list'; -@import 'component/load-screen'; @import 'component/main'; @import 'component/markdown-editor'; @import 'component/markdown-preview'; @@ -38,6 +37,7 @@ @import 'component/search'; @import 'component/snack-bar'; @import 'component/spinner'; +@import 'component/splash'; @import 'component/subscriptions'; @import 'component/syntax-highlighter'; @import 'component/table'; diff --git a/src/ui/scss/component/_load-screen.scss b/src/ui/scss/component/_load-screen.scss deleted file mode 100644 index 79aeb6f44..000000000 --- a/src/ui/scss/component/_load-screen.scss +++ /dev/null @@ -1,130 +0,0 @@ -.load-screen { - width: 100vw; - height: 100vh; - - align-items: center; - background-color: #270f34; - display: flex; - justify-content: center; - overflow: hidden; - - css-doodle { - --color: @p(var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5)); - --rule: ( - :doodle { - @grid: 30x1 / 18vmin; - --deg: @p(-180deg, 180deg); - } - :container { - perspective: 30vmin; - } - :after, :before { - // content: ''; - // background: var(--color); - // @place-cell: @r(100%) @r(100%); - // @size: @r(6px); - // @shape: heart; - } - - @place-cell: center; - @size: 100%; - - box-shadow: @m2(0 0 50px var(--color)); - background: @m100( - radial-gradient(var(--color) 50%, transparent 0) - @r(-20%, 120%) @r(-20%, 100%) / 1px 1px - no-repeat - ); - - will-change: transform, opacity; - animation: scale-up 12s linear infinite; - animation-delay: calc(-12s / @size() * @i()); - - @keyframes scale-up { - 0%, 95.01%, 100% { - transform: translateZ(0) rotate(0); - opacity: 0; - } - 10% { - opacity: 1; - } - 95% { - transform: - translateZ(35vmin) rotateZ(@var(--deg)); - } - } - ) - } -} - -// .load-screen__actions { -// font-size: 1.2em; -// margin-top: var(--spacing-vertical-medium); -// } - -// .load-screen__button { -// border-bottom: 1px solid $lbry-white; -// color: $lbry-white; -// transition: none; - -// &:hover { -// border-bottom: 1px solid $lbry-blue-1; -// color: $lbry-blue-1; -// } -// } - -// .load-screen__details { -// font-weight: 600; -// line-height: 1; -// max-width: 400px; -// } - -.load-screen__header { - display: flex; - justify-content: center; - margin-bottom: var(--spacing-vertical-medium); -} - -.load-screen__overlay { - // @include center; - - color: $lbry-white; - flex-direction: column; - align-items: center; - justify-content: center; - position: relative; - text-align: center; - z-index: 1; -} - -.load-screen__title { - font-size: 40px; - font-weight: 700; - line-height: 1; - position: relative; - color: $lbry-white; - position: absolute; - - // sup { - // margin-left: -var(--spacing-vertical-tiny); - // padding: var(--spacing-vertical-miniscule) var(--spacing-vertical-small); - - // background-color: rgba($lbry-white, 0.3); - // border-radius: 0.2rem; - // color: $lbry-white; - // font-size: 0.6rem; - // font-weight: 400; - // letter-spacing: 0.1rem; - // line-height: 1; - // position: absolute; - // text-transform: uppercase; - // top: 1.5rem; - // } -} - - - -// .load-screen--help { -// font-size: 14px; -// padding-top: $spacing-vertical; -// } diff --git a/src/ui/scss/component/_modal.scss b/src/ui/scss/component/_modal.scss index c90961be2..c971123b0 100644 --- a/src/ui/scss/component/_modal.scss +++ b/src/ui/scss/component/_modal.scss @@ -90,8 +90,7 @@ .error-modal__content { display: flex; - padding: 0 var(--spacing-vertical-medium) var(--spacing-vertical-medium) - var(--spacing-vertical-medium); + padding: 0 var(--spacing-vertical-medium) var(--spacing-vertical-medium) var(--spacing-vertical-medium); } .error-modal__warning-symbol { diff --git a/src/ui/scss/component/_splash.scss b/src/ui/scss/component/_splash.scss new file mode 100644 index 000000000..5d61642ff --- /dev/null +++ b/src/ui/scss/component/_splash.scss @@ -0,0 +1,91 @@ +// +// Formatting is ignored for this file because css-doodle requires that the styles be in a specific shape +// +.splash { + width: 100vw; + height: 100vh; + + align-items: center; + background-color: var(--color-background); + display: flex; + justify-content: center; + overflow: hidden; + + css-doodle { + z-index: 0; + + --color: @p(var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5)); + --rule: ( + :doodle { + @grid: 30x1 / 18vmin; + --deg: @p(-180deg, 180deg); + } + :container { + perspective: 30vmin; + } + + @place-cell: center; + @size: 100%; + + box-shadow: @m2(0 0 50px var(--color)); + background: @m100( + radial-gradient(var(--color) 50%, transparent 0) + @r(-20%, 120%) @r(-20%, 100%) / 1px 1px + no-repeat + ); + + will-change: transform, opacity; + animation: scale-up 12s linear infinite; + animation-delay: calc(-12s / @size() * @i()); + + @keyframes scale-up { + 0%, 95.01%, 100% { + transform: translateZ(0) rotate(0); + opacity: 0; + } + 10% { + opacity: 1; + } + 95% { + transform: + translateZ(35vmin) rotateZ(@var(--deg)); + } + } + ) + } +} + +.splash__actions { + margin-top: var(--spacing-vertical-medium); +} + +.splash__button { + border-bottom: 1px solid $lbry-white; + color: $lbry-white; + transition: none; + + &:hover { + border-bottom: 1px solid $lbry-blue-1; + color: $lbry-blue-1; + } +} + +.splash__details { + font-weight: 600; + line-height: 1; + max-width: 400px; +} + +.splash__title { + position: absolute; + font-size: 40px; + line-height: 1; + font-weight: 700; + color: $lbry-white; +} + +.splash__error { + position: absolute; + margin-top: 25rem; + box-shadow: var(--card-box-shadow) $lbry-gray-5; +} \ No newline at end of file diff --git a/src/ui/scss/init/_vars.scss b/src/ui/scss/init/_vars.scss index ae5a3129e..1bdebafab 100644 --- a/src/ui/scss/init/_vars.scss +++ b/src/ui/scss/init/_vars.scss @@ -9,7 +9,6 @@ $large-breakpoint: 1921px; // Width & spacing --side-nav-width: 180px; --font-size-subtext-multiple: 0.92; - --spacing-vertical-miniscule: calc(2rem / 5); --spacing-vertical-tiny: calc(2rem / 4); --spacing-vertical-small: calc(2rem / 3); @@ -17,15 +16,15 @@ $large-breakpoint: 1921px; --spacing-vertical-large: 2rem; --spacing-vertical-xlarge: 3rem; --spacing-main-padding: var(--spacing-vertical-xlarge); - --file-page-max-width: 1787px; --file-max-height: 788px; --file-max-width: 1400px; - --video-aspect-ratio: 56.25%; // 9 x 16 - --channel-thumbnail-size: 10rem; + // Color + --color-background: #270f34; + // Text --text-max-width: 660px; --text-link-padding: 4px; diff --git a/yarn.lock b/yarn.lock index 9d3cb337d..fc556c0eb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3001,6 +3001,11 @@ css-declaration-sorter@^4.0.1: postcss "^7.0.1" timsort "^0.3.0" +css-doodle@^0.7.1: + version "0.7.1" + resolved "https://registry.yarnpkg.com/css-doodle/-/css-doodle-0.7.1.tgz#477466310df6554ec5182349745194ba37415670" + integrity sha512-TRs+7YLgP/yc0EdrL5Us2GRHbhIgf4GsQWAt5WdRxr5pwwpWl8Q9jZle431Z/5u5C29jiEoItjIaKE84xFh+kA== + css-hot-loader@^1.4.3: version "1.4.4" resolved "https://registry.yarnpkg.com/css-hot-loader/-/css-hot-loader-1.4.4.tgz#ae784932cd8b7d092f7f15702af08b3ec9436052" -- 2.43.4 From 7e044788f2a69022037b62582e7defa61c3ad7c5 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Wed, 5 Jun 2019 00:14:15 -0400 Subject: [PATCH 6/6] fix build --- .prettierignore | 1 - src/ui/component/splash/view.jsx | 38 +++++++++++++++++++-- src/ui/scss/component/_splash.scss | 55 +++--------------------------- 3 files changed, 41 insertions(+), 53 deletions(-) delete mode 100644 .prettierignore diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 46bfc9b46..000000000 --- a/.prettierignore +++ /dev/null @@ -1 +0,0 @@ -src/ui/scss/component/_splash.scss diff --git a/src/ui/component/splash/view.jsx b/src/ui/component/splash/view.jsx index be7eb0d37..6ff0d45cf 100644 --- a/src/ui/component/splash/view.jsx +++ b/src/ui/component/splash/view.jsx @@ -211,12 +211,46 @@ export default class SplashScreen extends React.PureComponent { return (
- + + {` + --color: @p(var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5)); + :doodle { + @grid: 30x1 / 18vmin; + --deg: @p(-180deg, 180deg); + } + :container { + perspective: 30vmin; + } + + @place-cell: center; + @size: 100%; + + box-shadow: @m2(0 0 50px var(--color)); + will-change: transform, opacity; + animation: scale-up 12s linear infinite; + animation-delay: calc(-12s / @size() * @i()); + + @keyframes scale-up { + 0%, 95.01%, 100% { + transform: translateZ(0) rotate(0); + opacity: 0; + } + 10% { + opacity: 1; + } + 95% { + transform: + translateZ(35vmin) rotateZ(@var(--deg)); + } + } + ) + `} +

LBRY

{error && (

{__('Uh oh. The flux in our Retro Encabulator must be out of whack. Try refreshing to fix it.')}

-
+
diff --git a/src/ui/scss/component/_splash.scss b/src/ui/scss/component/_splash.scss index 5d61642ff..8a581aa84 100644 --- a/src/ui/scss/component/_splash.scss +++ b/src/ui/scss/component/_splash.scss @@ -1,6 +1,3 @@ -// -// Formatting is ignored for this file because css-doodle requires that the styles be in a specific shape -// .splash { width: 100vw; height: 100vh; @@ -10,54 +7,12 @@ display: flex; justify-content: center; overflow: hidden; - - css-doodle { - z-index: 0; - - --color: @p(var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5)); - --rule: ( - :doodle { - @grid: 30x1 / 18vmin; - --deg: @p(-180deg, 180deg); - } - :container { - perspective: 30vmin; - } - - @place-cell: center; - @size: 100%; - - box-shadow: @m2(0 0 50px var(--color)); - background: @m100( - radial-gradient(var(--color) 50%, transparent 0) - @r(-20%, 120%) @r(-20%, 100%) / 1px 1px - no-repeat - ); - - will-change: transform, opacity; - animation: scale-up 12s linear infinite; - animation-delay: calc(-12s / @size() * @i()); - - @keyframes scale-up { - 0%, 95.01%, 100% { - transform: translateZ(0) rotate(0); - opacity: 0; - } - 10% { - opacity: 1; - } - 95% { - transform: - translateZ(35vmin) rotateZ(@var(--deg)); - } - } - ) - } } -.splash__actions { - margin-top: var(--spacing-vertical-medium); -} +// .splash__actions { +// margin-top: var(--spacing-vertical-medium); +// align-items: center; +// } .splash__button { border-bottom: 1px solid $lbry-white; @@ -88,4 +43,4 @@ position: absolute; margin-top: 25rem; box-shadow: var(--card-box-shadow) $lbry-gray-5; -} \ No newline at end of file +} -- 2.43.4