trying a click out of box technique for closing conversations, also trying out some collapsed view stuff default tip
authorAndy Chung <andy@mozillamessaging.com>
Tue, 13 Jul 2010 12:01:59 -0700
changeset 1787 42b1a25c30619f6627b1d545bde75200ab064ab3
parent 1786 1543c4ae88308d6cc9da5abb98cd44285d181caf
push id990
push userandy@mozillamessaging.com
push dateTue, 13 Jul 2010 19:02:13 +0000
trying a click out of box technique for closing conversations, also trying out some collapsed view stuff
client/api/rdapi.css
client/api/rdapi.html
client/api/vgrid.css
index 30e995024563747fd7b16b0c8b3906d9fd4c92c8..ebe7e82a344a171a749d27016fbeb9ae52e28141
GIT binary patch
literal 19980
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
PpQTUqFlj;T{;2;0AS_+)
--- a/client/api/rdapi.html
+++ b/client/api/rdapi.html
@@ -24,16 +24,17 @@
 <!DOCTYPE html>
 <html>
 <head>
     <title>Raindrop API jQuery Plugin Test Page</title>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
     <link type="text/css" rel="stylesheet" href="rdapi.css">
 
     <script src="scripts/requireplugins-jquery-1.4.2.js" charset="utf-8"></script>
+    
     <script>
         require(["jquery", "rdapi", "json2"], function ($, rdapi) {
             $(function () {
                 var highlighted, scrollY, targetTop,
                     inflow = $('.inflow'),
                     widgets = $('.widgets'),
                     convDisplay = $('#convDisplay'),
                     top = inflow[0].getBoundingClientRect().top,
@@ -167,16 +168,20 @@
                     window.scrollTo(window.scrollX, targetTop - inflowPaddingTop - top);
                     highlighted.removeClass('highlight');
                     highlighted.addClass('read');
                     highlighted = null;
                     evt.preventDefault();
                     //Andys clueless js
                     convDisplay.removeClass('visible');
                 })
+                .delegate('#background', 'click', function (evt) {
+                    $('.fullConvClose').click();
+                    return;
+                })
                 .delegate('#convDisplay .row', 'click', function (evt) {
                     convDisplay.find('.highlight').removeClass('highlight');
                     $(evt.target).addClass('highlight');
                 });
 
                 $('#convDisplay').delegate('.quoteToggle', 'click', function (evt) {
                     var target = $(evt.target),
                         content = target.next('.quote');
@@ -192,17 +197,18 @@
                     evt.preventDefault();
                 });
             });
         });
     </script>
     
 </head>
 <body>
-
+<div id="background"></div>
+<div id="wrapper">
   <div id="header">
 
     <div class="row">
       <div class="c1 search">
       </div>
       <div class="c2">
         <li class="account">Andy Chung</li>
         <li>compose</li>
@@ -304,38 +310,37 @@
         <div class="actions"><a href="#">hide delete</a></div>
       </div>
       <div class="c3">
         <span class="subject">{subject}</span>
       </div>
     </div>
     {messages [}
       <div class="row fullReply">
-        <div class="message">
+        <div class="message" onclick="$(this).next().toggleClass('show')">
           <div class="c2">
             <div class="avatar"></div>
             <div class="from name">{schemas['rd.msg.body'].from_display} <span class="date">on {schemas['rd.msg.body'].timestamp}</span></div>
           </div>
           <div class="c1">
             <div class="actions"><a class="fullConvClose" href="#close">close</a></div>
           </div>
         </div>
         <div class="c3"> 
           <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 class="actions">reply forward</div>
           </div>
         </div>
-        <div class="c3">
-          <div class="actions">reply forward</div>
-        </div> 
       </div>
     {]}
   </div>
 
 <div id="convDisplay"></div>
+</div><!--wrapper-->
 </body>
 </html>
 
--- a/client/api/vgrid.css
+++ b/client/api/vgrid.css
@@ -99,32 +99,35 @@ row.subject {
 }
 
 #zoom_content {
   color: #ccc;
 }
 
 .conversation {
   max-width: 800px;
+  max-height: 400px;
+  overflow-y: scroll;
 }
 
 .conversation > .subject:empty:after {
   content: 'not loaded';
 }
 
 .conversation .subject {
   margin-bottom: 1em;
   padding-bottom: 1em;
   border-bottom: 1px dotted #aaa;
 }
 
 .conversation .message {
   margin-bottom: 2em;
   padding-bottom: 2em;
   border-bottom: 1px solid #666;
+  color: #000;
 }
 
 .conversation .message:last-child {
   border-bottom: none;
 }
 
 .conversation .message .from {
   font-weight: bold;