9 files changed, 551 insertions, 0 deletions
diff --git a/apps/system/emergency-call/style/dialer.css b/apps/system/emergency-call/style/dialer.css
new file mode 100644
index 0000000..7a3519a
--- /dev/null
+++ b/apps/system/emergency-call/style/dialer.css
@@ -0,0 +1,250 @@
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  margin: 0;
+  color: white;
+  font-family: 'MozTT', sans-serif;
+  font-size: 10px;
+  background: black;
+}
+
+a {
+  outline: 0;
+}
+
+a:hover, a:active, a:focus {
+  outline: 0;
+}
+
+html * {
+  overflow: hidden;
+}
+
+.font-regular {
+  font-family: 'MozTT';
+}
+
+.font-semibold {
+  font-family: 'MozTT';
+  font-weight: 600;
+}
+
+.font-light {
+  font-family: 'MozTT';
+}
+
+.contact-primary-info {
+  font-size: -moz-calc(15*0.226rem);
+  color: black;
+}
+
+.contact-secondary-info {
+  font-size: -moz-calc(6*0.226rem);
+  color: white;
+}
+
+.grid-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+.grid-v-align {
+  vertical-align: middle;
+}
+
+.grid-row {
+  display: table-row;
+}
+
+.grid-cell {
+  display: table-cell;
+}
+
+.grid {
+  display: table;
+  table-layout: fixed;
+}
+
+.center {
+  text-align: center;
+}
+
+#views {
+  top: 0;
+  height: 100%;
+  width: 100%;
+}
+
+#views > *[role=tabpanel] {
+  height: 100%;
+  width: 100%;
+}
+
+body.hidden *[data-l10n-id] {
+  visibility: hidden;
+}
+
+/* Call screen */
+#call-screen {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border: 0;
+  border-radius: 10px;
+  background: black;
+  -moz-transform: translateY(-100%);
+  z-index: 100;
+
+  -moz-transition: -moz-transform 0.5s ease;
+}
+
+#call-screen.displayed {
+  -moz-transform: translateY(0);
+}
+
+#main-container {
+  position: relative;
+  height: 100%;
+  background: transparent;
+}
+
+#actions-container {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 15.5rem;
+}
+
+#call-options {
+  height:9.5rem;
+}
+
+#co-advanced {
+  opacity: 1.0;
+  height: 9.5rem;
+}
+
+.co-advanced-option {
+  background: rgba(0,0,0,.8);
+  height: 9.5rem;
+  width: 100%;
+  border: 0;
+  border-top: 1px solid #3A3A3A;
+  border-bottom: 1px solid #3A3A3A;
+  border-right: 1px solid #3A3A3A;
+}
+
+#co-advanced span.grid-cell:last-child .co-advanced-option {
+  border-right: 0px;
+}
+
+#speaker span {
+  display:inline-block;
+  background-color: #DDD;
+  background:url('images/ActionIcon_40x40_bluetooth.png') ;
+  background-size: 4rem 4rem;
+  width:4rem;
+  height:4rem;
+  opacity: 1.0;
+}
+
+#speaker.speak  > span {
+  background:url('images/ActionIcon_40x40_bluetooth_active.png');
+}
+
+#callbar {
+  background:rgba(0,0,0,.8);
+  opacity: 1.0;
+}
+
+#callbar-hang-up {
+  float: left;
+  height: 6.5rem;
+  width: 100%;
+}
+
+.callbar-button {
+  height: 4rem;
+  border:0;
+  border-radius:.3rem;
+  display: block;
+}
+
+#callbar-hang-up-action {
+  background: -moz-linear-gradient(top, #ff0000 1%, #ce0000 100%);
+  opacity: 1.0;
+  margin: 1rem .5rem 1.5rem 1.5rem;
+}
+
+#callbar-hang-up.full-space > #callbar-hang-up-action {
+  margin: 1rem 1.5rem 1.5rem 1.5rem;
+}
+
+#callbar-hang-up-action > div {
+  margin: 0 auto;
+  background-image: url('images/ActionIcon_40x40_hangup.png');
+  background-repeat: no-repeat;
+  background-size: 4rem 4rem;
+  background-position: center;
+  width: 4rem;
+  height: 4rem;
+}
+
+#calls {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 22rem;
+
+  z-index: 500;
+}
+
+#calls > section {
+  position: relative;
+  height: 9rem;
+
+  font-size: 1.8em;
+  line-height: 7rem;
+  background-color: #01c5ed;
+
+  transition: opacity 0.3s linear;
+  opacity: 1;
+}
+
+#calls > section div {
+  padding-left: 2rem;
+  padding-right: 1.5rem;
+}
+
+#calls > section .number {
+  height: 4rem;
+  padding: 2rem 2rem 0 2rem;
+  background: #01c5ed;
+  font-size: 1.6em;
+  line-height: 4rem;
+  color: black;
+}
+
+#calls > section .additionalContactInfo {
+  height: 2rem;
+  padding: 0 2rem 2rem 2rem;
+  background: #01c5ed;
+  font-size: 1.4rem;
+  line-height: 2rem;
+  color: white;
+}
+
+#calls > section .duration {
+  position: absolute;
+  top: 12rem;
+  left: 0;
+  height: 8rem;
+  padding: 2rem;
+  font-size: 2.6em;
+  font-weight: 300;
+  line-height: 8rem;
+}
diff --git a/apps/system/emergency-call/style/images/ActionIcon_40x40_bluetooth.png b/apps/system/emergency-call/style/images/ActionIcon_40x40_bluetooth.png
new file mode 100644
index 0000000..a946ff2
--- /dev/null
+++ b/apps/system/emergency-call/style/images/ActionIcon_40x40_bluetooth.png
diff --git a/apps/system/emergency-call/style/images/ActionIcon_40x40_bluetooth_active.png b/apps/system/emergency-call/style/images/ActionIcon_40x40_bluetooth_active.png
new file mode 100644
index 0000000..86abf23
--- /dev/null
+++ b/apps/system/emergency-call/style/images/ActionIcon_40x40_bluetooth_active.png
diff --git a/apps/system/emergency-call/style/images/ActionIcon_40x40_hangup.png b/apps/system/emergency-call/style/images/ActionIcon_40x40_hangup.png
new file mode 100644
index 0000000..f955956
--- /dev/null
+++ b/apps/system/emergency-call/style/images/ActionIcon_40x40_hangup.png
diff --git a/apps/system/emergency-call/style/images/ActionIcon_40x40_pickup.png b/apps/system/emergency-call/style/images/ActionIcon_40x40_pickup.png
new file mode 100644
index 0000000..ad8423e
--- /dev/null
+++ b/apps/system/emergency-call/style/images/ActionIcon_40x40_pickup.png
diff --git a/apps/system/emergency-call/style/images/asterisk.png b/apps/system/emergency-call/style/images/asterisk.png
new file mode 100644
index 0000000..4199485
--- /dev/null
+++ b/apps/system/emergency-call/style/images/asterisk.png
diff --git a/apps/system/emergency-call/style/images/dialer_icon_delete.png b/apps/system/emergency-call/style/images/dialer_icon_delete.png
new file mode 100644
index 0000000..8e842cd
--- /dev/null
+++ b/apps/system/emergency-call/style/images/dialer_icon_delete.png
diff --git a/apps/system/emergency-call/style/images/sharp.png b/apps/system/emergency-call/style/images/sharp.png
new file mode 100644
index 0000000..36033bf
--- /dev/null
+++ b/apps/system/emergency-call/style/images/sharp.png
diff --git a/apps/system/emergency-call/style/keypad.css b/apps/system/emergency-call/style/keypad.css
new file mode 100644
index 0000000..ea9fb90
--- /dev/null
+++ b/apps/system/emergency-call/style/keypad.css
@@ -0,0 +1,301 @@
+/*
+ *  The code is being shared between system/emergency-call/js/keypad.js
+ *  and dialer/js/keypad.js. Be sure to update both file when you commit!
+ *
+ */
+
+.keypad-text {
+  font-size: -moz-calc(6*0.226rem);
+  color: #96AAB4;
+}
+
+#keyboard-view {
+  width: 100%;
+  height: 100%;
+}
+
+#fake-phone-number-view {
+  position: absolute;
+  line-height: 0;
+  visibility: hidden;
+}
+
+#phone-number-view-container {
+  width: 100%;
+  height: -moz-calc(100% - 34.5rem);
+  background: #242B36;
+  text-align: center;
+  display: table;
+  table-layout: fixed;
+  border-spacing: 1.5rem 0rem;
+  font-family: 'MozTT';
+  font-weight: 300;
+}
+
+#phone-number-view-container.keypad-visible {
+  height: -moz-calc(100% - 35rem);
+  visibility: hidden;
+}
+
+#phone-number-view {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  cursor: none;
+  -moz-user-select: none;
+}
+
+#keypad-delete {
+  text-align: center;
+  width: 4rem;
+  visibility: hidden;
+}
+
+#keypad-delete:active {
+  opacity: 0.7;
+}
+
+#keypad-delete > div {
+  width: 3.8rem;
+  height: 2.8rem;
+  background: url('images/dialer_icon_delete.png') ;
+  background-size: 3.8rem 2.8rem;
+  background-repeat: no-repeat;
+}
+
+#keyboard-container {
+  width: 100%;
+  height: 34.5rem;
+}
+
+#keypad {
+  background: -moz-linear-gradient(top, #191E25 0%, #080B0D 100%);
+  height: -moz-calc(100% - 10rem);
+  width: 100%;
+  display: table;
+  table-layout: fixed;
+}
+
+.keypad-cell {
+  display: table-cell;
+  border-right: 1px solid #6F6F6F;
+  border-top: 1px solid #6F6F6F;;
+}
+
+.keypad-cell:last-child {
+  border-right: 0;
+}
+
+.keypad-key {
+  border: 0;
+  border-bottom: 1px solid #6F6F6F;
+  height: 7rem;
+  vertical-align: middle;
+  position: relative;
+}
+
+.keypad-key:active {
+  background: black;
+  opacity: 0.7;
+}
+
+.keypad-key-label-container {
+  width: 100%;
+  height: 100%;
+  display: table;
+}
+
+.keypad-key-label {
+  display: table-cell;
+  padding-left: 1.5rem;
+  vertical-align: middle;
+}
+
+.keypad-key-label *,
+#keypad-delete * {
+  pointer-events: none;
+}
+
+.keypad-key-label-centered {
+  padding-left: 0;
+  text-align: center;
+}
+
+.font-size-plus {
+  font-size: 2rem;
+}
+
+.keypad-subicon {
+  background-repeat: no-repeat;
+  background-position: center bottom;
+
+  -moz-user-select: none;
+  pointer-events: none;
+
+  position: absolute;
+  left: 3.75rem;
+  bottom: 0.75rem;
+
+  width: 3rem;
+  height: 3rem;
+}
+
+.voicemail {
+  background-image: url('images/voicemail.png');
+}
+
+.asterisk {
+  background-image: url('images/asterisk.png');
+  background-repeat: no-repeat;
+  height: 3rem;
+  width: 3rem;
+  background-size: 3rem 3rem;
+  background-position: center;
+  margin: auto;
+  pointer-events: none;
+}
+
+.sharp {
+  background-image: url('images/sharp.png');
+  background-repeat: no-repeat;
+  height: 3rem;
+  width: 3rem;
+  background-size: 3rem 3rem;
+  background-position: center;
+  margin: auto;
+  pointer-events: none;
+}
+
+#keypad-callbar {
+  background: black;
+  height: 6.5rem;
+  width: 100%;
+  display: table;
+  table-layout: fixed;
+  border-spacing: 1rem 1rem;
+}
+
+#keypad-callbar-add-contact,
+#keypad-callbar-cancel {
+  display: table-cell;
+  width: 9rem;
+  background: -moz-linear-gradient(top, #242b36 0%, #19191a 100%);
+  border: .1rem solid #242B36;
+  border-radius: .2rem;
+  vertical-align: middle;
+}
+
+#keypad-callbar-cancel {
+  width: 10rem;
+}
+
+#keypad-callbar-cancel:active {
+  opacity: 0.7;
+}
+
+#keypad-callbar-cancel > div {
+  text-align: center;
+  font: 2rem 'MozTT';
+}
+
+#keypad-callbar-call-action {
+  display: table-cell;
+  width: 100%;
+  background: #84c82c;
+  border: 0;
+  border-radius: .2rem;
+  background: -moz-linear-gradient(top, #84c82c 0%, #5f9b0a 100%);
+  vertical-align: middle;
+}
+
+#keypad-callbar-call-action:active {
+  opacity: 0.7;
+}
+
+.icon-add-contact {
+  margin: auto;
+  width: 4rem;
+  height: 4rem;
+  background-image: url("images/ActionIcon_40x40_addcontact.png");
+  background-repeat: no-repeat;
+  background-size: 4rem 4rem;
+  background-position: center;
+}
+
+#keypad-callbar-call-action > div {
+  margin: auto;
+  width: 4rem;
+  height: 4rem;
+  background-image: url("images/ActionIcon_40x40_pickup.png");
+  background-repeat: no-repeat;
+  background-size: 4rem 4rem;
+  background-position: center;
+}
+
+#keypad-hidebar {
+  background: rgba(0,0,0,.8);
+  opacity: 1.0;
+}
+
+#keypad-hidebar-hang-up-action-wrapper {
+  float: left;
+  height: 6.5rem;
+  width: 50%;
+}
+
+#keypad-hidebar-hide-keypad-action-wrapper {
+  height: 6.5rem;
+  width: 50%;
+}
+
+.keypad-hidebar-button {
+  height: 4rem;
+  border: 0;
+  border-radius:.3rem;
+  display: block;
+}
+
+#keypad-hidebar-hang-up-action {
+  background: -moz-linear-gradient(top, #ff0000 0%, #ce0000 100%);
+  opacity: 1.0;
+  margin: 1rem .5rem 1.5rem 1.5rem;
+}
+
+#keypad-hidebar-hang-up-action > div {
+  margin: 0 auto;
+  background-image: url('images/ActionIcon_40x40_hangup.png');
+  background-repeat: no-repeat;
+  background-size: 4rem 4rem;
+  background-position: center;
+  width: 4rem;
+  height: 4rem;
+}
+
+#keypad-hidebar-hide-keypad-action {
+  background: -moz-linear-gradient(top, #6A6A6A 0%, #3E3E3E 100%);
+  opacity: 1.0;
+  margin: 1rem 1.5rem 1.5rem .5rem;
+}
+
+#keypad-hidebar-hide-keypad-action > div {
+  margin: -moz-calc((4rem - 3rem)/2) auto;
+  background-image: url('images/ActionIcons_30x30_dismiss_keyboard.png');
+  background-repeat: no-repeat;
+  background-size: 3rem 3rem;
+  background-position: center;
+  width: 3rem;
+  height: 3rem;
+}
+
+.phone-number-font {
+  font-size:-moz-calc(18*0.226rem);
+  color: white;
+  font-family:'MozTT';
+}
+
+.keypad-number {
+  font-size: -moz-calc(25*0.226rem);
+  color: white;
+}
+