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

files UI fixes

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-02-13 11:10:11 +01:00
parent dd15dba8c1
commit 03af2e217c
Signed by: m
GPG Key ID: 606EEEF3C479A91F
8 changed files with 91 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/data/form-publish.json
View File

@ -7,7 +7,14 @@
"placeholder": "i.e. My cool data set",
"type": "text",
"required": true,
"help": "Help me"
"help": "Help me Obiwan"
},
"files": {
"label": "Files",
"placeholder": "i.e. https://file.com/file.json",
"type": "text",
"required": true,
"help": "Provide one or multiple links to your data files."
},
"description": {
"label": "Description",
@ -16,13 +23,6 @@
"required": true,
"rows": 5
},
"files": {
"label": "Files",
"placeholder": "i.e. https://file.com/file.json",
"type": "text",
"required": true,
"help": "Provide one or multiple links to your data asset(s)."
},
"type": {
"label": "Type",
"type": "select",

24
src/routes/Publish/Files/ItemForm.module.scss
View File

@ -2,32 +2,10 @@
.itemForm {
margin-top: $spacer / 2;
margin-bottom: $spacer / 1.5;
padding-left: $spacer / 2;
label,
input,
select,
textarea,
input::placeholder,
button {
font-size: $font-size-small;
}
label {
margin-bottom: $spacer / 8;
}
input,
select,
button {
height: 37px;
min-height: 37px;
}
button {
padding: 0 $spacer / 2;
margin-top: $spacer / 8;
margin-top: -($spacer * 2);
}
}

4
src/routes/Publish/Files/ItemForm.tsx
View File

@ -59,7 +59,7 @@ export default class ItemForm extends PureComponent<
const { url, hasError, noUrl } = this.state
return (
<fieldset className={styles.itemForm}>
<div className={styles.itemForm}>
<Input
label="Url"
name="url"
@ -84,7 +84,7 @@ export default class ItemForm extends PureComponent<
Please enter a valid URL.
</span>
)}
</fieldset>
</div>
)
}
}

8
src/routes/Publish/Files/index.module.scss
View File

@ -11,12 +11,18 @@
margin-bottom: $spacer / 2;
font-family: $font-family-button;
color: $brand-grey-light;
border-bottom: 1px solid $brand-grey-lighter;
li {
border-bottom: 1px solid $brand-grey-lighter;
border-top: 1px solid $brand-grey-lighter;
padding: $spacer / 3 $spacer / 2 $spacer / 3 $spacer / 2;
position: relative;
display: block;
margin: 0;
&:before {
display: none;
}
}
a {

45
src/routes/Publish/Files/index.tsx
View File

@ -7,7 +7,7 @@ import Item from './Item'
import styles from './index.module.scss'
interface FilesProps {
files: any
files: string[]
placeholder: string
help: string
// resetForm: any
@ -18,7 +18,9 @@ interface FilesStates {
}
export default class Files extends PureComponent<FilesProps, FilesStates> {
public state: FilesStates = { isFormShown: false }
public state: FilesStates = {
isFormShown: false
}
public toggleForm = (e: Event) => {
e.preventDefault()
@ -33,37 +35,36 @@ export default class Files extends PureComponent<FilesProps, FilesStates> {
}
public removeItem = (index: number) => {
this.props.files.remove(index)
this.props.files.splice(index, 1)
}
public render() {
const { isFormShown } = this.state
const { files, help, placeholder } = this.props
return (
<>
<Help>{this.props.help}</Help>
<Help>{help}</Help>
<div className={styles.newItems}>
{this.props.files.length > 1 && (
{files.length > 0 && (
<TransitionGroup
component="ul"
className={styles.itemsList}
>
{this.props.files.map(
(item: string, index: number) => (
<CSSTransition
key={index}
timeout={400}
classNames="fade"
>
<Item
item={item}
removeItem={() =>
this.removeItem(index)
}
/>
</CSSTransition>
)
)}
{files.map((item: string, index: number) => (
<CSSTransition
key={index}
timeout={400}
classNames="fade"
>
<Item
item={item}
removeItem={() =>
this.removeItem(index)
}
/>
</CSSTransition>
))}
</TransitionGroup>
)}
@ -79,7 +80,7 @@ export default class Files extends PureComponent<FilesProps, FilesStates> {
onExit={() => this.setState({ isFormShown: false })}
>
<ItemForm
placeholder={this.props.placeholder}
placeholder={placeholder}
addItem={this.addItem}
/>
</CSSTransition>

7
src/routes/Publish/index.tsx
View File

@ -60,6 +60,11 @@ class Publish extends Component<{}, PublishState> {
}
if (key === 'files') {
const filesArray =
this.state.files[0] === ''
? this.state.files.splice(1, 1)
: this.state.files
return (
<Row key={key}>
<Label htmlFor={key} required>
@ -68,7 +73,7 @@ class Publish extends Component<{}, PublishState> {
<Files
placeholder={value.placeholder}
help={value.help}
files={this.state.files}
files={filesArray}
/>
</Row>
)

43
src/styles/_animations.scss Normal file
View File

@ -0,0 +1,43 @@
.fade {
&-enter {
opacity: .01;
}
&-enter-active {
opacity: 1;
transition: opacity 400ms ease-out;
}
&-exit {
opacity: 1;
}
&-exit-active {
opacity: .01;
transition: opacity 400ms ease-in;
}
}
.grow {
&-enter {
opacity: .01;
max-height: 0;
}
&-enter-active {
opacity: 1;
max-height: 500px;
transition: 200ms ease-out;
}
&-exit {
opacity: 1;
max-height: 500px;
}
&-exit-active {
opacity: .01;
max-height: 0;
transition: 200ms ease-in;
}
}

1
src/styles/global.scss
View File

@ -1,6 +1,7 @@
// stylelint-disable selector-no-qualifying-type, declaration-no-important, selector-no-vendor-prefix
@import 'variables';
@import 'animations';
*,
*:before,