1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00

full metadata preview

This commit is contained in:
Matthias Kretschmann 2020-07-17 16:44:24 +02:00
parent 82c94c5b94
commit 5bac951c66
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 113 additions and 20 deletions

View File

@ -11,6 +11,13 @@
"help": "Enter a concise title.", "help": "Enter a concise title.",
"required": true "required": true
}, },
{
"name": "description",
"label": "Description",
"help": "Add a thorough description with as much detail as possible. You can use [Markdown](https://daringfireball.net/projects/markdown/basics).",
"type": "textarea",
"required": true
},
{ {
"name": "files", "name": "files",
"label": "Files", "label": "Files",
@ -19,13 +26,6 @@
"type": "files", "type": "files",
"required": true "required": true
}, },
{
"name": "description",
"label": "Description",
"help": "Add a thorough description with as much detail as possible.",
"type": "textarea",
"required": true
},
{ {
"name": "access", "name": "access",
"label": "Access Type", "label": "Access Type",

View File

@ -1,4 +1,5 @@
.file { .file {
font-size: var(--font-size-small);
background: var(--color-secondary); background: var(--color-secondary);
background-size: 100%; background-size: 100%;
padding: var(--spacer) calc(var(--spacer) / 2); padding: var(--spacer) calc(var(--spacer) / 2);
@ -10,7 +11,6 @@
} }
.file li { .file li {
font-size: var(--font-size-small);
color: var(--brand-white); color: var(--brand-white);
} }
@ -18,3 +18,9 @@
font-size: var(--font-size-mini); font-size: var(--font-size-mini);
opacity: 0.75; opacity: 0.75;
} }
.file.small {
font-size: var(--font-size-mini);
height: 5.75rem;
width: 4.5rem;
}

View File

@ -1,14 +1,31 @@
import React, { ReactElement } from 'react' import React, { ReactElement } from 'react'
import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File' import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File'
import filesize from 'filesize' import filesize from 'filesize'
import classNames from 'classnames/bind'
import cleanupContentType from '../../utils/cleanupContentType' import cleanupContentType from '../../utils/cleanupContentType'
import styles from './File.module.css' import styles from './File.module.css'
export default function File({ file }: { file: FileMetadata }): ReactElement { const cx = classNames.bind(styles)
export default function File({
file,
className,
small
}: {
file: FileMetadata
className?: string
small?: boolean
}): ReactElement {
if (!file) return null if (!file) return null
const styleClasses = cx({
file: true,
small: small,
[className]: className
})
return ( return (
<ul className={styles.file}> <ul className={styleClasses}>
{file.contentType || file.contentLength ? ( {file.contentType || file.contentLength ? (
<> <>
<li>{cleanupContentType(file.contentType)}</li> <li>{cleanupContentType(file.contentType)}</li>

View File

@ -1,8 +1,9 @@
import React from 'react' import React, { ReactElement } from 'react'
import styles from './Help.module.css' import styles from './Help.module.css'
import Markdown from '../Markdown'
const FormHelp = ({ children }: { children: string }) => ( const FormHelp = ({ children }: { children: string }): ReactElement => (
<div className={styles.help}>{children}</div> <Markdown className={styles.help} text={children} />
) )
export default FormHelp export default FormHelp

View File

@ -9,7 +9,7 @@ export default function FileInfo({
removeItem removeItem
}: { }: {
file: FileMetadata file: FileMetadata
removeItem(): void removeItem?(): void
}): ReactElement { }): ReactElement {
return ( return (
<div className={styles.info}> <div className={styles.info}>
@ -19,9 +19,11 @@ export default function FileInfo({
{file.contentLength && <li>{prettySize(+file.contentLength)}</li>} {file.contentLength && <li>{prettySize(+file.contentLength)}</li>}
{file.contentType && <li>{cleanupContentType(file.contentType)}</li>} {file.contentType && <li>{cleanupContentType(file.contentType)}</li>}
</ul> </ul>
{removeItem && (
<button className={styles.removeButton} onClick={() => removeItem()}> <button className={styles.removeButton} onClick={() => removeItem()}>
&times; &times;
</button> </button>
)}
</div> </div>
) )
} }

View File

@ -12,6 +12,37 @@
.sticky { .sticky {
position: sticky; position: sticky;
top: var(--spacer); top: calc(var(--spacer) / 2);
} }
} }
.preview {
font-size: var(--font-size-small);
margin-bottom: var(--spacer);
}
.preview header {
margin-bottom: var(--spacer);
}
.metaFull {
display: grid;
gap: var(--spacer);
grid-template-columns: 1fr 1fr;
}
.preview h2 {
margin-bottom: calc(var(--spacer) / 2);
}
.preview h3 {
margin-bottom: calc(var(--spacer) / 12);
}
.preview [class*='MetaItem-module--metaItem'] {
margin-bottom: calc(var(--spacer) / 2);
}
.file {
margin-bottom: calc(var(--spacer) / 2);
}

View File

@ -1,6 +1,7 @@
import React, { ReactElement } from 'react' import React, { ReactElement } from 'react'
import { useNavigate } from '@reach/router' import { useNavigate } from '@reach/router'
import PublishForm from './PublishForm' import PublishForm from './PublishForm'
import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File'
import styles from './index.module.css' import styles from './index.module.css'
import Web3Feedback from '../../molecules/Wallet/Feedback' import Web3Feedback from '../../molecules/Wallet/Feedback'
import { FormContent } from '../../../@types/Form' import { FormContent } from '../../../@types/Form'
@ -11,6 +12,11 @@ import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
import { MetadataPublishForm } from '../../../@types/Metadata' import { MetadataPublishForm } from '../../../@types/Metadata'
import { transformPublishFormToMetadata } from './utils' import { transformPublishFormToMetadata } from './utils'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import Markdown from '../../atoms/Markdown'
import Tags from '../../atoms/Tags'
import MetaItem from '../../organisms/AssetContent/MetaItem'
import FileInfo from '../../molecules/FormFields/FilesInput/Info'
import File from '../../atoms/File'
export default function PublishPage({ export default function PublishPage({
content content
@ -78,11 +84,41 @@ export default function PublishPage({
<PublishForm content={content.form} /> <PublishForm content={content.form} />
<aside> <aside>
<div className={styles.sticky}> <div className={styles.sticky}>
<Web3Feedback />
<div className={styles.preview}> <div className={styles.preview}>
<header>
<h2>{values.name}</h2> <h2>{values.name}</h2>
{values.description && (
<Markdown text={values.description} />
)}
{values.files && values.files.length && (
<File
file={values.files[0] as FileMetadata}
className={styles.file}
small
/>
)}
{values.tags && <Tags items={values.tags.split(',')} />}
</header>
<div className={styles.metaFull}>
{Object.entries(values)
.filter(
([key, value]) =>
!(
key.includes('name') ||
key.includes('description') ||
key.includes('tags') ||
key.includes('files') ||
key.includes('termsAndConditions')
)
)
.map(([key, value]) => (
<MetaItem key={key} title={key} content={value} />
))}
</div> </div>
</div> </div>
<Web3Feedback />
</div>
</aside> </aside>
</> </>
)} )}