Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge pull request #7205 from dscravag/nightly2

Nightly 2012-12-27
  • Loading branch information...
commit 73270c32928f070e49b265ea75ff4062ddb82d67 2 parents 9ce1358 + a698a8b
@dscravag dscravag authored
Showing with 996 additions and 860 deletions.
  1. +30 −14 apps/camera/style/camera.css
  2. BIN  apps/camera/style/images/grid.png
  3. BIN  apps/camera/style/images/ui/gradient.png
  4. BIN  apps/camera/style/images/ui/pattern.png
  5. +9 −16 apps/clock/js/onring.js
  6. +6 −2 apps/communications/dialer/js/dialer.js
  7. +2 −4 apps/communications/dialer/js/handled_call.js
  8. +38 −51 apps/communications/dialer/js/oncall.js
  9. +43 −152 apps/communications/dialer/js/swiper.js
  10. +4 −2 apps/communications/dialer/locales/dialer.en-US.properties
  11. +48 −139 apps/communications/dialer/oncall.html
  12. BIN  apps/communications/dialer/style/images/ActionIcon_40x40_recents.png
  13. BIN  apps/communications/dialer/style/images/handle.png
  14. BIN  apps/communications/dialer/style/images/hangup_icon.png
  15. BIN  apps/communications/dialer/style/images/hangup_icon_pressed.png
  16. BIN  apps/communications/dialer/style/images/mask.png
  17. BIN  apps/communications/dialer/style/images/pickup_icon.png
  18. BIN  apps/communications/dialer/style/images/pickup_icon_pressed.png
  19. +102 −10 apps/communications/dialer/style/oncall.css
  20. +128 −96 apps/communications/dialer/style/swiper.css
  21. +0 −4 apps/communications/dialer/test/unit/handled_call_test.js
  22. +0 −1  apps/communications/ftu/css/style.css
  23. +1 −1  apps/communications/ftu/js/tutorial.js
  24. +1 −0  apps/communications/ftu/locales/ftu.en-US.properties
  25. +1 −1  apps/costcontrol/index.html
  26. +36 −0 apps/costcontrol/js/message_handler.js
  27. +20 −0 apps/costcontrol/js/widget.js
  28. +5 −2 apps/costcontrol/manifest.webapp
  29. +2 −2 apps/costcontrol/widget.html
  30. +18 −3 apps/email/js/ext/gaia-email-opt.js
  31. +35 −20 apps/gallery/style/gallery.css
  32. BIN  apps/gallery/style/images/iconaction_camera_gridview_30x30.png
  33. BIN  apps/gallery/style/images/ui/gradient.png
  34. BIN  apps/gallery/style/images/ui/pattern.png
  35. +0 −1  apps/homescreen/everything.me/config/config.js
  36. +0 −22 apps/homescreen/everything.me/js/api/DoATAPI.js
  37. +0 −174 apps/homescreen/everything.me/js/helpers/Tests.js
  38. +0 −12 apps/homescreen/everything.me/js/helpers/Utils.js
  39. +3 −0  apps/homescreen/js/pagbar.js
  40. +0 −1  apps/homescreen/style/grid.css
  41. +57 −18 apps/music/js/music.js
  42. BIN  apps/music/style/images/IconAction_Camera_GridView_30x30.png
  43. BIN  apps/music/style/images/scroll_bar_bg.png
  44. BIN  apps/music/style/images/scrubber.png
  45. BIN  apps/music/style/images/scrubber_pressed.png
  46. BIN  apps/music/style/images/timeline.png
  47. BIN  apps/music/style/images/timeline_filled.png
  48. BIN  apps/music/style/images/ui/gradient.png
  49. BIN  apps/music/style/images/ui/pattern.png
  50. +104 −47 apps/music/style/music.css
  51. +6 −6 apps/settings/index.html
  52. +6 −5 apps/settings/js/carrier.js
  53. +29 −3 apps/settings/js/settings.js
  54. +1 −1  apps/settings/style/lists.css
  55. +0 −1  apps/system/style/lockscreen/lockscreen.css
  56. +1 −1  apps/video/index.html
  57. +3 −1 apps/video/js/video.js
  58. BIN  apps/video/style/images/back_div_line.png
  59. BIN  apps/video/style/images/btn_pause_off.png
  60. BIN  apps/video/style/images/btn_pause_press.png
  61. BIN  apps/video/style/images/btn_play_off.png
  62. BIN  apps/video/style/images/btn_play_press.png
  63. BIN  apps/video/style/images/button_bg_normal.png
  64. BIN  apps/video/style/images/button_bg_pressed.png
  65. BIN  apps/video/style/images/pause.png
  66. BIN  apps/video/style/images/play.png
  67. BIN  apps/video/style/images/portrait/button_bg_normal.png
  68. BIN  apps/video/style/images/portrait/button_bg_pressed.png
  69. BIN  apps/video/style/images/portrait/scroll_bar_bg.png
  70. BIN  apps/video/style/images/scroll_bar_bg.png
  71. BIN  apps/video/style/images/scrubber.png
  72. BIN  apps/video/style/images/scrubber_pressed.png
  73. BIN  apps/video/style/images/timeline.png
  74. BIN  apps/video/style/images/timeline_filled.png
  75. +84 −42 apps/video/style/video.css
  76. +7 −0 shared/js/l10n_date.js
  77. +166 −5 shared/js/simple_phone_matcher.js
  78. BIN  shared/resources/branding/official/Browser.png
  79. BIN  shared/resources/branding/official/about_logo.png
  80. 0  shared/resources/media/ringtones/{ringer_loude_windchimes.opus → ringer_loud_windchimes.opus}
View
44 apps/camera/style/camera.css
@@ -1,4 +1,6 @@
html, body {
+ font-family: "MozTT", sans-serif;
+ font-size: 10px;
height: 100%;
width: 100%;
padding: 0;
@@ -118,7 +120,6 @@ html, body {
#video-timer {
display: none;
color: white;
- font-family: sans-serif;
}
/* Specific to when we are capturing video */
@@ -208,26 +209,41 @@ html, body {
* the overlay text shows up more clearly
*/
#overlay-content {
- margin-top: 30%;
- margin-left: 10%;
- margin-right: 10%;
- padding: 10%;
- border: solid black 4px;
- border-radius: 10px;
- background-color: rgba(0, 0, 0, 0.6);
- font-family: "MozTT", sans-serif;
+ background:
+ url(images/ui/pattern.png) repeat left top,
+ url(images/ui/gradient.png) no-repeat left top;
+ background-size: auto auto, 100% 100%;
+ /* We can't use shortand with background size because is not implemented yet:
+ https://bugzilla.mozilla.org/show_bug.cgi?id=570326; */
+ overflow: hidden;
+ position: absolute;
+ z-index: 100;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ font-family: "MozTT", Sans-serif;
+ font-size: 0;
+ /* Using font-size: 0; we avoid the unwanted visual space (about 3px)
+ created by white-spaces and break lines in the code betewen inline-block elements */
color: #fff;
- -moz-user-select: none;
+ padding: 110px 25px 0px 25px;
}
#overlay-title {
- text-align: center;
- font-weight: bold;
- font-size: 26px;
+ font-weight: normal;
+ text-transform:capitalize;
+ font-size: 1.9rem;
+ color: #fff;
+ margin: 0 5px -10px 5px;
}
#overlay-text {
- font-size: 18px;
+ padding: 10px 5px 0 5px;
+ border-top: 1px solid #686868;
+ font-weight: 300;
+ font-size: 2.5rem;
+ color: #ebebeb;
}
.hidden {
View
BIN  apps/camera/style/images/grid.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/camera/style/images/ui/gradient.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/camera/style/images/ui/pattern.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
25 apps/clock/js/onring.js
@@ -35,23 +35,12 @@ var RingView = {
init: function rv_init() {
document.addEventListener('mozvisibilitychange', this);
+ // If mozHidden is true in init state,
+ // it means that the incoming call happens before the alarm.
+ // We should just put a "silent" alarm screen
+ // underneath the oncall screen
if (!document.mozHidden) {
this.startAlarmNotification();
- } else {
- // The setTimeout() is used to workaround
- // https://bugzilla.mozilla.org/show_bug.cgi?id=810431
- // The workaround is used in screen off mode.
- // mozHidden will be true in init() state.
- var self = this;
- window.setTimeout(function rv_checkMozHidden() {
- // If mozHidden is true in init state,
- // it means that the incoming call happens before the alarm.
- // We should just put a "silent" alarm screen
- // underneath the oncall screen
- if (!document.mozHidden) {
- self.startAlarmNotification();
- }
- }, 0);
}
this.setAlarmTime();
@@ -190,5 +179,9 @@ var RingView = {
};
-RingView.init();
+window.addEventListener('localized', function showBody() {
+ window.removeEventListener('localized', showBody);
+ RingView.init();
+});
+
View
8 apps/communications/dialer/js/dialer.js
@@ -110,8 +110,8 @@ var CallHandler = (function callHandler() {
/* === Bluetooth Support === */
function btCommandHandler(message) {
- var command = message['bluetooth-dialer-command'];
-
+ var command = message['command'];
+ var partialCommand = command.substring(0, 3);
if (command === 'BLDN') {
RecentsDBManager.init(function() {
RecentsDBManager.getLast(function(lastRecent) {
@@ -121,6 +121,10 @@ var CallHandler = (function callHandler() {
});
});
return;
+ } else if (partialCommand === 'ATD') {
+ var phoneNumber = command.substring(3);
+ CallHandler.call(phoneNumber);
+ return;
}
// Other commands needs to be handled from the call screen
View
6 apps/communications/dialer/js/handled_call.js
@@ -57,7 +57,7 @@ HandledCall.prototype.handleEvent = function hc_handle(evt) {
break;
case 'resumed':
if (this.photo) {
- CallScreen.setCallerContactImage(this.photo, true);
+ CallScreen.setCallerContactImage(this.photo, true, false);
}
CallScreen.syncSpeakerEnabled();
break;
@@ -121,7 +121,7 @@ HandledCall.prototype.updateCallNumber = function hc_updateCallNumber() {
KeypadManager.updateAdditionalContactInfo(additionalInfo);
if (contact.photo && contact.photo.length > 0) {
self.photo = contact.photo[0];
- CallScreen.setCallerContactImage(self.photo, true);
+ CallScreen.setCallerContactImage(self.photo, true, false);
}
return;
}
@@ -149,8 +149,6 @@ HandledCall.prototype.remove = function hc_remove() {
clearInterval(this._ticker);
this._ticker = null;
-
- this.node.hidden = true;
};
HandledCall.prototype.connected = function hc_connected() {
View
89 apps/communications/dialer/js/oncall.js
@@ -30,8 +30,7 @@ var CallScreen = {
incomingAnswer: document.getElementById('incoming-answer'),
incomingEnd: document.getElementById('incoming-end'),
incomingIgnore: document.getElementById('incoming-ignore'),
-
- swiperWrapper: document.getElementById('swiper-wrapper'),
+ lockedContactPhoto: document.getElementById('locked-contact-photo'),
init: function cs_init() {
this.muteButton.addEventListener('mouseup', this.toggleMute.bind(this));
@@ -54,12 +53,19 @@ var CallScreen = {
OnCallHandler.toggleCalls);
},
- setCallerContactImage: function cs_setCallerContactImage(image_url, force) {
+ setCallerContactImage: function cs_setContactImage(image_url, force, mask) {
var photoURL;
var isString = (typeof image_url == 'string');
+ var isLocked = (this.screen.dataset.layout === 'incoming-locked');
+ var target = isLocked ? this.lockedContactPhoto : this.mainContainer;
photoURL = isString ? image_url : URL.createObjectURL(image_url);
- if (!this.mainContainer.style.backgroundImage || force) {
- this.mainContainer.style.backgroundImage = 'url(' + photoURL + ')';
+ if (!target.style.backgroundImage || force) {
+ target.style.backgroundImage = 'url(' + photoURL + ')';
+ if (mask) {
+ target.classList.add('masked');
+ } else {
+ target.classList.remove('masked');
+ }
}
},
@@ -96,36 +102,9 @@ var CallScreen = {
},
render: function cs_render(layout_type) {
- switch (layout_type) {
- case 'dialing':
- this.answerButton.classList.add('hide');
- this.rejectButton.classList.remove('hide');
- this.rejectButton.classList.add('full-space');
- this.callToolbar.classList.remove('transparent');
- this.keypadButton.setAttribute('disabled', 'disabled');
- this.swiperWrapper.classList.add('hide');
- break;
- case 'incoming':
- this.answerButton.classList.remove('hide');
- this.rejectButton.classList.remove('hide');
- this.callToolbar.classList.remove('transparent');
- this.keypadButton.setAttribute('disabled', 'disabled');
- this.swiperWrapper.classList.add('hide');
- break;
- case 'incoming-locked':
- this.answerButton.classList.add('hide');
- this.rejectButton.classList.add('hide');
- this.callToolbar.classList.add('transparent');
- this.keypadButton.setAttribute('disabled', 'disabled');
- this.swiperWrapper.classList.remove('hide');
- break;
- case 'connected':
- this.answerButton.classList.add('hide');
- this.rejectButton.classList.remove('hide');
- this.rejectButton.classList.add('full-space');
- this.callToolbar.classList.remove('transparent');
- this.swiperWrapper.classList.add('hide');
- break;
+ this.screen.dataset.layout = layout_type;
+ if (layout_type !== 'connected') {
+ this.keypadButton.setAttribute('disabled', 'disabled');
}
},
@@ -260,18 +239,18 @@ var OnCallHandler = (function onCallHandler() {
});
// Letting the layout know how many calls we're handling
- CallScreen.calls.dataset.count = handledCalls.length;
-
- if (CallScreen.calls.dataset.count === 0) {
+ if (handledCalls.length === 0) {
exitCallScreen(false);
+ } else {
+ CallScreen.calls.dataset.count = handledCalls.length;
}
-
}
function addCall(call) {
// Once we already have 1 call, we only care about incomings
- if (handledCalls.length && (call.state != 'incoming'))
+ if (handledCalls.length && (call.state != 'incoming')) {
return;
+ }
// No more room
if (handledCalls.length >= CALLS_LIMIT) {
@@ -419,8 +398,9 @@ var OnCallHandler = (function onCallHandler() {
}
function exitCallScreen(animate) {
- if (closing)
+ if (closing) {
return;
+ }
if (cpuLock) {
cpuLock.unlock();
@@ -429,6 +409,10 @@ var OnCallHandler = (function onCallHandler() {
closing = true;
+ if (Swiper) {
+ Swiper.setElasticEnabled(false);
+ }
+
if (animate && !animating) {
toggleScreen();
} else {
@@ -514,10 +498,17 @@ var OnCallHandler = (function onCallHandler() {
/* === User Actions === */
function answer() {
// We should always have only 1 call here
- if (!handledCalls.length)
+ if (!handledCalls.length) {
return;
+ }
handledCalls[0].call.answer();
+
+ if (CallScreen.screen.dataset.layout === 'incoming-locked') {
+ CallScreen.mainContainer.style.backgroundImage =
+ CallScreen.lockedContactPhoto.style.backgroundImage;
+ }
+
CallScreen.render('connected');
}
@@ -544,8 +535,9 @@ var OnCallHandler = (function onCallHandler() {
}
function toggleCalls() {
- if (handledCalls.length < 2)
+ if (handledCalls.length < 2) {
return;
+ }
telephony.active.hold();
}
@@ -624,18 +616,13 @@ window.addEventListener('load', function callSetup(evt) {
OnCallHandler.setup();
CallScreen.init();
CallScreen.syncSpeakerEnabled();
-
KeypadManager.init(true);
- var isLocked = (window.location.hash === '#locked');
- // After investigating in #815629, it seems that
- // lock screen animation over the Wallpaper image is not
- // performing well, so we are not painting it when is locked
- // Being tracked in #817988
- if (navigator.mozSettings && !isLocked) {
+ if (navigator.mozSettings) {
var req = navigator.mozSettings.createLock().get('wallpaper.image');
req.onsuccess = function cs_wi_onsuccess() {
- CallScreen.setCallerContactImage(req.result['wallpaper.image']);
+ CallScreen.setCallerContactImage(
+ req.result['wallpaper.image'], false, true);
};
}
});
View
195 apps/communications/dialer/js/swiper.js
@@ -7,40 +7,14 @@ var Swiper = {
triggeredTimeoutId: 0,
/*
- * Interval ID for elastic of curve and arrow
- */
- elasticIntervalId: 0,
-
- /*
- * start/end curve/mask path data (position, curve control point)
- */
- CURVE_START_DATA: 'M0,80 C100,150 220,150 320,80',
- CURVE_END_DATA: 'M0,80 C100,-20 220,-20 320,80',
- CURVE_MASK_START_DATA: 'M0,80 C100,150 220,150 320,80 V 150 H 0 Z',
- CURVE_MASK_END_DATA: 'M0,80 C100,-20 220,-20 320,80 V 150 H 0 Z',
-
- /*
- * curve/mask transform const parameters
- */
- CURVE_TRANSFORM_DATA: ['M0,80 C100,', '0', ' 220,', '0', ' 320,80'],
- CURVE_MASK_TRANSFORM_DATA: ['M0,80 C100,', '0', ' 220,', '0',
- ' 320,80 V 150 H 0 Z'],
-
- /*
- * control points coordinate y for CURVE_TRANSFORM_DATA
- */
- CURVE_TRANSFORM_Y1_INDEX: 1,
- CURVE_TRANSFORM_Y2_INDEX: 3,
-
- /*
- * jumping elastic interval
+ * timeout for triggered state after swipe up
*/
- ELASTIC_INTERVAL: 4000,
+ TRIGGERED_TIMEOUT: 5000,
/*
- * timeout for triggered state after swipe up
+ * Max value for handle swiper up
*/
- TRIGGERED_TIMEOUT: 5000,
+ HANDLE_MAX: 70,
/* init */
init: function ls_init() {
@@ -49,7 +23,6 @@ var Swiper = {
this.area.addEventListener('mousedown', this);
this.areaHangup.addEventListener('click', this);
this.areaPickup.addEventListener('click', this);
-
this.overlay.addEventListener('transitionend', this);
this.setElasticEnabled(true);
@@ -64,25 +37,19 @@ var Swiper = {
var overlay = this.overlay;
var target = evt.target;
- if (target === leftTarget || target === rightTarget) {
+ if (overlay.classList.contains('triggered')) {
+ clearTimeout(this.triggeredTimeoutId);
+ this.triggeredTimeoutId = setTimeout(this.unloadPanel.bind(this),
+ this.TRIGGERED_TIMEOUT);
break;
}
- if (overlay.classList.contains('triggered') &&
- target != leftTarget && target != rightTarget) {
- this.unloadPanel();
- break;
- }
-
- this.iconContainer.classList.remove('elastic');
this.setElasticEnabled(false);
- Array.prototype.forEach.call(this.startAnimation, function(el) {
- el.endElement();
- });
this._touch = {};
window.addEventListener('mouseup', this);
window.addEventListener('mousemove', this);
+
this._touch.touched = true;
this._touch.initX = evt.pageX;
this._touch.initY = evt.pageY;
@@ -105,6 +72,7 @@ var Swiper = {
break;
case 'click':
+ clearTimeout(this.triggeredTimeoutId);
switch (evt.target) {
case this.areaHangup:
OnCallHandler.end();
@@ -135,73 +103,41 @@ var Swiper = {
}
var dy = pageY - touch.initY;
- var handleMax = window.innerHeight / 4;
- var ty = Math.max(- handleMax, dy);
- var opacity = - ty / handleMax;
- // Curve control point coordinate Y
- var cy = 150 - opacity * 150;
- touch.cy = cy;
- var curvedata = [].concat(this.CURVE_TRANSFORM_DATA);
- curvedata[this.CURVE_TRANSFORM_Y1_INDEX] = cy;
- curvedata[this.CURVE_TRANSFORM_Y2_INDEX] = cy;
- var maskdata = [].concat(this.CURVE_MASK_TRANSFORM_DATA);
- maskdata[this.CURVE_TRANSFORM_Y1_INDEX] = cy;
- maskdata[this.CURVE_TRANSFORM_Y2_INDEX] = cy;
-
- this.iconContainer.style.transform = 'translateY(' + ty / 1.5 + 'px)';
- this.iconContainer.style.opacity = 0.4;
- this.curvepath.setAttribute('d', curvedata.join(''));
- this.hangupMask.setAttribute('d', maskdata.join(''));
- this.pickupMask.setAttribute('d', maskdata.join(''));
- this.areaHandle.setAttribute('y', 100 - opacity * 100);
+ var ty = Math.max(- this.HANDLE_MAX, dy);
+ var base = - ty / this.HANDLE_MAX;
+ // mapping position 20-100 to opacity 0.1-0.5
+ var opacity = base <= 0.2 ? 0.1 : base * 0.5;
+ touch.ty = ty;
+ this.iconContainer.style.transform = 'translateY(' + ty + 'px)';
+ this.iconPickup.style.opacity =
+ this.iconHangup.style.opacity = opacity;
},
handleGesture: function ls_handleGesture() {
- var handleMax = window.innerHeight / 4;
var touch = this._touch;
- if (touch.cy < 80) {
- Array.prototype.forEach.call(this.endAnimation, function(el) {
- el.setAttribute('fill', 'freeze');
- el.beginElement();
- });
- var self = this;
- this.curvepath.addEventListener('endEvent', function endEvent() {
- self.curvepath.removeEventListener('endEvent', endEvent);
- self.curvepath.setAttribute('d', self.CURVE_END_DATA);
- self.curvepath.setAttribute('stroke-opacity', 0);
- self.hangupMask.setAttribute('d', self.CURVE_MASK_END_DATA);
- self.hangupMask.setAttribute('fill-opacity', 0);
- self.pickupMask.setAttribute('d', self.CURVE_MASK_END_DATA);
- self.pickupMask.setAttribute('fill-opacity', 0);
- self.areaHandle.setAttribute('y', 0);
- self.areaHandle.setAttribute('opacity', 0);
-
- Array.prototype.forEach.call(self.endAnimation, function(el) {
- el.removeAttribute('fill');
- });
- });
+ if (touch.ty < -50) {
this.areaHandle.style.transform =
this.areaHandle.style.opacity =
+ this.iconHangup.style.opacity =
+ this.iconPickup.style.opacity =
this.iconContainer.style.transform =
this.iconContainer.style.opacity = '';
this.overlay.classList.add('triggered');
this.triggeredTimeoutId =
setTimeout(this.unloadPanel.bind(this), this.TRIGGERED_TIMEOUT);
- }
- else {
+ } else {
this.unloadPanel();
+ this.setElasticEnabled(true);
}
},
getAllElements: function ls_getAllElements() {
// ID of elements to create references
var elements = ['area', 'area-pickup', 'area-hangup', 'area-handle',
- 'icon-container', 'curvepath', 'hangup-mask', 'pickup-mask',
+ 'icon-container', 'hangup-mask', 'pickup-mask',
'accessibility-hangup', 'accessibility-pickup'];
- var elementsForClass = ['start-animation', 'end-animation',
- 'elastic-animation'];
var toCamelCase = function toCamelCase(str) {
return str.replace(/\-(.)/g, function replacer(str, p1) {
@@ -213,78 +149,33 @@ var Swiper = {
this[toCamelCase(name)] = document.getElementById('swiper-' + name);
}).bind(this));
- elementsForClass.forEach((function createElementsRef(name) {
- this[toCamelCase(name)] =
- document.querySelectorAll('.swiper-' + name);
- }).bind(this));
-
this.overlay = document.getElementById('main-container');
this.mainScreen = document.getElementById('call-screen');
- },
-
- playElastic: function ls_playElastic() {
- if (this._touch && this._touch.touched)
- return;
- var forEach = Array.prototype.forEach;
- forEach.call(this.elasticAnimation, function(el) {
- el.beginElement();
- });
- this.overlay.classList.add('elastic');
-
- var self = this;
- this.iconContainer.addEventListener('animationend',
- function animationend() {
- self.iconContainer.removeEventListener('animationend', animationend);
- self.overlay.classList.remove('elastic');
- });
+ this.iconPickup = document.querySelector('#swiper-area-pickup > div');
+ this.iconHangup = document.querySelector('#swiper-area-hangup > div');
},
setElasticEnabled: function ls_setElasticEnabled(value) {
- if (value && !this.elasticIntervalId) {
- this.elasticIntervalId =
- setInterval(this.playElastic.bind(this), this.ELASTIC_INTERVAL);
- }
- else if (!value && this.elasticIntervalId) {
- clearInterval(this.elasticIntervalId);
- this.elasticIntervalId = 0;
- }
+ if (value)
+ this.overlay.classList.add('elastic');
+ else
+ this.overlay.classList.remove('elastic');
},
unloadPanel: function ls_unloadPanel() {
- var self = this;
-
- Array.prototype.forEach.call(self.startAnimation, function(el) {
- el.setAttribute('fill', 'freeze');
- el.beginElement();
- });
- self.curvepath.addEventListener('endEvent', function eventend() {
- self.curvepath.removeEventListener('endEvent', eventend);
- self.curvepath.setAttribute('d', self.CURVE_START_DATA);
- self.curvepath.setAttribute('stroke-opacity', '1.0');
- self.hangupMask.setAttribute('d', self.CURVE_MASK_START_DATA);
- self.hangupMask.setAttribute('fill-opacity', '1.0');
- self.pickupMask.setAttribute('d', self.CURVE_MASK_START_DATA);
- self.pickupMask.setAttribute('fill-opacity', '1.0');
- self.areaHandle.setAttribute('y', 100);
- self.areaHandle.setAttribute('opacity', 1);
- Array.prototype.forEach.call(self.startAnimation, function(el) {
- el.removeAttribute('fill');
- });
- });
-
- self.areaHandle.style.transform =
- self.areaPickup.style.transform =
- self.areaHangup.style.transform =
- self.iconContainer.style.transform =
- self.iconContainer.style.opacity =
- self.areaPickup.style.opacity =
- self.areaHangup.style.opacity = '';
- self.overlay.classList.remove('triggered');
- self.areaPickup.classList.remove('triggered');
- self.areaHangup.classList.remove('triggered');
-
- clearTimeout(self.triggeredTimeoutId);
- self.setElasticEnabled(true);
+ this.areaHandle.style.transform =
+ this.iconPickup.style.transform =
+ this.iconHangup.style.transform =
+ this.iconContainer.style.transform =
+ this.iconContainer.style.opacity =
+ this.iconPickup.style.opacity =
+ this.iconHangup.style.opacity = '';
+ this.overlay.classList.remove('triggered');
+ this.iconPickup.classList.remove('triggered');
+ this.iconHangup.classList.remove('triggered');
+
+ clearTimeout(this.triggeredTimeoutId);
+ this.setElasticEnabled(true);
}
};
View
6 apps/communications/dialer/locales/dialer.en-US.properties
@@ -6,7 +6,6 @@ callAirplaneModeBtnOk=OK
callAirplaneModeTitle=Airplane Mode is on
callLog=Call log
connecting=Connecting
-camera-a11y-button.aria-label=Hang Up
cancel=Cancel
## LOCALIZATION NOTE cf-async, cf-data, cf-fax, cf-packet, cf-pad, cf-sms, cf-sync and cf-voice are the service the call forwarding is activate/inactive for.
## LOCALIZATION NOTE Its variables might be a phone number or cf-inactive.
@@ -51,7 +50,6 @@ selectAll=Select All
send=Send
today=Today
unknown=Unknown number
-unlock-a11y-button.aria-label=Pick up
yesterday=Yesterday
USSD=USSD
sending=Sending…
@@ -61,6 +59,10 @@ clear-all-text=Clear all text
## LOCALIZATION NOTE 'call' is an action verb
call=Call
+## LOCALIZATION NOTE: these labels aren't displayed but they're used for acessibility
+hangup-a11y-button.aria-label=Hang Up
+pickup-a11y-button.aria-label=Pick up
+
## LOCALIZATION NOTE: contactNameWithOthers is displayed for missed calls when the number is associated with more than one contact.
## LOCALIZATION NOTE: case `zero` is never used, no need to translate it.
contactNameWithOthersSuffix={[ plural(n) ]}
View
187 apps/communications/dialer/oncall.html
@@ -34,7 +34,8 @@
<script defer src="/dialer/js/swiper.js"></script>
</head>
<body>
- <article id="call-screen">
+ <article id="call-screen" data-layout>
+ <div id="locked-contact-photo"></div>
<article id="calls" data-count="0">
<section>
<div class="numberWrapper">
@@ -73,149 +74,57 @@
<article id="main-container">
<div id="actions-container">
<div id="swiper-wrapper">
- <svg id="swiper-curve" xmlns="http://www.w3.org/2000/svg" version="1.1">
- <defs>
- <linearGradient id="swiper-curve-gradient">
- <stop style="stop-color:#FFFFFF;stop-opacity:1;" offset="0.00" />
- <stop style="stop-color:#FFFFFF;stop-opacity:1;" offset="0.07" />
- <stop style="stop-color:#ff0000;stop-opacity:1;" offset="0.07" />
- <stop style="stop-color:#ff0000;stop-opacity:1;" offset="0.35" />
- <stop style="stop-color:#FFFFFF;stop-opacity:1;" offset="0.35" />
- <stop style="stop-color:#FFFFFF;stop-opacity:1;" offset="0.65" />
- <stop style="stop-color:#00ff00;stop-opacity:1;" offset="0.65" />
- <stop style="stop-color:#00ff00;stop-opacity:1;" offset="0.93" />
- <stop style="stop-color:#FFFFFF;stop-opacity:1;" offset="0.93" />
- <stop style="stop-color:#FFFFFF;stop-opacity:1;" offset="1.00" />
- </linearGradient>
- <linearGradient id="gradient-green" y2="0" x2="0" y1="150" x1="0" gradientUnits="userSpaceOnUse" >
- <stop style="stop-color:#00ff00;stop-opacity:0" offset="0.2" />
- <stop style="stop-color:#00ff1c;stop-opacity:0.5" offset="1" />
- </linearGradient>
- <linearGradient id="gradient-red" y2="0" x2="0" y1="150" x1="0" gradientUnits="userSpaceOnUse" >
- <stop offset="0.2" style="stop-color:#ff0000;stop-opacity:0" />
- <stop offset="1" style="stop-color:#ff0000;stop-opacity:0.5" />
- </linearGradient>
- <clipPath clipPathUnits="userSpaceOnUse" id="clip-pickup">
- <rect style="fill:#000000;fill-opacity:1;stroke:none" width="89" height="130" x="207" y="0" />
- </clipPath>
- <clipPath clipPathUnits="userSpaceOnUse" id="clip-hangup">
- <rect style="fill:#000000;fill-opacity:1;stroke:none" width="89" height="130" x="23" y="0" />
- </clipPath>
-
- <animate id="swiper-curve-elastic-animation" class="swiper-elastic-animation" attributeType="XML" attributeName="d" dur="2s" calcMode="spline"
- begin="indefinite" keySplines="0 .50 .50 1; .50 0 1 .50;0 .50 .50 1; .50 0 1 .50;"
- values="M0,80 C100,150 220,150 320,80;
- M0,80 C100,40 220,40 320,80; M0,80 C100,150 220,150 320,80;
- M0,80 C100,100 220,100 320,80; M0,80 C100,150 220,150 320,80" />
- <animate id="swiper-spotlight-elastic-animation" class="swiper-elastic-animation"
- attributeType="XML" attributeName="d" dur="2s" calcMode="spline"
- begin="indefinite" keySplines="0 .50 .50 1; .50 0 1 .50;0 .50 .50 1; .50 0 1 .50;"
- values="M0,80 C100,150 220,150 320,80 V 150 H 0 Z;
- M0,80 C100,40 220,40 320,80 V 150 H 0 Z; M0,80 C100,150 220,150 320,80 V 150 H 0 Z;
- M0,80 C100,100 220,100 320,80 V 150 H 0 Z; M0,80 C100,150 220,150 320,80 V 150 H 0 Z" />
- </defs>
- <image id="swiper-area-handle" x="150" y="100" width="20" height="9"
- xlink:href="style/images/handle.png">
- <animate class="swiper-start-animation" attributeType="XML" attributeName="y" begin="indefinite" dur="0.2s" to="100" />
- <animate class="swiper-start-animation" attributeType="XML" attributeName="opacity" begin="indefinite" dur="0.5s" to="1" />
- <animate class="swiper-end-animation" attributeType="XML" attributeName="y" begin="indefinite" dur="0.2s" to="0" />
- <animate class="swiper-end-animation" attributeType="XML" attributeName="opacity" begin="indefinite" dur="0.5s" to="0" />
- <animate class="swiper-elastic-animation" attributeType="XML" attributeName="y" dur="2s" calcMode="spline"
- begin="indefinite" keySplines="0 .50 .50 1; .50 0 1 .50; 0 .50 .50 1; .50 0 1 .50"
- values="100; 0; 120; 80; 100" />
- </image>
- <path fill="none" id="swiper-curvepath" stroke-width="1" stroke="url(#swiper-curve-gradient)"
- d="M0,80 C100,150 220,150 320,80">
- <animate class="swiper-start-animation" attributeType="XML" attributeName="d" begin="indefinite" dur="0.2s" to="M0,80 C100,150 220,150 320,80" />
- <animate class="swiper-start-animation" attributeType="XML" attributeName="stroke-opacity" begin="indefinite" dur="0.2s" to="1.0" />
- <animate class="swiper-end-animation" attributeType="XML" attributeName="d" begin="indefinite" dur="0.5s" to="M0,80 C100,-20 220,-20 320,80" />
- <animate class="swiper-end-animation" attributeType="XML" attributeName="stroke-opacity" begin="indefinite" dur="0.5s" to="0" />
- <animate id="swiper-curve-elastic-animation" class="swiper-elastic-animation"
- attributeType="XML" attributeName="d" dur="2s" calcMode="spline"
- begin="indefinite" keySplines="0 .50 .50 1; .50 0 1 .50;0 .50 .50 1; .50 0 1 .50;"
- values="M0,80 C100,150 220,150 320,80;
- M0,80 C100,40 220,40 320,80; M0,80 C100,150 220,150 320,80;
- M0,80 C100,100 220,100 320,80; M0,80 C100,150 220,150 320,80" />
- </path>
- <path id="swiper-hangup-mask" style="fill: url(#gradient-red);" id="swiper-curvepath-red" stroke="none"
- clip-path="url(#clip-hangup)"
- d="M0,80 C100,150 220,150 320,80 V 150 H 0 Z">
- <animate class="swiper-start-animation" attributeType="XML" attributeName="d" begin="indefinite" dur="0.2s" to="M0,80 C100,150 220,150 320,80 V 150 H 0 Z" />
- <animate class="swiper-start-animation" attributeType="XML" attributeName="fill-opacity" begin="indefinite" dur="0.2s" to="1.0" />
- <animate class="swiper-end-animation" attributeType="XML" attributeName="d" begin="indefinite" dur="0.5s" to="M0,80 C100,-20 220,-20 320,80 V 150 H 0 Z" />
- <animate class="swiper-end-animation" attributeType="XML" attributeName="fill-opacity" begin="indefinite" dur="0.5s" to="0" />
- <animate id="swiper-spotlight-elastic-animation" class="swiper-elastic-animation"
- attributeType="XML" attributeName="d" dur="2s" calcMode="spline"
- begin="indefinite" keySplines="0 .50 .50 1; .50 0 1 .50;0 .50 .50 1; .50 0 1 .50;"
- values="M0,80 C100,150 220,150 320,80 V 150 H 0 Z;
- M0,80 C100,40 220,40 320,80 V 150 H 0 Z; M0,80 C100,150 220,150 320,80 V 150 H 0 Z;
- M0,80 C100,100 220,100 320,80 V 150 H 0 Z; M0,80 C100,150 220,150 320,80 V 150 H 0 Z" />
- </path>
- <path id="swiper-pickup-mask" style="fill: url(#gradient-green);" id="swiper-curvepath-green" stroke="none"
- clip-path="url(#clip-pickup)"
- d="M0,80 C100,150 220,150 320,80 V 150 H 0 Z">
- <!-- <use> tag in SVG doesn't support <animate> for reuse
- so we need to copy animations from swiper-hangup-mask. -->
- <animate class="swiper-start-animation" attributeType="XML" attributeName="d" begin="indefinite" dur="0.2s" to="M0,80 C100,150 220,150 320,80 V 150 H 0 Z" />
- <animate class="swiper-start-animation" attributeType="XML" attributeName="fill-opacity" begin="indefinite" dur="0.2s" to="1.0" />
- <animate class="swiper-end-animation" attributeType="XML" attributeName="d" begin="indefinite" dur="0.5s" to="M0,80 C100,-20 220,-20 320,80 V 150 H 0 Z" />
- <animate class="swiper-end-animation" attributeType="XML" attributeName="fill-opacity" begin="indefinite" dur="0.5s" to="0" />
- <animate id="swiper-spotlight-elastic-animation" class="swiper-elastic-animation"
- attributeType="XML" attributeName="d" dur="2s" calcMode="spline"
- begin="indefinite" keySplines="0 .50 .50 1; .50 0 1 .50;0 .50 .50 1; .50 0 1 .50;"
- values="M0,80 C100,150 220,150 320,80 V 150 H 0 Z;
- M0,80 C100,40 220,40 320,80 V 150 H 0 Z; M0,80 C100,150 220,150 320,80 V 150 H 0 Z;
- M0,80 C100,100 220,100 320,80 V 150 H 0 Z; M0,80 C100,150 220,150 320,80 V 150 H 0 Z" />
- </path>
- </svg>
<div id="swiper-area"></div>
<div id="swiper-icon-container">
- <button id="swiper-area-hangup" class="swiper-icon swiper-icon-left">
- <div id="swiper-accessibility-hangup" role="button" class="swiper-icon-a11y-button" data-l10n-id="camera-a11y-button" aria-label="Hangup"></div>
- </button>
- <button id="swiper-area-pickup" class="swiper-icon swiper-icon-right">
- <div id="swiper-accessibility-pickup" role="button" class="swiper-icon-a11y-button" data-l10n-id="unlock-a11y-button" aria-label="Pickup"></div>
- </button>
- </div>
- </div>
- <footer id="call-options" class="grid-row">
- <div class="grid-wrapper grid">
- <section id="co-advanced" class="grid-row">
- <div class="grid-wrapper grid">
- <span class="grid-cell options-column">
- <button id="mute" class="co-advanced-option grid-wraper grid center">
- <span class="icon-mute">
- </span>
- </button>
- </span>
- <span class="grid-cell options-column">
- <button id="keypad-visibility" class="co-advanced-option grid-wraper grid center">
- <span class="icon-keypad-visibility">
- </span>
- </button>
- </span>
- <span class="grid-cell options-column">
- <button id="speaker" class="co-advanced-option grid-wraper grid">
- <span>
- </span>
- </button>
- </span>
- </section>
- <footer id="callbar">
- <div id="callbar-hang-up">
- <span role="button" id="callbar-hang-up-action" class="callbar-button">
- <div>
- </div>
- </span>
+ <div id="swiper-area-handle"></div>
+ <div id="swiper-area-hangup" class="swiper-icon-area swiper-icon-left">
+ <div class="swiper-icon">
+ <div id="swiper-accessibility-hangup" role="button" class="swiper-icon-a11y-button" data-l10n-id="hangup-a11y-button" aria-label="Hangup"></div>
</div>
- <div id="callbar-answer">
- <span role="button" id="callbar-start-call-action" class="callbar-button">
- <div>
- </div>
- </span>
+ </div>
+ <div id="swiper-area-pickup" class="swiper-icon-area swiper-icon-right">
+ <div class="swiper-icon">
+ <div id="swiper-accessibility-pickup" role="button" class="swiper-icon-a11y-button" data-l10n-id="pickup-a11y-button" aria-label="Pickup"></div>
</div>
- </footer>
+ </div>
</div>
+ </div>
+ <footer id="call-options">
+ <section id="co-advanced">
+ <div class="grid-wrapper grid">
+ <span class="grid-cell options-column">
+ <button id="mute" class="co-advanced-option grid-wraper grid center">
+ <span class="icon-mute">
+ </span>
+ </button>
+ </span>
+ <span class="grid-cell options-column">
+ <button id="keypad-visibility" class="co-advanced-option grid-wraper grid center">
+ <span class="icon-keypad-visibility">
+ </span>
+ </button>
+ </span>
+ <span class="grid-cell options-column">
+ <button id="speaker" class="co-advanced-option grid-wraper grid">
+ <span>
+ </span>
+ </button>
+ </span>
+ </section>
+ <footer id="callbar">
+ <div id="callbar-hang-up">
+ <span role="button" id="callbar-hang-up-action" class="callbar-button">
+ <div>
+ </div>
+ </span>
+ </div>
+ <div id="callbar-answer">
+ <span role="button" id="callbar-start-call-action" class="callbar-button">
+ <div>
+ </div>
+ </span>
+ </div>
+ </footer>
</footer>
</div>
</article>
View
BIN  apps/communications/dialer/style/images/ActionIcon_40x40_recents.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/dialer/style/images/handle.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/dialer/style/images/hangup_icon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/dialer/style/images/hangup_icon_pressed.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/dialer/style/images/mask.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/dialer/style/images/pickup_icon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/dialer/style/images/pickup_icon_pressed.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
112 apps/communications/dialer/style/oncall.css
@@ -66,7 +66,8 @@ button::-moz-focus-inner {
display: none;
}
-.grid-row.transparent {
+.grid-row.transparent,
+#co-advanced.transparent {
visibility: hidden;
}
@@ -132,24 +133,45 @@ body.hidden *[data-l10n-id] {
margin: 0;
border: 0;
background: LightGray;
- -moz-transform: translateY(-100%);
z-index: 100;
}
-#call-screen.animate {
- -moz-transition: -moz-transform 0.5s ease;
+#call-screen:not([data-layout="incoming-locked"]) {
+ transform: translateY(-100%);
}
-#call-screen.prerender {
- -moz-transform: translateY(-moz-calc(-100% + 1px));
+#call-screen:not([data-layout="incoming-locked"]).animate {
+ -moz-transition: transform 0.5s ease;
+}
+
+#call-screen:not([data-layout="incoming-locked"]).displayed {
+ transform: translateY(0);
+}
+
+#call-screen[data-layout="incoming-locked"] {
+ opacity: 0;
+}
+
+#call-screen[data-layout="incoming-locked"].animate {
+ -moz-transition: opacity 1s ease;
+}
+
+#call-screen[data-layout="incoming-locked"].displayed {
+ opacity: 1;
}
-#call-screen.displayed {
- -moz-transform: translateY(0);
+#call-screen:before {
+ background: url("images/mask.png") no-repeat scroll 50% 50% / cover transparent;
+}
+
+#call-screen.prerender {
+ transform: translateY(-moz-calc(-100% + 1px));
+ opacity: 0.05;
}
#call-screen.displayed.prerender {
- -moz-transform: translateY(-1px);
+ transform: translateY(-1px);
+ opacity: 0.95;
}
#main-container {
@@ -169,6 +191,10 @@ body.hidden *[data-l10n-id] {
height: calc(100% - 9rem);
}
+#main-container.transparent:before {
+ background-color: transparent;
+}
+
#actions-container {
position: absolute;
bottom: 0;
@@ -177,7 +203,9 @@ body.hidden *[data-l10n-id] {
}
#call-options {
- height: 9.5rem;
+ height:15.5rem;
+ position: absolute;
+ bottom: 0;
}
#co-advanced {
@@ -327,6 +355,7 @@ button[disabled] .icon-keypad-visibility {
z-index: 500;
}
+
#calls[data-count="1"] {
height: 22rem;
}
@@ -597,3 +626,66 @@ button[disabled] .icon-keypad-visibility {
line-height: 100%;
}
}
+
+#locked-contact-photo {
+ position: absolute;
+ top: 21rem;
+ bottom: 0;
+ width: 100%;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-color: black;
+}
+
+#locked-contact-photo.masked {
+ background-position: 100% -22rem;
+}
+
+#locked-contact-photo.masked:before {
+ content: "";
+ background-position: 100% -22rem;
+ background-image: url("images/mask.png");
+ position: absolute;
+ top: 0;
+ width: 100%;
+ bottom: 0;
+}
+
+#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:not([data-layout="incoming-locked"]) #locked-contact-photo {
+ display: none;
+}
+
+#call-screen[data-layout="dialing"] #callbar-hang-up,
+#call-screen[data-layout="connected"] #callbar-hang-up {
+ width: 100%;
+}
+
+#call-screen[data-layout="dialing"] #callbar-hang-up-action {
+ margin: 1rem 1.5rem 1.5rem 1.5rem;
+}
+
+#call-screen[data-layout="incoming"] #co-advanced,
+#call-screen[data-layout="incoming-locked"] #co-advanced {
+ visibility: hidden;
+}
+
+#call-screen[data-layout="incoming"] #main-container,
+#call-screen[data-layout="incoming"] #main-container:before,
+#call-screen[data-layout="incoming-locked"] #main-container,
+#call-screen[data-layout="incoming-locked"] #main-container:before,
+#call-screen[data-layout="incoming-locked"] {
+ background-color: transparent;
+}
+
+#call-screen[data-layout="incoming-locked"] #calls {
+ top: 14rem;
+}
View
224 apps/communications/dialer/style/swiper.css
@@ -17,120 +17,105 @@
top: 1.9rem;
width: 1.2rem;
}
-.swiper-icon-left:after {
- animation: 2s ease 0s normal none infinite swiper-arrow-left;
- background: url("./images/arrow-left.png") no-repeat scroll center center transparent;
- right: -7.5rem;
+
+#swiper-area-hangup > div {
+ background-image: url("images/hangup_icon.png");
+ background-position: center;
+ background-repeat: no-repeat;
+ margin-left: 4.2rem;
+ margin-right: auto;
+ transition: opacity 0.5s ease;
}
-#swiper-area-hangup {
- background: url("./images/hangup_icon.png") no-repeat scroll center center rgba(0, 0, 0, 0.3);
+
+.touched #swiper-area-hangup > div {
+ transition: none;
}
-#swiper-area-hangup:active {
- background: url("./images/ActionIcon_40x40_hangup.png") no-repeat scroll center center rgb(255, 0, 0);
+
+#swiper-area-hangup:active > div {
+ background-image: url("images/hangup_icon_pressed.png");
+ background-color: #F80000;
+ background-position: center;
+ background-repeat: no-repeat;
}
.swiper-icon-left {
- left: 4rem;
- border: 2px solid #FF0000;
+ left: 0;
+ border-top: 1px solid #F80000;
+}
+.swiper-icon-right > div {
+ border: 2px solid #82C82D;
+}
+.swiper-icon-left > div {
+ border: 2px solid #F80000;
}
+
.swiper-icon {
+ margin-top: 2rem;
+ border-radius: 3.2rem;
+ width: 6.4rem;
+ height: 6.4rem;
+ background-color: rgba(0, 0, 0, 0.7);
-moz-box-sizing: border-box;
- /*border: 2px solid rgba(255, 255, 255, 0.8);*/
- border-radius: 3rem;
- bottom: 5rem;
- height: 6rem;
- margin-bottom: -4.1rem;
- position: absolute;
- transition: opacity 0.1s linear 0s;
- width: 6rem;
+ pointer-events: none;
}
.touched .swiper-rail {
opacity: 1;
}
-.touched .swiper-icon {
- transition: none;
+.swiper-icon-area {
+ width: -moz-calc(50%);
+ height: 100%;
+ position: absolute;
+ background-image: linear-gradient(to bottom,
+ rgba(0,0,0,0.8), rgba(0,0,0,0.2) 20%);
+ pointer-events: none;
}
-.touched #swiper-icon-container {
- transition: none;
+.triggered .swiper-icon-area {
+ pointer-events: auto;
}
/* swiper-area-pickup */
-.swiper-icon-right:after {
- animation: 2s ease 0s normal none infinite swiper-arrow-right;
- background: url("./images/arrow-right.png") no-repeat scroll center center transparent;
- left: -7.5rem;
-}
-#swiper-area-pickup {
- background: url("./images/pickup_icon.png") no-repeat scroll center center rgba(0, 0, 0, 0.3);
-}
-#swiper-area-pickup:active {
- background: url("./images/ActionIcon_40x40_pickup.png") no-repeat scroll center center rgb(0, 255, 0);
-}
-.swiper-icon-right {
- right: 4rem;
- border: 2px solid #00FF00;
+#swiper-area-pickup > div {
+ background-image: url("images/pickup_icon.png");
+ background-position: center;
+ background-repeat: no-repeat;
+ margin-right: 4.2rem;
+ margin-left: auto;
+ transition: opacity 0.5s ease;
}
-/* swiper-rail-left */
-#swiper-rail-left {
- left: 7.8rem;
- transform-origin: 0% 0%;
-}
-.swiper-rail {
- background-color: rgba(255, 255, 255, 0.8);
- bottom: 5rem;
- height: 0.2rem;
- margin: -21px;
- opacity: 0;
- position: absolute;
- transition: opacity 0.1s linear 0s;
- width: calc(50% - 5rem - 0.7rem);
+.touched #swiper-area-pickup > div {
+ transition: none;
}
-/* swiper-rail-right */
-#swiper-rail-right {
- right: 7.8rem;
- transform-origin: 100% 0%;
+#swiper-area-pickup:active > div {
+ background-image: url("images/pickup_icon_pressed.png");
+ background-color: #82C82D;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+.swiper-icon-right {
+ right: 0;
+ border-top: 1px solid #83C72B;
}
/* swiper-area-handle */
-#swiper-area-handle:after {
- background-image: url("./images/handle.png");
- background-position: 50% 50%;
- background-repeat: no-repeat;
- background-size: contain;
- content: "";
- height: 100%;
- left: 0;
+#swiper-area-handle {
+ opacity: 1;
position: absolute;
+ background-image: url('images/handle.png');
+ background-repeat: no-repeat;
+ background-position: center;
+ border-top: 1px solid transparent;
top: 0;
- transition: opacity 0.1s linear 0s;
+ height: 0.9rem;
width: 100%;
+ transition: opacity 0.5s ease;
}
-#swiper-area-handle:before {
- background-image: url("./images/handle-grow.png");
- background-position: 50% 50%;
- background-repeat: no-repeat;
- background-size: contain;
- content: "";
- height: 6.8rem;
- left: -0.9rem;
- opacity: 0;
- position: absolute;
- top: -0.9rem;
- width: 6.8rem;
-}
-#swiper-area-handle {
- bottom: 5rem;
- height: 5rem;
- left: 50%;
- margin-bottom: -4.5rem;
- margin-left: -2.5rem;
- position: absolute;
- transition: -moz-transform 0.1s linear 0s;
- width: 5rem;
+
+.touched #swiper-area-handle {
+ transition: none;
}
/* swiper */
@@ -142,23 +127,22 @@
display: none;
}
-#swiper-curve {
- width: 100%;
- bottom: 0;
- position: absolute;
-}
-
#swiper-icon-container {
position: absolute;
width: 100%;
- bottom: -7rem;
- height: 7rem;
- opacity: 0;
+ bottom: -8rem;
+ height: 10rem;
+ pointer-events: none;
+ padding-top: 2rem;
transition:
transform 0.5s ease,
opacity 0.5s ease;
}
+.touched #swiper-icon-container {
+ transition: none;
+}
+
@keyframes swiper-elastic {
0%, 100% {
transform: translateY(0);
@@ -172,11 +156,59 @@
.elastic #swiper-icon-container {
animation: swiper-elastic 1s 1;
- opacity: 0.4;
}
.triggered #swiper-icon-container {
- transform: translateY(-8.5rem);
+ transform: translateY(-8rem);
+ opacity: 1;
+}
+
+.triggered #swiper-area-pickup > div {
opacity: 1;
}
+.triggered #swiper-area-hangup > div {
+ opacity: 1;
+}
+
+.triggered #swiper-area-handle {
+ opacity: 0;
+}
+
+@keyframes swiper-elastic {
+ 0%, 60%, 100% {
+ transform: translateY(0);
+ animation-timing-function: ease-out;
+ }
+ 30% {
+ transform: translateY(-5rem);
+ animation-timing-function: ease-in;
+ }
+ 80% {
+ transform: translateY(-1.5rem);
+ animation-timing-function: ease-in;
+ }
+}
+
+@keyframes swiper-elastic-icon {
+ 0%, 60%, 100% {
+ opacity: 0.1;
+ animation-timing-function: ease-out;
+ }
+ 30% {
+ opacity: 0.5;
+ animation-timing-function: ease-in;
+ }
+ 80% {
+ opacity: 0.4;
+ animation-timing-function: ease-in;
+ }
+}
+
+.elastic .swiper-icon {
+ animation: swiper-elastic-icon 1.3s infinite;
+}
+
+.elastic #swiper-icon-container {
+ animation: swiper-elastic 1.3s infinite;
+}
View
4 apps/communications/dialer/test/unit/handled_call_test.js
@@ -243,10 +243,6 @@ suite('dialer/handled_call', function() {
assert.isTrue(mockCall._listenerRemoved);
});
- test('hide the node', function() {
- assert.isTrue(fakeNode.hidden);
- });
-
test('clear the ticker', function() {
assert.equal(subject._ticker, null);
});
View
1  apps/communications/ftu/css/style.css
@@ -73,7 +73,6 @@ html, body {
margin-right: 1rem;
position: relative;
text-align: right;
- text-transform: capitalize;
}
[role=navigation] .recommend {
View
2  apps/communications/ftu/js/tutorial.js
@@ -37,7 +37,7 @@ var Tutorial = {
},
get tutorialScreen() {
delete this.tutorialScreen;
- return this.tutorialScreen = document.getElementById('tutorial');
+ return this.tutorialScreen = document.getElementById('tutorial-screen');
},
get tutorialFinish() {
delete this.tutorialFinish;
View
1  apps/communications/ftu/locales/ftu.en-US.properties
@@ -111,6 +111,7 @@ about-your-rights-0 = {{brandShortName}} is built on free and open source softwa
about-your-rights-1 = {{brandShortName}} is made available to you under the terms of several open source licenses including the Mozilla Public License. A device running {{brandShortName}} may also contain proprietary software from third parties. Any code provided under open licenses give you the right to modify the source code and distribute your modified versions as long as you comply with their terms.
about-your-rights-2 = You are not granted any trademark rights or licenses to the trademarks of the Mozilla Foundation or any party, including without limitation the {{brandShortName}} name or logo.
about-your-rights-3 = Some features in {{brandShortName}}, such as the Crash Reporter, give you the option to provide feedback to Mozilla. By choosing to submit feedback, you give Mozilla permission to use the feedback to improve its products, to publish the feedback on its websites, and to distribute the feedback.
+about-other = Other
#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#
# Sharing Performance Data
View
2  apps/costcontrol/index.html
@@ -369,7 +369,7 @@ <h2 data-l10n-id="phone-and-internet-data-report">Phone and internet data report
<section role="region" id="data-limit-dialog" class="view" data-viewport="bottom">
<header>
<menu type="toolbar">
- <button id="data-usage-done-button" data-l10n-id="Done" class="recommend">Done</button>
+ <button id="data-usage-done-button" data-l10n-id="done" class="recommend">Done</button>
</menu>
<a class="cancel"><span id="data-usage-close-button" class="icon icon-close">close</span></a>
<h1 data-l10n-id="data-limit-header">Data Usage Limit</h1>
View
36 apps/costcontrol/js/message_handler.js
@@ -198,5 +198,41 @@
break;
}
});
+
+ // Count a new SMS
+ window.navigator.mozSetMessageHandler('sms-sent', function _onSMSSent(sms) {
+ ConfigManager.requestSettings(function _onSettings(settings) {
+ debug('SMS sent!');
+ var manager = window.navigator.mozSms;
+ var realCount = manager.getNumberOfMessagesForText(sms.body);
+ settings.lastTelephonyActivity.timestamp = new Date();
+ settings.lastTelephonyActivity.smscount += realCount;
+ ConfigManager.setOption({
+ lastDataUsage: settings.lastTelephonyActivity
+ }, function _sync() {
+ localStorage['sync'] = 'lastTelephonyActivity#' + Math.random();
+ });
+ });
+ });
+
+ // When a call ends
+ window.navigator.mozSetMessageHandler('telephony-call-ended',
+ function _onCall(tcall) {
+ if (tcall.direction !== 'outgoing')
+ return;
+
+ debug('Outgoing call finished!');
+ ConfigManager.requestSettings(function _onSettings(settings) {
+ settings.lastTelephonyActivity.timestamp = new Date();
+ settings.lastTelephonyActivity.calltime += tcall.duration;
+ ConfigManager.setOption({
+ lastDataUsage: settings.lastTelephonyActivity
+ }, function _sync() {
+ localStorage['sync'] = 'lastTelephonyActivity#' + Math.random();
+ });
+ });
+ }
+ );
+
}
}());
View
20 apps/costcontrol/js/widget.js
@@ -201,6 +201,26 @@
updateBalance(balance,
settings.lowLimit && settings.lowLimitThreshold);
});
+
+ } else if (currentMode === 'POSTPAID') {
+ requestObj = { type: 'telephony' };
+ costcontrol.request(requestObj, function _onRequest(result) {
+ var activity = result.data;
+ document.getElementById('telephony-calltime').innerHTML =
+ _('magnitude', {
+ value: (activity.calltime / 60).toFixed(0),
+ unit: 'min'
+ }
+ );
+ document.getElementById('telephony-smscount').innerHTML =
+ _('magnitude', {
+ value: activity.smscount,
+ unit: 'SMS'
+ }
+ );
+ views.telephony.querySelector('.meta').innerHTML =
+ formatTimeHTML(activity.timestamp);
+ });
}
}
});
View
7 apps/costcontrol/manifest.webapp
@@ -13,7 +13,8 @@
"desktop-notification":{},
"settings":{ "access": "readonly" },
"networkstats-manage":{},
- "alarms": {}
+ "alarms": {},
+ "telephony": {}
},
"activities": {
"costcontrol/balance": {
@@ -58,6 +59,8 @@
"orientation": "portrait-primary",
"messages": [
{ "sms-received": "/message_handler.html" },
- { "alarm": "/message_handler.html"}
+ { "alarm": "/message_handler.html"},
+ { "sms-sent": "/message_handler.html"},
+ { "telephony-call-ended": "/message_handler.html"}
]
}
View
4 apps/costcontrol/widget.html
@@ -35,8 +35,8 @@
<section class="view" id="telephony-view" aria-hidden="true">
<div class="info">
- <p><span id="telephony-calltime"></span><span class="unit"></span> <span id="telephony-smscount"></span><span class="unit"></span></p>
- <p class="meta"><time id="telephony-from-date"></time> – <time id="telephony-to-date"></time></p>
+ <p><span id="telephony-calltime"></span> <span id="telephony-smscount"></span></p>
+ <p class="meta"></p>
</div>
</section>
View
21 apps/email/js/ext/gaia-email-opt.js
@@ -23258,13 +23258,19 @@ function MailSlice(bridgeHandle, storage, _parentLog) {
exports.MailSlice = MailSlice;
MailSlice.prototype = {
set atTop(val) {
- this._bridgeHandle.atTop = val;
+ if (this._bridgeHandle)
+ this._bridgeHandle.atTop = val;
+ return val;
},
set atBottom(val) {
- this._bridgeHandle.atBottom = val;
+ if (this._bridgeHandle)
+ this._bridgeHandle.atBottom = val;
+ return val;
},
set userCanGrowDownwards(val) {
- this._bridgeHandle.userCanGrowDownwards = val;
+ if (this._bridgeHandle)
+ this._bridgeHandle.userCanGrowDownwards = val;
+ return val;
},
_updateSliceFlags: function() {
@@ -23293,6 +23299,9 @@ MailSlice.prototype = {
* ]
*/
_resetHeadersBecauseOfRefreshExplosion: function() {
+ if (!this._bridgeHandle)
+ return;
+
if (this.headers.length) {
// If we're accumulating, we were starting from zero to begin with, so
// there is no need to send a nuking splice.
@@ -23315,6 +23324,9 @@ MailSlice.prototype = {
},
reqNoteRanges: function(firstIndex, firstSuid, lastIndex, lastSuid) {
+ if (!this._bridgeHandle)
+ return;
+
var i;
// - Fixup indices if required
if (firstIndex >= this.headers.length ||
@@ -23422,6 +23434,9 @@ MailSlice.prototype = {
},
batchAppendHeaders: function(headers, insertAt, moreComing) {
+ if (!this._bridgeHandle)
+ return;
+
this._LOG.headersAppended(headers);
if (insertAt === -1)
insertAt = this.headers.length;
View
55 apps/gallery/style/gallery.css
@@ -26,7 +26,7 @@ section {
margin: 0;
padding: 0;
overflow: hidden;
- font-size: 10px;
+ font-size: 1.4rem;
}
.hidden {
@@ -43,7 +43,7 @@ section {
padding: 0px;
margin: 0px;
overflow: hidden;
- font-size: 20px;
+ font-size: 2.1rem;
}
/*
@@ -70,26 +70,41 @@ section {
* the overlay text shows up more clearly
*/
#overlay-content {
- margin-top: 30%;
- margin-left: 10%;
- margin-right: 10%;
- padding: 10%;
- border: solid black 4px;
- border-radius: 10px;
- background-color: rgba(0, 0, 0, 0.6);
- font-family: "MozTT", sans-serif;
+ background:
+ url(images/ui/pattern.png) repeat left top,
+ url(images/ui/gradient.png) no-repeat left top;
+ background-size: auto auto, 100% 100%;
+ /* We can't use shortand with background size because is not implemented yet:
+ https://bugzilla.mozilla.org/show_bug.cgi?id=570326; */
+ overflow: hidden;
+ position: absolute;
+ z-index: 100;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ font-family: "MozTT", Sans-serif;
+ font-size: 0;
+ /* Using font-size: 0; we avoid the unwanted visual space (about 3px)
+ created by white-spaces and break lines in the code betewen inline-block elements */
color: #fff;
- -moz-user-select: none;
+ padding: 110px 25px 0px 25px;
}
#overlay-title {
- text-align: center;
- font-weight: bold;
- font-size: 26px;
+ font-weight: normal;
+ text-transform:capitalize;
+ font-size: 1.9rem;
+ color: #fff;
+ margin: 0 5px -10px 5px;
}
#overlay-text {
- font-size: 18px;
+ padding: 10px 5px 0 5px;
+ border-top: 1px solid #686868;
+ font-weight: 300;
+ font-size: 2.5rem;
+ color: #ebebeb;
}
/* Spinner */
@@ -336,7 +351,7 @@ a.button {
background-repeat: no-repeat;
/* for buttons that display text */
- font-size: smaller;
+ font-size: 1.4rem;
text-align: center;
line-height: 40px;
}
@@ -561,7 +576,7 @@ footer {
border-right: solid black 1px;
overflow: hidden;
padding-top: 16px;
- font-size: 12px;
+ font-size: 1.4rem;
background-position: center;
}
@@ -701,7 +716,7 @@ a.filter-faded {
position: absolute;
width: 25%;
height: 100%;
- font-size: 15px;
+ font-size: 1.4rem;
}
/* If the button is selected, it has a different background */
@@ -737,7 +752,7 @@ a.filter-faded {
width: 100%;
height: 50px;
background-color: #444;
- font-size: smaller;
+ font-size: 1.4rem;
}
#sliderbar {
@@ -767,7 +782,7 @@ a.filter-faded {
background-color: #eee;
text-align: center;
padding-top: 12px;
- font-size: smaller;
+ font-size: 1.4rem;
color: black;
}
View
BIN  apps/gallery/style/images/iconaction_camera_gridview_30x30.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/gallery/style/images/ui/gradient.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/gallery/style/images/ui/pattern.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
1  apps/homescreen/everything.me/config/config.js
@@ -214,7 +214,6 @@ Evme.__config = {
}
},
"categoriesDialogs": {},
- "tests": [],
"_localShortcuts": [
{"query":"social","appIds":[693,588,694]},
{"query":"games","appIds":[1251,807,1883]},
View
22 apps/homescreen/everything.me/js/api/DoATAPI.js
@@ -15,7 +15,6 @@ Evme.DoATAPI = new function Evme_DoATAPI() {
userLat = undefined,
userLon = undefined,
appVersion = undefined,
- testStats = undefined,
manualCredentials = null,
manualCampaignStats = null,
requestingSession = false,
@@ -701,12 +700,6 @@ Evme.DoATAPI = new function Evme_DoATAPI() {
if (!params.stats) {
params.stats = {};
}
- var tests = getTestsReporting();
- if (tests) {
- for (var test in tests) {
- params.stats["test_" + test] = tests[test];
- }
- }
/* ---------------- */
var _request = new Evme.Request();
@@ -747,21 +740,6 @@ Evme.DoATAPI = new function Evme_DoATAPI() {
return _request;
}
- function getTestsReporting() {
- if (testStats != undefined) {
- return testStats;
- }
-
- var tests = (typeof Tests !== "undefined")? Tests.getAll() : [];
-
- testStats = {};
- for (var i=0; i<tests.length; i++) {
- testStats[tests[i].testName] = tests[i].testGroup;
- }
-
- return testStats;
- }
-
function shouldRetry(data) {
// If the parameters sent are incorrect, retrying won't help
return data.errorCode !== self.ERROR_CODES.INVALID_PARAMS;
View
174 apps/homescreen/everything.me/js/helpers/Tests.js
@@ -1,174 +0,0 @@
-Evme.Tests = new function Evme_Tests() {
- var self = this,
- tests = {}, configData = {}, userGroups = {},
- elContainer = null,
-
- BASE_STYLES_URL = "/css/tests/",
- STORAGE_KEY = "tests";
-
- this.NOT_IN_TEST = "main";
-
- this.init = function init(options) {
- !options && (options = {});
-
- elContainer = options.elContainer;
-
- configData = options.config;
-
- populateGroupsFromStorage();
-
- var _tests = options.tests || [],
- activeTestsKeys = {};
-
- for (var i=0; i<_tests.length; i++) {
- var test = _tests[i];
-
- tests[test.name] = test;
- activeTestsKeys[test.storageKey] = true;
-
- var group = self.divideIntoGroup(test);
-
- if (group != self.NOT_IN_TEST) {
- self.applyTestChanges(test, group);
- }
- }
-
- for (var key in userGroups) {
- if (!activeTestsKeys[key]) {
- delete userGroups[key];
- }
- }
-
- Evme.Storage.set(STORAGE_KEY, JSON.stringify(userGroups));
- };
-
- function populateGroupsFromStorage() {
- userGroups = Evme.Storage.get(STORAGE_KEY);
- if (userGroups) {
- try {
- userGroups = JSON.parse(userGroups);
- } catch(ex) {
- userGroups = {};
- }
- } else {
- userGroups = {};
- }
- }
-
- this.divideIntoGroup = function divideIntoGroup(test) {
- // if user is already in a group- return that group
- var storedGroup = self.getStoredGroup(test.name);
- if (storedGroup) {
- return storedGroup;
- }
-
- if (test.filters) {
- var filters = test.filters;
- if (!(filters instanceof Array)) {
- filters = [filters];
- }
-
- for (var i=0; i<filters.length; i++) {
- var passedFilter = self.Filters[filters[i]]();
- if (!passedFilter) {
- self.storeGroup(test, self.NOT_IN_TEST);
- return self.NOT_IN_TEST;
- }
- }
- }
-
- // if the test isn't on ALL users, insert the remaining users into a "not in test" group
- if (test.percent && test.percent < 100) {
- var isInTest = (Math.round(Math.random()*100) < test.percent);
- if (!isInTest) {
- self.storeGroup(test, self.NOT_IN_TEST);
- return self.NOT_IN_TEST;
- }
- }
-
- if (test.excludeTests) {
- if (!test.excludeTests instanceof Array) {
- test.excludeTests = [test.excludeTests];
- }
-
- for (var i=0; i<test.excludeTests.length; i++) {
- if (self.getStoredGroup(tests[test.excludeTests].name) != self.NOT_IN_TEST) {
- self.storeGroup(test, self.NOT_IN_TEST);
- return self.NOT_IN_TEST;
- }
- }
- }
-
- var div = Math.floor(Math.random()*test.groups.length);
- var group = test.groups[div] || self.NOT_IN_TEST;
-
- self.storeGroup(test, group);
-
- return group;
- };
-
- this.applyTestChanges = function applyTestChanges(test, group) {
- if (test.bodyClass) {
- elContainer.classList.add(test.bodyClass + "-" + group);
- }
-
- if (test.css) {
- var elStyle = document.createElement('link');
- elStyle.setAttribute('rel', 'Stylesheet');
- elStyle.setAttribute('href', BASE_STYLES_URL + test.css);
-
- elContainer.appendChild(elStyle);
- }
-
- if (test.config && test.config[group]) {
- var groupConfig = test.config[group];
- Evme.Utils.updateObject(configData, groupConfig);
- }
- };
-
- this.storeGroup = function storeGroup(test, group) {
- userGroups[test.storageKey] = group;
- };
-
- this.getStoredGroup = function getStoredGroup(key) {
- var test = tests[key],
- group = false;
-
- if (test) {
- group = userGroups[test.storageKey];
- if (!group) {
- return false;
- }
- }
-
- return group;
- };
-
- this.getAll = function getAll() {
- var groups = [];
-
- for (var key in tests) {
- var test = tests[key];
- groups.push({
- "testName": test.name,
- "testGroup": self.getStoredGroup(test.name)
- });
- }
-
- return groups;
- };
-
- // these functions are used as custom filters in the tests
- // should return "true" if user is OK to get into the test, "false" otherwise.
- this.Filters = new function Filters() {
- this.noTests = function noTests() {
- for (var test in userGroups) {
- if (userGroups[test] !== self.NOT_IN_TEST) {
- return false;
- }
- }
-
- return true;
- };
- };
-};
View
12 apps/homescreen/everything.me/js/helpers/Utils.js
@@ -114,18 +114,6 @@ Evme.Utils = new function Evme_Utils() {
return newUser;
};
- this.updateObject = function updateObject(configData, groupConfig) {
- if (!groupConfig) {
- return;
- }
-
- for (var key in groupConfig) {
- eval('configData["' + key.replace(/=>/g, '"]["') + '"] = groupConfig[key]');
- }