Add workspace menu and start plumbing in

public/index.html

@@ -49,6 +49,18 @@
                         </ul>
                     </li>
                     <li class="divider"></li>
+                    <li class="dropdown-submenu pull-left"><a tabindex="-1" href="#"><i class="icon-th-large"></i> Workspaces</a>
+                        <ul class="dropdown-menu">
+                            <li><a id="btn-workspace-add" tabindex="-1" href="#"><i class="icon-plus"></i> Add</a></li>
+                            <li><a id="btn-workspace-edit" tabindex="-1" href="#"><i class="icon-edit"></i> Edit</a></li>
+                            <li><a id="btn-workspace-delete" tabindex="-1" href="#"><i class="icon-minus"></i> Delete</a></li>
+                            <li class="dropdown-submenu pull-left">
+                                <a tabindex="-1" href="#"><i class="icon-share-alt"></i> Switch to...</a>
+                                <ul id="workspace-menu-list" class="dropdown-menu"></ul>
+                            </li>
+                        </ul>
+                    </li>
+                    <li class="divider"></li>
                     <li><a id="btn-keyboard-shortcuts" tabindex="-1" href="#"><i class="icon-question-sign"></i> Keyboard Shortcuts</a></li>
                     <li><a id="btn-help" tabindex="-1" href="http://node-red.github.io/docs" target="_blank"><i class="icon-question-sign"></i> Help...</a></li>
                 </ul>

public/red/ui/tabs.js

@@ -25,53 +25,55 @@ RED.tabs = function() {
         ul.children().first().addClass("active");
         ul.children().addClass("red-ui-tab");
         
-        if (options.onadd) {
-            var addItem = $('<li class="red-ui-add-tab"/>').appendTo(ul);
-            addItem.css({
-                    "position":"absolute",
-                    "right":"5px"
-            });
-            var addLink = $('<a href="#"><i class="icon icon-plus"></i></a>').appendTo(addItem);
-            
-            addLink.on("click", function() {
-                 options.onadd()
-            });
+        function onTabClick() {
+            activateTab($(this));
+            return false;
         }
         
-        function onTabClick() {
-            ul.children().removeClass("active");
-            $(this).parent().addClass("active");
-            if (options.onchange) {
-                options.onchange($(this).attr('href'));
+        function onTabDblClick() {
+            if (options.ondblclick) {
+                options.ondblclick($(this).attr('href'));
             }
-            return false;
+        }
+        
+        function activateTab(link) {
+            if (typeof link === "string") {
+                link = ul.find("a[href='#"+link+"']");
+            }
+            if (!link.parent().hasClass("active")) {
+                ul.children().removeClass("active");
+                link.parent().addClass("active");
+                if (options.onchange) {
+                    options.onchange(link.attr('href'));
+                }
+            }
+
         }
         function updateTabWidths() {
             var tabs = ul.find("li.red-ui-tab");
             var width = ul.width();
             var tabCount = tabs.size();
-            var tabWidth = (width-(options.onadd?37:0)-6-(tabCount*7))/tabCount;
+            var tabWidth = (width-6-(tabCount*7))/tabCount;
             var pct = 100*tabWidth/width;
             tabs.css({width:pct+"%"});
                 
         }
-        ul.find("li.red-ui-tab a").on("click",onTabClick);
+        ul.find("li.red-ui-tab a").on("click",onTabClick).on("dblclick",onTabDblClick);
         updateTabWidths();
         
         return {
             addTab: function(tab) {
-                var li = $("<li/>",{class:"red-ui-tab"});
-                
-                if (options.onadd) {
-                    ul.find(".red-ui-add-tab").before(li);
-                } else {
-                    li.appendTo(ul);
-                }
+                var li = $("<li/>",{class:"red-ui-tab"}).appendTo(ul);
                 var link = $("<a/>",{href:"#"+tab.id}).appendTo(li);
                 link.html(tab.label);
                 link.on("click",onTabClick);
+                link.on("dblclick",onTabDblClick);
                 updateTabWidths();
+                if (options.onadd) {
+                    options.onadd(tab);
+                }
             },
+            activateTab: activateTab,
             resize: updateTabWidths
         }
     }

public/red/ui/view.js

@@ -69,12 +69,22 @@ RED.view = function() {
 
     var workspace_tabs = RED.tabs.create({
         id: "workspace-tabs",
-        onadd: function() {
-            workspace_tabs.addTab({id:"tab-5",label:"Workspace 5"});
-        },
         onchange: function(id) {
             console.log(id);
             RED.view.setWorkspace(id.split("-")[1]);
+        },
+        ondblclick: function(id) {
+            console.log("DC:",id);
+        },
+        onadd: function(tab) {
+            var menuli = $("<li/>");
+            var menuA = $("<a/>",{tabindex:"-1",href:"#"+tab.id}).appendTo(menuli);
+            menuA.html(tab.label);
+            menuA.on("click",function() {
+                workspace_tabs.activateTab(tab.id);
+            });
+            
+            $('#workspace-menu-list').append(menuli);
         }
     });
     workspace_tabs.addTab({id:"tab-1",label:"Workspace 1"});
@@ -82,6 +92,12 @@ RED.view = function() {
     workspace_tabs.addTab({id:"tab-3",label:"Workspace 3"});
     workspace_tabs.addTab({id:"tab-4",label:"Workspace 4"});
     
+    $('#btn-workspace-add').on("click",function() {
+        var id = Math.floor(Math.random()*2000);
+        workspace_tabs.addTab({id:"tab-"+id,label:"Workspace "+id});
+        workspace_tabs.activateTab("tab-"+id);
+    });
+    
     
     //d3.select(window).on("keydown", keydown);
 

public/style.css

@@ -595,6 +595,7 @@ ul.red-ui-tabs li {
     max-width: 150px;
     width: 14%;
     overflow: hidden;
+    white-space: nowrap;
 }
 
 ul.red-ui-tabs li a {