Commit 40ca7123 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov

Right-to-Left

extracted `float-right` style, fixed `html[dir="rtl"]`

fixed rtl for welcome page and pagination component

fixed buttons and paddings/margins
parent 338dbf24
......@@ -56,8 +56,8 @@ const FiltersBlock = ({ title, children, handleSubmit, onSubmit, initialize, cla
<form onSubmit={ processSubmit }>
{ children }
<div className={ `pt-20 pb-20 pl-20 ${classes.stickyButtonContainer}` }>
<Button variant="raised" onClick={ processSubmit } type="submit" className={ classes.btnGreen }>Apply filters</Button>
<Button onClick={ onReset } type="button" className={ classes.btnReset }>Reset</Button>
<Button variant="raised" onClick={ processSubmit } type="submit" className={ `${classes.btnGreen} float-left` }>Apply filters</Button>
<Button onClick={ onReset } type="button" className={ `${classes.btnReset} float-right` }>Reset</Button>
</div>
</form>
</ExpandFiltersComponent>
......
......@@ -160,7 +160,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
values.map((val, index) => (
<div style={ { margin: '.2rem 0', padding: '.2rem 1rem', backgroundColor: '#e8e5e1', color: '#202222' } } key={ val }>
{ withOptions ? options[val] || val : val }
<div style={ { float: 'right' } } className="font-bold" onClick={ this.removeByIndex(index) }>X</div>
<div className="font-bold float-right" onClick={ this.removeByIndex(index) }>X</div>
</div>
)) }
</div>
......
......@@ -164,7 +164,7 @@ class PaginationComponent extends React.Component<IPaginationComponentProps, any
return (
<Grid container spacing={ 0 } className={ classes.root }>
<Grid item xs={ 12 }>
<div className={ `${classes.floatLeft} ${classes.bold} ${classes.textPagination}` }>
<div className={ `float-left pr-5 ${classes.bold} ${classes.textPagination}` }>
{ t('common:paginate.numberOfItems', { count: pageObj ? pageObj.totalElements : 0, what: t(displayName || 'common:label.item', { count: pageObj ? pageObj.totalElements : 0 }) }) }
</div>
{ ! infinite &&
......@@ -175,7 +175,7 @@ class PaginationComponent extends React.Component<IPaginationComponentProps, any
fireSortChange(0, e.target.value, sortBy);
}
}
className={ `${classes.floatRight} ${classes.showResults} ${classes.bold}` }
className={ `float-left pr-5 ${classes.showResults} ${classes.bold}` }
input={ <Input id="results-count"/> }
MenuProps={ {
PaperProps: {
......@@ -204,7 +204,7 @@ class PaginationComponent extends React.Component<IPaginationComponentProps, any
fireSortChange(0, pageObj ? pageObj.size : 10, e.target.value);
}
}
className={ `${classes.floatRight} ${classes.showResults} ${classes.bold}` }
className={ `float-right pl-5 ${classes.showResults} ${classes.bold}` }
input={ <Input id="sort-by"/> }
MenuProps={ {
PaperProps: {
......
......@@ -29,17 +29,21 @@ const styles = {
color: '#88ba42',
textDecoration: 'none',
},
'html[dir="rtl"] &' : {
paddingLeft: '0 !important',
paddingRight: '16px !important',
},
},
menu: {
'& > div+div': {
top: '3.57rem !important',
'html[dir="ltr"]' : {
'html[dir="ltr"] &' : {
left: 'auto !important',
right: '1.43rem',
},
'html[dir="rtl"]' : {
'html[dir="rtl"] &' : {
right: 'auto !important',
left: '1.43rem',
},
......
......@@ -31,11 +31,11 @@ const styles = {
'& > div+div': {
top: '3.57rem !important',
'html[dir="ltr"]' : {
'html[dir="ltr"] &' : {
left: 'auto !important',
right: '1.43rem',
},
'html[dir="rtl"]' : {
'html[dir="rtl"] &' : {
right: 'auto !important',
left: '1.43rem',
},
......
......@@ -34,6 +34,7 @@ const styleSheet = {
blockHeader: {
padding: '0 20px',
},
/*tslint:disable*/
navLogo: {
color: '#e6e5e0',
padding: '15px 0',
......@@ -42,15 +43,20 @@ const styleSheet = {
width: '100%',
maxWidth: '182px',
marginRight: '68px',
float: 'left' as 'left',
lineHeight: '22px',
display: 'block',
boxSizing: 'border-box' as 'border-box',
'html[dir="rtl"] &': {
marginRight: '0 !important',
marginLeft: '68px !important'
},
},
/*tslint:enable*/
mainIcon: {
height: '42px',
// width: '29%',
paddingRight: '0.7143rem',
paddingLeft: '0.7143rem',
paddingBottom: '0px',
display: 'inline-block',
verticalAlign: 'middle',
......@@ -123,7 +129,7 @@ class Header extends React.Component<IHeaderProps | any, any> {
return <UserMenuComponent userName={ this.props.login.user_name } logoutRequest={ this.logout }/>;
} else {
const { t } = this.props;
return <Link className={ this.props.classes.linkLogin } to="/login">{ t('common:action.login') }</Link>;
return <Link className={ `${this.props.classes.linkLogin} mr-10 ml-10` } to="/login">{ t('common:action.login') }</Link>;
}
}
......@@ -151,7 +157,7 @@ class Header extends React.Component<IHeaderProps | any, any> {
</div>
<div className={ classes.flex }>
<Link to="/" className={ this.props.classes.navLogo }>
<Link to="/" className={ `float-left ${this.props.classes.navLogo}` }>
<img src="images/GENESYS-ICON.svg" className={ classes.mainIcon } />
<img src="images/GENESYS-LOGO.svg" className={ classes.logoIcon } />
</Link>
......
......@@ -54,7 +54,6 @@ const styles = (theme) => ({
backgroundColor: '#fff',
// height: '50px',
bottom: 0,
left: 0,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
......@@ -62,6 +61,11 @@ const styles = (theme) => ({
'&:hover': {
backgroundColor: '#ccc',
},
'& > span > svg':{
'html[dir="rtl"] &' : {
transform: 'rotate(180deg)',
},
}
},
buttonCollapsed: {
// width: '72px',
......@@ -69,6 +73,11 @@ const styles = (theme) => ({
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
'& > svg':{
'html[dir="rtl"] &' : {
transform: 'rotate(180deg)',
},
}
}
});
......
......@@ -88,6 +88,9 @@ const styles = (theme) => ({
display: 'none' as 'none',
},
},
'html[dir="rtl"] &': {
marginLeft: 0,
},
},
statsWrapper: {
marginBottom: '2.857rem',
......@@ -199,6 +202,9 @@ const styles = (theme) => ({
width: '40px',
height: '40px',
},
'html[dir="rtl"] &': {
marginLeft: '1rem',
},
},
'& p': {
margin: 0,
......
......@@ -39,6 +39,35 @@ const theme = createMuiTheme({
},
},
},
MuiChip: {
deleteIcon: {
'html[dir="rtl"] &': {
marginLeft: '8px',
},
},
},
MuiFormLabel: {
root: {
'html[dir="rtl"] &': {
position: 'relative',
right: 0,
},
},
},
MuiInputLabel: {
shrink: {
'html[dir="rtl"] &': {
transformOrigin: 'top right',
},
},
},
MuiInputAdornment: {
root: {
'html[dir="rtl"] &': {
marginLeft: '-8px',
},
},
},
},
palette: {
primary: {
......
......@@ -88,7 +88,7 @@ $mui-breakpoints: (
> a {
margin-right: 2em;
body[dir="rtl"] & {
html[dir="rtl"] & {
margin-left: 2em;
margin-right: 0;
}
......@@ -292,6 +292,10 @@ $mui-breakpoints: (
img:first-child {
width: 32px;
padding-right: 0.5714rem;
html[dir="rtl"] & {
padding-left: 0.5714rem;
padding-right: 0 !important;
}
}
}
}
......@@ -390,6 +394,22 @@ $mui-breakpoints: (
filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.2));
}
/** Alignment **/
.float-right {
float: right;
html[dir=rtl] & {
float: left !important;
}
}
.float-left {
float: left;
html[dir=rtl] & {
float: right !important;
}
}
/** Text **/
.font-bold {
font-weight: bold;
......@@ -408,13 +428,13 @@ $mui-breakpoints: (
}
.text-left {
text-align: left;
body[dir="rtl"] & {
html[dir="rtl"] & {
text-align: right;
}
}
.text-right {
text-align: right;
body[dir="rtl"] & {
html[dir="rtl"] & {
text-align: left;
}
}
......
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