Clean up the conversation view threader css a bit.
authorAndrew Sutherland <asutherland@asutherland.org>
Tue, 13 Jan 2009 03:06:23 -0800
changeset 15 61a9fa6989452b168f9312407e110913014f4f25
parent 14 70bc362a721bc849020ab3cdbf4ded12337ebf35
child 16 608d65fc4ff224d3c60dc30e0f07bdeb8bdb8e98
push id1
push userroot
push dateWed, 08 Apr 2009 01:46:05 +0000
Clean up the conversation view threader css a bit.
client/conversation.css
client/conversation.xml
deleted file mode 100644
--- a/client/conversation.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/* the junk in here should migrate into the bindings where possible */
-
-.thread { font-size: small; margin: 0em; padding: 0em; }
-.thread > li { white-space: nowrap; overflow: hidden; margin: 0px;
-               margin-right: 1em; cursor: pointer; padding: 0.2em 0em;
-              -moz-border-radius-topright: 0.3em;
-              -moz-border-radius-bottomright: 0.3em;
-             }
-.thread > li[unread="true"] { font-weight: bold; }
-.thread > li > .name { padding: 0.1em 0.5em; }
-
-ul.thread > li.selected { color: #111; background-color: #cee1ef; }
-ul.thread.selected { border-color: #cee1ef; }
-
-ul.thread { border-left: 0.3em solid transparent; }
-ul.thread > li:hover { background-color: #eaf3fa;  }
-ul.thread > li > .name:hover { text-decoration: underline; }
--- a/client/conversation.xml
+++ b/client/conversation.xml
@@ -11,17 +11,17 @@
           <button tabindex="-1">Delete</button>
         </div>
         <div id="subject" class="subject"></div>
         <div class="between">
           Between <span id="participants" class="recipients"></span>
         </div>
       </div>
       <div id="threader" class="threader">
-        <ul id="threadroot" class="thread top"></ul>
+        <ul id="threadroot" class="thread"></ul>
         <div style="font-size:x-small;margin-top:2em;">
           <div><a id="expandAll">Expand All</a></div>
           <div><a id="collapseAll">Collapse All</a></div>
         </div>
       </div>
       <div id="conversation" class="main">
         <div id="messages" class="messages"/>
       </div>
@@ -47,17 +47,21 @@
 
 .toolbox > .toolbar { float: right; margin-top: 0.5em; }
 .toolbox > .toolbar button { font-size: small; }
 
 .subject { font-weight: bold; margin: 0.5em 0em; }
 .between { font-size: small; margin: 0.5em 0em; }
 
 .threader { position: fixed; width: 12em; }
-.thread.top { }
+
+.threader ul { font-size: small; margin: 0em; padding: 0em;
+               border-left: 0.3em solid transparent; }
+.threader ul.selected { border-color: #cee1ef; }
+
       ]]></xbl:style>
     </xbl:resources>
     <xbl:implementation><![CDATA[
       ({
         conversation: null,
         setConversation: function(aConversation) {
           this.conversation = aConversation;
           this.expandedMessageIds = {};
@@ -70,17 +74,17 @@
           var topnodes = this.conversation.threadMessages();
           console.log("top nodes", topnodes);
           for (var iTopNode = 0; iTopNode < topnodes.length; iTopNode++) {
             var topmessage = topnodes[iTopNode];
             console.log("top node", iTopNode, topmessage);
 
             // - thread tree
             console.log("creating thread node");
-            var threadnode = $("<li/>").attr("id", "thread" + topmessage.id)
+            var threadnode = $("<li/>").attr("id", "thread" + topmessage._id)
                                        .appendTo(threadRoot)[0];
             ElementXBL.prototype.addBinding.call(threadnode,
                                                  "conversation.xml#threadnode");
             threadnode.setMessage(topmessage);
 
             // - actual messages list
             console.log("creating message node");
             this.addMessageNode(topmessage);
@@ -134,17 +138,27 @@
 
   <!-- Thread Node -->
   <xbl:binding id="threadnode">
     <xbl:template>
       <span id="name"/>
     </xbl:template>
     <xbl:resources>
       <xbl:style><![CDATA[
+:bound-element { white-space: nowrap; overflow: hidden; margin: 0px;
+                 margin-right: 1em; cursor: pointer; padding: 0.2em 0em;
+                 -moz-border-radius-topright: 0.3em;
+                 -moz-border-radius-bottomright: 0.3em;
+               }
+:bound-element[unread="true"] { font-weight: bold; }
+:bound-element.selected { color: #111; background-color: #cee1ef; }
+:bound-element:hover { background-color: #eaf3fa;  }
 
+:bound-element > .name { padding: 0.1em 0.5em; }
+:bound-element > .name:hover { text-decoration: underline; }
       ]]></xbl:style>
     </xbl:resources>
     <xbl:implementation><![CDATA[
       ({
         message: null,
         setMessage: function(aMessage) {
           this.message = aMessage;
           var nameNode = this.shadowTree.getElementById("name")
@@ -153,17 +167,17 @@
 
           if (this.message._children) {
             var children = this.message._children;
             var ulNode = $("<ul/>").addClass("thread")
                                    .appendTo(this.boundElement.parentNode);
             for (var iChild = 0; iChild < children.length; iChild++) {
               var child = children[iChild];
               var threadNode = $("<li/>").attr("type", "threadnode")
-                                         .attr("id", "thread" + child.id)
+                                         .attr("id", "thread" + child._id)
                                          .attr("unread", child.read)
                                          .appendTo(ulNode)[0];
               ElementXBL.prototype.addBinding.call(threadNode,
                 "conversation.xml#threadnode");
               threadNode.setMessage(child);
             }
           }
         },