Merge pull request mozilla-b2g#3335 from borjasalguero/feature_sms_ui

[SMS] Latest UI
cpearce · Aug 13, 2012 · f94c21e · f94c21e
2 parents b724b8e + 93e4a2e
commit f94c21e
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 53 deletions.
diff --git a/apps/sms/js/sms.js b/apps/sms/js/sms.js
@@ -59,11 +59,15 @@ var MessageManager = {
         var threadMessages = document.getElementById('thread-messages');
         switch (window.location.hash) {
           case '#new':
+            var messageInput = document.getElementById('message-to-send');
+            var receiverInput = document.getElementById('receiver-input');
             document.getElementById('messages-container').innerHTML = '';
-            document.getElementById('message-to-send').innerHTML = '';
-            document.getElementById('receiver-input').value = '';
+            messageInput.innerHTML = '';
+            receiverInput.value = '';
             threadMessages.classList.add('new');
-            MessageManager.slide();
+            MessageManager.slide(function() {
+              messageInput.focus();
+            });
             break;
           case '#thread-list':
             if (mainWrapper.classList.contains('edit')) {
@@ -94,7 +98,11 @@ var MessageManager = {
               } else {
                 var filter = this.createFilter(num);
                 this.getMessages(ThreadUI.renderMessages,
-                  filter, null, MessageManager.slide);
+                  filter, null, function() {
+                   MessageManager.slide(function() {
+                      document.getElementById('message-to-send').focus();
+                    });
+                  });
               }
             }
           break;
@@ -709,17 +717,9 @@ var ThreadUI = {
     var bodyText = message.body;
     var bodyHTML = Utils.escapeHTML(bodyText);
     messageDOM.id = timestamp;
-    var htmlStructure = '<span class="bubble-container ' + className + '">' +
-                        '<div class="bubble">' + bodyHTML + '</div>' +
-                        '</span>';
-    // Add 'gif' if necessary
+    var htmlStructure = '';
+    // Adding edit options to the left side
     if (message.delivery == 'sending') {
-      messageDOM.addEventListener('click',
-        ThreadUI.resendMessage.bind(ThreadUI, message));
-      htmlStructure += '<span class="message-option">' +
-      '<img src="' + (message.showAnimation ? ThreadUI.sendIcons.sending :
-        ThreadUI.sendIcons.pending) + '" class="gif">' +
-                        '</span>';
       //Add edit options for pending
       htmlStructure += '<span class="message-option msg-checkbox">' +
                         '  <input value="ts_' + timestamp +
@@ -734,6 +734,19 @@ var ThreadUI = {
                         '  <span></span>' +
                       '</span>';
     }
+    htmlStructure += '<span class="bubble-container ' + className + '">' +
+                        '<div class="bubble">' + bodyHTML + '</div>' +
+                        '</span>';
+
+    // Add 'gif' if necessary
+    if (message.delivery == 'sending') {
+      messageDOM.addEventListener('click',
+        ThreadUI.resendMessage.bind(ThreadUI, message));
+      htmlStructure += '<span class="message-option">' +
+      '<img src="' + (message.showAnimation ? ThreadUI.sendIcons.sending :
+        ThreadUI.sendIcons.pending) + '" class="gif">' +
+                        '</span>';
+    }
     // Add structure to DOM element
     messageDOM.innerHTML = htmlStructure;
     //Check if we need a new header
@@ -985,7 +998,7 @@ var ThreadUI = {
           var root = document.getElementById(message.timestamp.getTime());
           if (root) {
 
-            root.removeChild(root.childNodes[1]);
+            root.removeChild(root.childNodes[2]);
             var inputs = root.querySelectorAll('input[type="checkbox"]');
             if (inputs) {
               inputs[0].value = 'id_' + msg.id;

diff --git a/apps/sms/style/common.css b/apps/sms/style/common.css
@@ -12,7 +12,10 @@
   position: relative;
   left: 0;
   top:0;
-  -moz-transition: -moz-transform .15s ease;
+}
+
+.dark-header {
+  -moz-transition: -moz-transform .2s ease-in;
 }
 
 .header-group {
@@ -61,6 +64,8 @@
 }
 
 .dark-header {
+  position: absolute;
+  top: -100%;
   background: url(images/ui/dark/header.png) repeat-x left top;
 }
 
@@ -117,7 +122,6 @@
   z-index: -1;
   width: 2rem;
   height: 4.9rem;
-  background: #9d3d26 url(images/ui/negative.png) repeat-x left top;
 }
 
 .view-header [role="link"] .icon.icon-menu {

diff --git a/apps/sms/style/sms.css b/apps/sms/style/sms.css
@@ -107,28 +107,23 @@ html, body {
   -moz-transform: translateY(3.6rem);
 }
 
-.edit .header-wrapper{
-  -moz-transform: translateX(-50%);
+.edit .dark-header{
+  -moz-transform: translateY(100%);
+  opacity: .9;
 }
 
-.new h1 {
-  display: none;
-}
-
-.new .tel {
-  display: block;
-}
-
-.new .carrier-wrapper {
-  display: none;
+.edit #thread-list-container .name {
+  left: 3rem;
+  width: -moz-calc(100% - 10rem);
 }
 
-.new #icon-edit {
-  display: none;
+.edit #thread-list-container .time {
+  left: 6rem;
 }
 
-.new #icon-contact {
-  display: block;
+.edit #thread-list-container .msg {
+  left: 13rem;
+  width: calc(100% - 20rem);
 }
 
 .edit > #thread-list > #thread-list-container a {
@@ -154,6 +149,31 @@ html, body {
   margin-bottom: 0;
 }
 
+/*
+  Styles for new message
+*/
+
+.new h1 {
+  display: none;
+}
+
+.new .tel {
+  display: block;
+}
+
+.new .carrier-wrapper {
+  display: none;
+}
+
+.new #icon-edit {
+  display: none;
+}
+
+.new #icon-contact {
+  display: block;
+}
+
+
 /*
   Thread list styles
 */
@@ -175,24 +195,22 @@ html, body {
   outline: none;
   height: 6rem;
   position: relative;
-  padding: 1rem 1.6rem 1rem 3rem;
+  padding: 1rem 0rem 1rem 3rem;
   border-top: 0.1rem solid hsla(207,22%,92%,1);
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-#thread-list-container .item > a:active {
-  background: -moz-linear-gradient(top, #FF9500 0, #E66000 100%);
-}
-
-#thread-list-container .item > a:active > .name {
-  color: white;
-}
-
-#thread-list-container .item > a:active > .msg {
-  color: #ffbc8c;
-  text-shadow: none;
+#thread-list-container .item > a:active:after {
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: #b1f1ff;
+  opacity: .6;
 }
 
 #thread-list-container .item > a.hide {
@@ -255,8 +273,8 @@ a.unread .unread-mark .icon-unread-mark {
 #thread-list-container .checkbox-container {
   position: absolute;
   top: 0;
-  right: 0;
-  width: 5.9rem;
+  left: 0;
+  width: 5.5rem;
   height: 100%;
   overflow: hidden;
   background: white;
@@ -291,14 +309,16 @@ a.unread .unread-mark .icon-unread-mark {
   overflow: hidden;
   text-overflow: ellipsis;
   width: -moz-calc(100% - 7rem);
+  position: relative;
 }
 
+
 #thread-list-container .msg {
   font-family: 'Open Sans';
   font-size: -moz-calc(6 * 0.226rem);
   color: #5B5B5B;
   text-shadow: 0 0.1rem 0 #ddd;
-  width: -moz-calc(100% - 20rem);
+  width: -moz-calc(100% - 17rem);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: '..."';
@@ -492,7 +512,7 @@ a.unread .unread-mark .icon-unread-mark {
   bottom: -6.5rem;
   width: 100%;
   position: absolute;
-  -moz-transition: -moz-transform .15s ease-in;
+  -moz-transition: -moz-transform .2s ease-in;
 }
 
 .option {
@@ -617,16 +637,16 @@ a.unread .unread-mark .icon-unread-mark {
 }
 
 #messages-container .item:active {
-  background: -moz-linear-gradient(top, #FF9500 0, #E66000 100%);
+  background: #b1f1ff;
+  opacity: .6;
 }
 
 #messages-container .item > a:active > .name {
-  color: #FFFFFF;
+  opacity: .6;
 }
 
 #messages-container .item > a:active > .number {
-  color: #ffbc8c;
-  text-shadow: none;
+  opacity: .6;
 }
 
 #messages-container .item > a > * {