1
0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00

output step numbers

This commit is contained in:
Matthias Kretschmann 2019-04-25 13:04:41 +02:00
parent cbfc1bd1c7
commit 8856dca647
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 13 additions and 8 deletions

View File

@ -5,6 +5,7 @@
text-align: center; text-align: center;
margin-top: $spacer * $line-height; margin-top: $spacer * $line-height;
margin-bottom: $spacer / 2; margin-bottom: $spacer / 2;
line-height: 1.3;
&:before { &:before {
content: ''; content: '';
@ -25,6 +26,7 @@
.spinnerMessage { .spinnerMessage {
color: $brand-grey-light; color: $brand-grey-light;
padding-top: $spacer / 4;
} }
@keyframes spinner { @keyframes spinner {

View File

@ -3,7 +3,12 @@ import styles from './Spinner.module.scss'
const Spinner = ({ message }: { message?: string }) => ( const Spinner = ({ message }: { message?: string }) => (
<div className={styles.spinner}> <div className={styles.spinner}>
{message && <div className={styles.spinnerMessage}>{message}</div>} {message && (
<div
className={styles.spinnerMessage}
dangerouslySetInnerHTML={{ __html: message }}
/>
)}
</div> </div>
) )

View File

@ -31,13 +31,13 @@ export default class AssetFile extends PureComponent<
private feedbackMessage = (step: number) => { private feedbackMessage = (step: number) => {
switch (step) { switch (step) {
case 0: case 0:
return 'Asking for agreement signature...' return '1/4<br />Asking for agreement signature...'
case 1: case 1:
return 'Sending agreement request...' return '2/4<br />Sending agreement request...'
case 2: case 2:
return 'Asking for payment confirmation...' return '3/4<br />Asking for payment confirmation...'
case 3: case 3:
return 'Consuming file...' return '4/4<br />Consuming file...'
default: default:
return 'Decrypting file URL...' return 'Decrypting file URL...'
} }
@ -108,9 +108,7 @@ export default class AssetFile extends PureComponent<
</ul> </ul>
{isLoading ? ( {isLoading ? (
<> <Spinner message={this.feedbackMessage(step)} />
<Spinner message={this.feedbackMessage(step)} />
</>
) : ( ) : (
<Button <Button
primary primary