Commit a3b7a1c7 authored by Maxim Babichev's avatar Maxim Babichev Committed by Matija Obreza
Browse files

Dataset steps & blue class

parent 40bd5732
......@@ -146,7 +146,7 @@ class DescriptorPicker extends React.Component<IDescriptorPickerProps, any> {
/>
}
</Grid>
<Grid item xs={ 12 } md={ 4 } lg={ 5 } className={ classnames({ [classes.greenBackground]: currentDescriptors.length > 0 }) }>
<Grid item xs={ 12 } md={ 4 } lg={ 5 } className={ `${ classnames({ [classes.greenBackground]: currentDescriptors.length > 0 }) } even-row` }>
<h4 className="font-bold pt-20 pl-20">
{ `${currentDescriptors.length} descriptor${currentDescriptors.length !== 1 ? 's' : '' } selected` }
</h4>
......
......@@ -42,7 +42,7 @@ const renderMembers = ({ fields, itemLabel, itemEditor, addItem, removeItem }) =
)) }
<Grid container className="items-editor-additem">
<Grid item xs={ 12 }>
<Button type="button" onClick={ onAddMember }>Add { itemLabel }</Button>
<Button raised type="button" onClick={ onAddMember }>Add { itemLabel }</Button>
</Grid>
</Grid>
</div>
......
......@@ -62,7 +62,7 @@ class DatasetDetail extends React.Component<IDatasetDetailProps, any> {
</Button></Link>
</Grid>
{ stillLoading ? <Loading /> :
<Grid item xs={ 12 } className="pt-10">
<Grid item xs={ 12 } className="p-10">
<DatasetDisplay dataset={ dataset } publishDataset={ publishDataset } deleteDataset={ deleteDataset } />
</Grid>
}
......
......@@ -197,7 +197,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
return (
<div className={ classes.root }>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } className="p-20">
<Grid item xs={ 12 } className="p-10">
<Card className={ classes.card } square>
<CardHeader className={ classes.cardHeader }
title={ <Markdown basic source={ dataset.title } /> }
......@@ -223,7 +223,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</Grid>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } md={ 8 } lg={ 9 } className="p-20">
<Grid item xs={ 12 } md={ 8 } lg={ 9 } className="p-10">
<Section title="Dataset metadata">
<div className="pt-15 pb-15 pl-20 pr-20">
<h4 className="font-bold m-0">Creators</h4>
......@@ -380,7 +380,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</Section>
</Grid>
<Grid item xs={ 12 } md={ 4 } lg={ 3 } className="p-20">
<Grid item xs={ 12 } md={ 4 } lg={ 3 } className="p-10">
<Summary dataset={ dataset } creators={ dataset.creators } owner={ dataset.owner } classes={ {} } />
</Grid>
</Grid>
......@@ -397,7 +397,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
) }
{ dataset.descriptors && (
<Grid item xs={ 12 } md={ 12 } lg={ 12 } className="p-20">
<Grid item xs={ 12 } md={ 12 } lg={ 12 } className="p-10">
<Section title="Traits observed">
<List>
{ dataset.descriptors.map((descriptor: Descriptor) => (
......@@ -412,7 +412,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
) }
{ dataset.accessionIdentifiers && (
<Grid item xs={ 12 } md={ 12 } lg={ 12 } className="p-20">
<Grid item xs={ 12 } md={ 12 } lg={ 12 } className="p-10">
<Section title="Accessions evaluated">
<div className="p-20">
<AccessionIdentifiersList accessionIdentifiers={ dataset.accessionIdentifiers } />
......
......@@ -125,7 +125,7 @@ class DatasetStepper extends React.Component<IDatasetProps, any> {
<StepNavigation onGotoStep={ this.gotoStep } steps={ steps } location={ location } showStepName bottomDivider onPublish={ this.onPublish } />
<Grid item xs={ 12 }>
{ stillLoading ? <Loading /> :
<div className="even-row">
<div>
{ children }
</div>
}
......
......@@ -23,16 +23,11 @@ const styleSheet = {
'& input[type="file"]': {
display: 'none',
},
width: '100%',
display: 'inline-table',
},
/* tslint:enable */
iconWrapper: {
color: '#999',
},
fileSection: {
},
};
class ListOfAccession extends React.Component<IListOfAccession, any> {
......@@ -77,7 +72,7 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
const {classes, accessionIdentifiers} = this.props;
return (
<div className={ classes.root }>
<div className={ `${ classes.root } m-20 p-20 even-row` }>
<div>
<h4>INSTRUCTION FOR USE</h4>
<ul>
......
import * as React from 'react';
import {Field, reduxForm} from 'redux-form';
import {withStyles} from 'material-ui/styles';
import MaterialAutosuggest from 'ui/common/material-autosuggest';
import {DATASET_BASIC_INFO_FORM} from 'constants/datasets';
......@@ -19,14 +18,6 @@ interface ILoginContainerProps extends React.ClassAttributes<any> {
partners: Partner[];
}
const styleSheet = {
basicInfoForm: {
padding: '0 20px',
borderLeft: '20px solid #fff',
borderRight: '20px solid #fff',
},
};
class BasicInfoStep extends React.Component<ILoginContainerProps, any> {
protected save = () => {
......@@ -35,10 +26,10 @@ class BasicInfoStep extends React.Component<ILoginContainerProps, any> {
public render() {
const {classes, partners, initialValues} = this.props;
const {partners, initialValues} = this.props;
return (
<form className={ classes.basicInfoForm }>
<form className="p-20 m-20 even-row">
<Field
name="owner"
component={ SelectPartner }
......@@ -104,4 +95,4 @@ class BasicInfoStep extends React.Component<ILoginContainerProps, any> {
export default reduxForm({
form: DATASET_BASIC_INFO_FORM,
enableReinitialize: true,
})(withStyles(styleSheet)(BasicInfoStep));
})((BasicInfoStep));
......@@ -27,26 +27,7 @@ interface IDatasetCreatorFormProps extends React.ClassAttributes<any> {
}
const styles = (theme) => ({
form: {
width: '100%',
border: '20px solid #fff',
padding: '20px 20px 0px',
},
heading: {
position: 'relative',
},
deleteButton: {
position: 'absolute',
right: '0',
top: '-3px',
height: 'auto',
},
addButton: {
margin: theme.spacing.unit * 2,
},
// none
});
const renderRadioGroup = ({input, meta, ...rest}) => {
......@@ -92,16 +73,13 @@ 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 }>
<div className={ classes.heading }>
<h4>DATASET CREATOR</h4>
<IconButton aria-label="Delete" className={ classes.deleteButton }>
<div key={ index } className="m-20 p-20 even-row">
<div>
<IconButton aria-label="Delete" style={ { float: 'right' } }>
<DeleteIcon onClick={ this.deleteCreator(fields, index) }/>
</IconButton>
</div>
......@@ -146,16 +124,12 @@ class DatasetCreatorForm extends React.Component<IDatasetCreatorFormProps, any>
<Grid spacing={ 0 } container>
<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 } className={ classes.addButton }>
Add dataset creator
</Button>
</div>
</div>
</Grid>
</form>
<Grid item xs={ 12 } className="back-white">
<Button raised type="button" onClick={ this.createCreator } className="m-20">
Add dataset creator
</Button>
</Grid>
</Grid>
);
}
......
......@@ -23,9 +23,13 @@ interface IFilesFormProps extends React.ClassAttributes<any> {
}
const styleSheet = (theme) => ({
/*tslint:disable*/
root: {
border: '20px solid #fff',
padding: '20px',
'& > div > div.items-editor-item + div.items-editor-additem': {
marginTop: '20px',
},
},
});
......
......@@ -10,7 +10,9 @@ class ReviewAndPublishStep extends React.Component<any, any> {
const { dataset} = this.props;
return (
<DatasetDisplay dataset={ dataset } />
<div className="even-row p-10">
<DatasetDisplay dataset={ dataset } />
</div>
);
}
}
......
import * as React from 'react';
import {Field, Fields, FieldArray, reduxForm} from 'redux-form';
import {withStyles} from 'material-ui/styles';
import Button from 'material-ui/Button';
import * as _ from 'lodash';
......@@ -16,6 +15,9 @@ import {error, log} from 'utilities/debug';
import {LocationService} from 'service/LocationService';
import {isNumeric} from 'utilities';
import IconButton from 'material-ui/IconButton';
import DeleteIcon from 'material-ui-icons/Delete';
interface ILocationFormProps extends React.ClassAttributes<any> {
initialValues: any;
fields: any;
......@@ -26,19 +28,6 @@ interface ILocationFormProps extends React.ClassAttributes<any> {
deleteLocation: (datasetUUID: string, location: Location) => Promise<Location>;
}
const styleSheet = (theme) => ({
progress: {
margin: `0 ${theme.spacing.unit * 2}px`,
},
locationForm: {
border: '20px solid #fff',
padding: '20px',
},
addLocation: {
marginTop: '20px',
},
});
class TimingAndLocationForm extends React.Component<ILocationFormProps, any> {
protected save = (fields, index) => () => {
......@@ -113,12 +102,12 @@ class TimingAndLocationForm extends React.Component<ILocationFormProps, any> {
protected renderLocations = ({ fields, meta: { touched, error, submitFailed } }) => (
<div>
{ fields.map((location, index) => (
<div key={ index }>
<Button
raised
type="button"
onClick={ this.deleteLocation(fields, index) }
>Remove location</Button>
<div key={ index } className="p-20 m-20 even-row">
<div>
<IconButton aria-label="Remove location" style={ { float: 'right' } }>
<DeleteIcon onClick={ this.deleteLocation(fields, index) }/>
</IconButton>
</div>
<Field
required
......@@ -178,7 +167,7 @@ class TimingAndLocationForm extends React.Component<ILocationFormProps, any> {
/>
</div>
)) }
<div className={ this.props.classes.addLocation }>
<div className="back-white m-20">
<Button
raised
type="button"
......@@ -189,19 +178,15 @@ class TimingAndLocationForm extends React.Component<ILocationFormProps, any> {
)
public render() {
const { classes } = this.props;
return (
<form className={ classes.locationForm }>
<form>
<FieldArray name="locations" component={ this.renderLocations } />
</form>
);
}
}
const StyledComponent = withStyles(styleSheet)(TimingAndLocationForm);
export default reduxForm({
form: TIMING_AND_LOCATION_FORM,
enableReinitialize: true,
})(StyledComponent);
})(TimingAndLocationForm);
......@@ -18,8 +18,8 @@ class Summary extends React.Component<ISummaryProps, any> {
return (
<Paper className="mt-20 mr-20" square>
<div className="pl-20 pt-10 pb-10">
<h4 className="green font-bold m-0">
<div className="pl-20 pr-20 pt-20 pb-20">
<h4 className="green font-bold m-0">
SUMMARY
</h4>
</div>
......@@ -31,7 +31,7 @@ class Summary extends React.Component<ISummaryProps, any> {
<h4 className="font-bold">
Number of data publishers
</h4>
<h1 className="blue font-bold m-0">
<h1 className="font-bold m-0">
{ paged.totalElements }
</h1>
</div>
......@@ -41,7 +41,7 @@ class Summary extends React.Component<ISummaryProps, any> {
<h4 className="font-bold">
Number of countries
</h4>
<h1 className="blue font-bold m-0">
<h1 className="font-bold m-0">
65
</h1>
</div>
......@@ -51,7 +51,7 @@ class Summary extends React.Component<ISummaryProps, any> {
<h4 className="font-bold">
Number of institutes
</h4>
<h1 className="blue font-bold m-0">
<h1 className="font-bold m-0">
{ paged.totalElements }
</h1>
</div>
......
......@@ -55,6 +55,9 @@ a:visited {
//**********Header start**********//
.header-bar {
a {
color: #fff;
}
.navigation-block {
display: inline-block;
position: absolute;
......@@ -526,6 +529,10 @@ h1, h2, h3, h4, h5, h6 {
padding-bottom: 7px;
}
.p-10 {
padding: 10px;
}
.pl-10 {
padding-left: 10px;
}
......
Supports Markdown
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