LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

centered animation

Browse source
This commit is contained in:
Sean Yesmunt 2019-05-21 18:40:21 -04:00
parent cca2ec6852
commit ca776f78ca
4 changed files with 77 additions and 145 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/ui/component/doodle/index.js
View file

@ -1,6 +1,5 @@
/* eslint react/display-name: 0 */ /* eslint react/display-name: 0 */
import React from 'react'; import React from 'react';
import 'css-doodle';
export default ([rule = '']) => () => <css-doodle use="var(--rule)">{rule}</css-doodle>; export default ({ rule = '' }) => <css-doodle use="var(--rule)">{rule}</css-doodle>;

57
src/ui/component/splash/internal/load-screen.jsx
View file

@ -4,7 +4,8 @@ import React, { Fragment } from 'react';
import Icon from 'component/common/icon'; import Icon from 'component/common/icon';
import Spinner from 'component/spinner'; import Spinner from 'component/spinner';
import Button from 'component/button'; import Button from 'component/button';
import Doodle from 'component/doodle'; // import Doodle from 'component/doodle';
import 'css-doodle';
type Props = { type Props = {
message: string, message: string,
@ -13,7 +14,7 @@ type Props = {
error: boolean, 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<Props> { class LoadScreen extends React.PureComponent<Props> {
static defaultProps = { static defaultProps = {
@ -25,56 +26,8 @@ class LoadScreen extends React.PureComponent<Props> {
return ( return (
<div className="load-screen"> <div className="load-screen">
<div className="load-screen__overlay"> <h1 className="load-screen__title">{__('LBRY')}</h1>
<div className="load-screen__header"> <css-doodle use="var(--rule)" />
<h1 className="load-screen__title">
{__('LBRY')}
<sup>beta</sup>
</h1>
</div>
{error ? (
<Fragment>
<h3>{__('Uh oh. Sean must have messed something up. Try refreshing to fix it.')}</h3>
<div className="load-screen__actions">
<Button
label="Refresh"
button="link"
className="load-screen__button"
onClick={() => window.location.reload()}
/>
</div>
<div className="load-screen__help">
<p>{__('If you still have issues, your anti-virus software or firewall may be preventing startup.')}</p>
<p>
{__('Reach out to hello@lbry.com for help, or check out')}{' '}
<Button
button="link"
className="load-screen__button"
href="https://lbry.com/faq/startup-troubleshooting"
label="this link"
/>
.
</p>
</div>
</Fragment>
) : (
<Fragment>
{isWarning ? (
<span className="load-screen__message">
<Icon size={20} icon={ICONS.ALERT} />
{` ${message}`}
</span>
) : (
<div className="load-screen__message">{message}</div>
)}
{details && <div className="load-screen__details">{details}</div>}
<Spinner type="splash" />
</Fragment>
)}
</div>
<FancyDoodle />
</div> </div>
); );
} }

16
src/ui/component/splash/view.jsx
View file

@ -170,14 +170,14 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
const { daemonVersionMatched, onReadyToLaunch } = this.props; const { daemonVersionMatched, onReadyToLaunch } = this.props;
const { isRunning, launchWithIncompatibleDaemon } = this.state; const { isRunning, launchWithIncompatibleDaemon } = this.state;
if (daemonVersionMatched) { // if (daemonVersionMatched) {
onReadyToLaunch(); // onReadyToLaunch();
} else if (launchWithIncompatibleDaemon && isRunning) { // } else if (launchWithIncompatibleDaemon && isRunning) {
// The user may have decided to run the app with mismatched daemons // // The user may have decided to run the app with mismatched daemons
// They could make this decision before the daemon is finished starting up // // 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 // // If it isn't running, this function will be called after the daemon is started
onReadyToLaunch(); // onReadyToLaunch();
} // }
} }
hasRecordedUser: boolean; hasRecordedUser: boolean;

134
src/ui/scss/component/_load-screen.scss
View file

@ -9,86 +9,75 @@
overflow: hidden; overflow: hidden;
css-doodle { 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)); --color: @p(var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5));
--rule: ( --rule: (
:doodle { :doodle {
@grid: 30x1 / 18vmin; @grid: 30x1 / 18vmin;
--deg: @p(-180deg, 180deg); --deg: @p(-180deg, 180deg);
} }
:container { :container {
perspective: 30vmin; perspective: 30vmin;
} }
:after, :before {
:before, // content: '';
:after { // background: var(--color);
@place-cell: @r(100%) @r(100%); // @place-cell: @r(100%) @r(100%);
@shape: star; // @size: @r(6px);
@size: @r(6px); // @shape: heart;
background-color: var(--color);
content: '';
} }
@place-cell: center; @place-cell: center;
@size: 100%; @size: 100%;
animation: scale-up 12s linear infinite; box-shadow: @m2(0 0 50px var(--color));
animation-delay: calc(-12s / @size() * @i()); background: @m100(
background-image: @m100(
radial-gradient(var(--color) 50%, transparent 0) radial-gradient(var(--color) 50%, transparent 0)
@r(-20%, 120%) @r(-20%, 100%) / 1px 1px @r(-20%, 120%) @r(-20%, 100%) / 1px 1px
no-repeat no-repeat
); );
box-shadow: @m2(0 0 50px var(--color));
will-change: transform, opacity; will-change: transform, opacity;
animation: scale-up 12s linear infinite;
animation-delay: calc(-12s / @size() * @i());
@keyframes scale-up { @keyframes scale-up {
0%, 0%, 95.01%, 100% {
95.01%,
100% {
opacity: 0;
transform: translateZ(0) rotate(0); transform: translateZ(0) rotate(0);
opacity: 0;
} }
10% { 10% {
opacity: 1; opacity: 1;
} }
95% { 95% {
transform: translateZ(35vmin) rotateZ(@var(--deg)); transform:
translateZ(35vmin) rotateZ(@var(--deg));
} }
} }
) )
} }
} }
.load-screen__actions { // .load-screen__actions {
font-size: 1.2em; // font-size: 1.2em;
margin-top: var(--spacing-vertical-medium); // margin-top: var(--spacing-vertical-medium);
} // }
.load-screen__button { // .load-screen__button {
border-bottom: 1px solid $lbry-white; // border-bottom: 1px solid $lbry-white;
color: $lbry-white; // color: $lbry-white;
transition: none; // transition: none;
&:hover { // &:hover {
border-bottom: 1px solid $lbry-blue-1; // border-bottom: 1px solid $lbry-blue-1;
color: $lbry-blue-1; // color: $lbry-blue-1;
} // }
} // }
.load-screen__details { // .load-screen__details {
font-weight: 600; // font-weight: 600;
line-height: 1; // line-height: 1;
max-width: 400px; // max-width: 400px;
} // }
.load-screen__header { .load-screen__header {
display: flex; display: flex;
@ -96,55 +85,46 @@
margin-bottom: var(--spacing-vertical-medium); 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 { .load-screen__overlay {
@include center; // @include center;
width: 100vw; height: 100vh;
color: $lbry-white; color: $lbry-white;
flex-direction: column; flex-direction: column;
align-items: center;
justify-content: center;
position: relative; position: relative;
text-align: center; text-align: center;
z-index: 1; z-index: 1;
} }
.load-screen__title { .load-screen__title {
font-size: 60px; font-size: 40px;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
position: relative; position: relative;
color: $lbry-white;
position: absolute;
sup { // sup {
margin-left: -var(--spacing-vertical-tiny); // margin-left: -var(--spacing-vertical-tiny);
padding: var(--spacing-vertical-miniscule) var(--spacing-vertical-small); // padding: var(--spacing-vertical-miniscule) var(--spacing-vertical-small);
background-color: rgba($lbry-white, 0.3); // background-color: rgba($lbry-white, 0.3);
border-radius: 0.2rem; // border-radius: 0.2rem;
color: $lbry-white; // color: $lbry-white;
font-size: 0.6rem; // font-size: 0.6rem;
font-weight: 400; // font-weight: 400;
letter-spacing: 0.1rem; // letter-spacing: 0.1rem;
line-height: 1; // line-height: 1;
position: absolute; // position: absolute;
text-transform: uppercase; // text-transform: uppercase;
top: 2.15rem; // top: 1.5rem;
} // }
} }
.load-screen--help { // .load-screen--help {
font-size: 14px; // font-size: 14px;
padding-top: $spacing-vertical; // padding-top: $spacing-vertical;
} // }