Merge pull request #14447 from pivanov/bug-947099

Bug 947099 - [Dialer] Update tab bar to new 1.3 visual designs
mozilla-b2g · Jan 9, 2014 · ac1f7b7 · ac1f7b7
2 parents d50defd + d6c6037
commit ac1f7b7
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 20 deletions.
diff --git a/apps/communications/dialer/index.html b/apps/communications/dialer/index.html
@@ -68,7 +68,7 @@
     <link rel="import" href="elements/confirmation-message.html">
   </head>
   <body role="application">
-    <section id="views" role="tablist" data-items="3" class="bottom">
+    <section id="views" role="tablist" class="skin-dark">
       <article class="view hidden" role="tab" id="call-log-view">
         <a id="option-recents" href="#call-log-view" class="icon icon-recents">recents</a>
         <div role="tabpanel">
@@ -83,7 +83,7 @@ <h1 data-l10n-id="callLog"></h1>
             </header>
             <nav id="call-log-filter" class="recents-filter-container">
 
-              <ul role="tablist" data-type="filter" data-items="2">
+              <ul role="tablist" data-type="filter">
                 <li id="all-filter" role="tab" aria-selected="true"><a data-action="all" data-l10n-id="all"></a></li>
                 <li id="missed-filter" role="tab"><a data-action="missed" data-l10n-id="missed"></a></li>
               </ul>

diff --git a/apps/communications/dialer/style/call_log.css b/apps/communications/dialer/style/call_log.css
@@ -84,7 +84,7 @@ ol, ul {
 .view-body {
   background : white;
   color: black;
-  height: -moz-calc(100% - 9.5rem);
+  height: -moz-calc(100% - 9.1rem);
   -moz-transition: height .15s ease-in;
   position: absolute;
   overflow: hidden;

diff --git a/apps/communications/dialer/style/dialer.css b/apps/communications/dialer/style/dialer.css
@@ -68,19 +68,19 @@ body.hidden *[data-l10n-id] {
 
 /* Structure for toolbar*/
 
-.icon-recents:after {
-  background-image: url("images/recents.png") !important;
-  background-size: 3rem !important;
+.icon-recents {
+  background-image: url("images/recents.png");
+  background-size: 3rem;
 }
 
-.icon-contacts:after {
-  background-image: url("images/contacts.png") !important;
-  background-size: 3rem !important;
+.icon-contacts {
+  background-image: url("images/contacts.png");
+  background-size: 3rem;
 }
 
-.icon-keypad:after {
-  background-image: url("images/dialpad.png") !important;
-  background-size: 3rem !important;
+.icon-keypad {
+  background-image: url("images/dialpad.png");
+  background-size: 3rem;
 }
 
 .with-keyboard #views, .with-keyboard #contacts-view,
@@ -126,22 +126,36 @@ body.hidden *[data-l10n-id] {
 }
 
 /* For showing/hiding navbar */
+#views:before {
+  transform: translateX(0);
+  transition: 0.4s transform 0.4s;
+}
+
+#views.hide-toolbar:before {
+  transform: translateX(100%);
+}
+
+article[role="tab"]:before,
 article[role="tab"] > .icon {
   transform: translateY(0%);
   z-index: 2;
   transition: 0.5s transform 0.5s;
 }
 
+#views.hide-toolbar > article[role="tab"]:before,
 #views.hide-toolbar > article[role="tab"] > .icon {
   transform: translateY(100%);
   pointer-events: none;
 }
 
+#views.hide-toolbar .view {
+  pointer-events: none;
+}
+
 #views [role="tabpanel"] {
-  transition: 1s height step-end;
+  pointer-events: all;
 }
 
-#views.hide-toolbar [role="tabpanel"] {
+#contacts-view [role="tabpanel"] {
   height: 100%;
-  transition: none;
 }
diff --git a/apps/communications/dialer/style/images/contacts.png b/apps/communications/dialer/style/images/contacts.png
diff --git a/apps/communications/dialer/style/images/contacts@1.5x.png b/apps/communications/dialer/style/images/contacts@1.5x.png
diff --git a/apps/communications/dialer/style/images/dialpad.png b/apps/communications/dialer/style/images/dialpad.png
diff --git a/apps/communications/dialer/style/images/dialpad@1.5x.png b/apps/communications/dialer/style/images/dialpad@1.5x.png
diff --git a/apps/communications/dialer/style/images/index.png b/apps/communications/dialer/style/images/index.png
diff --git a/apps/communications/dialer/style/images/recents.png b/apps/communications/dialer/style/images/recents.png
diff --git a/apps/communications/dialer/style/images/recents@1.5x.png b/apps/communications/dialer/style/images/recents@1.5x.png
diff --git a/apps/communications/dialer/style/keypad.css b/apps/communications/dialer/style/keypad.css
@@ -4,10 +4,6 @@
  *
  */
 
-#keyboard-view {
-  height: 100%;
-}
-
 #fake-phone-number-view {
   font-size: 3rem;
   position: absolute;
@@ -193,7 +189,7 @@ article:not(:target) #keypad-delete {
   border-spacing: 0.8rem 0.8rem;
   border: solid 0.1rem rgba(255, 255, 255, 0.2);
   border-right-color: rgba(0, 0, 0, 0.4);
-  border-bottom-color: rgba(0, 0, 0, 0.4);
+  border-bottom: 0;
   border-left: 0;
   -moz-box-sizing: border-box;
 }