Add message detail view

conversation.html

@@ -87,6 +87,33 @@
                 </div>
             </div>
         </script>
+        <script type='text/x-tmpl-mustache' id='message-detail'>
+          <div class='title-bar' id='header'>
+              <button class='back'></button>
+              <span class='title-text'>Message Detail</span>
+          </div>
+          <div class='message-container'></div>
+          <div class='info'>
+            <table>
+                <tr><td class='label'>Sent</td><td> {{ sent_at }}</td></tr>
+                <tr><td class='label'>Received</td><td> {{ received_at }}</td></tr>
+              <tr>
+                <td class='tofrom label'>{{ tofrom }}</td>
+                <td>
+                  <div class='contacts'>
+                  {{ #contacts }}
+                    <img class='avatar' src='{{ avatar }}'>
+                    <span class='name'>{{ name }}</div>
+                    {{ #conflict }}
+                      <button class='resolve'>Key Conflict</button>
+                    {{ /conflict }}
+                  {{ /contacts }}
+                  </div>
+                </td>
+              </tr>
+            </table>
+          </div>
+        </script>
 
         <script type="text/javascript" src="js/components.js"></script>
 
@@ -109,6 +136,7 @@
         <script type="text/javascript" src="js/views/group_update_view.js"></script>
         <script type="text/javascript" src="js/views/attachment_view.js"></script>
         <script type="text/javascript" src="js/views/message_view.js"></script>
+        <script type="text/javascript" src="js/views/message_detail_view.js"></script>
         <script type="text/javascript" src="js/views/message_list_view.js"></script>
 
         <script type="text/javascript" src="js/views/conversation_view.js"></script>

js/views/conversation_view.js

@@ -53,7 +53,19 @@
             'click .leave-group': 'leaveGroup',
             'click .new-group-update': 'newGroupUpdate',
             'click .hamburger': 'toggleMenu',
-            'click' : 'closeMenu'
+            'click' : 'closeMenu',
+            'select .entry': 'messageDetail'
+        },
+
+        messageDetail: function(e, data) {
+            var view = new Whisper.MessageDetailView({ model: data.message, conversation: this.model });
+            view.$el.insertAfter(this.$el);
+            this.$el.hide();
+            view.render();
+            this.listenTo(view, 'back', function() {
+                view.remove();
+                this.$el.show();
+            }.bind(this));
         },
 
         closeMenu: function(e) {

js/views/message_detail_view.js

@@ -0,0 +1,49 @@
+/* vim: ts=4:sw=4:expandtab
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+(function () {
+    'use strict';
+
+    window.Whisper = window.Whisper || {};
+
+    Whisper.MessageDetailView = Backbone.View.extend({
+        className: 'message-detail',
+        initialize: function(options) {
+            this.template = $('#message-detail').html();
+            Mustache.parse(this.template);
+            this.view = new Whisper.MessageView({model: this.model});
+            this.conversation = options.conversation;
+        },
+        events: {
+            'click .back': 'goBack'
+        },
+        goBack: function() {
+            this.trigger('back');
+        },
+        render: function() {
+            this.$el.html(Mustache.render(this.template, {
+                sent_at: moment(this.model.get('sent_at')).toString(),
+                received_at: moment(this.model.get('received_at')).toString(),
+                tofrom: this.model.isIncoming() ? 'From' : 'To',
+                contacts: {
+                    name     : this.conversation.getTitle(),
+                    avatar   : this.conversation.get('avatar')
+                }
+            }));
+            this.view.render().$el.prependTo(this.$el.find('.message-container'));
+        }
+    });
+
+})();

js/views/message_view.js

@@ -91,9 +91,13 @@
 
             this.listenTo(this.model, 'change',  this.render); // auto update
             this.listenTo(this.model, 'destroy', this.remove); // auto update
-
         },
-
+        events: {
+            'click .timestamp': 'select'
+        },
+        select: function() {
+            this.$el.trigger('select', {message: this.model});
+        },
         render: function() {
             this.view.render();
             return this;

stylesheets/_conversation.scss

@@ -2,10 +2,34 @@
   padding: $header-height 0;
 }
 
-.conversation, .discussion-container, .message-list {
+.conversation, .discussion-container, .message-list, .message-detail {
   height: 100%;
 }
 
+.message-detail {
+  padding: $header-height 0 0;
+  background: $grey_l;
+
+  .message-container {
+    background: white;
+    padding: 1em 0;
+
+    .sender {
+      display: none;
+    }
+  }
+
+  .info {
+    padding: 1em;
+
+    .label {
+      text-align: right;
+      font-weight: bold;
+      padding-right: 1em;
+    }
+  }
+}
+
 .group-update {
   font-size: smaller;
 }
@@ -33,9 +57,21 @@
   max-height: 100%;
   margin: 0;
   padding: 1em 0;
-  list-style: none;
   overflow-y: scroll;
 
+  .timestamp {
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.message-detail,
+.message-list {
+  list-style: none;
+
   li {
     margin: 0 8px 16px;
 

stylesheets/manifest.css

@@ -280,9 +280,24 @@ input.new-message {
 .conversation {
   padding: 36px 0; }
 
-.conversation, .discussion-container, .message-list {
+.conversation, .discussion-container, .message-list, .message-detail {
   height: 100%; }
 
+.message-detail {
+  padding: 36px 0 0;
+  background: #f3f3f3; }
+  .message-detail .message-container {
+    background: white;
+    padding: 1em 0; }
+    .message-detail .message-container .sender {
+      display: none; }
+  .message-detail .info {
+    padding: 1em; }
+    .message-detail .info .label {
+      text-align: right;
+      font-weight: bold;
+      padding-right: 1em; }
+
 .group-update {
   font-size: smaller; }
 
@@ -305,10 +320,19 @@ input.new-message {
   max-height: 100%;
   margin: 0;
   padding: 1em 0;
-  list-style: none;
   overflow-y: scroll; }
+  .message-list .timestamp {
+    cursor: pointer; }
+    .message-list .timestamp:hover {
+      text-decoration: underline; }
+
+.message-detail,
+.message-list {
+  list-style: none; }
+  .message-detail li,
   .message-list li {
     margin: 0 8px 16px; }
+    .message-detail li::after,
     .message-list li::after {
       visibility: hidden;
       display: block;
@@ -316,8 +340,10 @@ input.new-message {
       content: " ";
       clear: both;
       height: 0; }
+  .message-detail p,
   .message-list p {
     margin: 0; }
+  .message-detail .bubble,
   .message-list .bubble {
     position: relative;
     left: -2px;
@@ -327,54 +353,72 @@ input.new-message {
     padding: 9px 12px;
     border-radius: 4px;
     box-shadow: 0 3px 3px -4px black; }
-    .message-list .bubble::before, .message-list .bubble::after {
+    .message-detail .bubble::before, .message-detail .bubble::after,
+    .message-list .bubble::before,
+    .message-list .bubble::after {
       content: '';
       position: absolute;
       height: 0;
       width: 0; }
+    .message-detail .bubble::before,
     .message-list .bubble::before {
       top: 19px;
       border-top: 8px solid transparent;
       border-bottom: 8px solid transparent; }
+    .message-detail .bubble::after,
     .message-list .bubble::after {
       top: 21px;
       border-top: 6px solid transparent;
       border-bottom: 6px solid transparent; }
+  .message-detail .incoming .bubble,
   .message-list .incoming .bubble {
     color: #454545;
     background: #f3f3f3; }
+    .message-detail .incoming .bubble::before,
     .message-list .incoming .bubble::before {
       left: -10px;
       border-right: 10px solid white; }
+    .message-detail .incoming .bubble::after,
     .message-list .incoming .bubble::after {
       left: -8px;
       border-right: 8px solid #f3f3f3; }
-  .message-list .outgoing img, .message-list .outgoing .bubble {
+  .message-detail .outgoing img, .message-detail .outgoing .bubble,
+  .message-list .outgoing img,
+  .message-list .outgoing .bubble {
     float: right; }
+  .message-detail .outgoing .bubble,
   .message-list .outgoing .bubble {
     clear: left;
     color: white;
     background: #2a92e7; }
+    .message-detail .outgoing .bubble .timestamp,
     .message-list .outgoing .bubble .timestamp {
       color: #a2d2f4; }
+    .message-detail .outgoing .bubble::before,
     .message-list .outgoing .bubble::before {
       right: -10px;
       border-left: 10px solid white; }
+    .message-detail .outgoing .bubble::after,
     .message-list .outgoing .bubble::after {
       right: -8px;
       border-left: 8px solid #2a92e7; }
+  .message-detail .attachments img,
   .message-list .attachments img {
     max-width: 100%; }
+  .message-detail .outgoing img.avatar,
   .message-list .outgoing img.avatar {
     display: none; }
+  .message-detail img.avatar,
   .message-list img.avatar {
     height: 44px;
     width: 44px;
     background: #f3f3f3;
     border-radius: 22px; }
+  .message-detail .timestamp,
   .message-list .timestamp {
     margin-top: 3px;
     float: right; }
+  .message-detail .end-session,
   .message-list .end-session {
     font: small;
     font-style: italic;