Tidy-up tab ui api

public/index.html

@@ -131,8 +131,16 @@
         <ul id="workspace-tabs"></ul>
         <div id="workspace-add-tab"><a id="btn-workspace-add-tab" href="#"><i class="icon-plus"></i></a></div>
         <div id="chart"></div>
+        <div id="workspace-toolbar">
+            <div class="btn-group">
+                <a class="btn btn-small" href="#"><i class="icon-zoom-out"></i></a>
+                <a class="btn btn-small" href="#"><i class="icon-th"></i></a>
+                <a class="btn btn-small" href="#"><i class="icon-zoom-in"></i></a>
+            </div>
+        </div>
     </div>
 
+    
     <div id="chart-zoom-controls">
         <div class="btn-group">
             <a class="btn btn-mini" id="btn-zoom-out" href="#"><i class="icon-zoom-out"></i></a>

public/red/ui/sidebar.js

@@ -18,12 +18,12 @@ RED.sidebar = function() {
     //$('#sidebar').tabs();
     var sidebar_tabs = RED.tabs.create({
         id:"sidebar-tabs",
-        onchange:function(id) {
+        onchange:function(tab) {
             $("#sidebar-content").children().hide();
-            $("#"+id).show();
+            $("#"+tab.id).show();
         },
-        onremove: function(id) {
-            $("#"+id).remove();
+        onremove: function(tab) {
+            $("#"+tab.id).remove();
         }
     });
     function addTab(title,content,closeable) {

public/red/ui/tabs.js

@@ -20,6 +20,8 @@ RED.tabs = function() {
     
     
     function createTabs(options) {
+        var tabs = {};
+        
         var ul = $("#"+options.id)
         ul.addClass("red-ui-tabs");
         ul.children().first().addClass("active");
@@ -32,7 +34,7 @@ RED.tabs = function() {
         
         function onTabDblClick() {
             if (options.ondblclick) {
-                options.ondblclick($(this).attr('href').slice(1));
+                options.ondblclick(tabs[$(this).attr('href').slice(1)]);
             }
             return false;
         }
@@ -45,11 +47,11 @@ RED.tabs = function() {
                 ul.children().removeClass("active");
                 link.parent().addClass("active");
                 if (options.onchange) {
-                    options.onchange(link.attr('href').slice(1));
+                    options.onchange(tabs[link.attr('href').slice(1)]);
                 }
             }
-
         }
+        
         function updateTabWidths() {
             var tabs = ul.find("li.red-ui-tab");
             var width = ul.width();
@@ -57,8 +59,8 @@ RED.tabs = function() {
             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).on("dblclick",onTabDblClick);
         updateTabWidths();
         
@@ -74,12 +76,15 @@ RED.tabs = function() {
             }
             li.remove();
             if (options.onremove) {
-                options.onremove(id);
+                options.onremove(tabs[id]);
             }
+            delete tabs[id];
             updateTabWidths();
         }
+        
         return {
             addTab: function(tab) {
+                tabs[tab.id] = tab;
                 var li = $("<li/>",{class:"red-ui-tab"}).appendTo(ul);
                 var link = $("<a/>",{href:"#"+tab.id, class:"red-ui-tab-label"}).appendTo(li);
                 link.html(tab.label);

public/red/ui/view.js

@@ -70,11 +70,17 @@ RED.view = function() {
 
     var workspace_tabs = RED.tabs.create({
         id: "workspace-tabs",
-        onchange: function(id) {
-            RED.view.setWorkspace(id);
+        onchange: function(tab) {
+            if (tab.type == "subflow") {
+                $("#workspace-toolbar").show();
+            } else {
+                $("#workspace-toolbar").hide();
+            }
+                
+            RED.view.setWorkspace(tab.id);
         },
-        ondblclick: function(id) {
-            showRenameWorkspaceDialog(id);
+        ondblclick: function(tab) {
+            showRenameWorkspaceDialog(tab.id);
         },
         onadd: function(tab) {
             var menuli = $("<li/>");
@@ -98,6 +104,8 @@ RED.view = function() {
             } else {
                 $('#btn-workspace-delete').parent().removeClass("disabled");
             }
+            $('#workspace-menu-list a[href="#'+tab.id+'"]').parent().remove();
+
         }
     });
 
@@ -1224,7 +1232,6 @@ RED.view = function() {
         },
         removeWorkspace: function(ws) {
             workspace_tabs.removeTab(ws.id);
-            $('#workspace-menu-list a[href="#'+ws.id+'"]').parent().remove();
         },
         getWorkspace: function() {
             return activeWorkspace;
@@ -1272,6 +1279,12 @@ RED.view = function() {
         importNodes: importNodes,
         resize: function() {
             workspace_tabs.resize();
+        },
+        
+        addFlow: function() {
+            var ws = {type:"subflow",id:RED.nodes.id(),label:"Flow 1", closeable: true};
+            RED.nodes.addWorkspace(ws);
+            workspace_tabs.addTab(ws);
         }
     };
 }();

public/style.css

@@ -36,6 +36,15 @@ body {
     font-size: 40px;
     color: #fff;
 }
+
+div.btn-group, a.btn {
+    -webkit-user-select: none;
+   -khtml-user-select: none;
+   -moz-user-select: none;
+   -ms-user-select: none;
+   user-select: none;
+}
+
 a.brand {
         line-height: 16px;
 }
@@ -71,6 +80,17 @@ a.brand img {
    left:0px;
    right:0px;
 }
+
+#workspace-toolbar {
+    display: none;
+    position: absolute;
+    top: 30px;
+    left:0;
+    right: 18px;
+    padding: 5px;
+    background: #f3f3f3;
+}
+
 #chart-zoom-controls {
     padding-top: 3px;
     text-align: right;
@@ -691,6 +711,11 @@ ul.red-ui-tabs {
     height: 24px;
     border-bottom: 1px solid #999;
     background: #e3e3e3;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 ul.red-ui-tabs li {