Merge pull request #32589 from Phoxygen/bug1214209-system-fxa-rtl

Bug 1214209 - system: rtl refactor fxa. r=timdream
mozilla-b2g · Oct 21, 2015 · d3b44ba · d3b44ba
2 parents 53b5d5f + efd62c6
commit d3b44ba
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 63 deletions.
diff --git a/apps/system/fxa/fxa_module.html b/apps/system/fxa/fxa_module.html
@@ -69,13 +69,13 @@ <h1 data-l10n-id="firefox-accounts-title"></h1>
         <section id="fxa-coppa" is="fxa-coppa" class="screen fxa-coppa"></section>
       </article>
       <nav role="navigation" class="horizontal navigation navigation-single-button" id="fxa-module-navigation">
-        <button id="fxa-module-back" class="left" data-l10n-id="fxa-back">
+        <button id="fxa-module-back" class="start" data-l10n-id="fxa-back">
           Back
         </button>
-         <button id="fxa-module-next" class="recommend right" data-l10n-id="fxa-next">
+         <button id="fxa-module-next" class="recommend end" data-l10n-id="fxa-next">
           Next
         </button>
-        <button id="fxa-module-done" class="recommend right" data-l10n-id="fxa-done">
+        <button id="fxa-module-done" class="recommend end" data-l10n-id="fxa-done">
           Done
         </button>
       </nav>

diff --git a/apps/system/fxa/js/fxam_ui.js b/apps/system/fxa/js/fxam_ui.js
@@ -125,26 +125,26 @@ var FxaModuleUI = {
 
     from.addEventListener('animationend', function fromAnimEnd() {
       from.removeEventListener('animationend', fromAnimEnd, false);
-      from.classList.remove(back ? 'currentToRight' : 'currentToLeft');
+      from.classList.remove(back ? 'currentToNext' : 'currentToPrev');
       from.classList.remove('current');
       from.classList.remove('back');
     }, false);
 
     to.addEventListener('animationend', function toAnimEnd() {
       to.removeEventListener('animationend', toAnimEnd, false);
-      to.classList.remove(back ? 'leftToCurrent' : 'rightToCurrent');
+      to.classList.remove(back ? 'prevToCurrent' : 'nextToCurrent');
       to.classList.add('current');
       callback && callback();
     }, false);
 
-    from.classList.add(back ? 'currentToRight' : 'currentToLeft');
-    to.classList.add(back ? 'leftToCurrent' : 'rightToCurrent');
+    from.classList.add(back ? 'currentToNext' : 'currentToPrev');
+    to.classList.add(back ? 'prevToCurrent' : 'nextToCurrent');
   },
   _inTransition: function(elem) {
-    return elem.classList.contains('currentToRight') ||
-    elem.classList.contains('currentToLeft') ||
-    elem.classList.contains('rightToCurrent') ||
-    elem.classList.contains('leftToCurrent') || false;
+    return elem.classList.contains('currentToNext') ||
+           elem.classList.contains('currentToPrev') ||
+           elem.classList.contains('nextToCurrent') ||
+           elem.classList.contains('prevToCurrent') || false;
   },
   setProgressBar: function(value) {
     this.fxaProgress.value = 100 * value / this.maxSteps;

diff --git a/apps/system/fxa/style/fxa.css b/apps/system/fxa/style/fxa.css
@@ -74,27 +74,29 @@ ul {
 }
 
 /* Overwrite this property from Building Blocks */
-.navigation button{
-  margin-left: 0.5rem;
-}
+html[dir="ltr"] .navigation button { margin-left: 0.5rem; }
+html[dir="rtl"] .navigation button { margin-right: 0.5rem; }
 
-.navigation button.left {
-  margin-left: 0.5rem;
-}
+html[dir="ltr"] .navigation button.start { margin-left: 0.5rem; }
+html[dir="rtl"] .navigation button.start { margin-right: 0.5rem; }
 
-.navigation button.left, .navigation button.right {
+.navigation button.start,
+.navigation button.end {
   width: calc((100% / 2) - 0.5rem);
-  float: left;
   position: relative;
 }
+html[dir="ltr"] .navigation button.start,
+html[dir="ltr"] .navigation button.end { float: left; }
+html[dir="rtl"] .navigation button.start,
+html[dir="rtl"] .navigation button.end { float: right; }
 
 /* When there is only one option, we remove the margin */
 
-.navigation-single-button button.left {
+.navigation-single-button button.start {
   display: none;
 }
 
-.navigation.navigation-single-button button.right {
+.navigation.navigation-single-button button.end {
   margin: 0;
   width: 100%
 }
@@ -103,7 +105,7 @@ ul {
   margin: 0;
 }
 
-.navigation-back-only button.right {
+.navigation-back-only button.end {
   display: none;
 }
 
@@ -163,9 +165,6 @@ ul {
   font-size: 1.5rem;
   margin: 0 0 1rem;
 }
-.screen p:-moz-dir(rtl) {
-  text-align: right;
-}
 
 .current {
   display: block;
@@ -220,54 +219,69 @@ ul.fxa-verification-wrapper li {
 }
 
 #show-pw-wrapper p {
-  float: left;
   display: block;
   margin: 1.5rem 0;
 }
+html[dir="ltr"] #show-pw-wrapper p { float: left; }
+html[dir="rtl"] #show-pw-wrapper p { float: right; }
+
+html[dir="ltr"] #show-pw-wrapper > label { float: left; }
+html[dir="rtl"] #show-pw-wrapper > label { float: right; }
 
-#show-pw-wrapper > label {
-  float: left;
+/* Animate next screen */
+.currentToPrev {
+  display:block;
+}
+html[dir="ltr"] .currentToPrev {
+  animation: currentToLeft var(--transition-duration) forwards;
+}
+html[dir="rtl"] .currentToPrev {
+  animation: currentToRight var(--transition-duration) forwards;
 }
 
-#show-pw-wrapper p:-moz-dir(rtl) {
-  float: right;
+.nextToCurrent {
+  display:block;
+}
+html[dir="ltr"] .nextToCurrent {
+  animation: rightToCurrent var(--transition-duration) forwards;
+}
+html[dir="rtl"] .nextToCurrent {
+  animation: leftToCurrent var(--transition-duration) forwards;
 }
 
-#show-pw-wrapper > label:-moz-dir(rtl) {
-  float: right;
+/* Animate prev screen */
+.prevToCurrent {
+  display: block;
+}
+html[dir="ltr"] .prevToCurrent {
+  animation: leftToCurrent var(--transition-duration) forwards;
+}
+html[dir="rtl"] .prevToCurrent {
+  animation: rightToCurrent var(--transition-duration) forwards;
 }
 
-/* Animate next screen */
-.currentToLeft {
-  display:block;
+.currentToNext {
+  display: block;
+}
+html[dir="ltr"] .currentToNext {
+  animation: currentToRight var(--transition-duration) forwards;
+}
+html[dir="rtl"] .currentToNext {
   animation: currentToLeft var(--transition-duration) forwards;
 }
+
 @keyframes currentToLeft {
   0% { transform: translateX(0); }
   100% { transform: translateX(-100%); }
 }
-.rightToCurrent {
-  display:block;
-  animation: rightToCurrent var(--transition-duration) forwards;
-}
 @keyframes rightToCurrent {
   0% { transform: translateX(100%); }
   100% { transform: translateX(0); }
 }
-
-/* Animate prev screen */
-.leftToCurrent {
-  display: block;
-  animation: leftToCurrent var(--transition-duration) forwards;
-}
 @keyframes leftToCurrent {
   0% { transform: translateX(-100%); }
   100% { transform: translateX(0); }
 }
-.currentToRight {
-  display: block;
-  animation: currentToRight var(--transition-duration) forwards;
-}
 @keyframes currentToRight {
   0% { transform: translateX(0); }
   100% { transform: translateX(100%); }
@@ -295,14 +309,16 @@ p.fxa-envelope {
   background-image: url('fxa_envelope.png');
   background-repeat: no-repeat;
   background-size: 7rem;
-  -moz-padding-start: 8rem;
+  padding-inline-start: 8rem;
   padding-top: 1rem;
   line-height: 2rem;
   min-height: 6.4rem;
   max-width:100%;
   overflow: hidden; /* short email addresses will only take up one line*/
   text-overflow: ellipsis;
 }
+html[dir="ltr"] p.fxa-envelope { background-position: left top; }
+html[dir="rtl"] p.fxa-envelope { background-position: right top; }
 
 #fxa-error-overlay {
   z-index: 10;
@@ -356,16 +372,3 @@ a.disabled {
   background: transparent;
   font-size: 1.7rem;
 }
-
-/* RTL View */
-
-html[dir="rtl"] .navigation button.left,
-html[dir="rtl"] .navigation button.right,
-html[dir="rtl"] #show-pw-wrapper p,
-html[dir="rtl"] #show-pw-wrapper > label {
-  float: right;
-}
-
-html[dir="rtl"] p.fxa-envelope {
-  background-position: 100% 0;
-}
diff --git a/apps/system/style/firefox_account/firefox_account_container.css b/apps/system/style/firefox_account/firefox_account_container.css
@@ -6,6 +6,10 @@
   border: 0;
 }
 
+#fxa-dialog:before {
+  display: none;
+}
+
 #fxa-dialog.fxa-dialog {
   animation: show-fx-acct .5s;
 }

diff --git a/build/csslint/xfail.list b/build/csslint/xfail.list
@@ -81,6 +81,7 @@ apps/sms/views/shared/style/common.css 0 1
 apps/sms/views/shared/style/composer.css 5 0
 apps/sms/views/shared/style/edit-mode.css 1 0
 apps/sms/views/shared/style/sms.css 1 2
+apps/system/fxa/style/fxa.css 1 0
 apps/system/mobile_id/style/mobile_id.css 0 16
 apps/system/style/action_menu/action_menu_extended.css 2 0
 apps/system/style/app_install_manager/app_install_manager.css 2 0