Bug 1018283 - [Follow-up 951665] Pending visual revision and adjustme…

…nts of the VR call screen when in lockscreen
gtorodelvalle · Jun 16, 2014 · 6bc943c · 6bc943c
1 parent eac1340
commit 6bc943c
Show file tree

Hide file tree

Showing 38 changed files with 375 additions and 224 deletions.
diff --git a/apps/callscreen/index.html b/apps/callscreen/index.html
@@ -51,13 +51,22 @@
     -->
 
     <!-- incoming call / swiper on locked screen-->
-    <link rel="stylesheet" type="text/css" href="/style/swiper.css">
+    <link rel="stylesheet" type="text/css" href="/style/lockscreen.css">
+    <script defer src="/shared/js/mobile_operator.js"></script>
     <script defer src="/shared/js/lockscreen_slide.js"></script>
     <script defer src="/shared/js/screen_layout.js"></script>
   </head>
   <body>
     <article id="call-screen" data-layout>
       <div id="lockscreen-header">
+        <div id="lockscreen-conn-states">
+          <div>
+            <span></span><span class="connstate-line"></span><span class="connstate-line"></span>
+          </div>
+          <div>
+            <span></span><span class="connstate-line"></span><span class="connstate-line"></span>
+          </div>
+        </div>
         <div id="lockscreen-clock-time"></div>
         <div id="lockscreen-date"></div>
       </div>
@@ -123,20 +132,20 @@
       </form>
       <article id="main-container">
         <div id="contact-background"></div>
+        <div id="lockscreen-masked-background" class="blank"></div>
+        <div id="lockscreen-area"></div>
         <div id="actions-container">
           <div id="swiper-wrapper">
-            <!--Slider module related widgets -->
-            <div id="lockscreen-area"></div>
             <div id="lockscreen-icon-container">
               <div id="lockscreen-area-hangup"
-                   class="lockscreen-icon-area lockscreen-icon-left dark" role="button"
-                   data-l10n-id="hangup-a11y-button">
+                class="lockscreen-icon-area lockscreen-icon-left dark" role="button"
+                data-l10n-id="hangup-a11y-button" aria-label="Hang Up">
                 <div class="lockscreen-icon">
                 </div>
               </div>
               <div id="lockscreen-area-pickup"
-                   class="lockscreen-icon-area lockscreen-icon-right dark" role="button"
-                   data-l10n-id="pickup-a11y-button">
+                class="lockscreen-icon-area lockscreen-icon-right dark" role="button"
+                data-l10n-id="pickup-a11y-button" aria-label="Pick up">
                 <div class="lockscreen-icon">
                 </div>
               </div>
@@ -147,7 +156,6 @@
                 </div>
               </div>
             </div>
-
           </div>
           <section id="statusMsg" role="status">
             <p></p>

diff --git a/apps/callscreen/js/call_screen.js b/apps/callscreen/js/call_screen.js
@@ -1,5 +1,5 @@
 /* globals CallsHandler, KeypadManager, LazyL10n, LockScreenSlide,
-           MozActivity */
+           MozActivity, MobileOperator */
 /* jshint nonew: false */
 
 'use strict';
@@ -12,6 +12,7 @@ var CallScreen = {
 
   body: document.body,
   screen: document.getElementById('call-screen'),
+  lockscreenConnStates: document.getElementById('lockscreen-conn-states'),
   views: document.getElementById('views'),
 
   calls: document.getElementById('calls'),
@@ -163,46 +164,49 @@ var CallScreen = {
     this.hangUpIcon = document.getElementById('lockscreen-area-hangup');
     this.pickUpIcon = document.getElementById('lockscreen-area-pickup');
     this.initUnlockerEvents();
-    new LockScreenSlide(
-      // Options
-      {
-        IDs: {
-          overlay: 'main-container',
-          areas: {
-            left: 'lockscreen-area-hangup',
-            right: 'lockscreen-area-pickup'
-          }
+    new LockScreenSlide({
+      useNewStyle: true,
+
+      IDs: {
+        overlay: 'main-container',
+        areas: {
+          left: 'lockscreen-area-hangup',
+          right: 'lockscreen-area-pickup'
         },
-
-        track: {
-          backgroundColor: 'rgba(0, 0, 0, 0.4)'
-        },
-
-        colors: {
-          left: {
-            touchedColor: '255, 0, 0',
-            touchedColorStop: '255, 178, 178'
-          },
-
-          right: {
-            touchedColor: '132, 200, 44',
-            touchedColorStop: '218, 238, 191'
-          }
+      },
+
+      trackNew: {
+        strokeColorTop: 'rgba(0, 0, 0, 0)',
+        strokeColorBottom: 'rgba(0, 0, 0, 0)',
+        fillColorTop: 'rgba(0, 0, 0, 0.1)',
+        fillColorBottom: 'rgba(0, 0, 0, 0.1)'
+      },
+
+      colors: {
+        left: {
+          touchedColor: '224, 0, 0',
+          touchedColorStop: '255, 255, 255'
         },
+        right: {
+          touchedColor: '0, 173, 173',
+          touchedColorStop: '255, 255, 255'
+        }
+      },
 
-        resources: {
-          larrow: '/style/images/lock_screen/LArrow_Lockscreen.png',
-          rarrow: '/style/images/lock_screen/RArrow_Lockscreen.png'
+      iconBG: {
+        left: {
+          color: 'rgba(224, 0, 0, 0.80)'
         },
-        handle: {
-          autoExpand: {
-            sentinelOffset: 80
-          },
-          backgroundColor: '255, 255, 255',
-          backgroundAlpha: 0.85
+        right: {
+          color: 'rgba(0, 173, 173, 0.80)'
         }
+      },
+
+      resourcesNew: {
+        larrow: '/style/images/lock_screen/lockscreen_toggle_arrow_left.png',
+        rarrow: '/style/images/lock_screen/lockscreen_toggle_arrow_right.png'
       }
-    );
+    });
   },
 
   _wallpaperReady: false,
@@ -445,8 +449,79 @@ var CallScreen = {
     }
   },
 
+  /**
+   * Code 'inspired in'
+   *  /apps/system/js/lockscreen_connection_info_manager.js#updateConnState
+   *  and adapted to the call screen when the lock screen is active case.
+   */
+  showConnectionInfo: function cs_showConnectionInfo() {
+    var conns = navigator.mozMobileConnections;
+
+    var nextLine = function(connStateLines) {
+      for (var i = 0; i < connStateLines.length; i++) {
+        var line = connStateLines[i];
+        if (line.textContent === '') {
+          return line;
+        }
+      }
+      return connStateLines[connStateLines.length - 1];
+    };
+
+    var localized = function(connStateLines, operator, _) {
+      nextLine(connStateLines).textContent =
+        _('roaming', { operator: operator });
+    };
+
+    for (var i = 0; i < conns.length; i++) {
+      var conn = conns[i];
+      var connState = this.lockscreenConnStates.children[i];
+      var simIDLine = connState.children[0];
+      var connStateLines =
+        Array.prototype.slice.call(
+          connState.querySelectorAll('.connstate-line'));
+      var line;
+
+      // Set sim ID line
+      if (conns.length > 1) {
+        simIDLine.hidden = false;
+        simIDLine.textContent = 'SIM ' + (i + 1);
+      } else {
+        simIDLine.hidden = true;
+      }
+
+      // If there are multiple sim slots and only one sim card inserted, we
+      // only show the state of the inserted sim card.
+      var simCard = navigator.mozIccManager.getIccById(conn.iccId);
+      if (conns.length > 1 &&
+          navigator.mozIccManager.iccIds.length == 1 &&
+          (simCard || simCard && simCard.iccInfo &&
+            simCard.iccInfo.iccid === null)) {
+        connState.hidden = true;
+        return;
+      }
+
+      var operatorInfos = MobileOperator.userFacingInfo(conn);
+      var operator = operatorInfos.operator;
+
+      if (conn.voice.roaming) {
+        LazyL10n.get(localized.bind(connStateLines, operator));
+      } else {
+        line = nextLine(connStateLines);
+        line.l10nId = '';
+        line.textContent = operator;
+      }
+
+      if (operatorInfos.carrier) {
+        line = nextLine(connStateLines);
+        line.l10nId = '';
+        line.textContent = operatorInfos.carrier + ' ' + operatorInfos.region;
+      }
+    }
+  },
+
   showClock: function cs_showClock(now) {
     LazyL10n.get(function localized(_) {
+      this.showConnectionInfo();
       var f = new navigator.mozL10n.DateTimeFormat();
       var timeFormat = _('shortTimeFormat').replace('%p', '<span>%p</span>');
       var dateFormat = _('longDateFormat');

diff --git a/apps/callscreen/style/images/lock_screen/Ico_lsc_hangupwhite_40x40.png b/apps/callscreen/style/images/lock_screen/Ico_lsc_hangupwhite_40x40.png
diff --git a/apps/callscreen/style/images/lock_screen/Ico_lsc_hangupwhite_40x40@1.5x.png b/apps/callscreen/style/images/lock_screen/Ico_lsc_hangupwhite_40x40@1.5x.png
diff --git a/apps/callscreen/style/images/lock_screen/Ico_lsc_hangupwhite_40x40@2.25x.png b/apps/callscreen/style/images/lock_screen/Ico_lsc_hangupwhite_40x40@2.25x.png
diff --git a/apps/callscreen/style/images/lock_screen/Ico_lsc_hangupwhite_40x40@2x.png b/apps/callscreen/style/images/lock_screen/Ico_lsc_hangupwhite_40x40@2x.png
diff --git a/apps/callscreen/style/images/lock_screen/Ico_lsc_pickupwhite_40x40.png b/apps/callscreen/style/images/lock_screen/Ico_lsc_pickupwhite_40x40.png
diff --git a/apps/callscreen/style/images/lock_screen/Ico_lsc_pickupwhite_40x40@1.5x.png b/apps/callscreen/style/images/lock_screen/Ico_lsc_pickupwhite_40x40@1.5x.png
diff --git a/apps/callscreen/style/images/lock_screen/Ico_lsc_pickupwhite_40x40@2.25x.png b/apps/callscreen/style/images/lock_screen/Ico_lsc_pickupwhite_40x40@2.25x.png
diff --git a/apps/callscreen/style/images/lock_screen/Ico_lsc_pickupwhite_40x40@2x.png b/apps/callscreen/style/images/lock_screen/Ico_lsc_pickupwhite_40x40@2x.png
diff --git a/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen.png b/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen.png
diff --git a/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen@1.5x.png b/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen@1.5x.png
diff --git a/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen@2.25x.png b/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen@2.25x.png
diff --git a/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen@2x.png b/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen@2x.png
diff --git a/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen.png b/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen.png
diff --git a/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen@1.5x.png b/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen@1.5x.png
diff --git a/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen@2.25x.png b/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen@2.25x.png
diff --git a/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen@2x.png b/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen@2x.png
diff --git a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer.png b/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer.png
diff --git a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer@1.5x.png b/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer@1.5x.png
diff --git a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer@2.25x.png b/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer@2.25x.png
diff --git a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer@2x.png b/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer@2x.png
diff --git a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject.png b/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject.png
diff --git a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject@1.5x.png b/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject@1.5x.png
diff --git a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject@2.25x.png b/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject@2.25x.png
diff --git a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject@2x.png b/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject@2x.png
diff --git a/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_left.png b/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_left.png
diff --git a/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_left@1.5x.png b/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_left@1.5x.png
diff --git a/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_left@2x.png b/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_left@2x.png
diff --git a/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_right.png b/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_right.png
diff --git a/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_right@1.5x.png b/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_right@1.5x.png
diff --git a/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_right@2x.png b/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_right@2x.png