changeset 145:c6cb99e579fe

add a splitter for resizing columns in the river view
author Myk Melez <myk@mozilla.org>
date Tue, 08 Jul 2008 17:16:56 -0700
parents 510dc9c6647d
children 0f48d2f5ab8a
files extension/content/river2.css extension/content/river2.js extension/content/river2.xul
diffstat 3 files changed, 30 insertions(+), 17 deletions(-) [+]
line wrap: on
line diff
--- a/extension/content/river2.css	Tue Jul 08 17:15:50 2008 -0700
+++ b/extension/content/river2.css	Tue Jul 08 17:16:56 2008 -0700
@@ -85,17 +85,6 @@
   font-size: smaller;
 }
 
-.body {
-  /* Set wide to accommodate wide images, which seem to often appear in blog
-   * posts.  Even so, it's not wide enough for some images, which intrude upon
-   * the column to their right.  The CSS3 module on columns
-   * <http://www.w3.org/TR/css3-multicol/> says they should be clipped,
-   * but that isn't happening. */
-
-  -moz-column-width: 500px;
-  -moz-column-gap: 1em;
-}
-
 /* Don't draw borders around hyperlinked favicons, but do pad them a bit
  * between the end of the favicon and the start of the source name. */
 a > img {
--- a/extension/content/river2.js	Tue Jul 08 17:15:50 2008 -0700
+++ b/extension/content/river2.js	Tue Jul 08 17:16:56 2008 -0700
@@ -41,11 +41,14 @@
 const Cr = Components.results;
 const Cu = Components.utils;
 
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+
+Cu.import("resource://snowl/modules/DebugUtils.js");
+Cu.import("resource://snowl/modules/log4moz.js");
+Cu.import("resource://snowl/modules/URI.js");
+
 Cu.import("resource://snowl/modules/datastore.js");
 Cu.import("resource://snowl/modules/collection.js");
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-Cu.import("resource://snowl/modules/log4moz.js");
-Cu.import("resource://snowl/modules/URI.js");
 
 let log = Log4Moz.Service.getLogger("Snowl.River");
 
@@ -149,6 +152,7 @@
   
   init: function SH_init() {
     this.resizeContentBox();
+    document.getElementById("columnResizeSplitter").style.height = document.getElementById("innerContentBox").style.height;
 
     // Explicitly wrap |window| in an XPCNativeWrapper to make sure
     // it's a real native object! This will throw an exception if we
@@ -936,3 +940,18 @@
 };
 
 window.addEventListener("scroll", function(evt) RiverView.onScroll(evt), false);
+
+let splitterDragObserver = {
+  onMouseDown: function(event) {
+    document.documentElement.addEventListener("mousemove", this, false);
+  },
+
+  onMouseUp: function(event) {
+    document.documentElement.removeEventListener("mousemove", this, false);
+  },
+
+  handleEvent: function(event) {
+    document.getElementById("columnResizeSplitter").left = event.clientX;
+    document.getElementById("innerContentBox").style.MozColumnWidth = event.clientX + "px";
+  }
+}
--- a/extension/content/river2.xul	Tue Jul 08 17:15:50 2008 -0700
+++ b/extension/content/river2.xul	Tue Jul 08 17:16:56 2008 -0700
@@ -42,8 +42,13 @@
                  oncommand="RiverView.onCommandFilterTextbox(event, this)"/>
   </toolbar>
 
-  <vbox id="outerContentBox" flex="1">
-    <html:div id="innerContentBox"/>
-  </vbox>
+  <stack>
+    <vbox id="outerContentBox" flex="1">
+      <html:div id="innerContentBox"/>
+    </vbox>
+    <splitter id="columnResizeSplitter" left="410"
+              onmousedown="splitterDragObserver.onMouseDown(event)"
+              onmouseup="splitterDragObserver.onMouseUp(event)"/>
+  </stack>
 
 </window>