frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Better tab sizing and scaling

This commit is contained in:
Nicholas O'Leary 2013-10-23 10:44:08 +01:00
parent 9e072cf182
commit fa3c219685
5 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

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

1
public/red/ui/sidebar.js
View File

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

12
public/red/ui/tabs.js
View File

@ -27,6 +27,10 @@ RED.tabs = function() {
if (options.onadd) { if (options.onadd) {
var addItem = $('<li class="red-ui-add-tab"/>').appendTo(ul); 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); var addLink = $('<a href="#"><i class="icon icon-plus"></i></a>').appendTo(addItem);
addLink.on("click", function() { addLink.on("click", function() {
@ -44,7 +48,10 @@ RED.tabs = function() {
} }
function updateTabWidths() { function updateTabWidths() {
var tabs = ul.find("li.red-ui-tab"); 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+"%"}); tabs.css({width:pct+"%"});
} }
@ -64,7 +71,8 @@ RED.tabs = function() {
link.html(tab.label); link.html(tab.label);
link.on("click",onTabClick); link.on("click",onTabClick);
updateTabWidths(); updateTabWidths();
} },
resize: updateTabWidths
} }
} }

5
public/red/ui/view.js
View File

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

17
public/style.css
View File

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