Mercurial > snowl

changeset 368:69f55e6480f3

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
build the body unconditionally but only display it if the user checks the body button; display iconified first image if available
author Myk Melez <myk@mozilla.org>
date Thu, 06 Nov 2008 18:55:26 -0800
parents 7ff9253ec3b4
children 6ede77153361
files content/river.css content/river.js content/riverContent.css
diffstat 3 files changed, 67 insertions(+), 22 deletions(-) [+]
line wrap: on
line diff
--- a/content/river.css	Thu Nov 06 17:04:44 2008 -0800
+++ b/content/river.css	Thu Nov 06 18:55:26 2008 -0800
@@ -98,6 +98,16 @@
   color: #555;
 }
 
+.message {
+  clear: both;
+}
+
+.messageIcon {
+  max-width: 100px !important;
+  max-height: 100px !important;
+  float: right;
+}
+
 .byline {
   font-size: smaller;
   font-family: sans-serif;
@@ -110,6 +120,17 @@
   margin-top: 0;
 }
 
+#contentBox div.body {
+  display: none;
+}
+
+#contentBox.body div.body {
+  display: block;
+}
+
+#contentBox.body .messageIcon {
+  display: none;
+}
 
 /* Suppress the top margin on the initial content element so we can control
  * the amount of margin between the subject and the content with the rule
--- a/content/river.js	Thu Nov 06 17:04:44 2008 -0800
+++ b/content/river.js	Thu Nov 06 18:55:26 2008 -0800
@@ -389,7 +389,14 @@
   },
 
   onCommandBodyButton: function(aEvent) {
-    this.rebuildView();
+    let contentBox = document.getElementById("contentBox");
+    if (this._bodyButton.checked) {
+      let classes = contentBox.className.split(/\s/);
+      classes.push("body");
+      contentBox.className = classes.join(" ");
+    }
+    else
+      contentBox.className = contentBox.className.split(/\s/).filter(function(v) v != "body").join(" ");
     this._updateURI();
   },
 
@@ -748,10 +755,14 @@
       messageBox.className = "message";
       messageBox.setAttribute("index", i);
 
+      // These are the elements that will be appended to the message box.
+      let messageIcon, bylineBox, title, body;
+
+      messageIcon = document.createElementNS(HTML_NS, "img");
+
       // Byline
-      let bylineBox = this._document.createElementNS(HTML_NS, "div");
+      bylineBox = this._document.createElementNS(HTML_NS, "div");
       bylineBox.className = "byline";
-      messageBox.appendChild(bylineBox);
 
       // Author and/or Source
       if (message.author)
@@ -775,14 +786,36 @@
       //bylineBox.appendChild(source);
 
       // Title
-      let title = this._document.createElementNS(HTML_NS, "h2");
+      title = this._document.createElementNS(HTML_NS, "h2");
       title.className = "title";
       let titleLink = this._document.createElementNS(HTML_NS, "a");
       titleLink.appendChild(this._document.createTextNode(message.subject || "untitled"));
       if (message.link)
         this._unsafeSetURIAttribute(titleLink, "href", message.link);
       title.appendChild(titleLink);
-      messageBox.appendChild(title);
+
+      // Body
+      let bodyText = message.content || message.summary;
+      if (bodyText) {
+        body = this._document.createElementNS(HTML_NS, "div");
+        body.className = "body";
+        if (bodyText.base)
+          body.setAttributeNS(XML_NS, "base", bodyText.base.spec);
+
+        let docFragment = bodyText.createDocumentFragment(body);
+        if (docFragment) {
+          body.appendChild(docFragment);
+          // If the message contains an image, use it to create an icon
+          // representing the image.
+          let firstImage = body.getElementsByTagName("img")[0];
+          if (firstImage) {
+            messageIcon = firstImage.cloneNode(false);
+            messageIcon.removeAttribute("width");
+            messageIcon.removeAttribute("height");
+            messageIcon.className = "messageIcon";
+          }
+        }
+      }
 
       //// Timestamp
       //let lastUpdated = SnowlDateUtils._formatDate(message.timestamp);
@@ -795,24 +828,12 @@
       //  bylineBox.appendChild(timestamp);
       //}
 
-      // Body
-      if (this._bodyButton.checked) {
-        let bodyText = message.content || message.summary;
-        if (bodyText) {
-          let body = this._document.createElementNS(HTML_NS, "div");
-          body.className = "body";
-          messageBox.appendChild(body);
+      // FIXME: implement support for enclosures.
 
-          if (bodyText.base)
-            body.setAttributeNS(XML_NS, "base", bodyText.base.spec);
-
-          let docFragment = bodyText.createDocumentFragment(body);
-          if (docFragment)
-            body.appendChild(docFragment);
-        }
-      }
-
-      // FIXME: implement support for enclosures.
+      messageBox.appendChild(messageIcon);
+      messageBox.appendChild(bylineBox);
+      messageBox.appendChild(title);
+      messageBox.appendChild(body);
 
       this._contentSandbox.messageBox = messageBox;
 
--- a/content/riverContent.css	Thu Nov 06 17:04:44 2008 -0800
+++ b/content/riverContent.css	Thu Nov 06 18:55:26 2008 -0800
@@ -50,6 +50,9 @@
 }
 
 /* FIXME: figure out why this doesn't resize images proportionally. */
+/* SOLUTION: it's because the images still have "width" and/or "height"
+ * attributes.  Remove those attributes, and this rule (plus the one above)
+ * will work proportionally. */
 #contentBox img {
   max-height: 0;
 }