Merge pull request #32812 from Phoxygen/bug1217377-callscreen-rtl-css

Bug 1217377 - callscreen RTL css refactoring. r=gsvelto

apps/callscreen/index.html

@@ -167,7 +167,7 @@
             <p></p>
           </section>
           <footer id="call-options">
-            <section id="co-advanced" dir="ltr">
+            <section id="co-advanced">
               <div class="grid-wrapper grid">
                 <span class="grid-cell options-column">
                   <button id="mute" class="co-advanced-option grid center" data-l10n-id="mute">
@@ -217,15 +217,15 @@
       </article>
     </article>
     <article id="incoming-container">
-      <header>
+      <header dir="ltr">
         <button id="incoming-end" data-l10n-id="hangup-a11y-button">
         </button>
         <button id="incoming-answer" data-l10n-id="hold">
         </button>
       </header>
       <section id="incoming-info">
         <div class="incoming-number-info">
-          <span id="incoming-number" dir="bdi"></span>
+          <span id="incoming-number" dir="auto"></span>
           <div id="incoming-number-additional-info" class="font-light">
             <span id="incoming-number-additional-info-tel-type" dir="auto"></span>
             <span class="separator"></span>
@@ -320,7 +320,7 @@
               </span>
             </div>
           </section>
-          <section id="keypad-hidebar" dir="ltr">
+          <section id="keypad-hidebar">
             <button id= "keypad-hidebar-mute-action" class="kh__button kh__button--mute"></button>
             <button id= "keypad-hidebar-hang-up-action-wrapper" class="kh__call-end-button"></button>
             <button id= "keypad-hidebar-hide-keypad-action" class="kh__button kh__button--hide"></button>

apps/callscreen/style/conference_group_ui.css

@@ -3,16 +3,12 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding: 0 10.0rem 2rem 0;
+  padding: 0 10.0rem 2rem;
+  padding-inline-start: 0;
   font-size: 1.6rem;
   line-height: 2rem;
 }
 
-html[dir="rtl"] #group-call-details-list > section .additionalContactInfo {
-  text-align: right;
-  padding: 0 0 2rem 10.0rem;
-}
-
 #group-call-details-list .duration {
   display: none;
 }
@@ -25,12 +21,13 @@ html[dir="rtl"] #group-call-details-list > section .additionalContactInfo {
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: bold;
+}
+html[dir="ltr"] #group-call-details-list .number bdi {
+  text-align: left;
   padding-right: 10.0rem;
 }
-
 html[dir="rtl"] #group-call-details-list .number bdi {
   text-align: right;
-  padding-right: 0;
   padding-left: 10.0rem;
 }
 
@@ -48,17 +45,19 @@ html[dir="rtl"] #group-call-details-list .number bdi {
 
 #group-call-details .hangup-button {
   position: absolute;
-  background: url('images/handled_call/actionicon_activecall_hangup.png') no-repeat scroll right 1.8rem center / 4rem auto transparent;
+  background: url('images/handled_call/actionicon_activecall_hangup.png') no-repeat scroll transparent;
+  background-size: 4rem auto;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   visibility: visible;
 }
-
+html[dir="ltr"] #group-call-details .hangup-button {
+  background-position: right 1.8rem center;
+}
 html[dir="rtl"] #group-call-details .hangup-button {
-  background: url('images/handled_call/actionicon_activecall_hangup.png') no-repeat scroll left 1.8rem center / 4rem auto transparent;
-  visibility: visible;
+  background-position: left 1.8rem center;
 }
 
 #group-call-details section.ended > .hangup-button {
@@ -69,24 +68,20 @@ html[dir="rtl"] #group-call-details .hangup-button {
   display: block;
   position: absolute;
   top: 1rem;
-  right: 1.5rem;
-}
-
-html[dir="rtl"] #group-call-details section.ended > .duration {
-  right: auto;
-  left: 1.5rem;
+  offset-inline-end: 1.5rem;
 }
 
 #group-call-details section.ended > .duration > span {
   font-weight: normal;
 }
 
 #group-call-details section.ended > .duration > .total-duration {
-  text-align: right;
   font-weight: 300;
   line-height: 1.7rem;
 }
-
+html[dir="ltr"] #group-call-details section.ended > .duration > .total-duration {
+  text-align: right;
+}
 html[dir="rtl"] #group-call-details section.ended > .duration > .total-duration {
   text-align: left;
 }