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);