Commit 87837d36 authored by Maxim Babichev's avatar Maxim Babichev
Browse files

markup fixes

parent 84838d39
Pipeline #3470 passed with stages
in 4 minutes and 13 seconds
......@@ -8,6 +8,9 @@ const styles = (theme) => ({
root: {
color: '#000',
},
select: {
minWidth: '240px',
},
});
interface ISelectPartnerComponentProps extends React.ClassAttributes<any> {
......@@ -55,7 +58,7 @@ class SelectPartnerComponent extends React.Component<ISelectPartnerComponentProp
return (
<div>
<FormControl>
<FormControl className={ classes.select }>
<InputLabel htmlFor={ selectId }>{ label }</InputLabel>
<Select
native
......
......@@ -39,7 +39,7 @@ const styleSheet: any = (theme) => ({
width: '100%',
display: 'flex',
flexWrap: 'wrap',
marginTop: '20px',
margin: '20px 0 0 0',
},
fileLabel: {
width: '100%',
......@@ -47,6 +47,25 @@ const styleSheet: any = (theme) => ({
flexWrap: 'wrap',
position: 'relative',
},
field: {
flexBasis: '90%',
maxWidth: '90%',
[theme.breakpoints.down('lg')]: {
maxWidth: '80%',
},
[theme.breakpoints.down('md')]: {
maxWidth: '80%',
},
},
button: {
flexBasis: '10%',
maxWidth: '10%',
textAlign: 'center',
[theme.breakpoints.down('lg')]: {
flexBasis: '20%',
maxWidth: '20%',
},
},
/* tslint:enable */
placeholder: {
color: 'rgba(0, 0, 0, 0.87)',
......@@ -64,9 +83,8 @@ const styleSheet: any = (theme) => ({
left: 0,
transform: 'translate(-6px, 0px) scale(0.75)',
},
button: {
margin: theme.spacing.unit,
width: '100%',
uploadField: {
padding: '0 !important',
},
});
......@@ -105,16 +123,16 @@ class UploadSection extends React.Component<IUploadSectionProps, any> {
return (
<Grid container className={ classes.root }>
<Grid item xs={ 12 }>
<Grid item xs={ 12 } className={ classes.uploadField }>
<input id="file" type="file" onChange={ this.onChange }/>
<label htmlFor="file" className={ classes.fileLabel }>
<Grid item xs={ 12 } md={ 11 }>
<Grid item xs={ 12 } md={ 11 } className={ classes.field }>
<FormLabel className={ classes.uploadLabel } >Upload*</FormLabel>
<FormLabel className={ classes.placeholder } >From file ...</FormLabel>
<Divider className={ classes.divider } />
</Grid>
<Grid item xs={ 12 } md={ 1 }>
<Button raised component="span" className={ classes.button }>
<Grid item xs={ 12 } md={ 1 } className={ classes.button }>
<Button raised component="span" className={ classes.uploadButton }>
Upload
</Button>
</Grid>
......
......@@ -24,8 +24,24 @@ interface IDatasetCreatorFormProps extends React.ClassAttributes<any> {
deleteCreatorRequest: (datasetUUID: string, creator: Creator) => Promise<Creator>;
}
const styleSheet = (theme) => ({
root: {
const styles = (theme) => ({
form: {
width: '100%',
},
heading: {
position: 'relative',
},
deleteButton: {
position: 'absolute',
right: '0',
top: '-3px',
height: 'auto',
},
addButton: {
margin: theme.spacing.unit * 2,
},
});
......@@ -68,45 +84,50 @@ class DatasetCreatorForm extends React.Component<IDatasetCreatorFormProps, any>
}
public renderCreators = ({ fields, meta: { touched, error, submitFailed } }) => {
const { classes } = this.props;
return(
<div>
{ fields.map((creator, index) => (
<div key={ index }>
<h4>DATASET CREATOR</h4>
<IconButton aria-label="Delete">
<DeleteIcon onClick={ this.deleteCreator(fields, index) }/>
</IconButton>
<Field name={ `${creator}.firstName` } component={ TextField } label="First Name*"
placeholder="First Name*"
onBlur={ this.updateCreator(fields, index) }
/>
<Field name={ `${creator}.lastName` } component={ TextField } type="text" label="Last Name*"
placeholder="Last Name*"
onBlur={ this.updateCreator(fields, index) }
/>
<Field name={ `${creator}.email` } component={ TextField } type="text" label="Email*"
placeholder="Email*"
onBlur={ this.updateCreator(fields, index) }
/>
<Field name={ `${creator}.phoneNumber` } component={ TextField } type="number" label="Phone"
placeholder="Phone"
onBlur={ this.updateCreator(fields, index) }
/>
<Field name={ `${creator}.fax` } component={ TextField } type="number" label="Fax"
placeholder="Fax"
onBlur={ this.updateCreator(fields, index) }
/>
<Field name={ `${creator}.institutionalAffiliation` } component={ TextField } type="text" label="Institutional affiliation"
placeholder="Institutional affiliation"
onBlur={ this.updateCreator(fields, index) }
/>
<Field name= { `${creator}.role` } component={ renderRadioGroup }
onBlur={ this.updateCreator(fields, index) }/>
<Field name={ `${creator}.instituteAddress` } component={ TextField } type="text" label="Address"
placeholder="Address"
onBlur={ this.updateCreator(fields, index) }
/>
<div className={ classes.heading }>
<h4>DATASET CREATOR</h4>
<IconButton aria-label="Delete" className={ classes.deleteButton }>
<DeleteIcon onClick={ this.deleteCreator(fields, index) }/>
</IconButton>
</div>
<Field name={ `${creator}.firstName` } component={ TextField } label="First Name*"
placeholder="First Name*"
onBlur={ this.updateCreator(fields, index) }
/>
<Field name={ `${creator}.lastName` } component={ TextField } type="text" label="Last Name*"
placeholder="Last Name*"
onBlur={ this.updateCreator(fields, index) }
/>
<Field name={ `${creator}.email` } component={ TextField } type="text" label="Email*"
placeholder="Email*"
onBlur={ this.updateCreator(fields, index) }
/>
<Field name={ `${creator}.phoneNumber` } component={ TextField } type="number" label="Phone"
placeholder="Phone"
onBlur={ this.updateCreator(fields, index) }
/>
<Field name={ `${creator}.fax` } component={ TextField } type="number" label="Fax"
placeholder="Fax"
onBlur={ this.updateCreator(fields, index) }
/>
<Field name={ `${creator}.institutionalAffiliation` } component={ TextField } type="text" label="Institutional affiliation"
placeholder="Institutional affiliation"
onBlur={ this.updateCreator(fields, index) }
/>
<Field name= { `${creator}.role` } component={ renderRadioGroup }
onBlur={ this.updateCreator(fields, index) }/>
<Field name={ `${creator}.instituteAddress` } component={ TextField } type="text" label="Address"
placeholder="Address"
onBlur={ this.updateCreator(fields, index) }
/>
</div>
),
) }
......@@ -116,14 +137,18 @@ class DatasetCreatorForm extends React.Component<IDatasetCreatorFormProps, any>
public render() {
const { classes } = this.props;
return (
<Grid spacing={ 0 } container>
<form>
<form className={ classes.form }>
<FieldArray name="creators" component={ this.renderCreators }/>
<Grid item xs={ 12 }>
<div className="end-xs">
<div className="box">
<Button raised type="button" onClick={ this.createCreator }>+Add other publisher</Button>
<Button raised type="button" onClick={ this.createCreator } className={ classes.addButton }>
+Add other publisher
</Button>
</div>
</div>
</Grid>
......@@ -133,9 +158,7 @@ class DatasetCreatorForm extends React.Component<IDatasetCreatorFormProps, any>
}
}
const StyledComponent = withStyles(styleSheet)(DatasetCreatorForm);
export default reduxForm({
form: DATASET_CREATOR_FORM,
enableReinitialize: true,
})(StyledComponent);
})((withStyles as any)(styles)(DatasetCreatorForm));
import * as React from 'react';
import Grid from 'material-ui/Grid';
import { withStyles } from 'material-ui/styles';
import TraitsSearch from './TraitsSearch';
import DescriptorListResult from './DescriptorListResult';
......@@ -8,8 +9,15 @@ import {DescriptorList} from '../../../../../../model/descriptors.model';
interface ITraitsWrap extends React.ClassAttributes<any> {
onNext?: (e) => void;
descriptorLists?: DescriptorList[];
classes: any;
}
const styles = (theme) => ({
container: {
margin: 0,
},
});
class TraitsWrap extends React.Component<ITraitsWrap, any> {
public constructor(props: any) {
......@@ -31,8 +39,10 @@ class TraitsWrap extends React.Component<ITraitsWrap, any> {
public render() {
const { classes } = this.props;
return (
<Grid container>
<Grid container className={ classes.container }>
<Grid item xs={ 12 } sm={ 4 }>
<TraitsSearch onSearch={ this.search }/>
</Grid>
......@@ -44,4 +54,4 @@ class TraitsWrap extends React.Component<ITraitsWrap, any> {
}
}
export default TraitsWrap;
export default (withStyles as any)(styles)(TraitsWrap);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment