Merge pull request #26465 from EragonJ/bug-1056017

Bug 1056017 - [Arabic] Display problem in Settings App - RTL Support Req...
mozilla-b2g · Nov 28, 2014 · e18e2d0 · e18e2d0
2 parents 1fff49c + 5c09b1d
commit e18e2d0
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 26 deletions.
diff --git a/apps/settings/elements/root.html b/apps/settings/elements/root.html
@@ -257,20 +257,7 @@ <h2 data-l10n-id="operatorServices">Operator Services</h2>
       </ul>
     </div>
 
-    <form role="dialog" data-type="confirm" class="turn-on-ums-dialog" hidden>
-      <section>
-        <h1 data-l10n-id="ums-warning-title">Enable USB storage?</h1>
-        <p data-l10n-id="ums-confirm">
-          Enabling USB storage allows another computer or device connected using USB to access files on this phone.
-        </p>
-      </section>
-      <menu>
-        <button data-l10n-id="cancel" class="ums-cancel-option">Cancel</button>
-        <button data-l10n-id="ok" class="ums-confirm-option recommend">OK</button>
-      </menu>
-    </form>
-
-    <panel data-path="panels/root/panel"></panel>
+    <panel data-path="panels/root/panel"><panel>
 
   </template>
 </element>
diff --git a/apps/settings/index.html b/apps/settings/index.html
@@ -422,6 +422,19 @@ <h1 class="is-warning-head"></h1>
       </menu>
     </form>
 
+    <form role="dialog" data-type="confirm" class="turn-on-ums-dialog" hidden>
+      <section>
+        <h1 data-l10n-id="ums-warning-title">Enable USB storage?</h1>
+        <p data-l10n-id="ums-confirm">
+          Enabling USB storage allows another computer or device connected using USB to access files on this phone.
+        </p>
+      </section>
+      <menu>
+        <button data-l10n-id="cancel" class="ums-cancel-option">Cancel</button>
+        <button data-l10n-id="ok" class="ums-confirm-option recommend">OK</button>
+      </menu>
+    </form>
+
     <div class="settings-dialog-overlay" hidden></div>
 
     <script src="js/startup.js"></script>

diff --git a/apps/settings/js/panels/root/panel.js b/apps/settings/js/panels/root/panel.js
@@ -44,14 +44,16 @@ define(function(require) {
         batteryItem = BatteryItem(panel.querySelector('.battery-desc'));
         findMyDeviceItem = FindMyDeviceItem(
           panel.querySelector('.findmydevice-desc'));
+
+        var storageDialog = document.querySelector('.turn-on-ums-dialog');
         storageUsbItem = StorageUSBItem({
           mediaStorageDesc: panel.querySelector('.media-storage-desc'),
           usbEnabledCheckBox: panel.querySelector('.usb-switch'),
           usbStorage: panel.querySelector('#menuItem-enableStorage'),
           usbEnabledInfoBlock: panel.querySelector('.usb-desc'),
-          umsWarningDialog: panel.querySelector('.turn-on-ums-dialog'),
-          umsConfirmButton: panel.querySelector('.ums-confirm-option'),
-          umsCancelButton: panel.querySelector('.ums-cancel-option'),
+          umsWarningDialog: storageDialog,
+          umsConfirmButton: storageDialog.querySelector('.ums-confirm-option'),
+          umsCancelButton: storageDialog.querySelector('.ums-cancel-option'),
           mediaStorageSection: panel.querySelector('.media-storage-section')
         });
         storageAppItem = StorageAppItem(

diff --git a/apps/settings/style/icons.css b/apps/settings/style/icons.css
@@ -292,7 +292,7 @@ html[dir="rtl"] .menu-item {
 
 html[dir="rtl"] a.menu-item::after  {
   right: auto;
-  left: -0.5rem;
+  left: 0.3rem;
   transform: rotate(180deg);
 }
 

diff --git a/apps/settings/style/lists.css b/apps/settings/style/lists.css
@@ -218,8 +218,7 @@ ul li > label.pack-checkbox > .memory-item:before {
  * Boolean buttons
  */
 
-ul li button,
-ul li a.bb-button {
+ul li button {
   display: inline-block;
   margin: 1rem 0;
 }

diff --git a/apps/settings/style/settings_large.css b/apps/settings/style/settings_large.css
@@ -157,11 +157,9 @@
    * button
    */
   section[role="region"]:not([id='root']) ul li button,
-  section[role="region"]:not([id='root']) ul li div.button,
-  section[role="region"]:not([id='root']) ul li span.button,
-  section[role="region"]:not([id='root']) ul li a.bb-button {
-    width: 20rem;
-    left: calc(100% - 20rem);
+  section[role="region"]:not([id='root']) ul li .button {
+    width: 29rem;
+    left: calc(100% - 29rem);
     height: 3.5rem;
   }
 
@@ -306,7 +304,7 @@
   /**
    * button
    */
-  section[role="region"]:not([id='root']) ul li p + span.button {
+  section[role="region"]:not([id='root']) ul li p + .button {
     position: absolute;
     top: 1.2rem;
   }
@@ -321,6 +319,30 @@
   section[role="region"]:not([id='root']) .two-column-description {
     color: #6d7374;
   }
+
+
+  /**
+   * RTL
+   */
+  html[dir="rtl"] section[role="region"]#root {
+    left: unset;
+    right: 0;
+  }
+
+  html[dir="rtl"] section[role="region"],
+  html[dir="rtl"] section[role="region"].previous,
+  html[dir="rtl"] section[role="region"].current {
+    left: 0;
+  }
+
+  html[dir="rtl"] .menu-item {
+    padding-right: 7.5rem;
+  }
+
+  html[dir="rtl"] section[role="region"]:not([id='root']) ul li button,
+  html[dir="rtl"] section[role="region"]:not([id='root']) ul li .button {
+    left: 0;
+  }
 }
 
 /*