From 10e154c04470874faba197025fd1d074ad125b42 Mon Sep 17 00:00:00 2001 From: Nick Doiron Date: Wed, 17 Jul 2019 16:42:07 +0900 Subject: [PATCH 01/12] gulp-rtl approach --- app/scripts/controllers/preferences.js | 6 ++- gulpfile.js | 8 +++ package.json | 1 + .../confirm-page-container-header/index.scss | 6 +++ .../advanced-tab-content/index.scss | 4 ++ .../components/ui/currency-display/index.scss | 3 ++ ui/app/components/ui/editable-label.js | 1 + ui/app/components/ui/identicon/index.scss | 4 ++ .../ui/sender-to-recipient/index.scss | 54 +++++++++++++++++++ .../sender-to-recipient.component.js | 6 ++- .../ui/unit-input/unit-input.component.js | 1 + ui/app/css/itcss/components/modal.scss | 4 ++ .../css/itcss/components/newui-sections.scss | 7 +++ ui/app/css/itcss/components/sections.scss | 4 ++ ui/app/css/itcss/components/tab-bar.scss | 6 +++ ui/app/pages/add-token/token-list/index.scss | 4 ++ ui/app/pages/first-time-flow/index.scss | 4 ++ .../confirm-seed-phrase/index.scss | 4 ++ ui/app/pages/routes/index.js | 5 ++ ui/app/pages/settings/index.scss | 6 +++ ui/index.html | 1 + ui/index.js | 4 +- 22 files changed, 139 insertions(+), 4 deletions(-) diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js index 4ed3afb6c7ea..4dc4fd5a8bba 100644 --- a/app/scripts/controllers/preferences.js +++ b/app/scripts/controllers/preferences.js @@ -211,7 +211,11 @@ class PreferencesController { * */ setCurrentLocale (key) { - this.store.updateState({ currentLocale: key }) + const textDirection = (['ar', 'dv', 'fa', 'he', 'ku'].indexOf(key) > -1) ? 'rtl' : 'auto' + this.store.updateState({ + currentLocale: key, + textDirection: textDirection, + }) } /** diff --git a/gulpfile.js b/gulpfile.js index 578a64aa2c75..eef90b5c0388 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -19,6 +19,7 @@ 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 gulpMultiProcess = require('gulp-multi-process') const endOfStream = pify(require('end-of-stream')) @@ -274,6 +275,10 @@ 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 () { @@ -281,6 +286,9 @@ function createScssBuildTask ({ src, dest, devMode, pattern }) { .pipe(sass().on('error', sass.logError)) .pipe(autoprefixer()) .pipe(gulp.dest(dest)) + .pipe(rtlcss()) + .pipe(rename({ suffix: '-rtl' })) + .pipe(gulp.dest(dest)) } } diff --git a/package.json b/package.json index 44505d0f3986..a7f16630100d 100644 --- a/package.json +++ b/package.json @@ -217,6 +217,7 @@ "gulp-livereload": "4.0.0", "gulp-multi-process": "^1.3.1", "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", diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container-header/index.scss b/ui/app/components/app/confirm-page-container/confirm-page-container-header/index.scss index be77edbdf67e..c3b0162faee2 100644 --- a/ui/app/components/app/confirm-page-container/confirm-page-container-header/index.scss +++ b/ui/app/components/app/confirm-page-container/confirm-page-container-header/index.scss @@ -15,6 +15,12 @@ display: flex; justify-content: center; align-items: center; + + /*rtl:ignore*/ + [dir='rtl'] & img { + transform: rotate(180deg); + } + /*rtl:ignore*/ } &__back-button { diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss index e35b6d594426..87d2cf84e498 100644 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss +++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss @@ -39,6 +39,10 @@ color: #313A5E; font-size: 16px; + /*rtl:ignore*/ + direction: ltr; + /*rtl:ignore*/ + .minutes-num, .seconds-num { font-size: 16px; } diff --git a/ui/app/components/ui/currency-display/index.scss b/ui/app/components/ui/currency-display/index.scss index 6d069eb05428..b2f96c0c2299 100644 --- a/ui/app/components/ui/currency-display/index.scss +++ b/ui/app/components/ui/currency-display/index.scss @@ -7,6 +7,9 @@ overflow: hidden; text-overflow: ellipsis; + /*rtl:ignore*/ + direction: ltr; + /*rtl:ignore*/ } &__suffix { diff --git a/ui/app/components/ui/editable-label.js b/ui/app/components/ui/editable-label.js index eb41ec50c805..8eb10e1742a5 100644 --- a/ui/app/components/ui/editable-label.js +++ b/ui/app/components/ui/editable-label.js @@ -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') { diff --git a/ui/app/components/ui/identicon/index.scss b/ui/app/components/ui/identicon/index.scss index 4c8213f01f96..c37ae899e6de 100644 --- a/ui/app/components/ui/identicon/index.scss +++ b/ui/app/components/ui/identicon/index.scss @@ -5,6 +5,10 @@ justify-content: center; overflow: hidden; + /*rtl:ignore*/ + direction: ltr; + /*rtl:ignore*/ + &__address-wrapper { height: 40px; width: 40px; diff --git a/ui/app/components/ui/sender-to-recipient/index.scss b/ui/app/components/ui/sender-to-recipient/index.scss index b21e4e1bbbee..447ae85d371f 100644 --- a/ui/app/components/ui/sender-to-recipient/index.scss +++ b/ui/app/components/ui/sender-to-recipient/index.scss @@ -50,6 +50,12 @@ display: flex; align-items: center; justify-content: center; + + /*rtl:ignore*/ + [dir='rtl'] & { + transform: rotate(180deg); + } + /*rtl:ignore*/ } &__arrow-circle { @@ -70,6 +76,18 @@ text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; + + /*rtl:ignore*/ + [dir='rtl'] & { + direction: ltr; + text-align: right; + + span { + display: block; + direction: rtl; + } + } + /*rtl:ignore*/ } } } @@ -102,12 +120,30 @@ text-overflow: ellipsis; white-space: nowrap; font-size: .5rem; + + /*rtl:ignore*/ + [dir='rtl'] & { + direction: ltr; + text-align: right; + + span { + display: block; + direction: rtl; + } + } + /*rtl:ignore*/ } &__arrow-container { display: flex; justify-content: center; align-items: center; + + /*rtl:ignore*/ + [dir='rtl'] & { + transform: rotate(180deg); + } + /*rtl:ignore*/ } } } @@ -137,12 +173,30 @@ text-overflow: ellipsis; white-space: nowrap; font-size: .6875rem; + + /*rtl:ignore*/ + [dir='rtl'] & { + direction: ltr; + text-align: right; + + span { + display: block; + direction: rtl; + } + } + /*rtl:ignore*/ } &__arrow-container { display: flex; justify-content: center; align-items: center; + + /*rtl:ignore*/ + [dir='rtl'] & { + transform: rotate(180deg); + } + /*rtl:ignore*/ } } } diff --git a/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js b/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js index 933f1b007ade..c8e7a1870b07 100644 --- a/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js +++ b/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js @@ -66,7 +66,8 @@ export default class SenderToRecipient extends PureComponent { onHidden={() => this.setState({ senderAddressCopied: false })} >
- { addressOnly ? `${t('from')}: ${checksummedSenderAddress}` : senderName } + { addressOnly ? `${t('from')}: ` : '' } + { addressOnly ? checksummedSenderAddress : senderName }
) @@ -112,9 +113,10 @@ export default class SenderToRecipient extends PureComponent { onHidden={() => this.setState({ recipientAddressCopied: false })} >
+ { addressOnly ? `${t('to')}: ` : '' } { addressOnly - ? `${t('to')}: ${checksummedRecipientAddress}` + ? checksummedRecipientAddress : (recipientNickname || recipientName || this.context.t('newContract')) }
diff --git a/ui/app/components/ui/unit-input/unit-input.component.js b/ui/app/components/ui/unit-input/unit-input.component.js index 9085a0677cb8..01a2e7cf11cd 100644 --- a/ui/app/components/ui/unit-input/unit-input.component.js +++ b/ui/app/components/ui/unit-input/unit-input.component.js @@ -84,6 +84,7 @@ export default class UnitInput extends PureComponent {
setMouseUserState(true)} onKeyDown={e => { if (e.keyCode === 9) { @@ -323,6 +325,7 @@ Routes.propTypes = { isLoading: PropTypes.bool, loadingMessage: PropTypes.string, alertMessage: PropTypes.string, + languageDirection: PropTypes.string, network: PropTypes.string, provider: PropTypes.object, frequentRpcListDetail: PropTypes.array, @@ -349,6 +352,7 @@ function mapStateToProps (state) { sidebar, alertOpen, alertMessage, + languageDirection, isLoading, loadingMessage, } = appState @@ -360,6 +364,7 @@ function mapStateToProps (state) { sidebar, alertOpen, alertMessage, + languageDirection, isLoading, loadingMessage, isUnlocked: state.metamask.isUnlocked, diff --git a/ui/app/pages/settings/index.scss b/ui/app/pages/settings/index.scss index 4cbe5632ec9c..7fcda5145007 100644 --- a/ui/app/pages/settings/index.scss +++ b/ui/app/pages/settings/index.scss @@ -92,6 +92,12 @@ background-position: center; margin-right: 16px; cursor: pointer; + + /*rtl:ignore*/ + [dir='rtl'] & { + transform: rotate(180deg); + } + /*rtl:ignore*/ } } diff --git a/ui/index.html b/ui/index.html index 9dfaefbb3c0a..38515e09b785 100644 --- a/ui/index.html +++ b/ui/index.html @@ -12,6 +12,7 @@ +
diff --git a/ui/index.js b/ui/index.js index db929276107f..5cd298540da5 100644 --- a/ui/index.js +++ b/ui/index.js @@ -40,7 +40,9 @@ async function startApp (metamaskState, backgroundConnection, opts) { metamask: metamaskState, // appState represents the current tab's popup state - appState: {}, + appState: { + languageDirection: (metamaskState.currentLocale && ['ar', 'dv', 'fa', 'he', 'ku'].indexOf(metamaskState.currentLocale) > -1) ? 'rtl' : 'auto', + }, localeMessages: { current: currentLocaleMessages, From 084a7b43579fd6c897ef4820111b8ce2cf150d4f Mon Sep 17 00:00:00 2001 From: Nick Doiron Date: Wed, 17 Jul 2019 17:07:25 +0900 Subject: [PATCH 02/12] dont forget gulp-rename --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index a7f16630100d..4a07e4960edd 100644 --- a/package.json +++ b/package.json @@ -216,6 +216,7 @@ "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", From 968468e3db75a868b6ae0eee75b0faa994803a28 Mon Sep 17 00:00:00 2001 From: Mark Stacey Date: Wed, 31 Jul 2019 11:24:35 -0230 Subject: [PATCH 03/12] Update lockfile --- yarn.lock | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 63 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index c19a6be1b38c..429a30794cb4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5763,6 +5763,11 @@ colors@^1.1.0, colors@^1.1.2: resolved "https://registry.yarnpkg.com/colors/-/colors-1.3.3.tgz#39e005d546afe01e01f9c4ca8fa50f686a01205d" integrity sha512-mmGt/1pZqYRjMxB1axhTo16/snVZ5krrKkcmMeVKxzECMMXoCgnvTPp10QgHfcbQZw8Dq2jMNG6je4JlWU0gWg== +colors@~0.6.0-1: + version "0.6.2" + resolved "https://registry.yarnpkg.com/colors/-/colors-0.6.2.tgz#2423fe6678ac0c5dae8852e5d0e5be08c997abcc" + integrity sha1-JCP+ZnisDF2uiFLl0OW+CMmXq8w= + columnify@1.5.4: version "1.5.4" resolved "https://registry.yarnpkg.com/columnify/-/columnify-1.5.4.tgz#4737ddf1c7b69a8a7c340570782e947eec8e78bb" @@ -5841,6 +5846,11 @@ commander@^2.8.1, commander@~2.8.1: dependencies: graceful-readlink ">= 1.0.0" +commander@~2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/commander/-/commander-2.1.0.tgz#d121bbae860d9992a3d517ba96f56588e47c6781" + integrity sha1-0SG7roYNmZKj1Re6lvVliOR8Z4E= + commander@~2.19.0: version "2.19.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a" @@ -9903,6 +9913,14 @@ findup-sync@^3.0.0: micromatch "^3.0.4" resolve-dir "^1.0.1" +findup@^0.1.5: + version "0.1.5" + resolved "https://registry.yarnpkg.com/findup/-/findup-0.1.5.tgz#8ad929a3393bac627957a7e5de4623b06b0e2ceb" + integrity sha1-itkpozk7rGJ5V6fl3kYjsGsOLOs= + dependencies: + colors "~0.6.0-1" + commander "~2.1.0" + fined@^1.0.1: version "1.1.0" resolved "https://registry.yarnpkg.com/fined/-/fined-1.1.0.tgz#b37dc844b76a2f5e7081e884f7c0ae344f153476" @@ -11092,6 +11110,11 @@ gulp-multi-process@^1.3.1: dependencies: async.queue "^0.5.2" +gulp-rename@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/gulp-rename/-/gulp-rename-1.4.0.tgz#de1c718e7c4095ae861f7296ef4f3248648240bd" + integrity sha512-swzbIGb/arEoFK89tPY58vg3Ok1bw+d35PfUNwWqdo7KM4jkmuGA78JiDNqR+JeZFaeeHnRg9N7aihX3YPmsyg== + gulp-replace@^0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/gulp-replace/-/gulp-replace-0.6.1.tgz#11bf8c8fce533e33e2f6a8f2f430b955ba0be066" @@ -11101,6 +11124,16 @@ gulp-replace@^0.6.1: readable-stream "^2.0.1" replacestream "^4.0.0" +gulp-rtlcss@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/gulp-rtlcss/-/gulp-rtlcss-1.4.0.tgz#a1e4caef39182af03778cb9c18add9d3ee5e1c97" + integrity sha512-66UmUSacTzdV3L0KcsdwzExEu1+dTfNlq3emUZGgHPLgUaCrsZUgZwjsgKjPwkYJUZOucLpjOxAkB37k+H80Kw== + dependencies: + plugin-error "^1.0.1" + rtlcss "^2.4.0" + through2 "^2.0.5" + vinyl-sourcemaps-apply "^0.2.1" + gulp-sass@^4.0.0: version "4.0.1" resolved "https://registry.yarnpkg.com/gulp-sass/-/gulp-sass-4.0.1.tgz#7f43d117eb2d303524968a1b48494af1bc64d1d9" @@ -16858,6 +16891,15 @@ postcss@^6.0.1, postcss@^6.0.19: source-map "^0.6.1" supports-color "^5.2.0" +postcss@^6.0.14: + version "6.0.23" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324" + integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag== + dependencies: + chalk "^2.4.1" + source-map "^0.6.1" + supports-color "^5.4.0" + postcss@^7.0.0, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.5, postcss@^7.0.6: version "7.0.17" resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f" @@ -18100,7 +18142,7 @@ readable-stream@1.1, readable-stream@1.1.x, "readable-stream@>=1.1.13-1 <1.2.0-0 isarray "0.0.1" string_decoder "~0.10.x" -readable-stream@^2.0.0, readable-stream@^2.0.5, readable-stream@^2.2.9, readable-stream@^2.3.0, readable-stream@^2.3.5, readable-stream@^2.3.6: +readable-stream@^2.0.0, readable-stream@^2.0.5, readable-stream@^2.2.9, readable-stream@^2.3.0, readable-stream@^2.3.5, readable-stream@^2.3.6, readable-stream@~2.3.6: version "2.3.6" resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf" integrity sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw== @@ -18973,6 +19015,17 @@ rtcpeerconnection-shim@^1.2.10: dependencies: sdp "^2.6.0" +rtlcss@^2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/rtlcss/-/rtlcss-2.4.0.tgz#482ea28f2b9fe06dd0ab3057997be9af13da84c1" + integrity sha512-hdjFhZ5FCI0ABOfyXOMOhBtwPWtANLCG7rOiOcRf+yi5eDdxmDjqBruWouEnwVdzfh/TWF6NNncIEsigOCFZOA== + dependencies: + chalk "^2.3.0" + findup "^0.1.5" + mkdirp "^0.5.1" + postcss "^6.0.14" + strip-json-comments "^2.0.0" + run-async@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/run-async/-/run-async-0.1.0.tgz#c8ad4a5e110661e402a7d21b530e009f25f8e389" @@ -20663,7 +20716,7 @@ strip-json-comments@1.0.x: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91" integrity sha1-HhX7ysl9Pumb8tc7TGVrCCu6+5E= -strip-json-comments@^2.0.1, strip-json-comments@~2.0.1: +strip-json-comments@^2.0.0, strip-json-comments@^2.0.1, strip-json-comments@~2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo= @@ -21366,6 +21419,14 @@ through2@^1.1.1: readable-stream ">=1.1.13-1 <1.2.0-0" xtend ">=4.0.0 <4.1.0-0" +through2@^2.0.5: + version "2.0.5" + resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd" + integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ== + dependencies: + readable-stream "~2.3.6" + xtend "~4.0.1" + through2@~0.2.3: version "0.2.3" resolved "https://registry.yarnpkg.com/through2/-/through2-0.2.3.tgz#eb3284da4ea311b6cc8ace3653748a52abf25a3f" From f6d454e19f98c3b004288b9f12d58ceff7b68757 Mon Sep 17 00:00:00 2001 From: Mark Stacey Date: Wed, 31 Jul 2019 11:27:11 -0230 Subject: [PATCH 04/12] Add missing import --- gulpfile.js | 1 + 1 file changed, 1 insertion(+) diff --git a/gulpfile.js b/gulpfile.js index eef90b5c0388..1969541bfa84 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -20,6 +20,7 @@ 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')) From 581be59f9451b47ce11a02585bf512ac5611b9f9 Mon Sep 17 00:00:00 2001 From: Mark Stacey Date: Wed, 21 Aug 2019 17:47:30 -0300 Subject: [PATCH 05/12] Remove `languageDirection` state The language direction was stored in state twice -`textDirection` was used in the background, and `languageDirection` was used in the UI. `textDirection` is now used in both places instead. --- ui/app/pages/routes/index.js | 9 ++++----- ui/index.js | 4 +--- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/ui/app/pages/routes/index.js b/ui/app/pages/routes/index.js index 2406a223cbf0..79438174e67f 100644 --- a/ui/app/pages/routes/index.js +++ b/ui/app/pages/routes/index.js @@ -170,7 +170,7 @@ class Routes extends Component { const { isLoading, alertMessage, - languageDirection, + textDirection, loadingMessage, network, provider, @@ -209,7 +209,7 @@ class Routes extends Component { return (
setMouseUserState(true)} onKeyDown={e => { if (e.keyCode === 9) { @@ -325,7 +325,7 @@ Routes.propTypes = { isLoading: PropTypes.bool, loadingMessage: PropTypes.string, alertMessage: PropTypes.string, - languageDirection: PropTypes.string, + textDirection: PropTypes.string, network: PropTypes.string, provider: PropTypes.object, frequentRpcListDetail: PropTypes.array, @@ -352,7 +352,6 @@ function mapStateToProps (state) { sidebar, alertOpen, alertMessage, - languageDirection, isLoading, loadingMessage, } = appState @@ -364,7 +363,7 @@ function mapStateToProps (state) { sidebar, alertOpen, alertMessage, - languageDirection, + textDirection: state.metamask.textDirection, isLoading, loadingMessage, isUnlocked: state.metamask.isUnlocked, diff --git a/ui/index.js b/ui/index.js index 5cd298540da5..db929276107f 100644 --- a/ui/index.js +++ b/ui/index.js @@ -40,9 +40,7 @@ async function startApp (metamaskState, backgroundConnection, opts) { metamask: metamaskState, // appState represents the current tab's popup state - appState: { - languageDirection: (metamaskState.currentLocale && ['ar', 'dv', 'fa', 'he', 'ku'].indexOf(metamaskState.currentLocale) > -1) ? 'rtl' : 'auto', - }, + appState: {}, localeMessages: { current: currentLocaleMessages, From 6b102965d0f458630abcf834799991adc99748b2 Mon Sep 17 00:00:00 2001 From: Mark Stacey Date: Wed, 21 Aug 2019 17:48:58 -0300 Subject: [PATCH 06/12] 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. --- app/home.html | 3 ++- app/notification.html | 3 ++- app/popup.html | 3 ++- app/scripts/controllers/preferences.js | 1 + app/scripts/metamask-controller.js | 4 ++-- ui/app/helpers/utils/switch-direction.js | 30 ++++++++++++++++++++++++ ui/app/store/actions.js | 7 ++++-- ui/index.js | 5 ++++ 8 files changed, 49 insertions(+), 7 deletions(-) create mode 100644 ui/app/helpers/utils/switch-direction.js diff --git a/app/home.html b/app/home.html index ac17ed30772c..649727bbdce0 100644 --- a/app/home.html +++ b/app/home.html @@ -4,7 +4,8 @@ MetaMask - + +
diff --git a/app/notification.html b/app/notification.html index eba290c15c43..453716d1c7c5 100644 --- a/app/notification.html +++ b/app/notification.html @@ -28,7 +28,8 @@ margin-top: 1rem; } - + +
diff --git a/app/popup.html b/app/popup.html index 3a6709eaff24..59e99be435c2 100644 --- a/app/popup.html +++ b/app/popup.html @@ -4,7 +4,8 @@ MetaMask - + +
diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js index 4dc4fd5a8bba..17b8899614bb 100644 --- a/app/scripts/controllers/preferences.js +++ b/app/scripts/controllers/preferences.js @@ -216,6 +216,7 @@ class PreferencesController { currentLocale: key, textDirection: textDirection, }) + return textDirection } /** diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 1bf34a074ee5..df2c7825687b 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -1734,8 +1734,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) } diff --git a/ui/app/helpers/utils/switch-direction.js b/ui/app/helpers/utils/switch-direction.js new file mode 100644 index 000000000000..b0cee933e918 --- /dev/null +++ b/ui/app/helpers/utils/switch-direction.js @@ -0,0 +1,30 @@ +/** + * Switch the CSS stylesheet used between 'rtl' and 'ltr' + * @param {('ltr' | 'rtl')} direction Text direction, either left-to-right (ltr) or right-to-left (rtl) + */ +const switchDirection = async (direction) => { + if (direction === 'auto') { + direction = 'ltr' + } + let updatedLink + Array.from(document.getElementsByTagName('link')) + .filter(link => link.rel === 'stylesheet') + .forEach(link => { + if (link.title === direction && link.disabled) { + link.disabled = false + updatedLink = link + } else if (link.title !== direction && !link.disabled) { + link.disabled = true + } + }) + if (updatedLink) { + return new Promise((resolve, reject) => { + updatedLink.onload = () => { + resolve() + } + updatedLink.onerror = () => reject(new Error(`Failed to load '${direction}' stylesheet`)) + }) + } +} + +export default switchDirection diff --git a/ui/app/store/actions.js b/ui/app/store/actions.js index cbf8e6283bfb..9e0c1bd06c58 100644 --- a/ui/app/store/actions.js +++ b/ui/app/store/actions.js @@ -10,6 +10,7 @@ const ethUtil = require('ethereumjs-util') const { fetchLocale } = require('../helpers/utils/i18n-helper') const { getMethodDataAsync } = require('../helpers/utils/transactions.util') const { fetchSymbolAndDecimals } = require('../helpers/utils/token-util') +import switchDirection from '../helpers/utils/switch-direction' const log = require('loglevel') const { ENVIRONMENT_TYPE_NOTIFICATION } = require('../../../app/scripts/lib/enums') const { hasUnconfirmedTransactions } = require('../helpers/utils/confirm-tx.util') @@ -2597,11 +2598,13 @@ function updateCurrentLocale (key) { return fetchLocale(key) .then((localeMessages) => { log.debug(`background.setCurrentLocale`) - background.setCurrentLocale(key, (err) => { - dispatch(actions.hideLoadingIndication()) + background.setCurrentLocale(key, (err, textDirection) => { if (err) { + dispatch(actions.hideLoadingIndication()) return dispatch(actions.displayWarning(err.message)) } + switchDirection(textDirection) + dispatch(actions.hideLoadingIndication()) dispatch(actions.setCurrentLocale(key)) dispatch(actions.setLocaleMessages(localeMessages)) }) diff --git a/ui/index.js b/ui/index.js index db929276107f..0f15594d246e 100644 --- a/ui/index.js +++ b/ui/index.js @@ -5,6 +5,7 @@ const actions = require('./app/store/actions') const configureStore = require('./app/store/store') const txHelper = require('./lib/tx-helper') const { fetchLocale } = require('./app/helpers/utils/i18n-helper') +import switchDirection from './app/helpers/utils/switch-direction' const log = require('loglevel') module.exports = launchMetamaskUi @@ -33,6 +34,10 @@ async function startApp (metamaskState, backgroundConnection, opts) { : {} const enLocaleMessages = await fetchLocale('en') + if (metamaskState.textDirection === 'rtl') { + await switchDirection('rtl') + } + const store = configureStore({ activeTab: opts.activeTab, From b01fef521a37ec86a217467e58d03f1a33b433d7 Mon Sep 17 00:00:00 2001 From: Nick Doiron Date: Mon, 26 Aug 2019 16:23:04 +0000 Subject: [PATCH 07/12] patch rtl:ignore --- .../confirm-page-container-header/index.scss | 2 -- .../advanced-tab-content/index.scss | 6 ++---- .../components/ui/currency-display/index.scss | 6 ++---- ui/app/components/ui/identicon/index.scss | 6 ++---- .../ui/sender-to-recipient/index.scss | 21 ++++++++----------- ui/app/css/itcss/components/modal.scss | 6 ++---- .../css/itcss/components/newui-sections.scss | 9 ++++++-- ui/app/css/itcss/components/sections.scss | 6 ++---- ui/app/css/itcss/components/tab-bar.scss | 2 -- ui/app/pages/add-token/token-list/index.scss | 6 ++---- ui/app/pages/first-time-flow/index.scss | 6 ++---- .../confirm-seed-phrase/index.scss | 6 ++---- .../send/to-autocomplete/to-autocomplete.js | 1 + ui/app/pages/settings/index.scss | 2 -- 14 files changed, 33 insertions(+), 52 deletions(-) diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container-header/index.scss b/ui/app/components/app/confirm-page-container/confirm-page-container-header/index.scss index c3b0162faee2..44c72144624b 100644 --- a/ui/app/components/app/confirm-page-container/confirm-page-container-header/index.scss +++ b/ui/app/components/app/confirm-page-container/confirm-page-container-header/index.scss @@ -16,11 +16,9 @@ justify-content: center; align-items: center; - /*rtl:ignore*/ [dir='rtl'] & img { transform: rotate(180deg); } - /*rtl:ignore*/ } &__back-button { diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss index 87d2cf84e498..3a43ddbfcb88 100644 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss +++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss @@ -36,12 +36,10 @@ } &__time-remaining { - color: #313A5E; - font-size: 16px; - /*rtl:ignore*/ direction: ltr; - /*rtl:ignore*/ + color: #313A5E; + font-size: 16px; .minutes-num, .seconds-num { font-size: 16px; diff --git a/ui/app/components/ui/currency-display/index.scss b/ui/app/components/ui/currency-display/index.scss index b2f96c0c2299..074a65df3254 100644 --- a/ui/app/components/ui/currency-display/index.scss +++ b/ui/app/components/ui/currency-display/index.scss @@ -3,13 +3,11 @@ align-items: center; &__text { + /*rtl:ignore*/ + direction: ltr; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - - /*rtl:ignore*/ - direction: ltr; - /*rtl:ignore*/ } &__suffix { diff --git a/ui/app/components/ui/identicon/index.scss b/ui/app/components/ui/identicon/index.scss index c37ae899e6de..6abf57a19cd2 100644 --- a/ui/app/components/ui/identicon/index.scss +++ b/ui/app/components/ui/identicon/index.scss @@ -1,14 +1,12 @@ .identicon { + /*rtl:ignore*/ + direction: ltr; display: flex; flex-shrink: 0; align-items: center; justify-content: center; overflow: hidden; - /*rtl:ignore*/ - direction: ltr; - /*rtl:ignore*/ - &__address-wrapper { height: 40px; width: 40px; diff --git a/ui/app/components/ui/sender-to-recipient/index.scss b/ui/app/components/ui/sender-to-recipient/index.scss index 447ae85d371f..641015a81252 100644 --- a/ui/app/components/ui/sender-to-recipient/index.scss +++ b/ui/app/components/ui/sender-to-recipient/index.scss @@ -51,11 +51,9 @@ align-items: center; justify-content: center; - /*rtl:ignore*/ [dir='rtl'] & { transform: rotate(180deg); } - /*rtl:ignore*/ } &__arrow-circle { @@ -77,17 +75,18 @@ white-space: nowrap; font-size: .875rem; - /*rtl:ignore*/ [dir='rtl'] & { + /*rtl:ignore*/ direction: ltr; + /*rtl:ignore*/ text-align: right; span { display: block; + /*rtl:ignore*/ direction: rtl; } } - /*rtl:ignore*/ } } } @@ -121,17 +120,18 @@ white-space: nowrap; font-size: .5rem; - /*rtl:ignore*/ [dir='rtl'] & { + /*rtl:ignore*/ direction: ltr; + /*rtl:ignore*/ text-align: right; span { display: block; + /*rtl:ignore*/ direction: rtl; } } - /*rtl:ignore*/ } &__arrow-container { @@ -139,11 +139,9 @@ justify-content: center; align-items: center; - /*rtl:ignore*/ [dir='rtl'] & { transform: rotate(180deg); } - /*rtl:ignore*/ } } } @@ -174,17 +172,18 @@ white-space: nowrap; font-size: .6875rem; - /*rtl:ignore*/ [dir='rtl'] & { + /*rtl:ignore*/ direction: ltr; + /*rtl:ignore*/ text-align: right; span { display: block; + /*rtl:ignore*/ direction: rtl; } } - /*rtl:ignore*/ } &__arrow-container { @@ -192,11 +191,9 @@ justify-content: center; align-items: center; - /*rtl:ignore*/ [dir='rtl'] & { transform: rotate(180deg); } - /*rtl:ignore*/ } } } diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 76a429699a44..a32930c84094 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -18,14 +18,12 @@ } .qr-ellip-address, .ellip-address { + /*rtl:ignore*/ + direction: ltr; width: 247px; border: none; font-family: Roboto; font-size: 14px; - - /*rtl:ignore*/ - direction: ltr; - /*rtl:ignore*/ } @media screen and (max-width: 575px) { diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 439674f6378b..4051bb0b5d28 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -57,12 +57,12 @@ $wallet-view-bg: $alabaster; z-index: 200; position: relative; - /*rtl:ignore*/ [dir='rtl'] & i.fa.fa-clipboard { + /*rtl:ignore*/ margin-left: 0 !important; + /*rtl:ignore*/ margin-right: 8px !important; } - /*rtl:ignore*/ @media screen and (min-width: 576px) { overflow-y: scroll; @@ -110,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 diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index a08fb61ca2a6..2fb9184f1df3 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -414,12 +414,10 @@ textarea.twelve-word-phrase { } .qr-ellip-address, .ellip-address { - overflow: hidden; - text-overflow: ellipsis; - /*rtl:ignore*/ direction: ltr; - /*rtl:ignore*/ + overflow: hidden; + text-overflow: ellipsis; } .qr-header { diff --git a/ui/app/css/itcss/components/tab-bar.scss b/ui/app/css/itcss/components/tab-bar.scss index 0477c6e40c40..fccba2198f0d 100644 --- a/ui/app/css/itcss/components/tab-bar.scss +++ b/ui/app/css/itcss/components/tab-bar.scss @@ -63,11 +63,9 @@ background-repeat: no-repeat; background-position: center; - /*rtl:ignore*/ [dir='rtl'] & { transform: rotate(180deg); } - /*rtl:ignore*/ } } diff --git a/ui/app/pages/add-token/token-list/index.scss b/ui/app/pages/add-token/token-list/index.scss index 191ece1c9e51..bad4ec30f7f1 100644 --- a/ui/app/pages/add-token/token-list/index.scss +++ b/ui/app/pages/add-token/token-list/index.scss @@ -58,12 +58,10 @@ } &__token-name { + /*rtl:ignore*/ + direction: ltr; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - - /*rtl:ignore*/ - direction: ltr; - /*rtl:ignore*/ } } diff --git a/ui/app/pages/first-time-flow/index.scss b/ui/app/pages/first-time-flow/index.scss index 00c0b6acf9d1..c674551f403e 100644 --- a/ui/app/pages/first-time-flow/index.scss +++ b/ui/app/pages/first-time-flow/index.scss @@ -73,6 +73,8 @@ } &__textarea { + /*rtl:ignore*/ + direction: ltr; font-size: 1rem; font-family: Roboto; height: 190px; @@ -81,10 +83,6 @@ background-color: #FFFFFF; padding: 16px; margin-top: 8px; - - /*rtl:ignore*/ - direction: ltr; - /*rtl:ignore*/ } &__breadcrumbs { diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss index 81e89740f0e9..279cdbbc5b03 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss +++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss @@ -64,6 +64,8 @@ } &__selected-seed-words { + /*rtl:ignore*/ + direction: ltr; display: flex; flex-flow: row wrap; min-height: 161px; @@ -74,10 +76,6 @@ margin: 24px 0 36px; padding: 12px; - /*rtl:ignore*/ - direction: ltr; - /*rtl:ignore*/ - &__pending-seed { display: none; } diff --git a/ui/app/pages/send/to-autocomplete/to-autocomplete.js b/ui/app/pages/send/to-autocomplete/to-autocomplete.js index 8ad57995825a..71c69b5fbae1 100644 --- a/ui/app/pages/send/to-autocomplete/to-autocomplete.js +++ b/ui/app/pages/send/to-autocomplete/to-autocomplete.js @@ -99,6 +99,7 @@ ToAutoComplete.prototype.render = function () { h(`input.send-v2__to-autocomplete__input${qrScanner ? '.with-qr' : ''}`, { placeholder: this.context.t('recipientAddress'), className: inError ? `send-v2__error-border` : '', + dir: 'auto', value: to, onChange: event => onChange(event.target.value), onFocus: event => this.handleInputEvent(event), diff --git a/ui/app/pages/settings/index.scss b/ui/app/pages/settings/index.scss index 7fcda5145007..d83138c9f6c0 100644 --- a/ui/app/pages/settings/index.scss +++ b/ui/app/pages/settings/index.scss @@ -93,11 +93,9 @@ margin-right: 16px; cursor: pointer; - /*rtl:ignore*/ [dir='rtl'] & { transform: rotate(180deg); } - /*rtl:ignore*/ } } From a1b2282c458d67642233bd580bf3afc524e43047 Mon Sep 17 00:00:00 2001 From: Nick Doiron Date: Tue, 27 Aug 2019 04:37:20 +0000 Subject: [PATCH 08/12] restoring previously requested change of indexOf -> includes --- app/scripts/controllers/preferences.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js index 17b8899614bb..b3523cc768b0 100644 --- a/app/scripts/controllers/preferences.js +++ b/app/scripts/controllers/preferences.js @@ -211,7 +211,7 @@ class PreferencesController { * */ setCurrentLocale (key) { - const textDirection = (['ar', 'dv', 'fa', 'he', 'ku'].indexOf(key) > -1) ? 'rtl' : 'auto' + const textDirection = (['ar', 'dv', 'fa', 'he', 'ku'].includes(key)) ? 'rtl' : 'auto' this.store.updateState({ currentLocale: key, textDirection: textDirection, From 047dbf4c69aac5810f4fb51a7c85ae7c2a4abc8d Mon Sep 17 00:00:00 2001 From: Nick Doiron Date: Mon, 2 Sep 2019 20:28:08 -0700 Subject: [PATCH 09/12] recommended RTL changes --- .../advanced-gas-inputs/index.scss | 3 +++ .../advanced-tab-content/index.scss | 3 +++ .../token-search/token-search.component.js | 1 + .../import-with-seed-phrase.component.js | 2 ++ .../new-account/new-account.component.js | 2 ++ .../add-recipient/ens-input.component.js | 1 + ui/app/pages/send/send.scss | 4 ++++ .../connections-tab/connections-tab.component.js | 1 + ui/app/pages/settings/contact-list-tab/index.scss | 4 ++++ ui/app/pages/settings/index.scss | 5 +++++ ui/app/pages/settings/networks-tab/index.scss | 13 +++++++++++++ 11 files changed, 39 insertions(+) diff --git a/ui/app/components/app/gas-customization/advanced-gas-inputs/index.scss b/ui/app/components/app/gas-customization/advanced-gas-inputs/index.scss index 50953cbe5a79..a2352a33210c 100644 --- a/ui/app/components/app/gas-customization/advanced-gas-inputs/index.scss +++ b/ui/app/components/app/gas-customization/advanced-gas-inputs/index.scss @@ -47,6 +47,8 @@ } &__input { + /*rtl:ignore*/ + direction: ltr; border: 1px solid $dusty-gray; border-radius: 4px; color: $mid-gray; @@ -69,6 +71,7 @@ &__input-arrows { position: absolute; top: 7px; + /*rtl:ignore*/ right: 0px; width: 17px; height: 24px; diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss index 3a43ddbfcb88..c107b540047a 100644 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss +++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss @@ -139,6 +139,8 @@ } &__input { + /*rtl:ignore*/ + direction: ltr; border: 1px solid $dusty-gray; border-radius: 4px; color: $mid-gray; @@ -161,6 +163,7 @@ &__input-arrows { position: absolute; top: 7px; + /*rtl:ignore*/ right: 0px; width: 17px; height: 24px; diff --git a/ui/app/pages/add-token/token-search/token-search.component.js b/ui/app/pages/add-token/token-search/token-search.component.js index 5542a19ff438..e0e51539efb0 100644 --- a/ui/app/pages/add-token/token-search/token-search.component.js +++ b/ui/app/pages/add-token/token-search/token-search.component.js @@ -74,6 +74,7 @@ export default class TokenSearch extends Component { id="search-tokens" placeholder={this.context.t('searchTokens')} type="text" + dir="auto" value={searchQuery} onChange={e => this.handleSearch(e.target.value)} error={error} diff --git a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js index 48eff96cb650..f889c7c20f73 100644 --- a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js @@ -240,6 +240,7 @@ export default class ImportWithSeedPhrase extends PureComponent { label={t('newPassword')} type="password" className="first-time-flow__input" + dir="auto" value={this.state.password} onChange={event => this.handlePasswordChange(event.target.value)} error={passwordError} @@ -252,6 +253,7 @@ export default class ImportWithSeedPhrase extends PureComponent { label={t('confirmPassword')} type="password" className="first-time-flow__input" + dir="auto" value={this.state.confirmPassword} onChange={event => this.handleConfirmPasswordChange(event.target.value)} error={confirmPasswordError} diff --git a/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js b/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js index de073af2f798..9ee2f5e1992c 100644 --- a/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js +++ b/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js @@ -172,6 +172,7 @@ export default class NewAccount extends PureComponent { label={t('newPassword')} type="password" className="first-time-flow__input" + dir="auto" value={password} onChange={event => this.handlePasswordChange(event.target.value)} error={passwordError} @@ -186,6 +187,7 @@ export default class NewAccount extends PureComponent { label={t('confirmPassword')} type="password" className="first-time-flow__input" + dir="auto" value={confirmPassword} onChange={event => this.handleConfirmPasswordChange(event.target.value)} error={confirmPasswordError} diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.component.js b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js index 483d5d344716..8f8023fd05dd 100644 --- a/ui/app/pages/send/send-content/add-recipient/ens-input.component.js +++ b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js @@ -155,6 +155,7 @@ export default class EnsInput extends Component { this.setState({ input: e.target.value })} fullWidth diff --git a/ui/app/pages/settings/contact-list-tab/index.scss b/ui/app/pages/settings/contact-list-tab/index.scss index c7e99095fbee..aad50c419855 100644 --- a/ui/app/pages/settings/contact-list-tab/index.scss +++ b/ui/app/pages/settings/contact-list-tab/index.scss @@ -197,6 +197,10 @@ width: 30px; opacity: .5; background-repeat: no-repeat; + + [dir='rtl'] & { + transform: rotate(180deg); + } } } } diff --git a/ui/app/pages/settings/index.scss b/ui/app/pages/settings/index.scss index d83138c9f6c0..5e71adae099d 100644 --- a/ui/app/pages/settings/index.scss +++ b/ui/app/pages/settings/index.scss @@ -243,4 +243,9 @@ } } } + + .toggle-button { + /*rtl:ignore*/ + direction: ltr; + } } diff --git a/ui/app/pages/settings/networks-tab/index.scss b/ui/app/pages/settings/networks-tab/index.scss index bf83c7a1476e..fccb05ebcc3d 100644 --- a/ui/app/pages/settings/networks-tab/index.scss +++ b/ui/app/pages/settings/networks-tab/index.scss @@ -20,6 +20,11 @@ @media screen and (max-width: 575px) { padding: 0; } + + input { + /*rtl:ignore*/ + direction: ltr; + } } &__back-button { @@ -38,6 +43,10 @@ cursor: pointer; position: absolute; margin-left: 10px; + + [dir='rtl'] & { + transform: rotate(180deg); + } } } @@ -190,6 +199,10 @@ position: absolute; width: 24px; height: 24px; + + [dir='rtl'] & { + transform: rotate(180deg); + } } } From 68ae99d9a357e517c2ded6d462f4ea6a233f6906 Mon Sep 17 00:00:00 2001 From: Nick Doiron Date: Tue, 3 Sep 2019 16:46:43 +0000 Subject: [PATCH 10/12] apply @Gudahtt changes to toggle and TextField --- ui/app/components/ui/text-field/text-field.component.js | 6 +++++- ui/app/pages/settings/index.scss | 3 +++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/ui/app/components/ui/text-field/text-field.component.js b/ui/app/components/ui/text-field/text-field.component.js index ac7712c6570e..00a68483fcfa 100644 --- a/ui/app/components/ui/text-field/text-field.component.js +++ b/ui/app/components/ui/text-field/text-field.component.js @@ -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 ( { underline: material ? classes.materialUnderline : '', focused: material ? '' : classes.inputFocused, }, + inputProps: { + dir, + }, }} {...textFieldProps} /> @@ -104,6 +107,7 @@ TextField.defaultProps = { TextField.propTypes = { error: PropTypes.string, classes: PropTypes.object, + dir: PropTypes.string, material: PropTypes.bool, startAdornment: PropTypes.element, largeLabel: PropTypes.bool, diff --git a/ui/app/pages/settings/index.scss b/ui/app/pages/settings/index.scss index 5e71adae099d..3332c3f68878 100644 --- a/ui/app/pages/settings/index.scss +++ b/ui/app/pages/settings/index.scss @@ -247,5 +247,8 @@ .toggle-button { /*rtl:ignore*/ direction: ltr; + [dir='rtl'] & { + justify-content: flex-end; + } } } From 8c4593dd0336690c14349c042aaff82f6644b60f Mon Sep 17 00:00:00 2001 From: Nick Doiron Date: Tue, 3 Sep 2019 16:51:43 +0000 Subject: [PATCH 11/12] dir=auto default, fixes network tab inputs --- ui/app/components/ui/text-field/text-field.component.js | 1 + ui/app/pages/settings/networks-tab/index.scss | 5 ----- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/ui/app/components/ui/text-field/text-field.component.js b/ui/app/components/ui/text-field/text-field.component.js index 00a68483fcfa..12a97ee4d2d8 100644 --- a/ui/app/components/ui/text-field/text-field.component.js +++ b/ui/app/components/ui/text-field/text-field.component.js @@ -102,6 +102,7 @@ const TextField = props => { TextField.defaultProps = { error: null, + dir: 'auto', } TextField.propTypes = { diff --git a/ui/app/pages/settings/networks-tab/index.scss b/ui/app/pages/settings/networks-tab/index.scss index fccb05ebcc3d..b9f4245f92d0 100644 --- a/ui/app/pages/settings/networks-tab/index.scss +++ b/ui/app/pages/settings/networks-tab/index.scss @@ -20,11 +20,6 @@ @media screen and (max-width: 575px) { padding: 0; } - - input { - /*rtl:ignore*/ - direction: ltr; - } } &__back-button { From 6ecc4a2fff0013930e14d676c302bf7b57953439 Mon Sep 17 00:00:00 2001 From: Nick Doiron Date: Tue, 3 Sep 2019 16:57:10 +0000 Subject: [PATCH 12/12] remove extra dir=auto on TextFields --- ui/app/pages/add-token/token-search/token-search.component.js | 1 - .../import-with-seed-phrase.component.js | 2 -- .../create-password/new-account/new-account.component.js | 2 -- .../pages/settings/connections-tab/connections-tab.component.js | 1 - 4 files changed, 6 deletions(-) diff --git a/ui/app/pages/add-token/token-search/token-search.component.js b/ui/app/pages/add-token/token-search/token-search.component.js index e0e51539efb0..5542a19ff438 100644 --- a/ui/app/pages/add-token/token-search/token-search.component.js +++ b/ui/app/pages/add-token/token-search/token-search.component.js @@ -74,7 +74,6 @@ export default class TokenSearch extends Component { id="search-tokens" placeholder={this.context.t('searchTokens')} type="text" - dir="auto" value={searchQuery} onChange={e => this.handleSearch(e.target.value)} error={error} diff --git a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js index f889c7c20f73..48eff96cb650 100644 --- a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js @@ -240,7 +240,6 @@ export default class ImportWithSeedPhrase extends PureComponent { label={t('newPassword')} type="password" className="first-time-flow__input" - dir="auto" value={this.state.password} onChange={event => this.handlePasswordChange(event.target.value)} error={passwordError} @@ -253,7 +252,6 @@ export default class ImportWithSeedPhrase extends PureComponent { label={t('confirmPassword')} type="password" className="first-time-flow__input" - dir="auto" value={this.state.confirmPassword} onChange={event => this.handleConfirmPasswordChange(event.target.value)} error={confirmPasswordError} diff --git a/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js b/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js index 9ee2f5e1992c..de073af2f798 100644 --- a/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js +++ b/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js @@ -172,7 +172,6 @@ export default class NewAccount extends PureComponent { label={t('newPassword')} type="password" className="first-time-flow__input" - dir="auto" value={password} onChange={event => this.handlePasswordChange(event.target.value)} error={passwordError} @@ -187,7 +186,6 @@ export default class NewAccount extends PureComponent { label={t('confirmPassword')} type="password" className="first-time-flow__input" - dir="auto" value={confirmPassword} onChange={event => this.handleConfirmPasswordChange(event.target.value)} error={confirmPasswordError} diff --git a/ui/app/pages/settings/connections-tab/connections-tab.component.js b/ui/app/pages/settings/connections-tab/connections-tab.component.js index 82fb0f443290..3309fcc0d984 100644 --- a/ui/app/pages/settings/connections-tab/connections-tab.component.js +++ b/ui/app/pages/settings/connections-tab/connections-tab.component.js @@ -52,7 +52,6 @@ export default class ConnectionsTab extends PureComponent {
this.setState({ input: e.target.value })} fullWidth