changeset 81:be9d1c3ae959

columnize the content in the river view, and update a bunch of language to talk about sources and messages rather than feeds and entries
author Myk Melez <myk@mozilla.org>
date Thu, 15 May 2008 18:01:24 -0700
parents 1ab89e642261
children 2c1612f4cb28
files extension/content/river.css extension/content/river.js extension/content/river.xhtml
diffstat 3 files changed, 76 insertions(+), 89 deletions(-) [+]
line wrap: on
line diff
--- a/extension/content/river.css	Thu May 15 15:49:56 2008 -0700
+++ b/extension/content/river.css	Thu May 15 18:01:24 2008 -0700
@@ -51,24 +51,7 @@
 }
 
 
-#feedContent {
-  width: 100%;
-  -moz-box-flex: 1;
-}
-
-#sourceColumn {
-  -moz-box-flex: 1;
-}
-
-#contentColumn {
-  -moz-box-flex: 8;
-}
-
-#timestampColumn {
-  -moz-box-flex: 1;
-}
-
-.entry {
+.message {
   margin-top: 3em;
   -moz-user-focus: normal;
   -moz-user-select: -moz-all;
@@ -76,17 +59,28 @@
 
 .source {
   padding-right: 2em;
+  font-size: smaller;
   min-width: 14em;
-  font-size: smaller;
+  max-width: 14em;
+  width: 14em;
 }
 
-.content {
+.body {
+  /* -moz-column-width alone won't create the correct number of columns,
+   * but if I include a high -moz-column-count, it'll ignore the count
+   * and instead create the correct number of columns based on the width
+   * of the screen, which is what it is supposed to be doing by itself.
+   * Perhaps this is a bug (maybe with columnar HTML in XUL). */
+  -moz-column-width: 20em;
+  -moz-column-count: 20;
 }
 
 .timestamp {
   padding-left: 2em;
   font-size: smaller;
   min-width: 14em;
+  max-width: 14em;
+  width: 14em;
 }
 
 h3 {
--- a/extension/content/river.js	Thu May 15 15:49:56 2008 -0700
+++ b/extension/content/river.js	Thu May 15 18:01:24 2008 -0700
@@ -518,119 +518,112 @@
 
   // FIXME: make this about the messages and the view, not a feed.
   _writeFeedContent: function() {
-    this._contentSandbox.feedContent =
-      this._document.getElementById("collectionRows");
+    this._contentSandbox.messagesContainer =
+      this._document.getElementById("messagesContainer");
 
     for (let i = 0; i < this._collection.messages.length; ++i) {
-      let entry = this._collection.messages[i];
+      let message = this._collection.messages[i];
 
-      // FIXME: make this a message rather than an entry.
-      var entryContainer = this._document.createElementNS(XUL_NS, "row");
-      entryContainer.className = "entry";
-      entryContainer.setAttribute("index", i);
+      // FIXME: make this a message rather than an message.
+      let messageContainer = this._document.createElementNS(XUL_NS, "row");
+      messageContainer.className = "message";
+      messageContainer.setAttribute("index", i);
 
       {
-        let sourceBox = this._document.createElementNS(XUL_NS, "vbox");
-        sourceBox.className = "source";
+        let sourceContainer = this._document.createElementNS(XUL_NS, "vbox");
+        sourceContainer.className = "source";
 
-        if (entry.author) {
+        if (message.author) {
           let author = this._document.createElementNS(XUL_NS, "label");
           author.setAttribute("crop", "end");
-          author.setAttribute("value", entry.author);
-          //author.appendChild(this._document.createTextNode(entry.author));
-          sourceBox.appendChild(author);
+          author.setAttribute("value", message.author);
+          sourceContainer.appendChild(author);
         }
 
         let a = this._document.createElementNS(HTML_NS, "a");
-        a.appendChild(this._document.createTextNode(entry.source.name));
-        if (entry.source.humanURI)
-          this._unsafeSetURIAttribute(a, "href", entry.source.humanURI.spec);
-        sourceBox.appendChild(a);
+        a.appendChild(this._document.createTextNode(message.source.name));
+        if (message.source.humanURI)
+          this._unsafeSetURIAttribute(a, "href", message.source.humanURI.spec);
+        sourceContainer.appendChild(a);
 
-        entryContainer.appendChild(sourceBox);
+        messageContainer.appendChild(sourceContainer);
       }
 
       {
-        let contentBox = this._document.createElementNS(XUL_NS, "vbox");
-        contentBox.className = "content";
+        let contentContainer = this._document.createElementNS(HTML_NS, "div");
+        contentContainer.className = "content";
 
-        if (entry.subject) {
-          var a = this._document.createElementNS(HTML_NS, "a");
-          a.appendChild(this._document.createTextNode(entry.subject));
+        if (message.subject) {
+          let a = this._document.createElementNS(HTML_NS, "a");
+          a.appendChild(this._document.createTextNode(message.subject));
   
-          // Entries are not required to have links, so entry.link can be null.
-          if (entry.link)
-            this._unsafeSetURIAttribute(a, "href", entry.link);
+          if (message.link)
+            this._unsafeSetURIAttribute(a, "href", message.link);
 
-          var title = this._document.createElementNS(HTML_NS, "h3");
-          title.appendChild(a);
+          let subject = this._document.createElementNS(HTML_NS, "h3");
+          subject.appendChild(a);
 
-          contentBox.appendChild(title);
+          contentContainer.appendChild(subject);
         }
 
-        var body = this._document.createElementNS(HTML_NS, "div");
+        let body = this._document.createElementNS(HTML_NS, "div");
+        body.className = "body";
 
         // The summary is currently not stored and made available, so we can
         // only use the content.
         // FIXME: use the summary instead once it becomes available.
-        //var summary = entry.summary || entry.content;
-        var summary = entry.content;
-
-        var docFragment = null;
+        //var summary = message.summary || message.content;
+        let summary = message.content;
         if (summary) {
           if (summary.base)
             body.setAttributeNS(XML_NS, "base", summary.base.spec);
-          docFragment = summary.createDocumentFragment(body);
+
+          let docFragment = summary.createDocumentFragment(body);
           if (docFragment)
             body.appendChild(docFragment);
 
-          // If the entry doesn't have a title, append a # permalink
-          // See http://scripting.com/rss.xml for an example
-          if (!entry.subject && entry.link) {
-            var a = this._document.createElementNS(HTML_NS, "a");
+          // If the message doesn't have a subject, but it does have a link,
+          // append a # permalink. See http://scripting.com/rss.xml for an example.
+          if (!message.subject && message.link) {
+            let a = this._document.createElementNS(HTML_NS, "a");
             a.appendChild(this._document.createTextNode("#"));
-            this._unsafeSetURIAttribute(a, "href", entry.link);
+            this._unsafeSetURIAttribute(a, "href", message.link);
             body.appendChild(this._document.createTextNode(" "));
             body.appendChild(a);
           }
   
         }
-        body.className = "feedEntryContent";
-        contentBox.appendChild(body);
+
+        contentContainer.appendChild(body);
 
-        entryContainer.appendChild(contentBox);
+        if (message.enclosures && message.enclosures.length > 0) {
+          let enclosuresDiv = this._buildEnclosureDiv(message);
+          contentContainer.appendChild(enclosuresDiv);
+        }
+
+        messageContainer.appendChild(contentContainer);
       }
 
       {
-        let timestampBox = this._document.createElementNS(XUL_NS, "description");
-        timestampBox.className = "timestamp";
+        let timestampContainer = this._document.createElementNS(XUL_NS, "description");
+        timestampContainer.className = "timestamp";
 
-        // FIXME: entry.timestamp should already be a date object.
-        var lastUpdated = this._formatTimestamp(new Date(entry.timestamp));
+        // FIXME: message.timestamp should already be a date object.
+        var lastUpdated = this._formatTimestamp(new Date(message.timestamp));
         if (lastUpdated)
-          timestampBox.appendChild(document.createTextNode(lastUpdated));
+          timestampContainer.appendChild(document.createTextNode(lastUpdated));
 
-        entryContainer.appendChild(timestampBox);
+        messageContainer.appendChild(timestampContainer);
       }
 
-      if (entry.enclosures && entry.enclosures.length > 0) {
-        var enclosuresDiv = this._buildEnclosureDiv(entry);
-        entryContainer.appendChild(enclosuresDiv);
-      }
+      this._contentSandbox.messageContainer = messageContainer;
 
-      this._contentSandbox.entryContainer = entryContainer;
-      this._contentSandbox.clearDiv =
-        this._document.createElementNS(HTML_NS, "div");
-      this._contentSandbox.clearDiv.style.clear = "both";
-      
-      var codeStr = "feedContent.appendChild(entryContainer); " +
-                     "feedContent.appendChild(clearDiv);"
+      var codeStr = "messagesContainer.appendChild(messageContainer);";
       Cu.evalInSandbox(codeStr, this._contentSandbox);
     }
 
-    this._contentSandbox.feedContent = null;
-    this._contentSandbox.entryContainer = null;
-    this._contentSandbox.clearDiv = null;
+    this._contentSandbox.messagesContainer = null;
+    this._contentSandbox.messageContainer = null;
   },
 
   /**
@@ -757,9 +750,9 @@
   },
 
   rebuildView: function() {
-    let collectionRows = this._document.getElementById("collectionRows");
-    while (collectionRows.hasChildNodes())
-      collectionRows.removeChild(collectionRows.lastChild);
+    let messagesContainer = this._document.getElementById("messagesContainer");
+    while (messagesContainer.hasChildNodes())
+      messagesContainer.removeChild(messagesContainer.lastChild);
 
     this.writeContent();
   },
--- a/extension/content/river.xhtml	Thu May 15 15:49:56 2008 -0700
+++ b/extension/content/river.xhtml	Thu May 15 18:01:24 2008 -0700
@@ -44,13 +44,13 @@
     </xul:hbox>
 
   <xul:box style="margin: 1em;">
-    <xul:grid id="feedContent">
+    <xul:grid flex="1">
       <xul:columns flex="1">
         <xul:column id="sourceColumn"/>
-        <xul:column id="contentColumn"/>
+        <xul:column id="contentColumn" flex="1"/>
         <xul:column id="timestampColumn"/>
       </xul:columns>
-      <xul:rows id="collectionRows"/>
+      <xul:rows id="messagesContainer"/>
     </xul:grid>
   </xul:box>
   </body>