From fa3c21968558e4f351c3410ca72ee4c59a53cdc0 Mon Sep 17 00:00:00 2001
From: Nicholas O'Leary <nick.oleary@gmail.com>
Date: Wed, 23 Oct 2013 10:44:08 +0100
Subject: [PATCH] Better tab sizing and scaling

---
 public/index.html        |  2 +-
 public/red/ui/sidebar.js |  1 +
 public/red/ui/tabs.js    | 12 ++++++++++--
 public/red/ui/view.js    |  5 ++++-
 public/style.css         | 17 ++++++-----------
 5 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/public/index.html b/public/index.html
index 9d4383b0d..2a3615bc3 100644
--- a/public/index.html
+++ b/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">
diff --git a/public/red/ui/sidebar.js b/public/red/ui/sidebar.js
index d262f65f1..138a1411e 100644
--- a/public/red/ui/sidebar.js
+++ b/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) {
diff --git a/public/red/ui/tabs.js b/public/red/ui/tabs.js
index 22524b7a1..ec69e2553 100644
--- a/public/red/ui/tabs.js
+++ b/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
         }
     }
     
diff --git a/public/red/ui/view.js b/public/red/ui/view.js
index 02de7aa7e..fd718ce49 100644
--- a/public/red/ui/view.js
+++ b/public/red/ui/view.js
@@ -994,6 +994,9 @@ RED.view = function() {
                 setDirty(d);
             }
         },
-        importNodes: importNodes
+        importNodes: importNodes,
+        resize: function() {
+            workspace_tabs.resize();
+        }
     };
 }();
diff --git a/public/style.css b/public/style.css
index 57990c3e6..5f366ca65 100644
--- a/public/style.css
+++ b/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;
 }