Better tab sizing and scaling

public/index.html

@@ -109,8 +109,8 @@
     </div><!-- /palette -->
 
     <div id="workspace">
-        <div id="chart"></div>
         <ul id="workspace-tabs"><li><a href="#tab-0">main</a></li></ul>
+        <div id="chart"></div>
     </div>
 
     <div id="chart-zoom-controls">

public/red/ui/sidebar.js

@@ -50,6 +50,7 @@ RED.sidebar = function() {
                     sidebarSeparator.closing = false;
                     $("#sidebar").removeClass("closing");
                 }
+                RED.view.resize();
                     
             },
             stop:function(event,ui) {

public/red/ui/tabs.js

@@ -27,6 +27,10 @@ RED.tabs = function() {
         
         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() {
@@ -44,7 +48,10 @@ RED.tabs = function() {
         }
         function updateTabWidths() {
             var tabs = ul.find("li.red-ui-tab");
-            var pct = (100/tabs.size())-2;
+            var width = ul.width();
+            var tabCount = tabs.size();
+            var tabWidth = (width-(options.onadd?37:0)-6-(tabCount*7))/tabCount;
+            var pct = 100*tabWidth/width;
             tabs.css({width:pct+"%"});
                 
         }
@@ -64,7 +71,8 @@ RED.tabs = function() {
                 link.html(tab.label);
                 link.on("click",onTabClick);
                 updateTabWidths();
-            }
+            },
+            resize: updateTabWidths
         }
     }
     

public/red/ui/view.js

@@ -994,6 +994,9 @@ RED.view = function() {
                 setDirty(d);
             }
         },
-        importNodes: importNodes
+        importNodes: importNodes,
+        resize: function() {
+            workspace_tabs.resize();
+        }
     };
 }();

public/style.css

@@ -50,7 +50,6 @@ a.brand img {
    overflow: auto;
    background: #e3e3e3;
    position: absolute;
-   border-top: 1px solid #999;
    bottom:0px;
    top: 30px;
    left:0px;
@@ -575,10 +574,10 @@ ul.red-ui-tabs {
     padding:5px 2px 0px 5px;
     margin: 0;
     display: block;
-    height: 26px;
-    overflow: hidden;
-    fdwidth: 2000px;
+    height: 24px;
     width: 100%;
+    border-bottom: 1px solid #999;
+
 }
 
 ul.red-ui-tabs li {
@@ -591,16 +590,13 @@ ul.red-ui-tabs li {
     border-bottom: 1px solid #999;
     background: #e3e3e3;
     margin: 0 5px 0 0;
-    height: 24px;
-    line-height: 18px;
+    height: 23px;
+    line-height: 17px;
     max-width: 150px;
     width: 14%;
     overflow: hidden;
 }
 
-#workspace .red-ui-tabs {
-    position: absolute;
-}
 ul.red-ui-tabs li a {
     display: block; 
     padding: 3px 16px;
@@ -613,7 +609,6 @@ ul.red-ui-tabs li a:hover {
 
 ul.red-ui-tabs li.active {
     background: #fff;
-    height: 24px;
     border-bottom: 1px solid #fff;
 }
 ul.red-ui-tabs li.active a {
@@ -623,7 +618,7 @@ ul.red-ui-tabs li.active a:hover {
     background: #fff;
 }
 ul.red-ui-tabs li.red-ui-add-tab {
-    width: auto;
+    width: 25px;
     border-top-right-radius: 15px;
     line-height: 22px;
 }