From ab315532c70ea03305df310d4b47223221fbf9ad Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 20 Feb 2019 12:33:04 +0100 Subject: [PATCH] progress styling, visually structure form, lots of tweaks --- src/components/atoms/Form/Form.module.scss | 4 ++ src/data/form-publish.json | 7 +- src/routes/Publish/Progress.module.scss | 76 ++++++++++++++++++++++ src/routes/Publish/Progress.tsx | 30 +++++---- src/routes/Publish/Step.module.scss | 3 +- src/routes/Publish/Step.tsx | 13 +++- src/routes/Publish/index.tsx | 10 +-- 7 files changed, 119 insertions(+), 24 deletions(-) create mode 100644 src/routes/Publish/Progress.module.scss diff --git a/src/components/atoms/Form/Form.module.scss b/src/components/atoms/Form/Form.module.scss index 27fb268..b7d8752 100644 --- a/src/components/atoms/Form/Form.module.scss +++ b/src/components/atoms/Form/Form.module.scss @@ -2,6 +2,10 @@ .form { width: 100%; + background: $brand-white; + padding: $spacer; + border: 1px solid $brand-grey-lighter; + border-radius: $border-radius; fieldset { border: 0; diff --git a/src/data/form-publish.json b/src/data/form-publish.json index 965c4dd..6b9aba8 100644 --- a/src/data/form-publish.json +++ b/src/data/form-publish.json @@ -18,7 +18,7 @@ "placeholder": "i.e. https://file.com/file.json", "type": "text", "required": true, - "help": "Provide one or multiple links to your data files." + "help": "Provide one or multiple urls to your data set files." } } }, @@ -73,7 +73,7 @@ } }, { - "title": "Credentials", + "title": "Authorship", "description": "A description about these credentials fields", "fields": { "author": { @@ -103,6 +103,9 @@ ] } } + }, + { + "title": "Register" } ] } diff --git a/src/routes/Publish/Progress.module.scss b/src/routes/Publish/Progress.module.scss new file mode 100644 index 0000000..6e89805 --- /dev/null +++ b/src/routes/Publish/Progress.module.scss @@ -0,0 +1,76 @@ +@import '../../styles/variables'; + +.progress { + display: block; + padding: 0; + position: relative; + margin-top: $spacer * 1.5; + margin-bottom: $spacer; +} + +.item { + display: inline-block; + width: 25%; + text-align: center; + color: $brand-grey-light; + + &:before { + content: ''; + display: block; + width: 60%; + height: .1rem; + background: $brand-grey-lighter; + position: absolute; + top: 20%; + left: -30%; + } + + &:first-child { + &:before { + display: none; + } + } + + span { + display: block; + } +} + +.active { + composes: item; + font-family: $font-family-button; + font-weight: $font-weight-bold; + color: $brand-black; + + .number { + background: $brand-black; + } + + &:before { + background: $green; + } +} + +.completed { + composes: active; + + .number { + background: $green; + } +} + +.label { + margin-top: $spacer / 8; + font-size: $font-size-small; +} + +.number { + width: 1.6rem; + height: 1.6rem; + margin: auto; + border-radius: 50%; + background: $brand-grey-light; + color: $brand-white; + font-family: $font-family-button; + font-weight: $font-weight-bold; +} diff --git a/src/routes/Publish/Progress.tsx b/src/routes/Publish/Progress.tsx index 91e6cb3..5880dec 100644 --- a/src/routes/Publish/Progress.tsx +++ b/src/routes/Publish/Progress.tsx @@ -1,25 +1,31 @@ import React from 'react' +import styles from './Progress.module.scss' const Progress = ({ currentStep, - totalSteps, steps }: { currentStep: number - totalSteps: number steps: any[] }) => { return ( - + ) } diff --git a/src/routes/Publish/Step.module.scss b/src/routes/Publish/Step.module.scss index 0ee678a..97d8555 100644 --- a/src/routes/Publish/Step.module.scss +++ b/src/routes/Publish/Step.module.scss @@ -2,7 +2,6 @@ .header { margin-bottom: $spacer * 1.5; - border-bottom: .1rem solid $brand-grey-lighter; } .title { @@ -19,7 +18,7 @@ justify-content: space-between; border-top: .1rem solid $brand-grey-lighter; padding-top: $spacer; - margin-top: $spacer * 2; + margin-top: $spacer; button:last-child { min-width: 12rem; diff --git a/src/routes/Publish/Step.tsx b/src/routes/Publish/Step.tsx index 6d2e88f..c8236ee 100644 --- a/src/routes/Publish/Step.tsx +++ b/src/routes/Publish/Step.tsx @@ -1,8 +1,9 @@ -import React, { PureComponent, FormEvent } from 'react' +import React, { PureComponent } from 'react' import Input from '../../components/atoms/Form/Input' import Label from '../../components/atoms/Form/Label' import Row from '../../components/atoms/Form/Row' import Button from '../../components/atoms/Button' +import Web3message from '../../components/Web3message' import { User } from '../../context/User' import Files from './Files/' import styles from './Step.module.scss' @@ -20,6 +21,7 @@ interface StepProps { next: any prev: any totalSteps: number + component?: string } export default class Step extends PureComponent { @@ -56,13 +58,16 @@ export default class Step extends PureComponent { inputToArrayChange, files, state, - totalSteps + totalSteps, + component } = this.props if (currentStep !== index + 1) { return null } + const lastStep = currentStep === totalSteps + return ( <>
@@ -112,11 +117,13 @@ export default class Step extends PureComponent { ) })} + {lastStep && } +
{this.previousButton()} {this.nextButton()} - {currentStep === totalSteps && ( + {lastStep && ( {states => states.isLogged ? ( diff --git a/src/routes/Publish/index.tsx b/src/routes/Publish/index.tsx index 298f9f0..ff5600a 100644 --- a/src/routes/Publish/index.tsx +++ b/src/routes/Publish/index.tsx @@ -3,7 +3,6 @@ import { Logger } from '@oceanprotocol/squid' import Route from '../../components/templates/Route' import Form from '../../components/atoms/Form/Form' import AssetModel from '../../models/AssetModel' -import Web3message from '../../components/Web3message' import Step from './Step' import Progress from './Progress' @@ -159,9 +158,10 @@ class Publish extends Component<{}, PublishState> { public render() { return ( - - - + {this.state.isPublishing ? ( this.publishingState() ) : this.state.publishingError ? ( @@ -173,7 +173,6 @@ class Publish extends Component<{}, PublishState> {
@@ -192,6 +191,7 @@ class Publish extends Component<{}, PublishState> { next={this.next} prev={this.prev} totalSteps={form.steps.length} + component={step.component} /> ))}