diff --git a/apps/callscreen/index.html b/apps/callscreen/index.html
index 92bed5b93783..22373c56a992 100644
--- a/apps/callscreen/index.html
+++ b/apps/callscreen/index.html
@@ -51,13 +51,22 @@
-->
-
+
+
@@ -123,20 +132,20 @@
+
+
-
-
+ class="lockscreen-icon-area lockscreen-icon-left dark" role="button"
+ data-l10n-id="hangup-a11y-button" aria-label="Hang Up">
+ class="lockscreen-icon-area lockscreen-icon-right dark" role="button"
+ data-l10n-id="pickup-a11y-button" aria-label="Pick up">
@@ -147,7 +156,6 @@
-
diff --git a/apps/callscreen/js/call_screen.js b/apps/callscreen/js/call_screen.js
index 98566e97fa93..a95f4d1d3bfe 100644
--- 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', '%p');
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
new file mode 100644
index 000000000000..5cc7a0b92696
Binary files /dev/null and b/apps/callscreen/style/images/lock_screen/Ico_lsc_hangupwhite_40x40.png differ
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
new file mode 100644
index 000000000000..aad36e10709b
Binary files /dev/null and b/apps/callscreen/style/images/lock_screen/Ico_lsc_hangupwhite_40x40@1.5x.png differ
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
new file mode 100644
index 000000000000..f38731397419
Binary files /dev/null and b/apps/callscreen/style/images/lock_screen/Ico_lsc_hangupwhite_40x40@2.25x.png differ
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
new file mode 100644
index 000000000000..62dfde21e208
Binary files /dev/null and b/apps/callscreen/style/images/lock_screen/Ico_lsc_hangupwhite_40x40@2x.png differ
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
new file mode 100644
index 000000000000..367e156792e1
Binary files /dev/null and b/apps/callscreen/style/images/lock_screen/Ico_lsc_pickupwhite_40x40.png differ
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
new file mode 100644
index 000000000000..0c8da54e6f1d
Binary files /dev/null and b/apps/callscreen/style/images/lock_screen/Ico_lsc_pickupwhite_40x40@1.5x.png differ
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
new file mode 100644
index 000000000000..72d681fe8888
Binary files /dev/null and b/apps/callscreen/style/images/lock_screen/Ico_lsc_pickupwhite_40x40@2.25x.png differ
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
new file mode 100644
index 000000000000..53379ca76d63
Binary files /dev/null and b/apps/callscreen/style/images/lock_screen/Ico_lsc_pickupwhite_40x40@2x.png differ
diff --git a/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen.png b/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen.png
deleted file mode 100644
index d013f55f7215..000000000000
Binary files a/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen.png and /dev/null differ
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
deleted file mode 100644
index 85d847843db5..000000000000
Binary files a/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen@1.5x.png and /dev/null differ
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
deleted file mode 100644
index cde1a7a5f1f8..000000000000
Binary files a/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen@2.25x.png and /dev/null differ
diff --git a/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen@2x.png b/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen@2x.png
deleted file mode 100644
index 277f868a8a56..000000000000
Binary files a/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen@2x.png and /dev/null differ
diff --git a/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen.png b/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen.png
deleted file mode 100644
index bdf9b4bd6389..000000000000
Binary files a/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen.png and /dev/null differ
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
deleted file mode 100644
index e58ee19c13de..000000000000
Binary files a/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen@1.5x.png and /dev/null differ
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
deleted file mode 100644
index 04401d927357..000000000000
Binary files a/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen@2.25x.png and /dev/null differ
diff --git a/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen@2x.png b/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen@2x.png
deleted file mode 100644
index 2808596688ce..000000000000
Binary files a/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen@2x.png and /dev/null differ
diff --git a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer.png b/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer.png
deleted file mode 100644
index d34fe5040f2a..000000000000
Binary files a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer.png and /dev/null differ
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
deleted file mode 100644
index 3199dd1bc2a3..000000000000
Binary files a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer@1.5x.png and /dev/null differ
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
deleted file mode 100644
index 7ff935e0ee1f..000000000000
Binary files a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer@2.25x.png and /dev/null differ
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
deleted file mode 100644
index c9f9114c7534..000000000000
Binary files a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer@2x.png and /dev/null differ
diff --git a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject.png b/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject.png
deleted file mode 100644
index 4ede38f43e8b..000000000000
Binary files a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject.png and /dev/null differ
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
deleted file mode 100644
index e0da663befcc..000000000000
Binary files a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject@1.5x.png and /dev/null differ
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
deleted file mode 100644
index c4a0985a6c0c..000000000000
Binary files a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject@2.25x.png and /dev/null differ
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
deleted file mode 100644
index 9a22a5725d64..000000000000
Binary files a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject@2x.png and /dev/null differ
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
new file mode 100644
index 000000000000..7323fccfeb68
Binary files /dev/null and b/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_left.png differ
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
new file mode 100644
index 000000000000..efa7e5f170af
Binary files /dev/null and b/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_left@1.5x.png differ
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
new file mode 100644
index 000000000000..e61fd3203a84
Binary files /dev/null and b/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_left@2x.png differ
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
new file mode 100644
index 000000000000..684930ee56d6
Binary files /dev/null and b/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_right.png differ
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
new file mode 100644
index 000000000000..da640c4b6c19
Binary files /dev/null and b/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_right@1.5x.png differ
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
new file mode 100644
index 000000000000..e90c18f59c66
Binary files /dev/null and b/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_right@2x.png differ
diff --git a/apps/callscreen/style/lockscreen.css b/apps/callscreen/style/lockscreen.css
new file mode 100644
index 000000000000..2baf829bfea2
--- /dev/null
+++ b/apps/callscreen/style/lockscreen.css
@@ -0,0 +1,209 @@
+#lockscreen-header {
+ z-index: 9999;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ -moz-box-sizing: border-box;
+ padding: 2rem 2.4rem 4.4rem;
+ color: #fff;
+ opacity: 1;
+}
+
+#lockscreen-conn-states {
+ width: 100%;
+ display: inline-block;
+ font-weight: 300;
+ font-size: 1.4rem;
+ padding-bottom: 1.4rem;
+
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+#lockscreen-conn-states span:empty {
+ display: none;
+}
+
+#lockscreen-conn-states span:first-child {
+ display: inline-block;
+ width: 4rem;
+ overflow: visible;
+}
+
+#lockscreen-conn-states span:last-child {
+ display: block;
+}
+
+/* For some reason display: inline-block disregards hidden attribute */
+#lockscreen-conn-states span[hidden],
+#lockscreen-conn-states[hidden] {
+ display: none;
+}
+
+#lockscreen-clock-time {
+ line-height: 1;
+ margin: -1.4rem 0 0 -0.4rem;
+ font-weight: 200;
+ font-size: 8.5rem;
+}
+
+#lockscreen-clock-time span { /* optional meridiem */
+ font-size: 3rem;
+ display: none;
+}
+
+#lockscreen-date {
+ font-weight: 300;
+ font-size: 1.4rem;
+}
+
+#lockscreen-clock-time, #lockscreen-date {
+ color: #fff;
+}
+
+#lockscreen-masked-background {
+ position: absolute;
+ top: 0;
+ overflow: hidden;
+
+ /* Must match the CSS background rule of #screen in system.css */
+ width: 100%;
+ height: 100%;
+ background-repeat: no-repeat;
+
+ -moz-user-select: none;
+ opacity: 1;
+ z-index: 1;
+}
+
+#lockscreen-masked-background {
+ background-size: 100% 100%;
+ transition: background-image 0.3s ease, background-color 0.3s ease;
+}
+
+#lockscreen-masked-background.blank {
+ background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0));
+ background-size: 100% 22.6rem;
+}
+
+#lockscreen-area {
+ position: absolute;
+ height: 10rem;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 4;
+}
+
+.lockscreen-icon-area {
+ height: 10rem;
+ position: absolute;
+ border-style: none;
+ transition: opacity 0.5s ease;
+}
+
+.lockscreen-icon {
+ margin-top: 2rem;
+ width: 6rem;
+ height: 6rem;
+
+ pointer-events: none;
+}
+
+#lockscreen-area-slide {
+ text-align: center;
+ width: calc(100%);
+}
+
+.touched .lockscreen-icon {
+ transition: none;
+}
+
+.lockscreen-icon-right {
+ right: calc(50% - 14rem);
+}
+
+.lockscreen-icon-left {
+ left: calc(50% - 14rem);
+}
+
+@media (min-width:768px) {
+ .lockscreen-icon-right {
+ right: calc(50% - 20.5rem);
+ }
+
+ .lockscreen-icon-left {
+ left: calc(50% - 20.5rem);
+ }
+
+ #lockscreen-header {
+ padding-left: 6rem;
+ font-weight: lighter;
+ }
+
+ #lockscreen-date {
+ padding-top: 0.5rem;
+ font-size: 2.4rem;
+ }
+}
+
+button::-moz-focus-inner {
+ border: 0;
+}
+
+:-moz-any(.touched, #screen:not(.locked), #screen.attention, #lockscreen:not([data-panel="main"]))
+:-moz-any(#lockscreen-left-arrow, #lockscreen-right-arrow) {
+ display: none;
+ animation: none;
+}
+
+#lockscreen-area-pickup > div {
+ background-image: url('./images/lock_screen/Ico_lsc_pickupwhite_40x40.png');
+ background-position: 0.5rem center;
+ background-repeat: no-repeat;
+ background-size: 4rem;
+}
+
+.lockscreen-icon-left, .lockscreen-icon-right {
+ z-index: 16;
+ pointer-events: auto;
+}
+
+/* Compensation for the effects after enabling the pointer-event attribute. */
+.lockscreen-icon-left:active, .lockscreen-icon-right:active {
+ background: none;
+}
+
+#lockscreen-area-hangup > div {
+ background-image: url('./images/lock_screen/Ico_lsc_hangupwhite_40x40.png');
+ background-position: 1.4rem center;
+ background-repeat: no-repeat;
+ background-size: 4rem;
+}
+
+#lockscreen-icon-container {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 10rem;
+ pointer-events: none;
+ z-index: 5;
+ background-color: rgba(255, 255, 255, .85);
+}
+
+.touched #lockscreen-icon-container {
+ transition: none;
+}
+
+.touched .lockscreen-icon-area {
+ transition: none;
+}
+
+#lockscreen-canvas-wrapper {
+ position: absolute;
+ bottom: 0.75rem;
+ z-index: 8;
+ width: 100%;
+}
diff --git a/apps/callscreen/style/oncall.css b/apps/callscreen/style/oncall.css
index 322faa8d2a23..6064cad696e2 100644
--- a/apps/callscreen/style/oncall.css
+++ b/apps/callscreen/style/oncall.css
@@ -181,15 +181,15 @@
transition: transform 0.5s ease 0s;
}
- #call-screen:before {
- background: url("images/call_screen/mask.png") no-repeat scroll 50% 50% / cover transparent;
- }
-
#main-container {
position: absolute;
+ top: 0;
height: 100%;
width: 100%;
- background: #000 no-repeat center top/cover;
+ background-color: #000;
+ background-size: cover; /* Possible memory over-consumption with huge images, it should be removed for improving stability*/
+ background-position: 50% calc(50% - 1.2rem);
+ background-repeat: no-repeat;
}
#actions-container {
@@ -871,16 +871,27 @@
#contact-background {
position: absolute;
top: 0;
- width: 100%;
height: 100%;
- background-repeat: no-repeat;
- background-position: center center;
+ width: 100%;
background-color: transparent;
background-size: cover;
+ background-position: center center;
+ background-repeat: no-repeat;
opacity: 0;
transition: opacity 0.3s linear;
}
+ #main-container {
+ position: absolute;
+ top: 0;
+ height: 100%;
+ width: 100%;
+ background-color: #000;
+ background-size: cover; /* Possible memory over-consumption with huge images, it should be removed for improving stability*/
+ background-position: 50% calc(50% - 1.2rem);
+ background-repeat: no-repeat;
+ }
+
#contact-background.ready {
opacity: 1;
}
@@ -890,17 +901,17 @@
}
#call-screen[data-layout="dialing"] #callbar-answer,
- #call-screen[data-layout="dialing"] #swiper-wrapper,
#call-screen[data-layout="incoming"] #swiper-wrapper,
#call-screen[data-layout="incoming-locked"] #callbar-answer,
#call-screen[data-layout="incoming-locked"] #callbar-hang-up,
#call-screen[data-layout="incoming-locked"] #call-options,
#call-screen[data-layout="incoming-locked"] .duration,
- #call-screen[data-layout="connected"] #swiper-wrapper,
#call-screen[data-layout="connected"] #callbar-answer,
- #call-screen[data-layout="connected-hold"] #swiper-wrapper,
#call-screen[data-layout="connected-hold"] #callbar-answer,
- #call-screen:not([data-layout="incoming-locked"]) #lockscreen-header {
+ #call-screen:not([data-layout="incoming-locked"]) #lockscreen-header,
+ #call-screen:not([data-layout="incoming-locked"]) #lockscreen-masked-background,
+ #call-screen:not([data-layout="incoming-locked"]) #lockscreen-area,
+ #call-screen:not([data-layout="incoming-locked"]) #swiper-wrapper {
display: none;
}
@@ -985,40 +996,6 @@
padding-bottom: 2rem;
}
- #lockscreen-header {
- z-index: 9999;
- position: absolute;
- top: 3.4rem;
- left: 0;
- width: 100%;
- -moz-box-sizing: border-box;
- padding: 1.8rem 2.5rem 1.2rem 2.5rem;
- color: #fff;
- text-shadow: 0 0 0.3rem #333;
- transition: transform 0.2s ease, opacity 0.2s ease;
- opacity: 1;
- }
-
- #lockscreen-clock-time {
- margin: -0.6rem 0 -1rem -0.4rem;
- font-weight: 300;
- font-size: calc(26 * 0.226rem);
- }
-
- #lockscreen-clock-time span { /* optional meridiem */
- font-size: calc(17 * 0.226rem);
- }
-
- #lockscreen-date {
- font-weight: 400;
- font-size: calc(7 * 0.226rem);
- }
-
- #lockscreen-clock-time, #lockscreen-date {
- text-shadow: 0.1rem 0.1rem 0.3rem #000000;
- color: #fff;
- }
-
/* We may need to sync system lockscreen media query part for showing call
screen on larger screen size*/
diff --git a/apps/callscreen/style/swiper.css b/apps/callscreen/style/swiper.css
deleted file mode 100644
index e4ac72ef4299..000000000000
--- a/apps/callscreen/style/swiper.css
+++ /dev/null
@@ -1,126 +0,0 @@
-/* Lockscreen slider - Need to move duplicate styling in other proper place */
-#lockscreen-area {
- position: absolute;
- height: 11.2rem;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 4;
-}
-
-.lockscreen-icon-area {
- height: 10rem;
- position: absolute;
- border-style: none;
- transition: opacity 0.5s ease;
-}
-
-.lockscreen-icon {
- margin-top: 2rem;
- width: 6rem;
- height: 6rem;
-
- pointer-events: none;
-}
-
-.lockscreen-icon-area.dark .lockscreen-icon {
- opacity: 0.65;
-}
-
-#lockscreen-area-slide {
- text-align: center;
- width: calc(100%);
-}
-
-.touched .lockscreen-icon {
- transition: none;
-}
-
-.lockscreen-icon-right {
- right: calc(50% - 14rem);
-}
-
-.lockscreen-icon-left {
- left: calc(50% - 14rem);
-}
-
-@media (min-width:768px) {
- .lockscreen-icon-right {
- right: calc(50% - 20.5rem);
- }
-
- .lockscreen-icon-left {
- left: calc(50% - 20.5rem);
- }
-
- #lockscreen-header {
- text-shadow: 0 0 0.5rem #111111;
- padding-left: 6rem;
- font-weight: lighter;
- }
-
- #lockscreen-date {
- padding-top: 0.5rem;
- font-size: 2.4rem;
- }
-}
-
-button::-moz-focus-inner {
- border: 0;
-}
-
-:-moz-any(.touched, #screen:not(.locked), #screen.attention, #lockscreen:not([data-panel="main"]))
-:-moz-any(#lockscreen-left-arrow, #lockscreen-right-arrow) {
- display: none;
- animation: none;
-}
-
-#lockscreen-area-pickup > div {
- background-image: url('images/lock_screen/actionicon_lockscreen_answer.png');
- background-position: center;
- background-repeat: no-repeat;
- background-size: 4rem;
-}
-
-.lockscreen-icon-left, .lockscreen-icon-right {
- z-index: 16;
- pointer-events: auto;
-}
-
-/* Compensation for the effects after enabling the pointer-event attribute. */
-.lockscreen-icon-left:active, .lockscreen-icon-right:active {
- background: none;
-}
-
-#lockscreen-area-hangup > div {
- background-image: url('images/lock_screen/actionicon_lockscreen_reject.png');
- background-position: center;
- background-repeat: no-repeat;
- background-size: 4rem;
-}
-
-#lockscreen-icon-container {
- position: absolute;
- bottom: 0;
- width: 100%;
- height: 10rem;
- pointer-events: none;
- border-top: 0.1rem solid #989898;
- background-color: rgba(231, 231, 231, 0.85);
- z-index: 5;
-}
-
-.touched #lockscreen-icon-container {
- transition: none;
-}
-
-.touched .lockscreen-icon-area {
- transition: none;
-}
-
-#lockscreen-canvas-wrapper {
- position: absolute;
- bottom: 0.75rem;
- z-index: 8;
- width: 100%;
-}
diff --git a/apps/callscreen/test/unit/call_screen_test.js b/apps/callscreen/test/unit/call_screen_test.js
index a9717fb6804d..cd22765ec923 100755
--- a/apps/callscreen/test/unit/call_screen_test.js
+++ b/apps/callscreen/test/unit/call_screen_test.js
@@ -889,6 +889,7 @@ suite('call screen', function() {
test('clock and date should display current clock/date info', function() {
currentDate = new Date();
+ this.sinon.stub(CallScreen, 'showConnectionInfo');
CallScreen.showClock(currentDate);
var clockTime = CallScreen.lockedClockTime.innerHTML;
var dateStr = CallScreen.lockedDate.textContent;
diff --git a/apps/communications/dialer/locales/dialer.en-US.properties b/apps/communications/dialer/locales/dialer.en-US.properties
index 74c60649ce64..2e4a2e6870d0 100644
--- a/apps/communications/dialer/locales/dialer.en-US.properties
+++ b/apps/communications/dialer/locales/dialer.en-US.properties
@@ -91,6 +91,7 @@ sim-number=SIM{{ n }}
hangup-a11y-button.ariaLabel=Hang Up
pickup-a11y-button.ariaLabel=Pick up
unlock-a11y-button.ariaLabel=Slider
+roaming={{operator}} (Roaming)
settings=Settings
diff --git a/shared/js/lockscreen_slide.js b/shared/js/lockscreen_slide.js
index a1b8f5209ad9..ca391777b0b6 100644
--- a/shared/js/lockscreen_slide.js
+++ b/shared/js/lockscreen_slide.js
@@ -67,8 +67,13 @@
},
iconBG: {
- color: 'rgba(255, 255, 255, 0.25)',
- radius: 20
+ radius: 20,
+ left: {
+ color: 'rgba(255, 255, 255, 0.25)'
+ },
+ right: {
+ color: 'rgba(255, 255, 255, 0.25)'
+ }
},
slides: {
@@ -147,13 +152,12 @@
colors: {
left: {
- touchedColor: '0, 170, 204',
- touchedColorStop: '178, 229, 239'
+ touchedColor: '255, 255, 255',
+ touchedColorStop: '255, 255, 255'
},
-
right: {
- touchedColor: '0, 170, 204',
- touchedColorStop: '178, 229, 239'
+ touchedColor: '255, 255, 255',
+ touchedColorStop: '255, 255, 255'
}
},
@@ -962,7 +966,8 @@
strokeStyle = 'transparent';
- ctx.fillStyle = 'rgba(255, 255, 255, ' + fillAlpha + ')';
+ ctx.fillStyle = 'rgba(' + this.handle.touchedColor + ', ' +
+ fillAlpha + ')';
ctx.strokeStyle = strokeStyle;
// Start to draw it.
@@ -1066,7 +1071,7 @@
var canvas = this.canvas;
var ctx = canvas.getContext('2d');
- ctx.fillStyle = this.iconBG.color;
+ ctx.fillStyle = this.iconBG.left.color;
ctx.strokeStyle = 'transparent';
ctx.beginPath();
@@ -1076,6 +1081,7 @@
ctx.closePath();
ctx.fill();
+ ctx.fillStyle = this.iconBG.right.color;
ctx.beginPath();
ctx.arc(this.track.to, this.track.y,
this.iconBG.radius, 0, 2 * Math.PI, false);