Add some tabs

public/index.html

@@ -108,7 +108,10 @@
         </div>
     </div><!-- /palette -->
 
-    <div id="chart"></div>
+    <div id="workspace">
+        <div id="chart"></div>
+        <ul id="workspace-tabs"><li><a href="#tab-0">main</a></li></ul>
+    </div>
 
     <div id="chart-zoom-controls">
         <div class="btn-group">
@@ -265,6 +268,7 @@
 <script src="red/history.js"></script>
 <script src="red/validators.js"></script>
 <script src="red/ui/keyboard.js"></script>
+<script src="red/ui/tabs.js"></script>
 <script src="red/ui/view.js"></script>
 <script src="red/ui/sidebar.js"></script>
 <script src="red/ui/palette.js"></script>

public/red/ui/sidebar.js

@@ -28,8 +28,8 @@ RED.sidebar = function() {
                 var winWidth = $(window).width();
                 sidebarSeparator.start = ui.position.left;
                 sidebarSeparator.width = $("#sidebar").width();
-                sidebarSeparator.chartWidth = $("#chart").width();
-                sidebarSeparator.chartRight = winWidth-$("#chart").width()-$("#chart").offset().left-2;
+                sidebarSeparator.chartWidth = $("#workspace").width();
+                sidebarSeparator.chartRight = winWidth-$("#workspace").width()-$("#workspace").offset().left-2;
                 sidebarSeparator.closing = false;
             },
             drag: function(event,ui) {
@@ -38,7 +38,7 @@ RED.sidebar = function() {
                 
                 if (newSidebarWidth > 180 && sidebarSeparator.chartWidth+d > 200) {
                     var newChartRight = sidebarSeparator.chartRight-d;
-                    $("#chart").css("right",newChartRight);
+                    $("#workspace").css("right",newChartRight);
                     $("#chart-zoom-controls").css("right",newChartRight+20);
                     $("#sidebar").width(newSidebarWidth);
                 }

public/red/ui/tabs.js

@@ -0,0 +1,74 @@
+/**
+ * Copyright 2013 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+ 
+
+
+RED.tabs = function() {
+    
+    
+    function createTabs(options) {
+        var ul = $("#"+options.id)
+        ul.addClass("red-ui-tabs");
+        ul.children().first().addClass("active");
+        ul.children().addClass("red-ui-tab");
+        
+        if (options.onadd) {
+            var addItem = $('<li class="red-ui-add-tab"/>').appendTo(ul);
+            var addLink = $('<a href="#"><i class="icon icon-plus"></i></a>').appendTo(addItem);
+            
+            addLink.on("click", function() {
+                 options.onadd()
+            });
+        }
+        
+        function onTabClick() {
+            ul.children().removeClass("active");
+            $(this).parent().addClass("active");
+            if (options.onchange) {
+                options.onchange($(this).attr('href'));
+            }
+            return false;
+        }
+        function updateTabWidths() {
+            var tabs = ul.find("li.red-ui-tab");
+            var pct = (100/tabs.size())-2;
+            tabs.css({width:pct+"%"});
+                
+        }
+        ul.find("li.red-ui-tab a").on("click",onTabClick);
+        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 link = $("<a/>",{href:"#"+tab.id}).appendTo(li);
+                link.html(tab.label);
+                link.on("click",onTabClick);
+                updateTabWidths();
+            }
+        }
+    }
+    
+    return {
+        create: createTabs
+    }
+}();

public/red/ui/view.js

@@ -67,6 +67,22 @@ RED.view = function() {
 
     var drag_line = vis.append("svg:path").attr("class", "drag_line");
 
+    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]);
+        }
+    });
+    workspace_tabs.addTab({id:"tab-1",label:"Workspace 1"});
+    workspace_tabs.addTab({id:"tab-2",label:"Workspace 2"});
+    workspace_tabs.addTab({id:"tab-3",label:"Workspace 3"});
+    workspace_tabs.addTab({id:"tab-4",label:"Workspace 4"});
+    
+    
     //d3.select(window).on("keydown", keydown);
 
     function canvasMouseDown() {

public/style.css

@@ -40,10 +40,21 @@ a.brand img {
     padding-right: 10px;
 }
 
-#chart {
+#workspace {
    margin-left: 160px;
+   overflow: hidden;
+   background: #e3e3e3;
+}
+
+#chart {
    overflow: auto;
    background: #e3e3e3;
+   position: absolute;
+   border-top: 1px solid #999;
+   bottom:0px;
+   top: 30px;
+   left:0px;
+   right:0px;
 }
 #chart-zoom-controls {
     padding-top: 3px;
@@ -161,7 +172,7 @@ a.brand img {
     position: absolute;
     top: 5px; left:10px; bottom: 10px;
 }
-#chart {
+#workspace {
     position: absolute;
     margin: 0;
     top:5px; left:160px; bottom: 10px; right: 330px;
@@ -184,7 +195,7 @@ a.brand img {
 
 .sidebar-closed > #sidebar { display: none; }
 .sidebar-closed > #sidebar-separator { display: none; }
-.sidebar-closed > #chart { right: 10px !important; }
+.sidebar-closed > #workspace { right: 10px !important; }
 .sidebar-closed > #chart-zoom-controls { right: 30px !important; }
 
 /* ---------- end layout ---------- */
@@ -224,7 +235,7 @@ a.brand img {
     margin-left: 20px;
 }
 
-#chart, #palette, #sidebar {
+#workspace, #palette, #sidebar {
    border: 1px solid #000;
    border-radius: 3px;
 }
@@ -558,3 +569,64 @@ div.node-info {
     border-radius:5px;
     overflow: hidden;
 }
+
+ul.red-ui-tabs {
+    list-style-type: none;
+    padding:5px 2px 0px 5px;
+    margin: 0;
+    display: block;
+    height: 26px;
+    overflow: hidden;
+    fdwidth: 2000px;
+    width: 100%;
+}
+
+ul.red-ui-tabs li {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    display: inline-block;
+    border-left: 1px solid  #999;
+    border-top: 1px solid   #999;
+    border-right: 1px solid #999;
+    border-bottom: 1px solid #999;
+    background: #e3e3e3;
+    margin: 0 5px 0 0;
+    height: 24px;
+    line-height: 18px;
+    max-width: 150px;
+    width: 14%;
+    overflow: hidden;
+}
+
+#workspace .red-ui-tabs {
+    position: absolute;
+}
+ul.red-ui-tabs li a {
+    display: block; 
+    padding: 3px 16px;
+    color: #666;
+}
+ul.red-ui-tabs li a:hover {
+    text-decoration: none;
+    background: #f0f0f0;
+}
+
+ul.red-ui-tabs li.active {
+    background: #fff;
+    height: 24px;
+    border-bottom: 1px solid #fff;
+}
+ul.red-ui-tabs li.active a {
+    color: #333;
+}
+ul.red-ui-tabs li.active a:hover {
+    background: #fff;
+}
+ul.red-ui-tabs li.red-ui-add-tab {
+    width: auto;
+    border-top-right-radius: 15px;
+    line-height: 22px;
+}
+ul.red-ui-tabs li.red-ui-add-tab a {
+    padding: 2px 4px;
+}