Skip to content

Commit

Permalink
[DDW-589] Current epoch loading state - WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@thedanheller
thedanheller committed Mar 14, 2019
1 parent 1d86f14 commit 53ae90d
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 44 deletions.
86 changes: 54 additions & 32 deletions source/renderer/app/components/status/BlockConsolidationStatus.js
View file
@@ -1,7 +1,8 @@
// @flow
import React, { Component } from 'react';
import React, { Component, Fragment } from 'react';
import { observer } from 'mobx-react';
import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
import classnames from 'classnames';
import { Button } from 'react-polymorph/lib/components/Button';
import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
import styles from './BlockConsolidationStatus.scss';
Expand Down Expand Up @@ -110,6 +111,21 @@ export default class BlockConsolidationStatus extends Component<Props> {
const widthOfEpochsConsolidated =
this.getWidthOfEpochsConsolidated(epochsConsolidated, currentEpoch);

const description2Styles = classnames([
styles.description,
!currentEpoch ? styles.descriptionNoCurrentEpoch : null
]);

const epochsStyles = classnames([
styles.epochs,
!currentEpoch ? styles.epochsNoCurrentEpoch : null
]);

const indicatorContainerStyles = classnames([
styles.indicatorContainer,
!currentEpoch ? styles.indicatorContainerNoCurrentEpochs : null
]);

return (
<div className={styles.component}>
<TopBar
Expand All @@ -123,7 +139,7 @@ export default class BlockConsolidationStatus extends Component<Props> {
<p className={styles.description}>
{formatMessage(messages.description1)}
</p>
<p className={styles.description}>
<p className={description2Styles}>
<FormattedHTMLMessage
{...messages.description2}
values={{
Expand All @@ -136,7 +152,7 @@ export default class BlockConsolidationStatus extends Component<Props> {
{formatMessage(messages.description3)}
</p>

<div className={styles.epochs}>
<div className={epochsStyles}>
<p>
<FormattedHTMLMessage
{...messages.epochsConsolidatedOfTotal}
Expand All @@ -150,35 +166,41 @@ export default class BlockConsolidationStatus extends Component<Props> {
</div>

<div className={styles.indicator}>
<div className={styles.indicatorContainer}>
<p className={styles.zeroEpoch}>{formatMessage(messages.epoch)} 0</p>
<div className={styles.indicatorEpochsBehind}>
<p>{formatMessage(messages.epoch)} {Math.max(currentEpoch - 2, 0)}</p>
</div>
<div
className={styles.indicatorEpochsSynced}
style={{ width: `${epochsSynced}%` }}
>
<p style={this.getPositionOfEpochsSynced(epochsSynced)}>
<FormattedHTMLMessage
{...messages.synced}
values={{ epochsSynced }}
/>
</p>
</div>
<div className={styles.indicatorEpochsConsolidatedContainer}>
<div
className={styles.indicatorEpochsConsolidated}
style={{ width: `${widthOfEpochsConsolidated}%` }}
>
<p style={this.getPositionOfEpochsConsolidated(widthOfEpochsConsolidated)}>
{epochsConsolidated} {formatMessage(messages.epochsConsolidated)}
</p>
</div>
</div>
<p className={styles.fullEpoch}>
{formatMessage(messages.epoch)} {currentEpoch}
</p>
<div className={indicatorContainerStyles}>
{
(!!currentEpoch) && (
<Fragment>
<p className={styles.zeroEpoch}>{formatMessage(messages.epoch)} 0</p>
<div className={styles.indicatorEpochsBehind}>
<p>{formatMessage(messages.epoch)} {Math.max(currentEpoch - 2, 0)}</p>
</div>
<div
className={styles.indicatorEpochsSynced}
style={{ width: `${epochsSynced}%` }}
>
<p style={this.getPositionOfEpochsSynced(epochsSynced)}>
<FormattedHTMLMessage
{...messages.synced}
values={{ epochsSynced }}
/>
</p>
</div>
<div className={styles.indicatorEpochsConsolidatedContainer}>
<div
className={styles.indicatorEpochsConsolidated}
style={{ width: `${widthOfEpochsConsolidated}%` }}
>
<p style={this.getPositionOfEpochsConsolidated(widthOfEpochsConsolidated)}>
{epochsConsolidated} {formatMessage(messages.epochsConsolidated)}
</p>
</div>
</div>
<p className={styles.fullEpoch}>
{formatMessage(messages.epoch)} {currentEpoch}
</p>
</Fragment>
)
}
</div>
</div>

Expand Down
56 changes: 44 additions & 12 deletions source/renderer/app/components/status/BlockConsolidationStatus.scss
View file
Expand Up @@ -42,21 +42,25 @@
text-decoration: none;
}

.description {
line-height: 1.38;
margin: 0 auto 8px;
max-width: 610px;
}
.description {
line-height: 1.38;
margin: 0 auto 8px;
max-width: 610px;

b {
font-family: var(--font-medium);
}
b {
font-family: var(--font-medium);
}

&:last-of-type {
margin-bottom: 40px;
}
&:last-of-type {
margin-bottom: 40px;
}
}
.descriptionNoCurrentEpoch {
b {
display: none;
}
}


.epochs {
height: 149px;
Expand Down Expand Up @@ -87,6 +91,11 @@
width: 100%;
}
}
.epochsNoCurrentEpoch {
em, b:nth-of-type(2) {
display: none;
}
}

.indicator {
margin-bottom: 53px;
Expand All @@ -105,12 +114,23 @@
position: relative;
width: 600px;
}
.indicatorContainerNoCurrentEpochs {
background: repeating-linear-gradient(
-44.46deg,
var(--theme-block-consolidation-stripe-light-1-background-color),
var(--theme-block-consolidation-stripe-light-1-background-color) 10px,
var(--theme-block-consolidation-stripe-light-2-background-color) 10px,
var(--theme-block-consolidation-stripe-light-2-background-color) 20px
);
animation: indicatorContainerNoCurrentEpochs .5s linear infinite;
}


.indicatorEpochsSynced {
background: repeating-linear-gradient(
-63deg,
var(--theme-block-consolidation-stripe-light-1-background-color),
var(--theme-block-consolidation-stripe-light-1-background-color) 10px,
var(--theme-block-consolidation-stripe-light-1-background-color) 20px,
var(--theme-block-consolidation-stripe-light-2-background-color) 10px,
var(--theme-block-consolidation-stripe-light-2-background-color) 20px
);
Expand Down Expand Up @@ -189,3 +209,15 @@
white-space: nowrap;
}
}

:global {
@keyframes indicatorContainerNoCurrentEpochs {
0% {
background-position-x: 0;
}
100% {
background-position-x: 27px;
}
}
}

0 comments on commit 53ae90d

Please sign in to comment.