add side tabs

diff --git a/css/qui.mcss b/css/qui.mcss
index e184877565ffdc695212ccfb372890d413b78bd6..7ac1e632707d968b1f1aa1cdb94fcf8fda743864 100644 (file)
--- a/css/qui.mcss
+++ b/css/qui.mcss
@@ -51,20 +51,25 @@ html {
 .qwebirc-qui .dynamicpanel {
   position: absolute;
 }
-.qwebirc-qui .widepanel, .leftboundpanel {
+.qwebirc-qui .leftboundpanel {
   left: 0px;
-}
-.qwebirc-qui .widepanel {
-  width: 100%;
+  width: 150px;
+  height: 100%;
 }
 .qwebirc-qui .topboundpanel {
   top: 0px;
+  width: 100%;
+}
+.qwebirc-qui .topicboundpanel {
+  width: 100%;
 }
 .qwebirc-qui .rightboundpanel {
-  /*right: 0px;*/
+  right: 0px;
+  width: 140px;
 }
 .qwebirc-qui .bottomboundpanel {
-  color: red;
+  bottom: 0px;
+  right: 0px;
 }
 
 .qwebirc-qui .lines {
@@ -139,10 +144,39 @@ html {
 }
 
 .qwebirc-qui .outertabbar {
-  border-bottom: 1px solid $(tabbar_border);
   background: $(tabbar_background);
 }
 
+.qwebirc-qui .outertabbar_left {
+  border-right: 1px solid $(tabbar_border);
+  overflow: auto;
+
+}
+
+.qwebirc-qui .outertabbar_left .tab {
+  display: block;
+  margin-right: 3px;
+  margin-top: 2px;
+  line-height: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+
+.qwebirc-qui .outertabbar_left .tabclose {
+  float: right;
+  padding-left: 0 !important;
+  margin-top: -2px;
+}
+
+.qwebirc-qui .outertabbar_left .tabbar {
+  margin-left: 5px;
+}
+
+.qwebirc-qui .outertabbar_top {
+  border-bottom: 1px solid $(tabbar_border);
+}
+
 .qwebirc-qui .tabbar {
   font-size: 0.8em;
   color: $(tabbar_text);
@@ -211,10 +245,6 @@ html {
 
 .qwebirc-qui .nicklist {
   border-left: 1px solid $(nicklist_border);
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  width: 140px;
   overflow: auto;
   background: $(nicklist_background);
   color: $(nicklist_text);

diff --git a/js/jslib.js b/js/jslib.js
index aeef5ee172aa65b2a37ac57457977f01d7079c3c..9a7b26dd2ee65cacc22ab82491126f323bd47a40 100644 (file)
--- a/js/jslib.js
+++ b/js/jslib.js
@@ -260,12 +260,12 @@ qwebirc.util.importJS = function(name, watchFor, onload) {
 qwebirc.util.createInput = function(type, parent, name, selected, id) {
   var created = false;
   var r;
-  if(name)
+  if (name)
     name = "__input" + name;
 
-  if(Browser.Engine.trident) {
+  if (Browser.Engine.trident) {
     var name2;
-    if(name) {
+    if (name) {
       name2 = " name=\"" + escape(name) + "\"";
     } else {
       name2 = "";
@@ -274,8 +274,8 @@ qwebirc.util.createInput = function(type, parent, name, selected, id) {
       var h = "<input type=\"" + type + "\"" + name2 + "/>";
       r = $(document.createElement(h));
       if (type == "radio") {
-        r.addEvent("click", function() {
-          $(document.body).getElements("input[name=" + name + "]").forEach(function(x) {
+        r.addEvent("click", function () {
+          $(document.body).getElements("input[name=" + name + "]").forEach(function (x) {
             x.setAttribute("defaultChecked", x.checked ? "defaultChecked" : "");
           });
         });
@@ -285,10 +285,11 @@ qwebirc.util.createInput = function(type, parent, name, selected, id) {
       /* fallthough, trying it the proper way... */
     }
   }
-  if(!created)
-    r = new Element("input");
 
-  r.setAttribute("type", type);
+  if(!created) {
+    r = new Element("input");
+    r.setAttribute("type", type);
+  }
   if(name)
     r.setAttribute("name", name);
   if(id)

diff --git a/js/ui/baseui.js b/js/ui/baseui.js
index 582a49021c1a4d6ac1cc2efd5d7e73b93d2bb02b..05bb6497b11b3e6ef9ac2652825904175dcf5331 100644 (file)
--- a/js/ui/baseui.js
+++ b/js/ui/baseui.js
@@ -445,7 +445,7 @@ qwebirc.ui.NewLoginUI = new Class({
     this.postInitialize();
 
     /* I'd prefer something shorter and snappier! */
-    var w = this.newCustomWindow("Connection details", true, qwebirc.ui.WINDOW_CONNECT);
+    var w = this.newCustomWindow("Connect", true, qwebirc.ui.WINDOW_CONNECT);
     var callback = function(args) {
       w.close();
       callbackfn(args);

diff --git a/js/ui/frontends/qui.js b/js/ui/frontends/qui.js
index 88d2e0a0967ee7559f5d3da0afa9e3354179435f..57846b0e02c83d5c36c8a1ed3982c14bef8a6966 100644 (file)
--- a/js/ui/frontends/qui.js
+++ b/js/ui/frontends/qui.js
@@ -14,30 +14,38 @@ qwebirc.ui.QUI = new Class({
         w.onResize();
     }.bind(this));
     this.qjsui.top.addClass("outertabbar");
-    
+    this.qjsui.left.addClass("outertabbar");
+
+    this.qjsui.top.addClass("outertabbar_top");
+    this.qjsui.left.addClass("outertabbar_left");
+
     this.qjsui.bottom.addClass("input");
     this.qjsui.right.addClass("nicklist");
     this.qjsui.topic.addClass("topic");
     this.qjsui.middle.addClass("lines");
     
-    this.outerTabs = this.qjsui.top;
+    this.outerTabs = new Element("div");
+    this.sideTabs = null;
 
     this.tabs = new Element("div");
     this.tabs.addClass("tabbar");
     
     this.__createDropdownMenu();
-    
+
     this.outerTabs.appendChild(this.tabs);
     this.origtopic = this.topic = this.qjsui.topic;
-    this.origlines = this.lines = this.qjsui.middle;
+    this.lines = this.qjsui.middle;
     this.orignicklist = this.nicklist = this.qjsui.right;
     
     this.input = this.qjsui.bottom;
     this.reflow = this.qjsui.reflow.bind(this.qjsui);
     
     this.tabs.addEvent("mousewheel", function(x) {
+      if(this.sideTabs)
+        return;
+
       var event = new Event(x);
-      
+
       /* up */
       if(event.wheel > 0) {
         this.nextWindow();
@@ -51,6 +59,13 @@ qwebirc.ui.QUI = new Class({
     this.createInput();
     this.reflow();
     this.reflow.delay(100); /* Konqueror fix */
+    this.setSideTabs(this.uiOptions.SIDE_TABS);
+
+  },
+  newWindow: function(client, type, name) {
+    var w = this.parent(client, type, name);
+    w.setSideTabs(this.sideTabs);
+    return w;
   },
   __createDropdownMenu: function() {
     var dropdownMenu = new Element("span");
@@ -92,9 +107,9 @@ qwebirc.ui.QUI = new Class({
         dropdownMenu.hide();
         return;
       }
-      var top = this.outerTabs.getSize().y;
-      
-      dropdownMenu.setStyle("left", 0);
+      var parentSize = this.outerTabs.parentNode.getSize().y;
+
+      dropdownMenu.setStyle("left", parentSize.x);
       dropdownMenu.setStyle("top", top-1); /* -1 == top border */
       dropdownMenu.setStyle("display", "inline-block");
       dropdownMenu.visible = true;
@@ -214,6 +229,31 @@ qwebirc.ui.QUI = new Class({
 
     this.topic.parentNode.replaceChild(topic, this.topic);
     this.qjsui.topic = this.topic = topic;
+  },
+  setSideTabs: function(value) {
+    if(value === this.sideTabs)
+      return;
+
+    if(this.sideTabs === true) {
+      this.qjsui.left.removeChild(this.outerTabs);
+    } else if(this.sideTabs === false) {
+      this.qjsui.top.removeChild(this.outerTabs);
+    }
+    if(value) {
+      this.qjsui.left.appendChild(this.outerTabs);
+      this.qjsui.top.style.display = "none";
+      this.qjsui.left.style.display = "";
+    } else {
+      this.qjsui.top.appendChild(this.outerTabs);
+      this.qjsui.top.style.display = "";
+      this.qjsui.left.style.display = "none";
+    }
+    this.sideTabs = value;
+    this.windows.each(function(k, v) {
+      v.each(function(k, v2) {
+        v2.setSideTabs(value);
+      });
+    });
   }
 });
 
@@ -222,7 +262,7 @@ qwebirc.ui.QUI.JSUI = new Class({
   initialize: function(class_, parent, sizer) {
     this.parent = parent;
     this.sizer = $defined(sizer)?sizer:parent;
-    
+
     this.class_ = class_;
     this.create();
     
@@ -235,20 +275,7 @@ qwebirc.ui.QUI.JSUI = new Class({
   applyClasses: function(pos, l) {
     l.addClass("dynamicpanel");    
     l.addClass(this.class_);
-
-    if(pos == "middle") {
-      l.addClass("leftboundpanel");
-    } else if(pos == "top") {
-      l.addClass("topboundpanel");
-      l.addClass("widepanel");
-    } else if(pos == "topic") {
-      l.addClass("widepanel");
-    } else if(pos == "right") {
-      l.addClass("rightboundpanel");
-    } else if(pos == "bottom") {
-      l.addClass("bottomboundpanel");
-      l.addClass("widepanel");
-    }
+    l.addClass(pos + "boundpanel");
   },
   create: function() {
     var XE = function(pos) {
@@ -260,6 +287,7 @@ qwebirc.ui.QUI.JSUI = new Class({
     }.bind(this);
     
     this.top = XE("top");
+    this.left = XE("left");
     this.topic = XE("topic");
     this.middle = XE("middle");
     this.right = XE("right");
@@ -280,19 +308,37 @@ qwebirc.ui.QUI.JSUI = new Class({
     var right = this.right;
     var topic = this.topic;
     var top = this.top;
-    
+    var left = this.left;
+
+    /* |----------------------------------------------|
+     * | top                                          |
+     * |----------------------------------------------|
+     * | left | topic                         | right |
+     * |      |-------------------------------|       |
+     * |      | middle                        |       |
+     * |      |                               |       |
+     * |      |                               |       |
+     * |      |---------------------------------------|
+     * |      | bottom                                |
+     * |----------------------------------------------|
+     */
+
     var topicsize = topic.getSize();
     var topsize = top.getSize();
     var rightsize = right.getSize();
     var bottomsize = bottom.getSize();
+    var leftsize = left.getSize();
     var docsize = this.sizer.getSize();
     
     var mheight = (docsize.y - topsize.y - bottomsize.y - topicsize.y);
     var mwidth = (docsize.x - rightsize.x);
 
+    left.setStyle("top", topsize.y);
     topic.setStyle("top", topsize.y);
+    topic.setStyle("left", leftsize.x);
     
     middle.setStyle("top", (topsize.y + topicsize.y));
+    middle.setStyle("left", leftsize.x);
     if(mheight > 0) {
       middle.setStyle("height", mheight);
       right.setStyle("height", mheight);
@@ -301,9 +347,8 @@ qwebirc.ui.QUI.JSUI = new Class({
     if(mwidth > 0)
       middle.setStyle("width", mwidth);
     right.setStyle("top", (topsize.y + topicsize.y));
-    right.setStyle("left", mwidth);
-    
-    bottom.setStyle("top", (docsize.y - bottomsize.y));
+
+    bottom.setStyle("left",  leftsize.x);
     this.fireEvent("reflow");
   },
   showChannel: function(state, nicklistVisible) {
@@ -333,49 +378,53 @@ qwebirc.ui.QUI.Window = new Class({
     this.spaceNode = document.createTextNode(" ");
     parentObject.tabs.appendChild(this.tab);
     parentObject.tabs.appendChild(this.spaceNode);
-    
-    this.tab.appendText(name);
-    this.tab.addEvent("click", function(e) {
-      new Event(e).stop();
-      
-      if(this.closed)
-        return;
-        
-      parentObject.selectWindow(this);
-    }.bind(this));
-    
+
     if(type != qwebirc.ui.WINDOW_STATUS && type != qwebirc.ui.WINDOW_CONNECT) {
       var tabclose = new Element("span");
+      this.tabclose = tabclose;
       tabclose.set("text", "X");
       tabclose.addClass("tabclose");
       var close = function(e) {
         new Event(e).stop();
-        
+
         if(this.closed)
           return;
-          
+
         if(type == qwebirc.ui.WINDOW_CHANNEL)
           this.client.exec("/PART " + name);
 
         this.close();
-        
+
         //parentObject.inputbox.focus();
       }.bind(this);
-      
+
       tabclose.addEvent("click", close);
       this.tab.addEvent("mouseup", function(e) {
         var button = 1;
-        
+
         if(Browser.Engine.trident)
           button = 4;
 
         if(e.event.button == button)
           close(e);
       }.bind(this));
-      
+
       this.tab.appendChild(tabclose);
+    } else {
+      this.tabclose = null;
     }
 
+    this.tab.appendText(name);
+    this.tab.addEvent("click", function(e) {
+      new Event(e).stop();
+      
+      if(this.closed)
+        return;
+        
+      parentObject.selectWindow(this);
+    }.bind(this));
+    
+
     this.lines = new Element("div");
     this.parentObject.qjsui.applyClasses("middle", this.lines);
     this.lines.addClass("lines");
@@ -389,6 +438,7 @@ qwebirc.ui.QUI.Window = new Class({
     
     if(type == qwebirc.ui.WINDOW_CHANNEL) {
       this.topic = new Element("div");
+      this.parentObject.qjsui.applyClasses("topic", this.topic);
       this.topic.addClass("topic");
       this.topic.addClass("tab-invisible");
       this.topic.set("html", " ");
@@ -400,14 +450,14 @@ qwebirc.ui.QUI.Window = new Class({
       this.nicklist.addClass("nicklist");
       this.nicklist.addClass("tab-invisible");
       this.nicklist.addEvent("click", this.removePrevMenu.bind(this));
-      this.parentObject.qjsui.applyClasses("nicklist", this.nicklist);
+      this.parentObject.qjsui.applyClasses("right", this.nicklist);
     }
     
     if(type == qwebirc.ui.WINDOW_CHANNEL)
       this.updateTopic("");
 
     this.nicksColoured = this.parentObject.uiOptions.NICK_COLOURS;
-    this.reflow();    
+    this.reflow();
   },
   rename: function(name) {
     this.tab.replaceChild(document.createTextNode(name), this.tab.firstChild);
@@ -637,5 +687,15 @@ qwebirc.ui.QUI.Window = new Class({
         this.tab.addClass("tab-hilight-activity");
         break;
     }
+  },
+  setSideTabs: function(value) {
+    if(this.tabclose === null)
+      return;
+    this.tab.removeChild(this.tabclose);
+    if(value) {
+      this.tab.insertBefore(this.tabclose, this.tab.firstChild);
+    } else {
+      this.tab.appendChild(this.tabclose);
+    }
   }
 });

diff --git a/js/ui/panes/options.js b/js/ui/panes/options.js
index 094da0207a4b01555313bcb10fc135943bddd124..1ed73e466438372d5702238bc7fdd35e6a81054d 100644 (file)
--- a/js/ui/panes/options.js
+++ b/js/ui/panes/options.js
@@ -46,7 +46,17 @@ qwebirc.config.DEFAULT_OPTIONS = [
   }],
   [12, "QUERY_ON_NICK_CLICK", "Query on nickname click in channel", false],
   [13, "SHOW_NICKLIST", "Show nickname list in channels", true],
-  [14, "SHOW_TIMESTAMPS", "Show timestamps", true] /* we rely on the hue update */
+  [14, "SHOW_TIMESTAMPS", "Show timestamps", true], /* we rely on the hue update */
+  [15, "SIDE_TABS", "Show tabs on the side", false, {
+    enabled: function() {
+      if(Browser.Engine.trident && Browser.Engine.version < 8)
+        return [false, false]; /* [disabled, default_value] */
+      return [true];
+    },
+    applyChanges: function(value, ui) {
+      ui.setSideTabs(value);
+    }
+  }]
 ];
 
 qwebirc.config.DefaultOptions = null;