adding in viewing of conversations in mobile contacts. Still needs more style work but basic data shows up
authorJames Burke <jrburke@mozillamessaging.com>
Thu, 17 Jun 2010 16:02:17 -0700
changeset 1780 de6948b10a36be09a02a891b5260678a5e2e7ec1
parent 1779 5f8b0ff1ef822d412f73d26a4479d8c5fe5ad1bf
child 1781 6ccd091fd208ebf3ae7a0eaa07d4bee1876006e9
push id983
push userjrburke@gmail.com
push dateThu, 17 Jun 2010 23:02:20 +0000
adding in viewing of conversations in mobile contacts. Still needs more style work but basic data shows up
client/api/contacts.css
client/api/contacts.html
--- a/client/api/contacts.css
+++ b/client/api/contacts.css
@@ -149,25 +149,32 @@ ul {
     padding-left: 8px;
     list-style-type: none;
     border-bottom: 1px solid #ADAAAD;
     line-height: 43px;
     font-weight: bold;
     color: black;
 }
 
+.maxWidthList li.message {
+    height: auto;
+    font-weight: normal;
+    line-height: normal;
+    padding: 8px;
+}
+
 .maxWidthList li a {
     display: block;
     width: 100%;
     height: 100%;
     text-decoration: none;
     color: black;
 }
 
-#identityDisplay ul {
+#identityCard ul {
     list-style: none;
 }
 
 .contactDetail {
     padding: 10px;
 }
 
 .contactPhoto {
@@ -278,35 +285,79 @@ ul {
     background: transparent url(i/twitterIcon.png) center left no-repeat;
     padding-left: 20px;
 }
 
 .maxWidthList li.conv .summary {
     height: auto;
 }
 
+.maxWidthList li .subject {
+    display: block;
+    margin-right: 45px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
 .maxWidthList li .bodyPreview {
     display: block;
+    margin-right: 45px;
     font-weight: normal;
     font-size: smaller;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 li .mblArrow {
     position: absolute;
     top: 16px;
     right: 30px;
     width: 9px;
     height: 13px;
     font-size: 1px;
     border-width: 3px 3px 0px 0px;
     border-color: #808080;
     border-style: none;
     background-image: url(i/gray-arrow.png);
 }
 
+
+.message .subject {
+    padding: 8px;
+    font-weight: bold;
+    font-size: larger;
+}
+
+.message .from {
+    font-weight: bold;
+}
+
+.message .from .date {
+    font-weight: normal;
+    color: gray;
+}
+
+.messageBody a.quoteToggle {
+  text-decoration: none;
+  color: #888;
+}
+
+.messageBody .quoteContent.quote {
+    display: none;
+    color: #666;
+    background-color: #f2f2f2;
+    padding: 5px;
+}
+
+.messageBody .quoteContent.quote.expanded {
+    display: block;
+}
+
 /* START hbox/vbox normalization from http://alex.dojotoolkit.org/2009/08/css-3-progress/ */
 /* hbox and vbox classes */
  
 .hbox {
 	display: -webkit-box;
 	-webkit-box-orient: horizontal;
 	-webkit-box-align: stretch;
  
--- a/client/api/contacts.html
+++ b/client/api/contacts.html
@@ -16,18 +16,16 @@
         /*
          To detect orientation changes in Android:
          http://stackoverflow.com/questions/1649086/detect-rotation-of-android-phone-in-the-browser-with-javascript
         */
 
         require(['jquery', 'rdapi', 'cards', 'blade/jig', 'json2', 'iscroll-min'],
         function ($,        rdapi,   cards,   jig) {
 
-            var scroller, display, cardList, back, header;
-
             //Initialize the card setup
             cards('#display');
 
             //Set up extra template functions.
             rdapi.addJigFunctions({
                 getPhotoUrl: function (contact) {
                     var i, identity, url = 'i/face.png';
                     if (contact.identities) {
@@ -41,17 +39,20 @@
                     return url;
                 }
             });
 
             $(function () {
                 //setup for the iscroll thing
                 if ('ontouchmove' in document) {
                     document.addEventListener('touchmove', function(e){ e.preventDefault(); }, false);
-                    scroller = new iScroll('contactList');
+                    new iScroll('contactList');
+                    //new iScroll('identityCard');
+                    new iScroll('contactConversations');
+                    new iScroll('fullConvScroll');
                 }
             });
 
             $('body')
             .delegate('a.person', 'click', function (evt) {
                 evt.preventDefault();
                 var contact = rdapi.data(evt.target.parentNode.getAttribute('data-blade-jig'));
                 rdapi('_design/raindrop!content!all/_view/identities_by_contact', {
@@ -83,17 +84,17 @@
                                         identities.push(row.doc);
                                     });
                                 }
                                 if (identities.length) {
                                     contact.identities = identities;
                                 }
                                 html = jig(options.template, contact, options);
 
-                                $('#identityDisplay').html(html);
+                                $('#identityCard').html(html);
 
                                 //Scroll the cards.
                                 cards.forward();
                             }
                         });
                     }
                 });
             })
@@ -110,34 +111,71 @@
                     emptyTemplateId: 'conversationsEmpty',
                     containerNode: document.getElementById('contactConversations'),
                     onTemplateDone: function () {
                         //Move the conversation card into view.
                         cards.forward(document.getElementById('contactInfo').innerHTML);
                     }
                 });
             });
+
+            $('#contactConversations').delegate('li.summary', 'click', function (evt) {
+                var convId = rdapi.data(evt.target.getAttribute('data-blade-jig')).id;
+                rdapi('inflow/conversations/by_id', {
+                    data: {
+                        key: JSON.stringify(convId),
+                        schemas: JSON.stringify(['*'])
+                    },
+                    contentType: '',
+                    templateId: 'fullConv',
+                    containerNode: document.getElementById('fullConvScroll'),
+                    onTemplateDone: function () {
+                        cards.forward();
+                    }
+                })
+            });
+
+
+            $('#fullConvCard').delegate('.quoteToggle', 'click', function (evt) {
+                var target = $(evt.target),
+                    content = target.next('.quote');
+
+                if (content.hasClass('expanded')) {
+                    content.removeClass('expanded');
+                    target.html('Show Quote');
+                } else {
+                    content.addClass('expanded');
+                    target.html('Hide Quote');
+                }
+                evt.stopPropagation();
+                evt.preventDefault();
+            });
+
         });
     </script>
 </head>
 <body>
     <!-- UI Cards, some structure mandated by cards.js -->
     <div id="display">
         <div id="cards">
             <div id="contactsCard" class="card" title="Contacts">
                 <ul id="contactList" class="contacts maxWidthList templateContainer">
                     <!-- Template that loads all contacts ans shows a list of the by name -->
                     <li class="template" data-api="inflow/contacts/by_name"><a class="person" href="#{id[1]}">{displayName}</a></li>
                 </ul>
             </div>
-            <div id="identityDisplay" class="card card2" title="Info">
+            <div id="identityCard" class="card card2" title="Info">
             </div>
-            <div id="conversations" class="card card3">
+            <div id="conversationsCard" class="card card3">
                 <ul id="contactConversations" class="maxWidthList"></ul>
             </div>
+            <div id="fullConvCard" class="card card4" title="Conversation">
+                <div id="fullConvScroll"></div>
+            </div>
+
         </div>
     </div>
 
     <!-- Template for showing contact details -->
     <div class="template contactDetail" data-id="contactDetail">
         <div id="contactInfo">
             <img class="contactPhoto" src="{getPhotoUrl(_)}"> <span class="contactDisplayName">{displayName}</span>
         </div>
@@ -166,10 +204,29 @@
         <div class="mblArrow"></div>
     </li>
 
     <!-- Template for when contact has no conversations available. -->
     <li class="template conversation" data-id="conversationsEmpty">
         No conversations for this contact.
     </li>
 
+    <!-- Template for showing all messages in a conversation -->
+    <div class="template message {id[0]}" data-id="fullConv">
+        <div class="subject">{subject}</div>
+        <ul class="maxWidthList">
+            {messages [}
+                <li class="message">
+                    <div class="from name">{schemas['rd.msg.body'].from_display} <span class="date">on {schemas['rd.msg.body'].timestamp}</span></div>
+                    <div class="messageBody">
+                        {schemas['rd.msg.body.quoted'].parts [}
+                            {type [}
+                                <a class="quoteToggle" href="#quoteToggle">Show Quote</a>
+                            {]}
+                            <div class="quoteContent {type}">{^htmlBody(text)}</div>
+                        {]}
+                    </div>
+                </li>
+            {]}
+        </ul>
+    </div>
 </body>
 </html>