diff --git a/source/renderer/app/components/status/BlockConsolidationStatus.js b/source/renderer/app/components/status/BlockConsolidationStatus.js index 62e394ca71..ac158694a9 100644 --- a/source/renderer/app/components/status/BlockConsolidationStatus.js +++ b/source/renderer/app/components/status/BlockConsolidationStatus.js @@ -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'; @@ -110,6 +111,21 @@ export default class BlockConsolidationStatus extends Component { 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 (
{

{formatMessage(messages.description1)}

-

+

{ {formatMessage(messages.description3)}

-
+

{

-
-

{formatMessage(messages.epoch)} 0

-
-

{formatMessage(messages.epoch)} {Math.max(currentEpoch - 2, 0)}

-
-
-

- -

-
-
-
-

- {epochsConsolidated} {formatMessage(messages.epochsConsolidated)} -

-
-
-

- {formatMessage(messages.epoch)} {currentEpoch} -

+
+ { + (!!currentEpoch) && ( + +

{formatMessage(messages.epoch)} 0

+
+

{formatMessage(messages.epoch)} {Math.max(currentEpoch - 2, 0)}

+
+
+

+ +

+
+
+
+

+ {epochsConsolidated} {formatMessage(messages.epochsConsolidated)} +

+
+
+

+ {formatMessage(messages.epoch)} {currentEpoch} +

+
+ ) + }
diff --git a/source/renderer/app/components/status/BlockConsolidationStatus.scss b/source/renderer/app/components/status/BlockConsolidationStatus.scss index 7a0ade4b45..afb74a0e91 100644 --- a/source/renderer/app/components/status/BlockConsolidationStatus.scss +++ b/source/renderer/app/components/status/BlockConsolidationStatus.scss @@ -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; @@ -87,6 +91,11 @@ width: 100%; } } +.epochsNoCurrentEpoch { + em, b:nth-of-type(2) { + display: none; + } +} .indicator { margin-bottom: 53px; @@ -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 ); @@ -189,3 +209,15 @@ white-space: nowrap; } } + +:global { + @keyframes indicatorContainerNoCurrentEpochs { + 0% { + background-position-x: 0; + } + 100% { + background-position-x: 27px; + } + } +} +