MetaMask · Gudahtt · Sep 3, 2019 · Jul 17, 2019 · Jul 17, 2019 · Jul 31, 2019
@@ -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>

@@ -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">

@@ -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>

@@ -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
   }
 
   /**

@@ -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)
     }

@@ -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'))
 
@@ -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))
   }
 }
 

@@ -216,7 +216,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",

@@ -15,6 +15,10 @@
     display: flex;
     justify-content: center;
     align-items: center;
+
+    [dir='rtl'] & img {
+      transform: rotate(180deg);
+    }
   }
 
   &__back-button {

@@ -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;

@@ -36,6 +36,8 @@
     }
 
     &__time-remaining {
+      /*rtl:ignore*/
+      direction: ltr;
       color: #313A5E;
       font-size: 16px;
 
@@ -137,6 +139,8 @@
     }
 
     &__input {
+      /*rtl:ignore*/
+      direction: ltr;
       border: 1px solid $dusty-gray;
       border-radius: 4px;
       color: $mid-gray;
@@ -159,6 +163,7 @@
     &__input-arrows {
       position: absolute;
       top: 7px;
+      /*rtl:ignore*/
       right: 0px;
       width: 17px;
       height: 24px;

@@ -3,10 +3,11 @@
   align-items: center;
 
   &__text {
+    /*rtl:ignore*/
+    direction: ltr;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-
   }
 
   &__suffix {

@@ -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') {

@@ -1,4 +1,6 @@
 .identicon {
+  /*rtl:ignore*/
+  direction: ltr;
   display: flex;
   flex-shrink: 0;
   align-items: center;

@@ -50,6 +50,10 @@
         display: flex;
         align-items: center;
         justify-content: center;
+
+        [dir='rtl'] & {
+          transform: rotate(180deg);
+        }
       }
 
       &__arrow-circle {
@@ -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;
+          }
+        }
       }
     }
   }
@@ -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);
+        }
       }
     }
   }
@@ -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);
+        }
       }
     }
   }

@@ -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>
     )
@@ -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>

@@ -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
@@ -91,6 +91,9 @@ const TextField = props => {
           underline: material ? classes.materialUnderline : '',
           focused: material ? '' : classes.inputFocused,
         },
+        inputProps: {
+          dir,
+        },
       }}
       {...textFieldProps}
     />
@@ -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,

@@ -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}

@@ -18,6 +18,8 @@
 }
 
 .qr-ellip-address, .ellip-address {
+  /*rtl:ignore*/
+  direction: ltr;
   width: 247px;
   border: none;
   font-family: Roboto;

@@ -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;
@@ -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

@@ -414,6 +414,8 @@ textarea.twelve-word-phrase {
 }
 
 .qr-ellip-address, .ellip-address {
+  /*rtl:ignore*/
+  direction: ltr;
   overflow: hidden;
   text-overflow: ellipsis;
 }

@@ -62,6 +62,10 @@
       background-size: contain;
       background-repeat: no-repeat;
       background-position: center;
+
+      [dir='rtl'] & {
+        transform: rotate(180deg);
+      }
     }
   }