Commit 064fe5b3 authored by Oleksii Savran's avatar Oleksii Savran Committed by Viacheslav Pavlov

RTL layouts

RTL fixes

RTL fixes after rebase

RTL fixes

indented filter fix

Fix after rebase
parent 489e68d1
......@@ -35,6 +35,7 @@ const virtualPath = document.baseURI.replace(/^(https?:\/\/[^\/]+)?(.*)\/$/, '$2
const detectedLang = initialLanguage ? initialLanguage : detectLocaleFromPath(virtualPath, window.location.pathname, 0);
const historyOptions = { basename: detectedLang !== 'en' ? `${virtualPath}/${detectedLang}` : `${virtualPath}` };
const history = createHistory(historyOptions);
const direction = getDir(detectedLang);
// Configure axios for client
configureBackendApi({ apiUrl: `${virtualPath}/proxy` });
......@@ -44,7 +45,7 @@ const store = composeEnhancers(applyMiddleware(thunk, routerMiddleware(history))
if (__PRELOADED_STATE__ === undefined) {
document.getElementsByTagName('html')[0].setAttribute('lang', detectedLang);
document.getElementsByTagName('html')[0].setAttribute('dir', getDir(detectedLang));
document.getElementsByTagName('html')[0].setAttribute('dir', direction);
checkAccessTokens(store.dispatch)
.then(() => {
......@@ -53,7 +54,7 @@ if (__PRELOADED_STATE__ === undefined) {
<Provider store={ store }>
<ConnectedRouter history={ history }>
<I18nextProvider i18n={ i18nClient } initialLanguage={ initialLanguage } initialI18nStore={ initialI18nStore }>
<MuiThemeProvider theme={ theme }>
<MuiThemeProvider theme={ theme(direction) }>
{ renderRoutes(routes) }
</MuiThemeProvider>
</I18nextProvider>
......@@ -72,7 +73,7 @@ if (__PRELOADED_STATE__ === undefined) {
<Provider store={ store }>
<ConnectedRouter history={ history }>
<I18nextProvider i18n={ i18nClient } initialLanguage={ initialLanguage } initialI18nStore={ initialI18nStore }>
<MuiThemeProvider theme={ theme }>
<MuiThemeProvider theme={ theme(direction) }>
{ renderRoutes(routes) }
</MuiThemeProvider>
</I18nextProvider>
......
......@@ -77,6 +77,7 @@ const prerenderer = (html, errHtml) => (req, res) => {
const pathWithoutLang = req.url.substr(initialLanguage !== defaultLanguage ? 3 : 0, req.url.length);
console.log(`<StaticRouter location="${pathWithoutLang}" basename="${basename}"`);
const direction = getDir(initialLanguage);
const modules = [];
......@@ -84,7 +85,7 @@ const prerenderer = (html, errHtml) => (req, res) => {
<Loadable.Capture report={ (moduleName) => modules.push(moduleName) }>
<ReduxProvider store={ store }>
<JssProvider generateClassName={ generateClassName } registry={ sheets }>
<MuiThemeProvider theme={ theme } sheetsManager={ new Map() }>
<MuiThemeProvider theme={ theme(direction) } sheetsManager={ new Map() }>
<I18nextProvider i18n={ req.i18n }>
<StaticRouter location={ pathWithoutLang } context={ context } basename={ basename }>
{ renderRoutes(routes) }
......
......@@ -107,6 +107,9 @@ const styles = (theme) => ({
color: '#88ba42',
},
},
'html[dir="rtl"] &' : {
left: 0,
},
},
mapIcon: {
fontSize: '20px',
......
......@@ -55,8 +55,8 @@ const AccessionCard = ({ accession, classes, index, addAccessionToMyList, remove
<Card className={ !editMode && (isChecked ? classes.selected : accession.historic ? classes.historic : '') } onTouchStart={ onTouchStart } onTouchEnd={ onTouchEnd }>
<CardContent>
<div className={ classes.firstRow }>
<b>{ index !== undefined && `${index + 1}. ` }</b>
<b>
{ index !== undefined && `${index + 1}. ` }
<AccessionLink to={ accession }>
{ accession.accessionNumber }
{ ` • ` }
......
......@@ -100,27 +100,27 @@ const AccessionFilters = ({handleSubmit, initialValues, initialize, terms, crops
terms={ terms && terms.get('images') }
initialValues
/>
<CollapsibleComponentSearch title={ t('accessions.public.f.climate') }>
<NumberFilter name="geo.climate.bio1" label={ t('accessions.climate.bio1') } />
<NumberFilter name="geo.climate.bio2" label={ t('accessions.climate.bio2') } />
<NumberFilter name="geo.climate.bio3" label={ t('accessions.climate.bio3') } />
<NumberFilter name="geo.climate.bio4" label={ t('accessions.climate.bio4') } />
<NumberFilter name="geo.climate.bio5" label={ t('accessions.climate.bio5') } />
<NumberFilter name="geo.climate.bio6" label={ t('accessions.climate.bio6') } />
<NumberFilter name="geo.climate.bio7" label={ t('accessions.climate.bio7') } />
<NumberFilter name="geo.climate.bio8" label={ t('accessions.climate.bio8') } />
<NumberFilter name="geo.climate.bio9" label={ t('accessions.climate.bio9') } />
<NumberFilter name="geo.climate.bio10" label={ t('accessions.climate.bio10') } />
<NumberFilter name="geo.climate.bio11" label={ t('accessions.climate.bio11') } />
<NumberFilter name="geo.climate.bio12" label={ t('accessions.climate.bio12') } />
<NumberFilter name="geo.climate.bio13" label={ t('accessions.climate.bio13') } />
<NumberFilter name="geo.climate.bio14" label={ t('accessions.climate.bio14') } />
<NumberFilter name="geo.climate.bio15" label={ t('accessions.climate.bio15') } />
<NumberFilter name="geo.climate.bio16" label={ t('accessions.climate.bio16') } />
<NumberFilter name="geo.climate.bio17" label={ t('accessions.climate.bio17') } />
<NumberFilter name="geo.climate.bio18" label={ t('accessions.climate.bio18') } />
<NumberFilter name="geo.climate.bio19" label={ t('accessions.climate.bio19') } />
</CollapsibleComponentSearch>
</CollapsibleComponentSearch>
<CollapsibleComponentSearch title={ t('accessions.public.f.climate') }>
<NumberFilter name="geo.climate.bio1" label={ t('accessions.climate.bio1') } />
<NumberFilter name="geo.climate.bio2" label={ t('accessions.climate.bio2') } />
<NumberFilter name="geo.climate.bio3" label={ t('accessions.climate.bio3') } />
<NumberFilter name="geo.climate.bio4" label={ t('accessions.climate.bio4') } />
<NumberFilter name="geo.climate.bio5" label={ t('accessions.climate.bio5') } />
<NumberFilter name="geo.climate.bio6" label={ t('accessions.climate.bio6') } />
<NumberFilter name="geo.climate.bio7" label={ t('accessions.climate.bio7') } />
<NumberFilter name="geo.climate.bio8" label={ t('accessions.climate.bio8') } />
<NumberFilter name="geo.climate.bio9" label={ t('accessions.climate.bio9') } />
<NumberFilter name="geo.climate.bio10" label={ t('accessions.climate.bio10') } />
<NumberFilter name="geo.climate.bio11" label={ t('accessions.climate.bio11') } />
<NumberFilter name="geo.climate.bio12" label={ t('accessions.climate.bio12') } />
<NumberFilter name="geo.climate.bio13" label={ t('accessions.climate.bio13') } />
<NumberFilter name="geo.climate.bio14" label={ t('accessions.climate.bio14') } />
<NumberFilter name="geo.climate.bio15" label={ t('accessions.climate.bio15') } />
<NumberFilter name="geo.climate.bio16" label={ t('accessions.climate.bio16') } />
<NumberFilter name="geo.climate.bio17" label={ t('accessions.climate.bio17') } />
<NumberFilter name="geo.climate.bio18" label={ t('accessions.climate.bio18') } />
<NumberFilter name="geo.climate.bio19" label={ t('accessions.climate.bio19') } />
</CollapsibleComponentSearch>
</FiltersBlock>
);
......
......@@ -9,6 +9,8 @@ import Card, { CardContent, CardActions } from 'ui/common/Card';
const styles = (theme) => ({
firstRow: {
marginBottom: '1em',
display: 'flex',
justifyContent: 'space-between' as 'space-between',
},
});
const rtlLanguages = ['ar', 'fa'];
......@@ -19,27 +21,27 @@ const ArticleCard = ({ article, classes, index, t, ...other }: { article: Articl
<Card>
<CardContent dir={ rtlLanguages.indexOf(article.lang) !== -1 ? 'rtl' : 'ltr' }>
<div className={ classes.firstRow }>
{ index !== undefined && `${index + 1}. ` }
<ArticleLink to={ article }>
{ article.targetId !== null ?
(
<span>
<div>
<span>{ index !== undefined && `${index + 1}. ` }</span>
<ArticleLink to={ article }>
{ article.targetId !== null ?
(
<span>
<code>
<span>{ article.classPk.shortName }@{ article.targetId }</span>
</code>
</span>
) : (
<span>
) : (
<span>
<code>{ article.slug }</code>
</span>
)
}
{ ` • ` }
{ article.title || t('No title') }
</ArticleLink>
<b className={ rtlLanguages.indexOf(article.lang) !== -1 ? 'float-left' : 'float-right' }>{ article.lang }</b>
)
}
{ ` • ` }
{ article.title || t('No title') }
</ArticleLink>
</div>
<b>{ article.lang }</b>
</div>
<div>
{ article.summary && <div dangerouslySetInnerHTML={ {__html: article.summary} }/> }
......
......@@ -40,6 +40,9 @@ const style = (theme) => ({
},
avatar: {
margin: '1.143rem 0 0 1.429rem',
'html[dir="rtl"] &' : {
margin: '1.143rem 1.429rem 0 0',
},
}
/*tslint:enable*/
});
......
......@@ -58,6 +58,10 @@ const styles = (theme) => ({
width: '50%',
textAlign: 'center' as 'center',
},
'html[dir="rtl"] &' : {
paddingLeft: '0',
paddingRight: '18px',
},
'&:hover > a > *': {
filter: 'brightness(0.5)',
transition: 'all, 0.1s',
......@@ -68,7 +72,7 @@ const styles = (theme) => ({
display: 'none',
},
},
/*tslint:enable*/
share: {
fontSize: '1.3rem',
display: 'inline-block',
......@@ -92,8 +96,14 @@ const styles = (theme) => ({
marginRight: '10px',
[theme.breakpoints.down('xs')]: {
marginRight: '0',
marginLeft: '0',
},
'html[dir="rtl"] &' : {
marginLeft: '10px',
marginRight: '0',
},
},
/*tslint:enable*/
});
interface IArticleSectionProps extends React.ClassAttributes<any> {
......
......@@ -33,7 +33,12 @@ const styles = (theme) => ({
'& > ul': {
marginTop: '30px',
padding: 0,
paddingLeft: '11px',
'html[dir="ltr"] &': {
paddingLeft: '11px',
},
'html[dir="rtl"] &': {
paddingRight: '11px',
},
},
'& > ul > li': {
fontSize: '18px',
......@@ -47,6 +52,9 @@ const styles = (theme) => ({
tableLayout: 'fixed' as 'fixed',
'& th': {
textAlign: 'left' as 'left',
'html[dir="rtl"] &': {
textAlign: 'right' as 'right',
},
},
'& code': {
[theme.breakpoints.down('sm')]: {
......@@ -72,6 +80,9 @@ const styles = (theme) => ({
paddingBottom: '8px',
color: '#777777',
textAlign: 'left' as 'left',
'html[dir="rtl"] &': {
textAlign: 'right' as 'right',
},
},
'& code': {
padding: '2px 4px',
......@@ -153,15 +164,28 @@ const styles = (theme) => ({
fontSize: '16px',
lineHeight: '1.4em',
marginLeft: 0,
'html[dir="rtl"] &': {
marginRight: 0,
},
listStyleType: 'none' as 'none',
'& ul': {
paddingLeft: '0.8em',
'html[dir="ltr"] &': {
paddingLeft: '0.8em',
},
'html[dir="rtl"] &': {
paddingRight: '0.8em',
},
},
},
'& > ul': {
fontSize: '16px',
lineHeight: '1.4em',
marginLeft: '.125em',
'html[dir="ltr"] &': {
marginLeft: '.125em',
},
'html[dir="rtl"] &': {
marginRight: '.125em',
},
padding: 0,
},
'& a': {
......
......@@ -499,7 +499,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
<Section title={ t('datasets.public.c.datasetDisplay.traitsObserved') }>
<List>
{ dataset.descriptors.map((descriptor: Descriptor) => (
<ListItem key={ descriptor.uuid } className="">
<ListItem key={ descriptor.uuid } className="list-item-rtl">
<ListItemText primary={ <DescriptorLink to={ descriptor }><Markdown source={ descriptor.title }/></DescriptorLink> }
secondary={ descriptor.description && <Markdown source={ descriptor.description }/> }/>
</ListItem>
......
......@@ -36,6 +36,7 @@ class DatasetCreatorAutocompleteField extends React.Component<IDatasetCreatorAut
MenuProps={ {
open: false,
} }
classes={ { select: 'mui-select-rtl', icon: 'mui-select-icon-rtl' } }
>
{
<MenuItem value={ input.value }>{ input.value }</MenuItem>
......
......@@ -83,7 +83,7 @@ class DatasetCreatorForm extends React.Component<IDatasetCreatorFormProps, any>
<div key={ index } className="m-20 p-20 even-row">
<div>
<IconButton aria-label="Delete" style={ { float: 'right' } } onClick={ this.deleteCreator(fields, index) }>
<IconButton aria-label="Delete" className="float-right" onClick={ this.deleteCreator(fields, index) }>
<DeleteIcon/>
</IconButton>
</div>
......
......@@ -114,6 +114,7 @@ class SelectCountryInternal extends React.Component<ISelectCountryCodeInternal,
MenuProps={ {
open: false,
} }
classes={ { select: 'mui-select-rtl', icon: 'mui-select-icon-rtl' } }
>
{
this.state.pickerList ? <MenuItem value={ inputValue }>{ this.state.pickerList.code }</MenuItem> : null
......
......@@ -107,8 +107,11 @@ class LocationForm extends React.Component<ILocationFormProps, any> {
{ fields.map((location, index) => (
<div key={ index } className="p-20 m-20 even-row">
<div style={ { display: 'inline-block', width: '100%' } }>
<IconButton aria-label="Remove location" style={ { float: 'right' } }
onClick={ this.deleteLocation(fields, index) }>
<IconButton
aria-label="Remove location"
className="float-right"
onClick={ this.deleteLocation(fields, index) }
>
<DeleteIcon/>
</IconButton>
</div>
......
......@@ -54,9 +54,17 @@ const styles = (theme) => ({
marginTop: '-83px',
},
cardsContainer: {
paddingRight: '1.5rem',
[theme.breakpoints.down('sm')]: {
paddingRight: '0',
'html[dir="ltr"] &': {
paddingRight: '1.5rem',
[theme.breakpoints.down('sm')]: {
paddingRight: '0',
},
},
'html[dir="rtl"] &': {
paddingLeft: '1.5rem',
[theme.breakpoints.down('sm')]: {
paddingLeft: '0',
},
},
},
});
......
......@@ -248,7 +248,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<Section title={ t('descriptors.public.p.display.datasets') }>
<List>
{ descriptorExtra.datasets.map((dataset) => (
<ListItem button key={ dataset.uuid } style={ { padding: '1.429rem' } }>
<ListItem button key={ dataset.uuid } style={ { padding: '1.429rem' } } className="list-item-rtl">
<ListItemText primary={ <DatasetLink to={ dataset }><Markdown basic source={ dataset.title }/></DatasetLink> }
secondary={ `${dataset.versionTag}` }
/>
......@@ -264,7 +264,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<Section title={ t('descriptors.public.p.display.cropDescriptors') }>
<List>
{ descriptorExtra.descriptorLists.map((descriptorList) => (
<ListItem button key={ descriptorList.uuid }>
<ListItem button key={ descriptorList.uuid } className="list-item-rtl">
<ListItemText primary={ <DescriptorListLink to={ descriptorList }><Markdown basic source={ descriptorList.title }/></DescriptorListLink> }
secondary={ `${descriptorList.versionTag}` }
/>
......
......@@ -111,6 +111,7 @@ class SelectDescriptorListInternal extends React.Component<ISelectDescriptorList
MenuProps={ {
open: false,
} }
classes={ { select: 'mui-select-rtl', icon: 'mui-select-icon-rtl' } }
>
{
this.state.pickerList ? (
......
......@@ -23,7 +23,7 @@ const DescriptorFilters = ({ handleSubmit, initialize, t, ...other }) => (
<CropFilter/>
</CollapsibleComponentSearch>
<CollapsibleComponentSearch title={ t('descriptors.public.f.category') }>
<StringArrFilter name="category" options={ Descriptor.CATEGORIES }/>
<StringArrFilter name="category" options={ Descriptor.CATEGORIES } byKey/>
</CollapsibleComponentSearch>
<CollapsibleComponentSearch title={ t('descriptors.public.f.tidbits') }>
<BooleanFilter name="used" label={ t('descriptors.public.f.isUsed') }/>
......
......@@ -71,7 +71,13 @@ class SelectVocabulary extends React.Component<ISelectVocabularyProps, any> {
<Grid item xs={ 10 }>
<FormControl fullWidth>
<InputLabel>{ label }</InputLabel>
<Select className={ classes.select } value={ input.value && input.value.uuid } onChange={ this.handleChange } input={ <Input/> }>
<Select
className={ classes.select }
value={ input.value && input.value.uuid }
onChange={ this.handleChange }
input={ <Input/> }
classes={ { select: 'mui-select-rtl', icon: 'mui-select-icon-rtl' } }
>
<option value=""/>
{ vocabularies && vocabularies.map((v) => <option key={ v.uuid } value={ v.uuid }>{ v.title }</option>) }
</Select>
......
......@@ -19,8 +19,8 @@ const InstituteCard = ({ institute, classes, index, t, ...other }: { institute:
<Card>
<CardContent>
<div className={ classes.firstRow }>
<b>{ index !== undefined && `${index + 1}. ` }</b>
<b>
{ index !== undefined && `${index + 1}. ` }
<InstituteLink to={ institute }>
{ institute.code }
{ institute.acronym && ` • ` }
......
......@@ -98,7 +98,15 @@ class SelectInstitute extends React.Component<ISelectInstituteProps, any> {
return (
<FormControl disabled={ !owner } fullWidth required={ required } meta={ meta } label={ t(label) }>
{ institutes &&
<Select autoWidth error={ meta.touched && meta.error } className={ classes.select } value={ val || '' } onChange={ this.handleChange } input={ <Input/> }>
<Select
autoWidth
error={ meta.touched && meta.error }
className={ classes.select }
value={ val || '' }
onChange={ this.handleChange }
input={ <Input/> }
classes={ { select: 'mui-select-rtl', icon: 'mui-select-icon-rtl' } }
>
{ allowNull && <MenuItem key="noInstitute" value=""><em>{ t('partners.public.c.select.select') }</em></MenuItem> }
{ institutes && institutes.sort((a, b) => a.code.localeCompare(b.code)).map((inst) => (
<MenuItem className={ classes.menuItem } key={ inst.code } value={ inst.code }>
......
......@@ -128,6 +128,7 @@ class ChangesFilterField extends React.Component<any> {
value={ name }
name={ `${input.name}.name` }
onChange={ (e) => this.setState({name: e.target.value}) }
classes={ { select: 'mui-select-rtl', icon: 'mui-select-icon-rtl' } }
>
{ dimensions && dimensions.map((dim) => (
<MenuItem key={ 0 } value={ dim.alias || `${dim.link ? `${dim.link}.` : ''}${dim.field}` }>
......
......@@ -45,9 +45,24 @@ class BooleanDimensionFormExtraInternal extends React.Component<IBooleanFilterIn
onChange={ this.handleChange }
style={ {flexDirection: 'row', justifyContent: 'space-around'} }
>
<FormControlLabel value="1" control={ <Radio /> } label={ t('common:label.true') } />
<FormControlLabel value="2" control={ <Radio /> } label={ t('common:label.false') } />
<FormControlLabel value="3" control={ <Radio /> } label={ t('common:label.either') } />
<FormControlLabel
value="1"
control={ <Radio /> }
label={ t('common:label.true') }
className="form-control-label-rtl"
/>
<FormControlLabel
value="2"
control={ <Radio /> }
label={ t('common:label.false') }
className="form-control-label-rtl"
/>
<FormControlLabel
value="3"
control={ <Radio /> }
label={ t('common:label.either') }
className="form-control-label-rtl"
/>
</RadioGroup>
</FormControl>
</div>
......
......@@ -45,6 +45,7 @@ const LicenseSelector = ({input, meta, classes, label, t, ...rest}) => (
input.onChange(e.target.value);
}
}
classes={ { select: 'mui-select-rtl', icon: 'mui-select-icon-rtl' } }
>
<MenuItem value="" className={ classes.liItem }>{ t('kpi.admin.dimensionForm.selectType') }</MenuItem>
{
......
......@@ -49,11 +49,17 @@ class DimensionForm extends React.Component<any, void> {
/>
</div>
{ error && <div style={ {color: 'red'} }>{ error }</div> }
<Button variant="contained" type="submit" style={ {marginRight: '1rem', marginTop: '1rem'} } disabled={ submitting || invalid }>{ t('common:action.save') }</Button>
<Button variant="contained" type="submit" className="mt-1rem mr-1rem" disabled={ submitting || invalid }>
{ t('common:action.save') }
</Button>
{ onDelete &&
<Button variant="contained" type="button" style={ {marginRight: '1rem', marginTop: '1rem'} } onClick={ onDelete }>{ t('common:action.delete') }</Button>
<Button variant="contained" type="button" className="mt-1rem mr-1rem" onClick={ onDelete }>
{ t('common:action.delete') }
</Button>
}
<Button variant="contained" type="button" style={ {marginLeft: '1rem', marginTop: '1rem'} } onClick={ onCancel }>{ t('common:action.cancel') }</Button>
<Button variant="contained" type="button" className="mt-1rem ml-1rem" onClick={ onCancel }>
{ t('common:action.cancel') }
</Button>
</form>
);
}
......
......@@ -156,6 +156,7 @@ class DimensionListFieldInternal extends React.Component<IListDimensionFormExtra
<Select
value={ `${input.value}` }
onChange={ this.handleAddCurrent }
classes={ { select: 'mui-select-rtl', icon: 'mui-select-icon-rtl' } }
>
<MenuItem value="">{ t('kpi.admin.c.executionForm.dimensionList.selectDimension') }</MenuItem>
{ dim && dim.length > 0 &&
......
......@@ -48,6 +48,7 @@ class ParameterSelector extends React.Component<any> {
onChange={ (e) => {
input.onChange(e.target.value);
} }
classes={ { select: 'mui-select-rtl', icon: 'mui-select-icon-rtl' } }
>
<MenuItem value="" className={ classes.liItem }>{ t('kpi.admin.c.executionForm.parameterSelector.selectParameter') }</MenuItem>
{ params && params.length > 0 && params.map((param, i) => (
......
......@@ -33,9 +33,24 @@ const ExecutionTypeSelector = ({input, meta, t, ...rest}) => {
onChange={ handleChange }
style={ {flexDirection: 'row', justifyContent: 'space-around'} }
>
<FormControlLabel value="COUNT" control={ <Radio /> } label={ t('kpi.admin.c.execution.type.COUNT') } />
<FormControlLabel value="AVERAGE" control={ <Radio /> } label={ t('kpi.admin.c.execution.type.AVERAGE') } />
<FormControlLabel value="SUM" control={ <Radio /> } label={ t('kpi.admin.c.execution.type.SUM') } />
<FormControlLabel
value="COUNT"
control={ <Radio /> }
label={ t('kpi.admin.c.execution.type.COUNT') }
className="form-control-label-rtl"
/>
<FormControlLabel
value="AVERAGE"
control={ <Radio /> }
label={ t('kpi.admin.c.execution.type.AVERAGE') }
className="form-control-label-rtl"
/>
<FormControlLabel
value="SUM"
control={ <Radio /> }
label={ t('kpi.admin.c.execution.type.SUM') }
className="form-control-label-rtl"
/>
</RadioGroup>
</FormControl>
);
......@@ -100,8 +115,12 @@ class ExecutionForm extends React.Component<any, void> {
</div>
{ error && <div style={ {color: 'red'} }>{ error }</div> }
<Button variant="contained" type="submit" style={ {marginRight: '1rem', marginTop: '1rem'} } disabled={ submitting || invalid }>{ t('common:action.save') }</Button>
<Button variant="contained" type="button" style={ {marginLeft: '1rem', marginTop: '1rem'} } onClick={ onCancel }>{ t('common:action.cancel') }</Button>
<Button variant="contained" type="submit" className="mt-1rem mr-1rem" disabled={ submitting || invalid }>
{ t('common:action.save') }
</Button>
<Button variant="contained" type="button" className="mt-1rem ml-1rem" onClick={ onCancel }>
{ t('common:action.cancel') }
</Button>
</form>
);
}
......
......@@ -56,11 +56,17 @@ class ParameterForm extends React.Component<any, void> {
</div>
{ error && <div style={ {color: 'red'} }>{ error }</div> }
<Button variant="contained" type="submit" style={ {marginRight: '1rem', marginTop: '1rem'} } disabled={ submitting || invalid }>{ t('common:action.save') }</Button>
<Button variant="contained" type="submit" className="mt-1rem mr-1rem" disabled={ submitting || invalid }>
{ t('common:action.save') }
</Button>
{ onDelete &&
<Button variant="contained" type="button" style={ {marginRight: '1rem', marginTop: '1rem'} } onClick={ onDelete }>{ t('common:action.delete') }</Button>
<Button variant="contained" type="button" className="mt-1rem mr-1rem" onClick={ onDelete }>
{ t('common:action.delete') }
</Button>
}
<Button variant="contained" type="button" style={ {marginLeft: '1rem', marginTop: '1rem'} } onClick={ onCancel }>{ t('common:action.cancel') }</Button>
<Button variant="contained" type="button" className="mt-1rem ml-1rem" onClick={ onCancel }>
{ t('common:action.cancel') }
</Button>
</form>
);
}
......
......@@ -117,6 +117,7 @@ class SelectFaoInstituteInternal extends React.Component<ISelectFaoInstituteInte
MenuProps={ {
open: false,
} }
classes={ { select: 'mui-select-rtl', icon: 'mui-select-icon-rtl' } }
>
{
this.state.pickerList ? (
......
......@@ -17,6 +17,7 @@ import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
const styles = (theme) => ({
/* tslint:disable */
root: {
color: '#000',
},
......@@ -28,6 +29,11 @@ const styles = (theme) => ({
maxWidth: '6em',
marginRight: '0.5em',
overflow: 'hidden' as 'hidden',
'html[dir="rtl"] &': {
marginRight: 0,
marginLeft: '0.5em',
textAlign: 'right' as 'right',
},
},
fullName: {
whiteSpace: 'normal' as 'normal',
......@@ -35,6 +41,7 @@ const styles = (theme) => ({
menuItem: {
height: 'auto' as 'auto',
},
/* tslint:enable */
});
interface ISelectPartnerProps extends React.ClassAttributes<any> {
......@@ -107,7 +114,15 @@ class SelectPartner extends React.Component<ISelectPartnerProps, any> {
return (
<FormControl fullWidth required={ required } meta={ meta } label={ t(label) }>