Do not use css animation, old school scroll rocks it for card swipes, put in a top level screen for contact categories, but right now they all just load all contacts.
authorJames Burke <jrburke@mozillamessaging.com>
Mon, 21 Jun 2010 14:19:38 -0700
changeset 1781 6ccd091fd208ebf3ae7a0eaa07d4bee1876006e9
parent 1780 de6948b10a36be09a02a891b5260678a5e2e7ec1
child 1782 f16982df0692fe1bf54f85244e0118e1c8a1d1b6
push id984
push userjrburke@gmail.com
push dateMon, 21 Jun 2010 21:19:43 +0000
Do not use css animation, old school scroll rocks it for card swipes, put in a top level screen for contact categories, but right now they all just load all contacts.
client/api/contacts.css
client/api/contacts.html
client/api/scripts/cards.js
--- a/client/api/contacts.css
+++ b/client/api/contacts.css
@@ -110,29 +110,28 @@ ul {
     overflow: hidden;
 }
 
 #cards {
     position: absolute;
     left: 0;
     width: 100%;
     height: 100%;
+    /*
+     Transition is choppy. Doing the JS DOM scroll instead.
     -webkit-transition: left 0.3s ease-out;
+    */
 }
 
 .card {
     float: left;
     width: 100%;
     height: 310px;
 }
 
-.card.card2 {
-    z-index: 1;
-}
-
 #contactsCard {
     position: relative;
     z-index: 1;
     overflow: scroll;
 }
 
 .maxWidthList {
     width: 100%;
--- a/client/api/contacts.html
+++ b/client/api/contacts.html
@@ -112,16 +112,30 @@
                     containerNode: document.getElementById('contactConversations'),
                     onTemplateDone: function () {
                         //Move the conversation card into view.
                         cards.forward(document.getElementById('contactInfo').innerHTML);
                     }
                 });
             });
 
+            $('#categories').delegate('li', 'click', function (evt) {
+                var type = evt.target.getAttribute('data-type');
+
+                //TODO: right now do not do anything with type.
+                rdapi('inflow/contacts/by_name', {
+                    contentType: '',
+                    templateId: 'personList',
+                    containerNode: document.getElementById('contactList'),
+                    onTemplateDone: function () {
+                        cards.forward();
+                    }
+                });
+            });
+
             $('#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: '',
@@ -151,34 +165,41 @@
 
         });
     </script>
 </head>
 <body>
     <!-- UI Cards, some structure mandated by cards.js -->
     <div id="display">
         <div id="cards">
+            <div id="categories" class="card" title="Contact Types">
+                <ul class="maxWidthList">
+                    <li data-type="notorius">Notorious</li>
+                    <li data-type="starred">Starred</li>
+                    <li data-type="all">All</li>
+                </ul>
+            </div>
             <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="identityCard" class="card card2" title="Info">
+            <div id="identityCard" class="card" title="Info">
             </div>
-            <div id="conversationsCard" class="card card3">
+            <div id="conversationsCard" class="card">
                 <ul id="contactConversations" class="maxWidthList"></ul>
             </div>
-            <div id="fullConvCard" class="card card4" title="Conversation">
+            <div id="fullConvCard" class="card" title="Conversation">
                 <div id="fullConvScroll"></div>
             </div>
-
         </div>
     </div>
 
+    <!-- Template that loads all contacts and shows a list of the by name -->
+    <li class="template" data-id="personList"><a class="person" href="#{id[1]}">{displayName}</a></li>
+
     <!-- 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>
         <ul>
             {identities [}
                 <li>
--- a/client/api/scripts/cards.js
+++ b/client/api/scripts/cards.js
@@ -77,20 +77,31 @@ require.def('cards', ['jquery', 'text!te
         if (title) {
             cardTitles[cardPosition] = title;
         }
 
         cards.setTitle(title);
 
         var left = display.outerWidth() * cardPosition;
 
+        nlCards.animate(
+            {
+                left: '-' + left + 'px'
+            }, {
+                duration: 300,
+                easing: 'linear'
+            }
+        );
+
+/*
+        Was used for CSS -webkit-transition
         nlCards.css({
             left: '-' + left + 'px'
         });
-
+*/
         //Hide/Show back button as appropriate
         back.css('display', !cardPosition ? 'none' : '');
     };
 
     cards.setTitle = function (title) {
         title = title || cardTitles[cardPosition] || nlCards.find('.card').eq(cardPosition).attr('title') || '';
         headerText.html(title);
     };