Commit 4882cdb4 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov

Merge branch '253-rtl-layouts' into 'master'

RTL layouts

Closes #253

See merge request genesys-pgr/genesys-ui!289
parents a44b25d8 8769b698
...@@ -14,7 +14,12 @@ const styles = (theme) => ({ ...@@ -14,7 +14,12 @@ const styles = (theme) => ({
overflow: 'hidden' as 'hidden', overflow: 'hidden' as 'hidden',
}, },
layersTitle: { layersTitle: {
paddingLeft: '8px', 'html[dir="ltr"] &' : {
paddingLeft: '8px',
},
'html[dir="rtl"] &' : {
paddingRight: '8px',
},
fontSize: '15px', fontSize: '15px',
fontWeight: 700, fontWeight: 700,
lineHeight: '40px', lineHeight: '40px',
......
...@@ -44,6 +44,9 @@ const style = (theme) => ({ ...@@ -44,6 +44,9 @@ const style = (theme) => ({
'html[dir="rtl"] &' : { 'html[dir="rtl"] &' : {
margin: '1.143rem 1.429rem 0 0', margin: '1.143rem 1.429rem 0 0',
}, },
},
ltr: {
direction: 'ltr' as 'ltr',
} }
/*tslint:enable*/ /*tslint:enable*/
}); });
...@@ -92,7 +95,7 @@ const ActivityPostCard = ({classes, className, post, compact, edit, t, ...gridSi ...@@ -92,7 +95,7 @@ const ActivityPostCard = ({classes, className, post, compact, edit, t, ...gridSi
</div> </div>
{ !compact && { !compact &&
<CardContent className="pb-10"> <CardContent className="pb-10">
<div dangerouslySetInnerHTML={ {__html: post.body} } /> <div dangerouslySetInnerHTML={ {__html: post.body} } className={ classes.ltr }/>
</CardContent> </CardContent>
} }
</Card> </Card>
......
...@@ -35,7 +35,12 @@ const styles = (theme) => ({ ...@@ -35,7 +35,12 @@ const styles = (theme) => ({
'& ul': { '& ul': {
marginTop: '30px', marginTop: '30px',
padding: 0, padding: 0,
paddingLeft: '11px', 'html[dir="ltr"] &' : {
paddingLeft: '11px',
},
'html[dir="rtl"] &' : {
paddingRight: '11px',
},
}, },
'& ul > li': { '& ul > li': {
lineHeight: '30px', lineHeight: '30px',
......
...@@ -13,6 +13,7 @@ const styles = (theme) => ({ ...@@ -13,6 +13,7 @@ const styles = (theme) => ({
width: '100%', width: '100%',
minHeight: 'calc(100vh - 365px)', minHeight: 'calc(100vh - 365px)',
margin: 0, margin: 0,
direction: 'ltr' as 'ltr',
}, },
text: { text: {
fontFamily: 'Roboto-Light', fontFamily: 'Roboto-Light',
...@@ -33,12 +34,12 @@ const styles = (theme) => ({ ...@@ -33,12 +34,12 @@ const styles = (theme) => ({
'& > ul': { '& > ul': {
marginTop: '30px', marginTop: '30px',
padding: 0, padding: 0,
'html[dir="ltr"] &': { // 'html[dir="ltr"] &': {
paddingLeft: '11px', paddingLeft: '11px',
}, // },
'html[dir="rtl"] &': { // 'html[dir="rtl"] &': {
paddingRight: '11px', // paddingRight: '11px',
}, // },
}, },
'& > ul > li': { '& > ul > li': {
fontSize: '18px', fontSize: '18px',
...@@ -52,9 +53,9 @@ const styles = (theme) => ({ ...@@ -52,9 +53,9 @@ const styles = (theme) => ({
tableLayout: 'fixed' as 'fixed', tableLayout: 'fixed' as 'fixed',
'& th': { '& th': {
textAlign: 'left' as 'left', textAlign: 'left' as 'left',
'html[dir="rtl"] &': { // 'html[dir="rtl"] &': {
textAlign: 'right' as 'right', // textAlign: 'right' as 'right',
}, // },
}, },
'& code': { '& code': {
[theme.breakpoints.down('sm')]: { [theme.breakpoints.down('sm')]: {
...@@ -80,9 +81,9 @@ const styles = (theme) => ({ ...@@ -80,9 +81,9 @@ const styles = (theme) => ({
paddingBottom: '8px', paddingBottom: '8px',
color: '#777777', color: '#777777',
textAlign: 'left' as 'left', textAlign: 'left' as 'left',
'html[dir="rtl"] &': { // 'html[dir="rtl"] &': {
textAlign: 'right' as 'right', // textAlign: 'right' as 'right',
}, // },
}, },
'& code': { '& code': {
padding: '2px 4px', padding: '2px 4px',
...@@ -164,28 +165,28 @@ const styles = (theme) => ({ ...@@ -164,28 +165,28 @@ const styles = (theme) => ({
fontSize: '16px', fontSize: '16px',
lineHeight: '1.4em', lineHeight: '1.4em',
marginLeft: 0, marginLeft: 0,
'html[dir="rtl"] &': { // 'html[dir="rtl"] &': {
marginRight: 0, // marginRight: 0,
}, // },
listStyleType: 'none' as 'none', listStyleType: 'none' as 'none',
'& ul': { '& ul': {
'html[dir="ltr"] &': { // 'html[dir="ltr"] &': {
paddingLeft: '0.8em', paddingLeft: '0.8em',
}, // },
'html[dir="rtl"] &': { // 'html[dir="rtl"] &': {
paddingRight: '0.8em', // paddingRight: '0.8em',
}, // },
}, },
}, },
'& > ul': { '& > ul': {
fontSize: '16px', fontSize: '16px',
lineHeight: '1.4em', lineHeight: '1.4em',
'html[dir="ltr"] &': { // 'html[dir="ltr"] &': {
marginLeft: '.125em', marginLeft: '.125em',
}, // },
'html[dir="rtl"] &': { // 'html[dir="rtl"] &': {
marginRight: '.125em', // marginRight: '.125em',
}, // },
padding: 0, padding: 0,
}, },
'& a': { '& a': {
......
...@@ -11,6 +11,7 @@ interface ICropChipsProps extends React.ClassAttributes<any> { ...@@ -11,6 +11,7 @@ interface ICropChipsProps extends React.ClassAttributes<any> {
} }
const styles = (theme) => ({ const styles = (theme) => ({
/* tslint:disable */
chipHolder: { chipHolder: {
display: 'inline-block', display: 'inline-block',
position: 'relative' as 'relative', position: 'relative' as 'relative',
...@@ -18,7 +19,12 @@ const styles = (theme) => ({ ...@@ -18,7 +19,12 @@ const styles = (theme) => ({
}, },
chip: { chip: {
display: 'inline-block', display: 'inline-block',
marginRight: theme.spacing.unit, 'html[dir="ltr"] &' : {
marginRight: theme.spacing.unit,
},
'html[dir="rtl"] &' : {
marginLeft: theme.spacing.unit,
},
padding: '.2em .5em', padding: '.2em .5em',
position: 'relative' as 'relative', position: 'relative' as 'relative',
top: '-.2em', top: '-.2em',
...@@ -28,6 +34,7 @@ const styles = (theme) => ({ ...@@ -28,6 +34,7 @@ const styles = (theme) => ({
color: 'Black', color: 'Black',
fontWeight: 'bold' as 'bold', fontWeight: 'bold' as 'bold',
}, },
/* tslint:enable */
}); });
const CropChips = ({crops, availableCrops, classes}: ICropChipsProps) => { const CropChips = ({crops, availableCrops, classes}: ICropChipsProps) => {
......
...@@ -90,6 +90,7 @@ class BasicInfoStep extends React.Component<ILoginContainerProps, any> { ...@@ -90,6 +90,7 @@ class BasicInfoStep extends React.Component<ILoginContainerProps, any> {
valueField="code" valueField="code"
renderOptionLabel={ renderLicenseLabel } renderOptionLabel={ renderLicenseLabel }
singleColumn singleColumn
style={ { wordBreak: 'break-all' } }
/> />
<Field <Field
name="language" name="language"
......
import * as React from 'react'; import * as React from 'react';
import { Field, reduxForm } from 'redux-form'; import { Field, reduxForm } from 'redux-form';
import { translate } from 'react-i18next'; import { translate } from 'react-i18next';
import withStyles from '@material-ui/core/styles/withStyles';
import { DESCRIPTORLIST_FORM } from 'descriptors/constants'; import { DESCRIPTORLIST_FORM } from 'descriptors/constants';
import { TextField } from 'ui/common/text-field'; import { TextField } from 'ui/common/text-field';
...@@ -11,10 +12,25 @@ import Validators from 'utilities/Validators'; ...@@ -11,10 +12,25 @@ import Validators from 'utilities/Validators';
import RadioSelection from 'ui/common/forms/RadioSelection'; import RadioSelection from 'ui/common/forms/RadioSelection';
import { saveDescriptorList } from 'descriptorlists/actions/editor'; import { saveDescriptorList } from 'descriptorlists/actions/editor';
/* tslint:disable */
const styles = (theme) => ({
cropRadio: {
'&:nth-child(n)': {
[theme.breakpoints.up('lg')]: {
flexBasis: '16%',
},
[theme.breakpoints.up('xl')]: {
flexBasis: '12%',
},
},
}
});
/* tslint:enable */
class DescriptorListForm extends React.Component<any, any> { class DescriptorListForm extends React.Component<any, any> {
public render() { public render() {
const {error, handleSubmit, initialValues, partners, crops, t} = this.props; const {error, handleSubmit, initialValues, partners, crops, t, classes} = this.props;
return ( return (
<form onSubmit={ handleSubmit } className="p-20 m-20 even-row"> <form onSubmit={ handleSubmit } className="p-20 m-20 even-row">
{ initialValues && initialValues.version && <div>Version: { initialValues.version }</div> } { initialValues && initialValues.version && <div>Version: { initialValues.version }</div> }
...@@ -55,6 +71,7 @@ class DescriptorListForm extends React.Component<any, any> { ...@@ -55,6 +71,7 @@ class DescriptorListForm extends React.Component<any, any> {
</Authorize> </Authorize>
<Field <Field
className={ classes.cropRadio }
name="crop" name="crop"
formLabel={ t('descriptorlists.public.common.crop') } formLabel={ t('descriptorlists.public.common.crop') }
placeholder={ t('descriptorlists.public.c.form.maize') } placeholder={ t('descriptorlists.public.c.form.maize') }
...@@ -115,8 +132,10 @@ class DescriptorListForm extends React.Component<any, any> { ...@@ -115,8 +132,10 @@ class DescriptorListForm extends React.Component<any, any> {
} }
} }
export default translate()(reduxForm({ export default translate()(withStyles(styles)(
enableReinitialize: true, // https://redux-form.com/7.1.0/examples/initializefromstate/ reduxForm({
form: DESCRIPTORLIST_FORM, enableReinitialize: true, // https://redux-form.com/7.1.0/examples/initializefromstate/
onSubmit: (values, dispatch) => dispatch(saveDescriptorList(values)), form: DESCRIPTORLIST_FORM,
})(DescriptorListForm)); onSubmit: (values, dispatch) => dispatch(saveDescriptorList(values)),
})(DescriptorListForm)),
);
...@@ -150,10 +150,10 @@ class DescriptorPicker extends React.Component<IDescriptorPickerProps, any> { ...@@ -150,10 +150,10 @@ class DescriptorPicker extends React.Component<IDescriptorPickerProps, any> {
return ( return (
<Grid container spacing={ 0 } className={ classes.container }> <Grid container spacing={ 0 } className={ classes.container }>
<Grid item xs={ 12 } md={ 4 } lg={ 2 } className={ classes.leftPanel }> <Grid item xs={ 12 } lg={ 2 } className={ classes.leftPanel }>
<DescriptorFilters initialValues={ matchingDescriptors && matchingDescriptors.filter || {} } onSubmit={ this.applyFilters }/> <DescriptorFilters initialValues={ matchingDescriptors && matchingDescriptors.filter || {} } onSubmit={ this.applyFilters }/>
</Grid> </Grid>
<Grid item xs={ 12 } md={ 4 } lg={ 5 } className={ classes.grayBackground }> <Grid item xs={ 12 } lg={ 5 } className={ classes.grayBackground }>
{ matchingDescriptors && matchingDescriptors.content && matchingDescriptors.content.length < 2 ? { matchingDescriptors && matchingDescriptors.content && matchingDescriptors.content.length < 2 ?
<div className={ classes.fake }/> : <div className={ classes.fake }/> :
<PaginationComponent <PaginationComponent
...@@ -177,7 +177,7 @@ class DescriptorPicker extends React.Component<IDescriptorPickerProps, any> { ...@@ -177,7 +177,7 @@ class DescriptorPicker extends React.Component<IDescriptorPickerProps, any> {
/> />
} }
</Grid> </Grid>
<Grid item xs={ 12 } md={ 4 } lg={ 5 } className={ `${ classnames({ [classes.greenBackground]: currentDescriptors.length > 0 }) } even-row` }> <Grid item xs={ 12 } lg={ 5 } className={ `${ classnames({ [classes.greenBackground]: currentDescriptors.length > 0 }) } even-row` }>
<Grid container item spacing={ 0 }> <Grid container item spacing={ 0 }>
<h4 className="font-bold pt-20 pl-20"> <h4 className="font-bold pt-20 pl-20">
{ currentDescriptors.length } { currentDescriptors.length > 1 ? { currentDescriptors.length } { currentDescriptors.length > 1 ?
......
...@@ -49,19 +49,16 @@ class BooleanDimensionFormExtraInternal extends React.Component<IBooleanFilterIn ...@@ -49,19 +49,16 @@ class BooleanDimensionFormExtraInternal extends React.Component<IBooleanFilterIn
value="1" value="1"
control={ <Radio /> } control={ <Radio /> }
label={ t('common:label.true') } label={ t('common:label.true') }
className="form-control-label-rtl"
/> />
<FormControlLabel <FormControlLabel
value="2" value="2"
control={ <Radio /> } control={ <Radio /> }
label={ t('common:label.false') } label={ t('common:label.false') }
className="form-control-label-rtl"
/> />
<FormControlLabel <FormControlLabel
value="3" value="3"
control={ <Radio /> } control={ <Radio /> }
label={ t('common:label.either') } label={ t('common:label.either') }
className="form-control-label-rtl"
/> />
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
......
...@@ -37,19 +37,16 @@ const ExecutionTypeSelector = ({input, meta, t, ...rest}) => { ...@@ -37,19 +37,16 @@ const ExecutionTypeSelector = ({input, meta, t, ...rest}) => {
value="COUNT" value="COUNT"
control={ <Radio /> } control={ <Radio /> }
label={ t('kpi.admin.c.execution.type.COUNT') } label={ t('kpi.admin.c.execution.type.COUNT') }
className="form-control-label-rtl"
/> />
<FormControlLabel <FormControlLabel
value="AVERAGE" value="AVERAGE"
control={ <Radio /> } control={ <Radio /> }
label={ t('kpi.admin.c.execution.type.AVERAGE') } label={ t('kpi.admin.c.execution.type.AVERAGE') }
className="form-control-label-rtl"
/> />
<FormControlLabel <FormControlLabel
value="SUM" value="SUM"
control={ <Radio /> } control={ <Radio /> }
label={ t('kpi.admin.c.execution.type.SUM') } label={ t('kpi.admin.c.execution.type.SUM') }
className="form-control-label-rtl"
/> />
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
......
...@@ -25,6 +25,7 @@ interface ISelectFaoInstituteInternal extends React.ClassAttributes<any> { ...@@ -25,6 +25,7 @@ interface ISelectFaoInstituteInternal extends React.ClassAttributes<any> {
} }
class SelectFaoInstituteInternal extends React.Component<ISelectFaoInstituteInternal, any> { class SelectFaoInstituteInternal extends React.Component<ISelectFaoInstituteInternal, any> {
public updateMenuPosition = null;
protected handleInputChange = (event) => { protected handleInputChange = (event) => {
this.setState({searchText: event.target.value}); this.setState({searchText: event.target.value});
...@@ -34,6 +35,7 @@ class SelectFaoInstituteInternal extends React.Component<ISelectFaoInstituteInte ...@@ -34,6 +35,7 @@ class SelectFaoInstituteInternal extends React.Component<ISelectFaoInstituteInte
} }
private doAutocomplete = debounce((value) => { private doAutocomplete = debounce((value) => {
this.props.autocompleteWiewsTerm(value).then((suggestions) => { this.props.autocompleteWiewsTerm(value).then((suggestions) => {
this.updateMenuPosition();
this.setState({suggestions}); this.setState({suggestions});
}); });
}, 1000); }, 1000);
...@@ -130,6 +132,7 @@ class SelectFaoInstituteInternal extends React.Component<ISelectFaoInstituteInte ...@@ -130,6 +132,7 @@ class SelectFaoInstituteInternal extends React.Component<ISelectFaoInstituteInte
anchorEl={ this.state.anchorEl } anchorEl={ this.state.anchorEl }
open={ this.state.open } open={ this.state.open }
onClose={ this.handleRequestClose } onClose={ this.handleRequestClose }
action={ (actions) => this.updateMenuPosition = actions.updatePosition }
> >
<MenuItem> <MenuItem>
<TextField <TextField
......
...@@ -26,7 +26,6 @@ const PurposeTypeRadioGroup = ({input, meta, classes, formLabel, t, ...rest}) => ...@@ -26,7 +26,6 @@ const PurposeTypeRadioGroup = ({input, meta, classes, formLabel, t, ...rest}) =>
value={ purposeType.value } value={ purposeType.value }
label={ t(purposeType.label) } label={ t(purposeType.label) }
control={ <Radio/> } control={ <Radio/> }
className="form-control-label-rtl"
/> />
)) ))
} }
......
...@@ -65,7 +65,6 @@ const renderRadioGroup = translate()(({input, meta, t, classes}) => { ...@@ -65,7 +65,6 @@ const renderRadioGroup = translate()(({input, meta, t, classes}) => {
value={ role } value={ role }
label={ t(`subsets.common.creators.role.${role}`) } label={ t(`subsets.common.creators.role.${role}`) }
control={ <Radio/> } control={ <Radio/> }
className="form-control-label-rtl"
/> />
)) } )) }
</RadioGroup> </RadioGroup>
......
...@@ -13,20 +13,16 @@ const styles = () => ({ ...@@ -13,20 +13,16 @@ const styles = () => ({
inProgress: { inProgress: {
color: '#ed9506', color: '#ed9506',
}, },
status: {
fontSize: '1rem',
marginRight: '6px',
},
}); });
const DashboardCardStatus = ({item, t, classes}: {item: any, t; any, classes: any} & React.ClassAttributes<any>) => { const DashboardCardStatus = ({item, t, classes}: {item: any, t; any, classes: any} & React.ClassAttributes<any>) => {
switch (item.state) { switch (item.state) {
case PublishState.PUBLISHED: case PublishState.PUBLISHED:
return <b className={ `${classes.status} ${classes.published}` }>{ t('status.published') }</b>; return <b className={ `mr-5 ${classes.published}` }>{ t('status.published') }</b>;
case PublishState.REVIEWING: case PublishState.REVIEWING:
return <b className={ `${classes.status} ${classes.inReview}` }>{ t('status.inReview') }</b>; return <b className={ `mr-5 ${classes.inReview}` }>{ t('status.inReview') }</b>;
default: default:
return <b className={ `${classes.status} ${classes.inProgress}` }>{ t('status.inProgress') }</b>; return <b className={ `mr-5 ${classes.inProgress}` }>{ t('status.inProgress') }</b>;
} }
}; };
......
...@@ -5,7 +5,6 @@ import Checkbox from '@material-ui/core/Checkbox'; ...@@ -5,7 +5,6 @@ import Checkbox from '@material-ui/core/Checkbox';
const ReduxCheckbox = ({input: {value, onChange}, label = null, style = {height: '40px'}, ...rest}) => ( const ReduxCheckbox = ({input: {value, onChange}, label = null, style = {height: '40px'}, ...rest}) => (
<FormControlLabel <FormControlLabel
style={ style } style={ style }
className="form-control-label-rtl"
control={ control={
<Checkbox <Checkbox
checked={ !!value && value !== 'false' } checked={ !!value && value !== 'false' }
......
...@@ -103,7 +103,7 @@ class CSVConfiguration extends React.Component<ICSVConfigurationProps, any> { ...@@ -103,7 +103,7 @@ class CSVConfiguration extends React.Component<ICSVConfigurationProps, any> {
control={ control={
<Checkbox onChange={ this.handleAutodetect } /> <Checkbox onChange={ this.handleAutodetect } />
} }
className="form-control-label-rtl" className="mr-1rem"
/> />
</FormControl> </FormControl>
</Grid> </Grid>
...@@ -118,34 +118,35 @@ class CSVConfiguration extends React.Component<ICSVConfigurationProps, any> { ...@@ -118,34 +118,35 @@ class CSVConfiguration extends React.Component<ICSVConfigurationProps, any> {
value="tab" value="tab"
label={ t('common:csv.tab') } label={ t('common:csv.tab') }
control={ <Radio/> } control={ <Radio/> }
className="form-control-label-rtl" className="mr-1rem"
/> />
<FormControlLabel <FormControlLabel
value="comma" value="comma"
label={ t('common:csv.comma') } label={ t('common:csv.comma') }
control={ <Radio/> } control={ <Radio/> }
className="form-control-label-rtl" className="mr-1rem"
/> />
<FormControlLabel <FormControlLabel
value="semicolon" value="semicolon"
label={ t('common:csv.semicolon') } label={ t('common:csv.semicolon') }
control={ <Radio/> } control={ <Radio/> }
className="form-control-label-rtl" className="mr-1rem"
/> />
<FormControlLabel <FormControlLabel
value="space" value="space"
label={ t('common:csv.space') } label={ t('common:csv.space') }
control={ <Radio/> } control={ <Radio/> }
className="form-control-label-rtl" className="mr-1rem"
/> />
<FormControlLabel <FormControlLabel
value="other" value="other"
label={ t('common:csv.other') } label={ t('common:csv.other') }
control={ <Radio/> } control={ <Radio/> }
className="form-control-label-rtl" className="mr-1rem"
/> />
<FormControlLabel