Hiding the notification bar when there is nothing to be shown.

etiennesegonzac · Mar 3, 2012 · 7ddc317 · 7ddc317
1 parent 367d5ba
commit 7ddc317
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 24 deletions.
diff --git a/apps/homescreen/js/homescreen.js b/apps/homescreen/js/homescreen.js
@@ -689,8 +689,8 @@ var MessagesListener = function() {
 
     while (notifications.hasChildNodes())
       notifications.removeChild(notifications.firstChild);
-    showMessage('', 'Waiting for notifications...');
-  
+    notifications.classList.add('hidden');
+
     var sender = notifications.dataset.sender;
     WindowManager.launch('../sms/sms.html?sender=' + sender);
   });
@@ -708,16 +708,13 @@ var MessagesListener = function() {
     var message = document.createElement('div');
     message.textContent = body;
 
-    if (sender == '') {
-      title.classList.add('empty');
-      message.classList.add('empty');
-    }
-
     notification.appendChild(title);
     notification.appendChild(message);
     notifications.appendChild(notification);
 
     notifications.dataset.sender = sender;
+
+    notifications.classList.remove('hidden');
   }
 
 
@@ -726,7 +723,7 @@ var MessagesListener = function() {
     showMessage(message.sender, message.body);
   });
 
-  showMessage('', 'Waiting for notifications...');
+  notifications.classList.add('hidden');
 };
 
 /* === TelephoneListener === */

diff --git a/apps/homescreen/style/homescreen.css b/apps/homescreen/style/homescreen.css
@@ -107,6 +107,12 @@ body {
   background-size: 100% 100%;
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
+
+  -moz-transition: -moz-transform 0.3s ease;
+}
+
+#home > #notifications.hidden {
+  -moz-transform: translateY(80px);
 }
 
 #home .notification {
@@ -115,29 +121,25 @@ body {
 }
 
 #home .notification > div:first-child {
-  padding: 5px 0 0 0;
-  height: 25px;
+  margin: 0;
+  padding: 20px 0 0 0;
+
   font-size: 2.5mozmm;
+  line-height: 2.5mozmm;
   color: #111;
 }
 
 #home .notification > div:last-child {
-  display: table-cell;
+  margin: 0;
+  padding: 0;
+  width: -moz-calc(100% - 20px);
+  height: 25px;
+
   font-size: 2mozmm;
-  height: 50px;
   color: #666;
-  overflow: scroll;
-  vertical-align: middle;
-}
-
-#home .notification > div:first-child.empty {
-  display: none;
-}
-
-#home .notification > div:last-child.empty {
-  line-height: 80px;
-  height: 80px;
-  color: #aaa;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .page {