Merge pull request #59 from oceanprotocol/feature/style-tweaks
Style tweaks
This commit is contained in:
GitHub
commit
a1ab653ffb
|
|
@ -11,7 +11,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@oceanprotocol/art": "^2.2.0",
|
||||
"@oceanprotocol/squid": "^0.5.0",
|
||||
"@oceanprotocol/squid": "^0.5.1",
|
||||
"@oceanprotocol/typographies": "^0.1.0",
|
||||
"classnames": "^2.2.6",
|
||||
"filesize": "^4.1.2",
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ interface AppState {
|
|||
web3: Web3
|
||||
ocean: {}
|
||||
startLogin: () => void
|
||||
message: string
|
||||
}
|
||||
|
||||
class App extends Component<{}, AppState> {
|
||||
|
|
@ -94,7 +95,8 @@ class App extends Component<{}, AppState> {
|
|||
account: '',
|
||||
ocean: {},
|
||||
startLogin: this.startLogin,
|
||||
requestFromFaucet: this.requestFromFaucet
|
||||
requestFromFaucet: this.requestFromFaucet,
|
||||
message: 'Connecting to Ocean...'
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
|
|
@ -185,7 +187,7 @@ class App extends Component<{}, AppState> {
|
|||
<main className={styles.main}>
|
||||
{this.state.isLoading ? (
|
||||
<div className={styles.loader}>
|
||||
<Spinner message="Connecting to Ocean..." />
|
||||
<Spinner message={this.state.message} />
|
||||
</div>
|
||||
) : (
|
||||
<Routes />
|
||||
|
|
|
|||
|
|
@ -66,6 +66,7 @@
|
|||
padding: 0;
|
||||
color: $brand-pink;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-base;
|
||||
font-family: inherit;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import React, { PureComponent } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import cx from 'classnames'
|
||||
import styles from './Button.module.scss'
|
||||
|
||||
|
|
@ -10,6 +11,7 @@ interface ButtonProps {
|
|||
href?: string
|
||||
onClick?: any
|
||||
disabled?: boolean
|
||||
to?: string
|
||||
}
|
||||
|
||||
export default class Button extends PureComponent<ButtonProps, any> {
|
||||
|
|
@ -21,6 +23,7 @@ export default class Button extends PureComponent<ButtonProps, any> {
|
|||
href,
|
||||
children,
|
||||
className,
|
||||
to,
|
||||
...props
|
||||
} = this.props
|
||||
|
||||
|
|
@ -32,11 +35,23 @@ export default class Button extends PureComponent<ButtonProps, any> {
|
|||
classes = styles.button
|
||||
}
|
||||
|
||||
return href ? (
|
||||
<a href={href} className={cx(classes, className)} {...props}>
|
||||
{children}
|
||||
</a>
|
||||
) : (
|
||||
if (to) {
|
||||
return (
|
||||
<Link to={to} className={cx(classes, className)} {...props}>
|
||||
{children}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
if (href) {
|
||||
return (
|
||||
<a href={href} className={cx(classes, className)} {...props}>
|
||||
{children}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<button className={cx(classes, className)} {...props}>
|
||||
{children}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -12,8 +12,11 @@ const AssetLink = ({ asset, list }: { asset: any; list?: boolean }) => {
|
|||
<article className={styles.assetList}>
|
||||
<Link to={`/asset/${asset.id}`}>
|
||||
<h1>{base.name}</h1>
|
||||
<div className={styles.date} title={base.dateCreated}>
|
||||
{moment(base.dateCreated, 'YYYYMMDD').fromNow()}
|
||||
<div
|
||||
className={styles.date}
|
||||
title={`Published on ${base.datePublished}`}
|
||||
>
|
||||
{moment(base.datePublished, 'YYYYMMDD').fromNow()}
|
||||
</div>
|
||||
</Link>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ export default class AssetsUser extends PureComponent<
|
|||
<div className={styles.assetsUser}>
|
||||
{this.props.recent && (
|
||||
<h2 className={styles.subTitle}>
|
||||
Your Latest Data Sets
|
||||
Your Latest Published Data Sets
|
||||
</h2>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,28 @@
|
|||
import React from 'react'
|
||||
import { NavLink } from 'react-router-dom'
|
||||
import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
|
||||
import { User } from '../../context/User'
|
||||
import AccountStatus from '../molecules/AccountStatus'
|
||||
import styles from './Header.module.scss'
|
||||
|
||||
import menu from '../../data/menu.json'
|
||||
import meta from '../../data/meta.json'
|
||||
|
||||
const MenuItem = ({ item, isWeb3 }: { item: any; isWeb3: boolean }) => {
|
||||
if (item.web3 && !isWeb3) return null
|
||||
|
||||
return (
|
||||
<NavLink
|
||||
to={item.link}
|
||||
className={styles.link}
|
||||
activeClassName={styles.linkActive}
|
||||
exact
|
||||
>
|
||||
{item.title}
|
||||
</NavLink>
|
||||
)
|
||||
}
|
||||
|
||||
const Header = () => (
|
||||
<header className={styles.header}>
|
||||
<div className={styles.headerContent}>
|
||||
|
|
@ -16,17 +32,17 @@ const Header = () => (
|
|||
</NavLink>
|
||||
|
||||
<nav className={styles.headerMenu}>
|
||||
{menu.map(item => (
|
||||
<NavLink
|
||||
key={item.title}
|
||||
to={item.link}
|
||||
className={styles.link}
|
||||
activeClassName={styles.linkActive}
|
||||
exact
|
||||
>
|
||||
{item.title}
|
||||
</NavLink>
|
||||
))}
|
||||
<User.Consumer>
|
||||
{states =>
|
||||
menu.map(item => (
|
||||
<MenuItem
|
||||
key={item.title}
|
||||
item={item}
|
||||
isWeb3={states.isWeb3}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</User.Consumer>
|
||||
</nav>
|
||||
<AccountStatus className={styles.accountStatus} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,21 @@
|
|||
[
|
||||
{
|
||||
"title": "Publish",
|
||||
"link": "/publish"
|
||||
"link": "/publish",
|
||||
"web3": true
|
||||
},
|
||||
{
|
||||
"title": "History",
|
||||
"link": "/history"
|
||||
"link": "/history",
|
||||
"web3": true
|
||||
},
|
||||
{
|
||||
"title": "Faucet",
|
||||
"link": "/faucet"
|
||||
"link": "/faucet",
|
||||
"web3": true
|
||||
},
|
||||
{
|
||||
"title": "About",
|
||||
"link": "/about"
|
||||
},
|
||||
{
|
||||
"title": "Styleguide",
|
||||
"link": "/styleguide"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -10,6 +10,13 @@ interface AssetDetailsProps {
|
|||
}
|
||||
|
||||
export default class AssetDetails extends PureComponent<AssetDetailsProps> {
|
||||
private datafilesLine = (files: any) => {
|
||||
if (files.length === 1) {
|
||||
return <span>{files.length} data file</span>
|
||||
}
|
||||
return <span>{files.length} data files</span>
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { metadata, ddo } = this.props
|
||||
const { base } = metadata
|
||||
|
|
@ -32,18 +39,14 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
|
|||
/>
|
||||
</span>
|
||||
|
||||
{base.categories ? (
|
||||
{base.categories && (
|
||||
// TODO: Make this link to search for respective category
|
||||
<Link to={`/search?q=${base.categories[0]}`}>
|
||||
{base.categories[0]}
|
||||
</Link>
|
||||
) : (
|
||||
<Link to={'/search?q='}>Fake Category</Link>
|
||||
)}
|
||||
|
||||
{base.files && (
|
||||
<span>{base.files.length} data files</span>
|
||||
)}
|
||||
{base.files && this.datafilesLine(base.files)}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
|
@ -77,9 +80,9 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
|
|||
ddo={ddo}
|
||||
/>
|
||||
|
||||
<pre>
|
||||
{/* <pre>
|
||||
<code>{JSON.stringify(metadata, null, 2)}</code>
|
||||
</pre>
|
||||
</pre> */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
@import '../../styles/variables';
|
||||
|
||||
.buttonMain {
|
||||
margin: auto;
|
||||
margin-bottom: $spacer / 2;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.error {
|
||||
text-align: center;
|
||||
color: $red;
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
.fileWrap {
|
||||
margin-left: $spacer / 4;
|
||||
margin-right: $spacer / 4;
|
||||
margin-bottom: $spacer * $line-height;
|
||||
flex: 1 1 100%;
|
||||
|
||||
@media (min-width: $break-point--small) {
|
||||
flex-basis: calc(100% / 3 - #{$spacer} / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.file {
|
||||
display: inline-block;
|
||||
background: $brand-grey;
|
||||
padding: $spacer $spacer / 2;
|
||||
margin-bottom: $spacer / 2;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
min-height: 100px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 1rem solid $body-background;
|
||||
border-left: 1rem solid transparent;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $brand-white;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// move spinner a bit up
|
||||
+ div {
|
||||
margin-top: $spacer / 2;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
import React, { PureComponent } from 'react'
|
||||
import { Logger } from '@oceanprotocol/squid'
|
||||
import filesize from 'filesize'
|
||||
import { User } from '../../context/User'
|
||||
import Button from '../../components/atoms/Button'
|
||||
import Spinner from '../../components/atoms/Spinner'
|
||||
import styles from './AssetFile.module.scss'
|
||||
|
||||
interface AssetFileProps {
|
||||
file: any
|
||||
ddo: any
|
||||
}
|
||||
|
||||
interface AssetFileState {
|
||||
isLoading: boolean
|
||||
error: string
|
||||
message: string
|
||||
}
|
||||
|
||||
export default class AssetFile extends PureComponent<
|
||||
AssetFileProps,
|
||||
AssetFileState
|
||||
> {
|
||||
public state = {
|
||||
isLoading: false,
|
||||
error: '',
|
||||
message: 'Decrypting file, please sign...'
|
||||
}
|
||||
|
||||
private resetState = () => this.setState({ isLoading: true, error: '' })
|
||||
|
||||
private purchaseAsset = async (ddo: any, index: number) => {
|
||||
this.resetState()
|
||||
|
||||
const { ocean } = this.context
|
||||
const accounts = await ocean.accounts.list()
|
||||
|
||||
try {
|
||||
const service = ddo.findServiceByType('Access')
|
||||
const agreementId = await ocean.assets.order(
|
||||
ddo.id,
|
||||
service.serviceDefinitionId,
|
||||
accounts[0]
|
||||
)
|
||||
|
||||
const path = await ocean.assets.consume(
|
||||
agreementId,
|
||||
ddo.id,
|
||||
service.serviceDefinitionId,
|
||||
accounts[0],
|
||||
'',
|
||||
index
|
||||
)
|
||||
Logger.log('path', path)
|
||||
|
||||
this.setState({ isLoading: false })
|
||||
} catch (error) {
|
||||
Logger.log('error', error)
|
||||
this.setState({ isLoading: false, error: error.message })
|
||||
}
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { ddo, file } = this.props
|
||||
|
||||
return (
|
||||
<div className={styles.fileWrap}>
|
||||
<ul key={file.index} className={styles.file}>
|
||||
<li>
|
||||
{file.contentType && file.contentType.split('/')[1]}
|
||||
</li>
|
||||
<li>
|
||||
{file.contentLength && filesize(file.contentLength)}
|
||||
</li>
|
||||
{/* <li>{file.encoding}</li> */}
|
||||
{/* <li>{file.compression}</li> */}
|
||||
</ul>
|
||||
|
||||
{this.state.isLoading ? (
|
||||
<Spinner message={this.state.message} />
|
||||
) : (
|
||||
<Button
|
||||
primary
|
||||
className={styles.buttonMain}
|
||||
onClick={() => this.purchaseAsset(ddo, file.index)}
|
||||
>
|
||||
Get file
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{this.state.error !== '' && (
|
||||
<div className={styles.error}>{this.state.error}</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
AssetFile.contextType = User
|
||||
|
|
@ -1,36 +1,8 @@
|
|||
@import '../../styles/variables';
|
||||
|
||||
.buttonMain {
|
||||
margin: auto;
|
||||
margin-bottom: $spacer / 2;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.error {
|
||||
text-align: center;
|
||||
color: $red;
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
.files {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.file {
|
||||
display: inline-block;
|
||||
border: .1rem solid $brand-grey-light;
|
||||
padding: $spacer $spacer / 2;
|
||||
text-align: left;
|
||||
margin-left: $spacer / 4;
|
||||
margin-right: $spacer / 4;
|
||||
|
||||
li {
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $brand-grey-light;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +1,11 @@
|
|||
import React, { PureComponent } from 'react'
|
||||
import { Logger } from '@oceanprotocol/squid'
|
||||
import filesize from 'filesize'
|
||||
import { User } from '../../context/User'
|
||||
import Button from '../../components/atoms/Button'
|
||||
import Spinner from '../../components/atoms/Spinner'
|
||||
import AssetFile from './AssetFile'
|
||||
import styles from './AssetFilesDetails.module.scss'
|
||||
|
||||
interface AssetFilesDetailsProps {
|
||||
export default class AssetFilesDetails extends PureComponent<{
|
||||
files: any[]
|
||||
ddo: any
|
||||
}
|
||||
|
||||
export default class AssetFilesDetails extends PureComponent<
|
||||
AssetFilesDetailsProps
|
||||
> {
|
||||
public state = { isLoading: false, error: null }
|
||||
|
||||
private purchaseAsset = async (ddo: any) => {
|
||||
this.setState({ isLoading: true, error: null })
|
||||
|
||||
const { ocean } = this.context
|
||||
const accounts = await ocean.accounts.list()
|
||||
|
||||
try {
|
||||
const service = ddo.findServiceByType('Access')
|
||||
const agreementId = await ocean.assets.order(
|
||||
ddo.id,
|
||||
service.serviceDefinitionId,
|
||||
accounts[0]
|
||||
)
|
||||
|
||||
const path = await ocean.assets.consume(
|
||||
agreementId,
|
||||
ddo.id,
|
||||
service.serviceDefinitionId,
|
||||
accounts[0],
|
||||
''
|
||||
)
|
||||
Logger.log('path', path)
|
||||
|
||||
this.setState({ isLoading: false })
|
||||
} catch (error) {
|
||||
Logger.log('error', error)
|
||||
this.setState({ isLoading: false, error: error.message })
|
||||
}
|
||||
}
|
||||
|
||||
}> {
|
||||
public render() {
|
||||
const { files, ddo } = this.props
|
||||
|
||||
|
|
@ -53,41 +13,12 @@ export default class AssetFilesDetails extends PureComponent<
|
|||
<>
|
||||
<div className={styles.files}>
|
||||
{files.map(file => (
|
||||
<ul key={file.index} className={styles.file}>
|
||||
<li>
|
||||
{file.contentType &&
|
||||
file.contentType.split('/')[1]}
|
||||
</li>
|
||||
<li>
|
||||
{file.contentLength &&
|
||||
filesize(file.contentLength)}
|
||||
</li>
|
||||
{/* <li>{file.encoding}</li> */}
|
||||
{/* <li>{file.compression}</li> */}
|
||||
</ul>
|
||||
<AssetFile key={file.index} ddo={ddo} file={file} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{this.state.isLoading ? (
|
||||
<Spinner message="Decrypting files, please sign with your wallet..." />
|
||||
) : (
|
||||
<Button
|
||||
primary
|
||||
className={styles.buttonMain}
|
||||
onClick={() => this.purchaseAsset(ddo)}
|
||||
>
|
||||
Get asset files
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{this.state.error && (
|
||||
<div className={styles.error}>{this.state.error}</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div>No files attached.</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
AssetFilesDetails.contextType = User
|
||||
|
|
|
|||
|
|
@ -3,3 +3,35 @@
|
|||
.message {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
.success {
|
||||
composes: message;
|
||||
background: $green;
|
||||
padding: $spacer / 1.5;
|
||||
border-radius: $border-radius;
|
||||
color: $brand-white;
|
||||
font-weight: $font-weight-bold;
|
||||
text-align: center;
|
||||
|
||||
&,
|
||||
a,
|
||||
button {
|
||||
color: $brand-white;
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
transition: color .2s ease-out;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $brand-pink;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
margin-right: $spacer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React, { PureComponent } from 'react'
|
||||
import Web3message from '../../components/organisms/Web3message'
|
||||
import Spinner from '../../components/atoms/Spinner'
|
||||
import Button from '../../components/atoms/Button'
|
||||
import styles from './StepRegisterContent.module.scss'
|
||||
|
||||
interface StepRegisterContentProps {
|
||||
|
|
@ -26,11 +27,14 @@ export default class StepRegisterContent extends PureComponent<
|
|||
)
|
||||
|
||||
public publishedState = () => (
|
||||
<div className={styles.message}>
|
||||
Your asset is published! See it{' '}
|
||||
<a href={'/asset/' + this.props.state.publishedDid}>here</a>, submit
|
||||
another asset by clicking{' '}
|
||||
<a onClick={() => this.props.toStart()}>here</a>
|
||||
<div className={styles.success}>
|
||||
<p>Your asset is published!</p>
|
||||
<Button link to={'/asset/' + this.props.state.publishedDid}>
|
||||
See published asset
|
||||
</Button>
|
||||
<Button link onClick={() => this.props.toStart()}>
|
||||
Publish another asset
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
|
||||
|
|
@ -38,7 +42,6 @@ export default class StepRegisterContent extends PureComponent<
|
|||
return (
|
||||
<>
|
||||
<Web3message />
|
||||
|
||||
{this.props.state.isPublishing ? (
|
||||
this.publishingState()
|
||||
) : this.props.state.publishingError ? (
|
||||
|
|
|
|||
|
|
@ -18,6 +18,8 @@ $yellow: #eac146;
|
|||
|
||||
$brand-gradient: linear-gradient(to right bottom, $brand-purple, $brand-pink);
|
||||
|
||||
$body-background: darken($brand-white, 1%);
|
||||
|
||||
// Fonts
|
||||
$font-family-base: 'Sharp Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
||||
Helvetica, Arial, sans-serif;
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ body {
|
|||
font-family: $font-family-base;
|
||||
font-weight: $font-weight-base;
|
||||
line-height: $line-height;
|
||||
background: darken($brand-white, 1%);
|
||||
background: $body-background;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
|
|
|||
Loading…
Reference in New Issue