Skip to content

Commit

Permalink
Right-to-left CSS (using module for conversion) (#7072)
Browse files Browse the repository at this point in the history
* Create RTL stylesheets using `gulp-rtl`

* Handle RTL stylesheet special cases

Certain blocks of Sass  were set to bypass "rtlcss" using ignore
comments. Certain icons had to be flipped 180 degrees.

* Switch stylesheets when locale changes

A second stylesheet has been added to each HTML page for use with
right-to-left locales. It is disabled by default. It is enabled on
startup if a RTL locale is set, and when switching to a RTL locale.
Similarly the LTR stylesheet is disabled when a RTL locale is used.

Unfortunately there is an unpleasant flash of unstyled content when
switching between a LTR and a RTL locale. There is also a slightly
longer page load time when using a RTL locale (<1s difference). We
couldn't think of an easy way to avoid these problems.

* Set `dir="auto"` as default on `TextFields`
  • Loading branch information
mapmeld authored and Gudahtt committed Sep 3, 2019
1 parent 361a19a commit d589d2d
Show file tree
Hide file tree
Showing 36 changed files with 268 additions and 14 deletions.
3 changes: 2 additions & 1 deletion app/home.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
<title>MetaMask</title>
<link rel="stylesheet" type="text/css" href="./index.css">
<link rel="stylesheet" type="text/css" href="./index.css" title="ltr">
<link rel="stylesheet" type="text/css" href="./index-rtl.css" title="rtl" disabled>
</head>
<body>
<div id="app-content"></div>
Expand Down
3 changes: 2 additions & 1 deletion app/notification.html
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@
margin-top: 1rem;
}
</style>
<link rel="stylesheet" type="text/css" href="./index.css">
<link rel="stylesheet" type="text/css" href="./index.css" title="ltr">
<link rel="stylesheet" type="text/css" href="./index-rtl.css" title="rtl" disabled>
</head>
<body class="notification" style="height:600px;">
<div id="app-content">
Expand Down
3 changes: 2 additions & 1 deletion app/popup.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
<title>MetaMask</title>
<link rel="stylesheet" type="text/css" href="./index.css">
<link rel="stylesheet" type="text/css" href="./index.css" title="ltr">
<link rel="stylesheet" type="text/css" href="./index-rtl.css" title="rtl" disabled>
</head>
<body style="width:357px; height:600px;">
<div id="app-content"></div>
Expand Down
7 changes: 6 additions & 1 deletion app/scripts/controllers/preferences.js
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,12 @@ class PreferencesController {
*
*/
setCurrentLocale (key) {
this.store.updateState({ currentLocale: key })
const textDirection = (['ar', 'dv', 'fa', 'he', 'ku'].includes(key)) ? 'rtl' : 'auto'
this.store.updateState({
currentLocale: key,
textDirection: textDirection,
})
return textDirection
}

/**
Expand Down
4 changes: 2 additions & 2 deletions app/scripts/metamask-controller.js
Original file line number Diff line number Diff line change
Expand Up @@ -1723,8 +1723,8 @@ module.exports = class MetamaskController extends EventEmitter {
*/
setCurrentLocale (key, cb) {
try {
this.preferencesController.setCurrentLocale(key)
cb(null)
const direction = this.preferencesController.setCurrentLocale(key)
cb(null, direction)
} catch (err) {
cb(err)
}
Expand Down
9 changes: 9 additions & 0 deletions gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ const gulpStylelint = require('gulp-stylelint')
const stylefmt = require('gulp-stylefmt')
const uglify = require('gulp-uglify-es').default
const pify = require('pify')
const rtlcss = require('gulp-rtlcss')
const rename = require('gulp-rename')
const gulpMultiProcess = require('gulp-multi-process')
const endOfStream = pify(require('end-of-stream'))

Expand Down Expand Up @@ -274,13 +276,20 @@ function createScssBuildTask ({ src, dest, devMode, pattern }) {
.pipe(sourcemaps.write())
.pipe(autoprefixer())
.pipe(gulp.dest(dest))
.pipe(rtlcss())
.pipe(rename({ suffix: '-rtl' }))
.pipe(sourcemaps.write())
.pipe(gulp.dest(dest))
}

function buildScss () {
return gulp.src(src)
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(gulp.dest(dest))
.pipe(rtlcss())
.pipe(rename({ suffix: '-rtl' }))
.pipe(gulp.dest(dest))
}
}

Expand Down
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,9 @@
"gulp-json-editor": "^2.2.1",
"gulp-livereload": "4.0.0",
"gulp-multi-process": "^1.3.1",
"gulp-rename": "^1.4.0",
"gulp-replace": "^0.6.1",
"gulp-rtlcss": "^1.4.0",
"gulp-sass": "^4.0.0",
"gulp-sourcemaps": "^2.6.0",
"gulp-stylefmt": "^1.1.0",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@
display: flex;
justify-content: center;
align-items: center;

[dir='rtl'] & img {
transform: rotate(180deg);
}
}

&__back-button {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@
}

&__input {
/*rtl:ignore*/
direction: ltr;
border: 1px solid $dusty-gray;
border-radius: 4px;
color: $mid-gray;
Expand All @@ -69,6 +71,7 @@
&__input-arrows {
position: absolute;
top: 7px;
/*rtl:ignore*/
right: 0px;
width: 17px;
height: 24px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@
}

&__time-remaining {
/*rtl:ignore*/
direction: ltr;
color: #313A5E;
font-size: 16px;

Expand Down Expand Up @@ -137,6 +139,8 @@
}

&__input {
/*rtl:ignore*/
direction: ltr;
border: 1px solid $dusty-gray;
border-radius: 4px;
color: $mid-gray;
Expand All @@ -159,6 +163,7 @@
&__input-arrows {
position: absolute;
top: 7px;
/*rtl:ignore*/
right: 0px;
width: 17px;
height: 24px;
Expand Down
3 changes: 2 additions & 1 deletion ui/app/components/ui/currency-display/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@
align-items: center;

&__text {
/*rtl:ignore*/
direction: ltr;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

}

&__suffix {
Expand Down
1 change: 1 addition & 0 deletions ui/app/components/ui/editable-label.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ class EditableLabel extends Component {
h('input.large-input.editable-label__input', {
type: 'text',
required: true,
dir: 'auto',
value: this.state.value,
onKeyPress: (event) => {
if (event.key === 'Enter') {
Expand Down
2 changes: 2 additions & 0 deletions ui/app/components/ui/identicon/index.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
.identicon {
/*rtl:ignore*/
direction: ltr;
display: flex;
flex-shrink: 0;
align-items: center;
Expand Down
51 changes: 51 additions & 0 deletions ui/app/components/ui/sender-to-recipient/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,10 @@
display: flex;
align-items: center;
justify-content: center;

[dir='rtl'] & {
transform: rotate(180deg);
}
}

&__arrow-circle {
Expand All @@ -70,6 +74,19 @@
text-overflow: ellipsis;
white-space: nowrap;
font-size: .875rem;

[dir='rtl'] & {
/*rtl:ignore*/
direction: ltr;
/*rtl:ignore*/
text-align: right;

span {
display: block;
/*rtl:ignore*/
direction: rtl;
}
}
}
}
}
Expand Down Expand Up @@ -102,12 +119,29 @@
text-overflow: ellipsis;
white-space: nowrap;
font-size: .5rem;

[dir='rtl'] & {
/*rtl:ignore*/
direction: ltr;
/*rtl:ignore*/
text-align: right;

span {
display: block;
/*rtl:ignore*/
direction: rtl;
}
}
}

&__arrow-container {
display: flex;
justify-content: center;
align-items: center;

[dir='rtl'] & {
transform: rotate(180deg);
}
}
}
}
Expand Down Expand Up @@ -137,12 +171,29 @@
text-overflow: ellipsis;
white-space: nowrap;
font-size: .6875rem;

[dir='rtl'] & {
/*rtl:ignore*/
direction: ltr;
/*rtl:ignore*/
text-align: right;

span {
display: block;
/*rtl:ignore*/
direction: rtl;
}
}
}

&__arrow-container {
display: flex;
justify-content: center;
align-items: center;

[dir='rtl'] & {
transform: rotate(180deg);
}
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,8 @@ export default class SenderToRecipient extends PureComponent {
onHidden={() => this.setState({ senderAddressCopied: false })}
>
<div className="sender-to-recipient__name">
{ addressOnly ? `${t('from')}: ${checksummedSenderAddress}` : senderName }
<span>{ addressOnly ? `${t('from')}: ` : '' }</span>
{ addressOnly ? checksummedSenderAddress : senderName }
</div>
</Tooltip>
)
Expand Down Expand Up @@ -112,9 +113,10 @@ export default class SenderToRecipient extends PureComponent {
onHidden={() => this.setState({ recipientAddressCopied: false })}
>
<div className="sender-to-recipient__name">
<span>{ addressOnly ? `${t('to')}: ` : '' }</span>
{
addressOnly
? `${t('to')}: ${checksummedRecipientAddress}`
? checksummedRecipientAddress
: (recipientNickname || recipientName || this.context.t('newContract'))
}
</div>
Expand Down
7 changes: 6 additions & 1 deletion ui/app/components/ui/text-field/text-field.component.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const styles = {
}

const TextField = props => {
const { error, classes, material, startAdornment, largeLabel, ...textFieldProps } = props
const { error, classes, material, startAdornment, largeLabel, dir, ...textFieldProps } = props

return (
<MaterialTextField
Expand All @@ -91,6 +91,9 @@ const TextField = props => {
underline: material ? classes.materialUnderline : '',
focused: material ? '' : classes.inputFocused,
},
inputProps: {
dir,
},
}}
{...textFieldProps}
/>
Expand All @@ -99,11 +102,13 @@ const TextField = props => {

TextField.defaultProps = {
error: null,
dir: 'auto',
}

TextField.propTypes = {
error: PropTypes.string,
classes: PropTypes.object,
dir: PropTypes.string,
material: PropTypes.bool,
startAdornment: PropTypes.element,
largeLabel: PropTypes.bool,
Expand Down
1 change: 1 addition & 0 deletions ui/app/components/ui/unit-input/unit-input.component.js
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ export default class UnitInput extends PureComponent {
<div className="unit-input__input-container">
<input
type="number"
dir="ltr"
className={classnames('unit-input__input', { 'unit-input__disabled': maxModeOn })}
value={value}
placeholder={placeholder}
Expand Down
2 changes: 2 additions & 0 deletions ui/app/css/itcss/components/modal.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
}

.qr-ellip-address, .ellip-address {
/*rtl:ignore*/
direction: ltr;
width: 247px;
border: none;
font-family: Roboto;
Expand Down
12 changes: 12 additions & 0 deletions ui/app/css/itcss/components/newui-sections.scss
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,13 @@ $wallet-view-bg: $alabaster;
z-index: 200;
position: relative;

[dir='rtl'] & i.fa.fa-clipboard {
/*rtl:ignore*/
margin-left: 0 !important;
/*rtl:ignore*/
margin-right: 8px !important;
}

@media screen and (min-width: 576px) {
overflow-y: scroll;
overflow-x: hidden;
Expand Down Expand Up @@ -103,6 +110,11 @@ $wallet-view-bg: $alabaster;
box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px;
width: 85%;
height: calc(100% - 56px);

[dir='rtl'] & {
/* rtl:ignore */
left: 15%;
}
}

// main-container media queries
Expand Down
2 changes: 2 additions & 0 deletions ui/app/css/itcss/components/sections.scss
Original file line number Diff line number Diff line change
Expand Up @@ -414,6 +414,8 @@ textarea.twelve-word-phrase {
}

.qr-ellip-address, .ellip-address {
/*rtl:ignore*/
direction: ltr;
overflow: hidden;
text-overflow: ellipsis;
}
Expand Down
4 changes: 4 additions & 0 deletions ui/app/css/itcss/components/tab-bar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,10 @@
background-size: contain;
background-repeat: no-repeat;
background-position: center;

[dir='rtl'] & {
transform: rotate(180deg);
}
}
}

Expand Down
Loading

0 comments on commit d589d2d

Please sign in to comment.