Merge pull request mozilla-b2g#13765 from evhan55/920164

Bug 920164 - [MMS] Display the subject of an MMS, if present
digitarald · Nov 21, 2013 · e7f4ac4 · e7f4ac4
2 parents 3222581 + 45e289b
commit e7f4ac4
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 1 deletion.
diff --git a/apps/sms/index.html b/apps/sms/index.html
@@ -282,6 +282,9 @@ <h1 id="messages-edit-mode" data-l10n-id="deleteMessages-title">Delete Messages<
         <span></span>
       </label>
       <section class="bubble">
+        <h1 class="subject">
+          ${subject}
+        </h1>
         <aside class="pack-end">
           <progress></progress>
         </aside>

diff --git a/apps/sms/js/thread_ui.js b/apps/sms/js/thread_ui.js
@@ -1342,6 +1342,10 @@ var ThreadUI = global.ThreadUI = {
       classNames.push('hidden');
     }
 
+    if (message.type && message.type === 'mms' && message.subject) {
+      classNames.push('has-subject');
+    }
+
     if (message.type && message.type === 'sms') {
       var escapedBody = Template.escape(message.body || '');
       bodyHTML = LinkHelper.searchAndLinkClickableData(escapedBody);
@@ -1361,7 +1365,8 @@ var ThreadUI = global.ThreadUI = {
 
     messageDOM.innerHTML = this.tmpl.message.interpolate({
       id: String(message.id),
-      bodyHTML: bodyHTML
+      bodyHTML: bodyHTML,
+      subject: String(message.subject)
     }, {
       safe: ['bodyHTML']
     });

diff --git a/apps/sms/style/sms.css b/apps/sms/style/sms.css
@@ -428,6 +428,50 @@ section.has-carrier .article-list header:first-child {
   width: auto;
 }
 
+.article-list[data-type="list"] .message .subject {
+  display: none;
+}
+
+.article-list[data-type="list"] .has-subject .bubble {
+  padding-top: 0rem;
+}
+
+.article-list[data-type="list"] .has-subject .subject {
+  display: block;
+  margin-bottom: 0.5rem;
+  padding-top: 0.9rem; /* 0.9 top + 1.4 line-height + 0.7 bottom = 3.0 */
+  padding-bottom: 0.7rem;
+
+  line-height: 1.4rem;
+  font-size: 1.4rem;
+  font-style: italic;
+  color: #666;
+}
+
+.article-list[data-type="list"] .has-subject.outgoing .subject {
+  /* to extend the background color and bottom border */
+  width: 100%; 
+  margin-left: -1.5rem;
+  padding-left: 1.5rem;
+  padding-right: 4rem;
+
+  background: #FAFAFA;
+  border-bottom: 1px solid #EFEEEE;
+  border-radius: 0.3rem 0 0 0;
+}
+
+.article-list[data-type="list"] .has-subject.incoming .subject {
+  /* to extend the background color and bottom border */
+  width: 100%;
+  margin-left: -4rem;
+  padding-left: 4rem;
+  padding-right: 1.5rem;
+
+  background: #F7C584;
+  border-bottom: 1px solid #EFBD7C;
+  border-radius: 0 0.3rem 0 0;
+}
+
 .article-list[data-type="list"] .message.outgoing .bubble {
   float: right;
 

diff --git a/apps/sms/test/unit/thread_ui_test.js b/apps/sms/test/unit/thread_ui_test.js
@@ -1930,6 +1930,7 @@ suite('thread_ui.js >', function() {
     setup(function() {
       this.sinon.spy(Template, 'escape');
       this.sinon.stub(MockSMIL, 'parse');
+      this.sinon.spy(ThreadUI.tmpl.message, 'interpolate');
     });
 
     function buildSMS(payload) {
@@ -1954,6 +1955,22 @@ suite('thread_ui.js >', function() {
       ThreadUI.buildMessageDOM(buildMMS(payload));
       assert.ok(Template.escape.calledWith(payload));
     });
+
+    test('calls template with subject for MMS', function() {
+      ThreadUI.buildMessageDOM({
+        id: '1',
+        subject: 'subject',
+        type: 'mms',
+        deliveryInfo: [],
+        attachments: []
+      });
+      assert.ok(ThreadUI.tmpl.message.interpolate.calledWith({
+        id: '1',
+        bodyHTML: '',
+        subject: 'subject'
+      }));
+    });
+
   });
 
   suite('renderMessages()', function() {