diff --git a/src/components/pages/Publish/Preview.module.css b/src/components/pages/Publish/Preview.module.css index 139c30509..b95070c71 100644 --- a/src/components/pages/Publish/Preview.module.css +++ b/src/components/pages/Publish/Preview.module.css @@ -28,6 +28,16 @@ margin-bottom: calc(var(--spacer) / 12); } +.description { + position: relative; +} + +.toggle { + position: absolute; + bottom: 0.15rem; + right: 0; +} + .asset { display: grid; grid-template-columns: 1fr 4fr; diff --git a/src/components/pages/Publish/Preview.tsx b/src/components/pages/Publish/Preview.tsx index ac1f3580b..39e561444 100644 --- a/src/components/pages/Publish/Preview.tsx +++ b/src/components/pages/Publish/Preview.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement } from 'react' +import React, { FormEvent, ReactElement, useState } from 'react' import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File' import Markdown from '../../atoms/Markdown' import Tags from '../../atoms/Tags' @@ -15,12 +15,42 @@ export default function Preview({ }: { values: Partial }): ReactElement { + const [fullDescription, setFullDescription] = useState(false) + + const textLimit = 500 // string.length + const description = + fullDescription === true + ? values.description + : `${values.description.substring(0, textLimit)}${ + values.description.length > textLimit ? `...` : '' + }` + + function handleDescriptionToggle(e: FormEvent) { + e.preventDefault() + setFullDescription(!fullDescription) + } + return (

Preview

{values.name &&

{values.name}

} - {values.description && } + + {values.description && ( +
+ + {values.description.length > textLimit && ( + + )} +
+ )}
{values.files?.length > 0 && typeof values.files !== 'string' && (