Merge pull request #19276 from gtorodelvalle/dialer-bug-951606-call-s…

…creen-visual-refresh

Bug 951606 - [Dialer] Call screen visual refresh 2.0

apps/callscreen/index.html

@@ -72,7 +72,7 @@
             <div class="number font-light"></div>
           </div>
           <div class="fake-number font-light"></div>
-          <div class="additionalContactInfo"></div>
+          <div class="additionalContactInfo font-light"></div>
           <div class="shadow">
           </div>
           <div class="duration">
@@ -92,7 +92,8 @@
             <div id="group-show"></div>
             <div id="group-call-label" class="number font-light"></div>
           </div>
-          <div id="group-call-summary" class="additionalContactInfo"></div>
+          <div class="fake-number font-light"></div>
+          <div id="group-call-summary" class="additionalContactInfo font-light"></div>
           <div class="duration">
             <span class="font-light"></span>
             <div class="total-duration"></div>
@@ -212,7 +213,7 @@
       <section id="incoming-info">
         <div class="incoming-number-info">
           <span id="incoming-number"></span>
-          <span id="incoming-number-additional-info"></span>
+          <span id="incoming-number-additional-info" class="font-light"></span>
         </div>
         <div id="incoming-sim" class="sim"></div>
         <button id="incoming-ignore" data-l10n-id="ignore">
@@ -236,46 +237,56 @@
           <section id="keypad">
             <div class="keypad-row">
               <div class="keypad-key" role="key" data-value="1" data-voicemail="true">
-                1<em class="keypad-subicon voicemail" data-l10n-id="voiceMailKey"></em>
+                <span>1</span>
+                <em class="keypad-subicon voicemail" data-l10n-id="voiceMailKey"></em>
               </div>
               <div class="keypad-key" role="key" data-value="2">
-                2<em>ABC</em>
+                <span>2</span>
+                <em>ABC</em>
               </div>
               <div class="keypad-key" role="key" data-value="3">
-                3<em>DEF</em>
+                <span>3</span>
+                <em>DEF</em>
               </div>
             </div>
             <div class="keypad-row">
               <div class="keypad-key" role="key" data-value="4">
-                4<em>GHI</em>
+                <span>4</span>
+                <em>GHI</em>
               </div>
               <div class="keypad-key" role="key" data-value="5">
-                5<em>JKL</em>
+                <span>5</span>
+                <em>JKL</em>
               </div>
               <div class="keypad-key" role="key" data-value="6">
-                6<em>MNO</em>
+                <span>6</span>
+                <em>MNO</em>
               </div>
             </div>
             <div class="keypad-row">
               <div class="keypad-key" role="key" data-value="7">
-                7<em>PQRS</em>
+                <span>7</span>
+                <em>PQRS</em>
               </div>
               <div class="keypad-key" role="key" data-value="8">
-                8<em>TUV</em>
+                <span>8</span>
+                <em>TUV</em>
               </div>
               <div class="keypad-key" role="key" data-value="9">
-                9<em>WXYZ</em>
+                <span>9</span>
+                <em>WXYZ</em>
               </div>
             </div>
             <div class="keypad-row">
               <div class="keypad-key keypad-key-centered" role="key" data-value="*" data-l10n-id="asterisk">
-                <div class="asterisk"></div>
+                <div class="asterisk">*</div>
               </div>
               <div class="keypad-key" role="key" data-value="0">
-                0<em class="font-size-plus">+</em>
+                <span>0</span>
+                <em class="font-size-plus">+</em>
               </div>
               <div class="keypad-key keypad-key-centered" role="key" data-type="dial" data-value="#" data-l10n-id="hashSign">
-                <div class="sharp"></div>
+                <div class="sharp">#</div>
               </div>
             </div>
           </section>

apps/callscreen/js/call_screen.js

@@ -38,6 +38,7 @@ var CallScreen = {
   hideGroupButton: document.getElementById('group-hide'),
 
   incomingContainer: document.getElementById('incoming-container'),
+  incomingInfo: document.getElementById('incoming-info'),
   incomingNumber: document.getElementById('incoming-number'),
   incomingSim: document.getElementById('incoming-sim'),
   incomingNumberAdditionalInfo:
@@ -182,8 +183,8 @@ var CallScreen = {
         },
 
         resources: {
-          larrow: '/style/images/larrow.png',
-          rarrow: '/style/images/rarrow.png'
+          larrow: '/style/images/lock_screen/LArrow_Lockscreen.png',
+          rarrow: '/style/images/lock_screen/RArrow_Lockscreen.png'
         },
         handle: {
           autoExpand: {

apps/callscreen/js/calls_handler.js

@@ -250,6 +250,7 @@ var CallsHandler = (function callsHandler() {
       Contacts.findByNumber(number,
                             function lookupContact(contact, matchingTel) {
         if (contact && contact.name) {
+          CallScreen.incomingInfo.classList.add('additionalInfo');
           CallScreen.incomingNumber.textContent = contact.name;
           CallScreen.incomingNumberAdditionalInfo.textContent =
             Utils.getPhoneNumberAdditionalInfo(matchingTel);
@@ -751,4 +752,3 @@ var CallsHandler = (function callsHandler() {
     }
   };
 })();
-