Mercurial > snowl

changeset 323:f395a054dd9c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
three additional layouts for the list view: wide message, wide thread, and stacked
author alta88 <alta88@gmail.com>
date Tue, 14 Oct 2008 11:42:31 -0700
parents 3940ef5aa170
children d768f5859b94
files content/list.css content/list.js content/list.xul locale/ca-AD/list.dtd locale/da-DK/list.dtd locale/en-US/list.dtd locale/ja-JP/list.dtd locale/nl-NL/list.dtd locale/pl-PL/list.dtd locale/zh-CN/list.dtd
diffstat 10 files changed, 233 insertions(+), 64 deletions(-) [+]
line wrap: on
line diff
--- a/content/list.css	Tue Oct 14 11:34:46 2008 -0700
+++ b/content/list.css	Tue Oct 14 11:42:31 2008 -0700
@@ -53,14 +53,10 @@
   display: none;
 }
 
-#snowlViewContainer[placement="top"] #snowlPlacementButton {
+#snowlLayoutButton {
   list-style-image: url("chrome://snowl/content/icons/application_tile_horizontal.png");
 }
 
-#snowlViewContainer[placement="side"] #snowlPlacementButton {
-  list-style-image: url("chrome://snowl/content/icons/application_split.png");
-}
-
 #snowlView {
   height: 12em;
 }
--- a/content/list.js	Tue Oct 14 11:34:46 2008 -0700
+++ b/content/list.js	Tue Oct 14 11:42:31 2008 -0700
@@ -19,6 +19,7 @@
  *
  * Contributor(s):
  *   Myk Melez <myk@mozilla.org>
+ *   alta88 <alta88@gmail.com>
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -82,6 +83,21 @@
     return this._tree = document.getElementById("snowlView");
   },
 
+  get _snowlViewContainer() {
+    delete this._snowlViewContainer;
+    return this._snowlViewContainer = document.getElementById("snowlViewContainer");
+  },
+
+  get _snowlViewSplitter() {
+    delete this._snowlViewSplitter;
+    return this._snowlViewSplitter = document.getElementById("snowlViewSplitter");
+  },
+
+  get _snowlSidebar() {
+    delete this._snowlSidebar;
+    return this._snowlSidebar = document.getElementById("snowlSidebar");
+  },
+
   get _currentButton() {
     delete this._currentButton;
     return this._currentButton = document.getElementById("snowlCurrentButton");
@@ -154,24 +170,41 @@
   //**************************************************************************//
   // Initialization and Destruction
 
+  init: function() {
+    // Move sidebar-box into our box for layouts
+    let sidebarBox = document.getElementById("sidebar-box");
+    this._snowlSidebar.appendChild(sidebarBox);
+
+    // Listen for sidebar-box hidden attr change, to toggle properly
+    sidebarBox.addEventListener("DOMAttrModified",
+        function(aEvent) { 
+          if (aEvent.target.id == "sidebar-box")
+            SnowlMessageView._toggleSidebar(aEvent);
+        }, false);
+
+    // Restore previous layout view and set menuitem checked
+    let mainWindow = document.getElementById("main-window");
+    let layout = mainWindow.getAttribute("snowlLayout");
+    // If error or first time default to 'classic' view
+    let layoutIndex = this.layoutName.indexOf(layout) < 0 ? 
+        0 : this.layoutName.indexOf(layout);
+    this.layout(layoutIndex);
+  },
+
   show: function() {
     this._obsSvc.addObserver(this, "messages:changed", true);
 
     this._collection = new SnowlCollection();
     this._sort();
-
-    // We don't have to initialize the view, as placing it does so for us.
-    //this._tree.view = this;
+    this._tree.view = this;
 
-    this.place();
-
-    document.getElementById("snowlViewContainer").hidden = false;
-    document.getElementById("snowlViewSplitter").hidden = false;
+    this._snowlViewContainer.hidden = false;
+    this._snowlViewSplitter.hidden = false;
   },
 
   hide: function() {
-    document.getElementById("snowlViewSplitter").hidden = true;
-    document.getElementById("snowlViewContainer").hidden = true;
+    this._snowlViewContainer.hidden = true;
+    this._snowlViewSplitter.hidden = true;
 
     // XXX Should we somehow destroy the view here (f.e. by setting
     // this._tree.view to null)?
@@ -273,39 +306,9 @@
     this._tree.boxObject.scrollToRow(this._tree.boxObject.getFirstVisibleRow());
   },
 
-  switchPlacement: function() {
-    let container = document.getElementById("snowlViewContainer");
-    let appcontent = document.getElementById("appcontent");
-
-    if (container.parentNode == appcontent)
-      this.placeOnSide();
-    else
-      this.placeOnTop();
-  },
-
-  place: function() {
-    let container = document.getElementById("snowlViewContainer");
-    switch (container.getAttribute("placement")) {
-      case "side":
-        this.placeOnSide();
-        break;
-      case "top":
-      default:
-        this.placeOnTop();
-        break;
-    }
-  },
-
-  placeOnSide: function() {
-    let browser = document.getElementById("browser");
-    let container = document.getElementById("snowlViewContainer");
-    let appcontent = document.getElementById("appcontent");
-    let splitter = document.getElementById("snowlViewSplitter");
-
-    browser.insertBefore(container, appcontent);
-    browser.insertBefore(splitter, appcontent);
-    splitter.setAttribute("orient", "horizontal");
-    container.setAttribute("placement", "side");
+  switchLayout: function(layout) {
+    // Build the layout
+    this.layout(layout);
 
     // Because we've moved the tree, we have to reattach the view to it,
     // or we will get the error: "this._tree.boxObject.invalidate is not
@@ -313,21 +316,58 @@
     this._tree.view = this;
   },
 
-  placeOnTop: function() {
+  // Layout views
+  kClassicLayout: 0,
+  kVerticalLayout: 1,
+  kWideMessageLayout: 2,
+  kWideThreadLayout: 3,
+  kStackedLayout: 4,
+  gCurrentLayout: null,
+  layoutName: ["classic", "vertical", "widemessage", "widethread", "stacked"],
+
+  layout: function(layout) {
+    let mainWindow = document.getElementById("main-window");
+    let browser = document.getElementById("browser");
     let appcontent = document.getElementById("appcontent");
-    let container = document.getElementById("snowlViewContainer");
     let content = document.getElementById("content");
-    let splitter = document.getElementById("snowlViewSplitter");
+    let sidebarSplitter = document.getElementById("sidebar-splitter");
+    let snowlThreadContainer = this._snowlViewContainer;
+    let snowlThreadSplitter = this._snowlViewSplitter;
+
+    let layoutThreadPaneParent = ["appcontent", "browser", "snowlSidebar", "main-window", "sidebar-box"];
+    // A 'null' is an effective appendChild, code is nice and reusable..
+    let layoutThreadPaneInsertBefore = [content, appcontent, null, browser, null];
+    // 0=horizontal, 1=vertical for orient arrays..
+    let layoutsnowlThreadSplitterOrient = [1, 0, 0, 1, 1];
+    let sidebarSplitterOrient = [0, 0, 1, 0, 0];
+    let layoutSnowlBoxFlex = [0, 1, 1, 0, 0];
 
-    appcontent.insertBefore(container, content);
-    appcontent.insertBefore(splitter, content);
-    splitter.setAttribute("orient", "vertical");
-    container.setAttribute("placement", "top");
+    var desiredParent = document.getElementById(layoutThreadPaneParent[layout]);
+    if (snowlThreadContainer.parentNode.id != desiredParent.id) {
+      switch (layout) {
+        case this.kClassicLayout:
+        case this.kVerticalLayout:
+        case this.kWideThreadLayout:
+          desiredParent.insertBefore(snowlThreadContainer, layoutThreadPaneInsertBefore[layout]);
+          desiredParent.insertBefore(snowlThreadSplitter, layoutThreadPaneInsertBefore[layout]);
+          break;
+        case this.kStackedLayout:
+        case this.kWideMessageLayout:
+          desiredParent.insertBefore(snowlThreadSplitter, layoutThreadPaneInsertBefore[layout]);
+          desiredParent.insertBefore(snowlThreadContainer, layoutThreadPaneInsertBefore[layout]);
+          break;
+      }
+    }
 
-    // Because we've moved the tree, we have to reattach the view to it,
-    // or we will get the error: "this._tree.boxObject.invalidate is not
-    // a function" when we switch sources.
-    this._tree.view = this;
+    // Adjust orient and flex for all layouts
+    browser.orient = sidebarSplitterOrient[layout] ? "vertical" : "horizontal";
+    snowlThreadSplitter.orient = layoutsnowlThreadSplitterOrient[layout] ? "vertical" : "horizontal";
+    sidebarSplitter.orient = sidebarSplitterOrient[layout] ? "vertical" : "horizontal";
+    snowlThreadContainer.setAttribute("flex", layoutSnowlBoxFlex[layout]);
+
+    // Store the layout
+    mainWindow.setAttribute("snowlLayout", this.layoutName[layout]);
+    this.gCurrentLayout = layout;
   },
 
   onSelect: function(aEvent) {
@@ -447,6 +487,31 @@
     this._tree.boxObject.invalidate();
   },
 
+  // Functions to handle proper display of sidebar since a parent node has
+  // been added to sidebar to make the extra layouts (widemessage) possible.
+  show_snowlSidebar: function() {
+    let snowlSidebar = this._snowlSidebar;
+    snowlSidebar.height = snowlSidebar.getAttribute("heightSnowlLayouts");
+    snowlSidebar.width = snowlSidebar.getAttribute("widthSnowlLayouts");
+  },
+
+  hide_snowlSidebar: function() {
+    let snowlSidebar = this._snowlSidebar;
+    snowlSidebar.setAttribute("heightSnowlLayouts", snowlSidebar.height);
+    snowlSidebar.height = 0;
+    snowlSidebar.setAttribute("widthSnowlLayouts", snowlSidebar.width);
+    snowlSidebar.width = 0;
+  },
+
+  _toggleSidebar: function(aEvent) {
+    if (aEvent.attrName == "hidden") {
+      if (aEvent.newValue == "true")
+        this.hide_snowlSidebar();
+      else
+        this.show_snowlSidebar();
+    }
+  },
+
   onClickColumnHeader: function(aEvent) {
     let column = aEvent.target;
     let property = this._columnProperties[column.id];
@@ -489,3 +554,5 @@
     this._collection.sort();
   }
 };
+
+window.addEventListener("load", function() { SnowlMessageView.init() }, false);
--- a/content/list.xul	Tue Oct 14 11:34:46 2008 -0700
+++ b/content/list.xul	Tue Oct 14 11:42:31 2008 -0700
@@ -21,6 +21,7 @@
    -
    - Contributor(s):
    -   Myk Melez <myk@mozilla.org>
+   -   alta88 <alta88@gmail.com>
    -
    - Alternatively, the contents of this file may be used under the terms of
    - either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -45,13 +46,70 @@
 
   <script type="application/x-javascript" src="list.js"/>
 
+  <window id="main-window"
+          persist="screenX screenY width height sizemode snowlLayout"
+          snowlLayout="classic"/>
+
+  <hbox id="browser">
+    <hbox id="snowlSidebar"
+          insertbefore="sidebar-splitter"
+          persist="heightSnowlLayouts widthSnowlLayouts"/>
+  </hbox>
+  
+  <vbox id="sidebar-box"
+        flex="1"/>
+           
+  <browser id="sidebar"
+           style="min-width: 14em; width: 18em; max-width: none;"/>
+
   <vbox id="appcontent">
-    <vbox id="snowlViewContainer" insertbefore="content" placement="top"
-          persist="placement height width" hidden="true">
-      <toolbar id="snowlViewToolbar" pack="end" align="center">
-        <toolbarbutton id="snowlPlacementButton" class="snowlToolbarButton"
-                       oncommand="SnowlMessageView.switchPlacement()"
-                       tooltiptext="&placementButton.tooltip;"/>
+
+    <vbox id="snowlViewContainer"
+          insertbefore="content"
+          flex="1"
+          persist="height width"
+          hidden="true">
+      <toolbar id="snowlViewToolbar"
+               pack="end"
+               align="center">
+        <toolbarbutton id="snowlLayoutButton"
+                       class="snowlToolbarButton"
+                       type="menu"
+                       tooltiptext="Change Layout">
+          <menupopup id="snowlLayoutPopup">
+            <menuitem id="snowlLayoutMenuitemClassic"
+                      label="&layoutClassic.label;"
+                      type="radio"
+                      checked="true"
+                      name="snowlLayoutMenuitemGroup"
+                      persist="checked"
+                      oncommand="SnowlMessageView.switchLayout(SnowlMessageView.kClassicLayout)"/>
+            <menuitem id="snowlLayoutMenuitemVertical"
+                      label="&layoutVertical.label;"
+                      type="radio"
+                      name="snowlLayoutMenuitemGroup"
+                      persist="checked"
+                      oncommand="SnowlMessageView.switchLayout(SnowlMessageView.kVerticalLayout)"/>
+            <menuitem id="snowlLayoutMenuitemWideMessage"
+                      label="&layoutWideMessage.label;"
+                      type="radio"
+                      name="snowlLayoutMenuitemGroup"
+                      persist="checked"
+                      oncommand="SnowlMessageView.switchLayout(SnowlMessageView.kWideMessageLayout)"/>
+            <menuitem id="snowlLayoutMenuitemWideThread"
+                      label="&layoutWideThread.label;"
+                      type="radio"
+                      name="snowlLayoutMenuitemGroup"
+                      persist="checked"
+                      oncommand="SnowlMessageView.switchLayout(SnowlMessageView.kWideThreadLayout)"/>
+            <menuitem id="snowlLayoutMenuitemStacked"
+                      label="&layoutStacked.label;"
+                      type="radio"
+                      name="snowlLayoutMenuitemGroup"
+                      persist="checked"
+                      oncommand="SnowlMessageView.switchLayout(SnowlMessageView.kStackedLayout)"/>
+          </menupopup>
+        </toolbarbutton>
 
         <toolbarspring/>
 
@@ -96,6 +154,7 @@
         <treechildren flex="1"/>
       </tree>
     </vbox>
+
     <splitter id="snowlViewSplitter" insertbefore="content" persist="hidden"/>
   </vbox>
 </overlay>
--- a/locale/ca-AD/list.dtd	Tue Oct 14 11:34:46 2008 -0700
+++ b/locale/ca-AD/list.dtd	Tue Oct 14 11:42:31 2008 -0700
@@ -4,3 +4,10 @@
 <!ENTITY authorCol.label "Autor/a">
 <!ENTITY subjectCol.label "Tema">
 <!ENTITY timestampCol.label "Data">
+
+<!ENTITY layoutClassic.label          "Classic">
+<!ENTITY layoutVertical.label         "Vertical">
+<!ENTITY layoutWideMessage.label      "Wide Message">
+<!ENTITY layoutWideThread.label       "Wide Thread">
+<!ENTITY layoutStacked.label          "Stacked">
+
--- a/locale/da-DK/list.dtd	Tue Oct 14 11:34:46 2008 -0700
+++ b/locale/da-DK/list.dtd	Tue Oct 14 11:42:31 2008 -0700
@@ -4,3 +4,10 @@
 <!ENTITY authorCol.label "Ophavsmand">
 <!ENTITY subjectCol.label "Emne">
 <!ENTITY timestampCol.label "Dato">
+
+<!ENTITY layoutClassic.label          "Classic">
+<!ENTITY layoutVertical.label         "Vertical">
+<!ENTITY layoutWideMessage.label      "Wide Message">
+<!ENTITY layoutWideThread.label       "Wide Thread">
+<!ENTITY layoutStacked.label          "Stacked">
+
--- a/locale/en-US/list.dtd	Tue Oct 14 11:34:46 2008 -0700
+++ b/locale/en-US/list.dtd	Tue Oct 14 11:42:31 2008 -0700
@@ -7,3 +7,10 @@
 <!ENTITY authorCol.label              "Author">
 <!ENTITY subjectCol.label             "Subject">
 <!ENTITY timestampCol.label           "Date">
+
+<!ENTITY layoutClassic.label          "Classic">
+<!ENTITY layoutVertical.label         "Vertical">
+<!ENTITY layoutWideMessage.label      "Wide Message">
+<!ENTITY layoutWideThread.label       "Wide Thread">
+<!ENTITY layoutStacked.label          "Stacked">
+
--- a/locale/ja-JP/list.dtd	Tue Oct 14 11:34:46 2008 -0700
+++ b/locale/ja-JP/list.dtd	Tue Oct 14 11:42:31 2008 -0700
@@ -4,3 +4,10 @@
 <!ENTITY authorCol.label "作者">
 <!ENTITY subjectCol.label "題名">
 <!ENTITY timestampCol.label "日時">
+
+<!ENTITY layoutClassic.label          "Classic">
+<!ENTITY layoutVertical.label         "Vertical">
+<!ENTITY layoutWideMessage.label      "Wide Message">
+<!ENTITY layoutWideThread.label       "Wide Thread">
+<!ENTITY layoutStacked.label          "Stacked">
+
--- a/locale/nl-NL/list.dtd	Tue Oct 14 11:34:46 2008 -0700
+++ b/locale/nl-NL/list.dtd	Tue Oct 14 11:42:31 2008 -0700
@@ -4,3 +4,10 @@
 <!ENTITY authorCol.label "Schrijver">
 <!ENTITY subjectCol.label "Onderwerp">
 <!ENTITY timestampCol.label "Datum">
+
+<!ENTITY layoutClassic.label          "Classic">
+<!ENTITY layoutVertical.label         "Vertical">
+<!ENTITY layoutWideMessage.label      "Wide Message">
+<!ENTITY layoutWideThread.label       "Wide Thread">
+<!ENTITY layoutStacked.label          "Stacked">
+
--- a/locale/pl-PL/list.dtd	Tue Oct 14 11:34:46 2008 -0700
+++ b/locale/pl-PL/list.dtd	Tue Oct 14 11:42:31 2008 -0700
@@ -4,3 +4,9 @@
 <!ENTITY authorCol.label "Autor">
 <!ENTITY subjectCol.label "Tytuł">
 <!ENTITY timestampCol.label "Data">
+
+<!ENTITY layoutClassic.label          "Classic">
+<!ENTITY layoutVertical.label         "Vertical">
+<!ENTITY layoutWideMessage.label      "Wide Message">
+<!ENTITY layoutWideThread.label       "Wide Thread">
+<!ENTITY layoutStacked.label          "Stacked">
--- a/locale/zh-CN/list.dtd	Tue Oct 14 11:34:46 2008 -0700
+++ b/locale/zh-CN/list.dtd	Tue Oct 14 11:42:31 2008 -0700
@@ -4,3 +4,9 @@
 <!ENTITY authorCol.label "作者">
 <!ENTITY subjectCol.label "主题">
 <!ENTITY timestampCol.label "日期">
+
+<!ENTITY layoutClassic.label          "Classic">
+<!ENTITY layoutVertical.label         "Vertical">
+<!ENTITY layoutWideMessage.label      "Wide Message">
+<!ENTITY layoutWideThread.label       "Wide Thread">
+<!ENTITY layoutStacked.label          "Stacked">