First version of the menu.

diff --git a/js/ui/baseui.js b/js/ui/baseui.js
index 6e576a9ea1887b416e5c089bb539149a6c587335..d3c23f06acc7c5e874f108aa97972bac2201a36b 100644 (file)
--- a/js/ui/baseui.js
+++ b/js/ui/baseui.js
@@ -148,6 +148,12 @@ qwebirc.ui.BaseUI = new Class({
 
 qwebirc.ui.StandardUI = new Class({
   Extends: qwebirc.ui.BaseUI,
+  UICommands: [
+    ["Options", "options"],
+    ["Add webchat to your site", "embedded"],
+    ["Privacy policy", "privacy"],
+    ["About qwebirc", "about"]
+  ],
   initialize: function(parentElement, windowClass, uiName, options) {
     this.parent(parentElement, windowClass, uiName, options);
 

diff --git a/js/ui/frontends/qui.js b/js/ui/frontends/qui.js
index 71112a341a4a3c9601c5fd155ef646b502f82a7c..acdf5cde61608c486f85047224d7779803751242 100644 (file)
--- a/js/ui/frontends/qui.js
+++ b/js/ui/frontends/qui.js
@@ -40,9 +40,79 @@ qwebirc.ui.QUI = new Class({
       event.stop();
     }.bind(this));
     
+    this.__createDropdown();
+    
     this.createInput();
     this.reflow();
   },
+  __createDropdown: function() {
+    var dropdownMenu = new Element("div");
+    dropdownMenu.addClass("dropdownmenu");
+    var surface = new Element("div");
+    surface.addClass("surface");
+
+    dropdownMenu.hide = function(noRemove) {
+      dropdownMenu.setStyle("display", "none");
+      dropdownMenu.visible = false;
+      if(!noRemove)
+        this.parentElement.removeChild(surface);
+    }.bind(this);
+    surface.addEvent("click", function() {
+      dropdownMenu.hide();
+    });
+
+    dropdownMenu.hide(true);
+    this.parentElement.appendChild(dropdownMenu);
+    
+    this.UICommands.forEach(function(x) {
+      var text = x[0];
+      var fn = this[x[1] + "Window"].bind(this);
+      var e = new Element("a");
+      e.addEvent("click", function() {
+        dropdownMenu.hide();
+        fn();
+      });
+      e.set("text", text);
+      dropdownMenu.appendChild(e);
+    }.bind(this));
+    
+    var dropdown = new Element("img");
+    dropdown.addClass("dropdown-tab");
+    dropdown.setStyle("display", "inline-block");
+    dropdown.set("html", "<img src=images/favicon.png>");
+    this.tabs.appendChild(dropdown);
+
+    dropdownMenu.show = function(x){
+      new Event(x).stop();
+      
+      if(dropdownMenu.visible) {
+        dropdownMenu.hide();
+        return;
+      }
+      this.parentElement.appendChild(surface);
+
+      var left = x.client.x;
+      var top = x.client.y;
+      if(left < 0)
+        left = 0;
+      if(top < 0)
+        top = 0;
+        
+      dropdownMenu.setStyle("left", left);
+      dropdownMenu.setStyle("top", top);
+      dropdownMenu.setStyle("display", "inline-block");
+      dropdownMenu.visible = true;
+    }.bind(this);
+    dropdown.addEvent("click", dropdownMenu.show);
+    
+    var dropdownhint = new Element("div");
+    dropdownhint.addClass("dropdownhint");
+    dropdownhint.set("text", "click the icon for the main menu");
+    var hider = function() {
+      this.parentElement.removeChild(dropdownhint);
+    }.delay(3000, this);
+    this.parentElement.appendChild(dropdownhint);
+  },
   createInput: function() {
     var form = new Element("form");
     this.input.appendChild(form);

diff --git a/static/css/qui.css b/static/css/qui.css
index 6f128819f6365c99e04df3d7b6b53df174bfc85b..be02f243c717c9dd93808d1f8a6d8cf309174114 100644 (file)
--- a/static/css/qui.css
+++ b/static/css/qui.css
@@ -211,3 +211,52 @@ div#noscript {
 .qwebirc-qui .hyperlink-whois:hover, .hyperlink-qwhois:hover, .hyperlink-channel:hover {
   text-decoration: underline;
 }
+
+.qwebirc-qui .tabbar .dropdown-tab {
+  color: red;
+  cursor: pointer;
+  cursor: hand;
+}
+
+.qwebirc-qui div.dropdownmenu {
+  z-index: 100;
+  border: 1px solid #c8d2dc;
+  position: relative;
+  width: auto;
+  top: 10px;
+  left: 10px;
+  padding: 3px;
+  background: #f2f0ff;
+}
+
+.qwebirc-qui div.dropdownmenu a {
+  display: block;
+  font-size: 0.7em;
+  color: black;
+  cursor: pointer;
+  cursor: hand;  
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
+.qwebirc-qui div.dropdownmenu a:hover {
+  background: white;
+}
+
+.qwebirc-qui div.surface {
+  height: 100%;
+  width: 100%;
+  left: 0px;
+  top: 0px;
+  position: relative;
+  z-index: 50;
+}
+
+.qwebirc-qui div.dropdownhint {
+  position: absolute;
+  left: 5px;
+  z-index: 10;
+  
+  top: 30px;
+  font-size: 0.7em;
+}