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

Use new tab style for sidebar

This commit is contained in:
Nicholas O'Leary 2013-10-28 20:06:46 +00:00
parent c9344cd5f1
commit 2e15944b20
3 changed files with 34 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/index.html
View File

@ -134,12 +134,8 @@
</div> </div>
<div id="sidebar"> <div id="sidebar">
<ul id="sidebar-tabs"> <ul id="sidebar-tabs"></ul>
<li><a href="#tab-info">info</a></li> <div id="sidebar-content"></div>
</ul>
<div id="sidebar-content">
<div id="tab-info" style="position: relative;"></div>
</div>
</div> </div>
<div id="sidebar-separator"></div> <div id="sidebar-separator"></div>

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

@ -15,7 +15,30 @@
**/ **/
RED.sidebar = function() { RED.sidebar = function() {
$('#sidebar').tabs(); //$('#sidebar').tabs();
var sidebar_tabs = RED.tabs.create({
id:"sidebar-tabs",
onchange:function(id) {
$("#sidebar-content").children().hide();
$("#"+id).show();
}
});
function addTab(title,content) {
$("#sidebar-content").append(content);
$(content).hide();
sidebar_tabs.addTab({id:"tab-"+title,label:title});
//content.style.position = "absolute";
//$('#sidebar').tabs("refresh");
}
var content = document.createElement("div");
content.id = "tab-info";
content.style.paddingTop = "4px";
content.style.paddingLeft = "4px";
content.style.paddingRight = "4px";
addTab("info",content);
sidebar_tabs.activateTab("tab-info");
$('#btn-sidebar').click(function() {toggleSidebar();}); $('#btn-sidebar').click(function() {toggleSidebar();});
RED.keyboard.add(/* SPACE */ 32,{ctrl:true},function(){toggleSidebar();d3.event.preventDefault();}); RED.keyboard.add(/* SPACE */ 32,{ctrl:true},function(){toggleSidebar();d3.event.preventDefault();});
@ -50,6 +73,7 @@ RED.sidebar = function() {
sidebarSeparator.closing = false; sidebarSeparator.closing = false;
$("#sidebar").removeClass("closing"); $("#sidebar").removeClass("closing");
} }
sidebar_tabs.resize();
RED.view.resize(); RED.view.resize();
}, },
@ -64,9 +88,9 @@ RED.sidebar = function() {
}); });
function toggleSidebar() { function toggleSidebar() {
if ($('#sidebar').tabs( "option", "active" ) === false) { //if ($('#sidebar').tabs( "option", "active" ) === false) {
$('#sidebar').tabs( "option", "active",0); // $('#sidebar').tabs( "option", "active",0);
} //}
var btnSidebar = $("#btn-sidebar"); var btnSidebar = $("#btn-sidebar");
btnSidebar.toggleClass("active"); btnSidebar.toggleClass("active");
@ -78,15 +102,6 @@ RED.sidebar = function() {
} }
toggleSidebar(); toggleSidebar();
function addTab(title,content) {
var tab = document.createElement("li");
tab.innerHTML = '<a href="#tab-'+title+'">'+title+'</a>';
$("#sidebar-tabs").append(tab);
$("#sidebar-content").append(content);
$('#sidebar').tabs("refresh");
}
return { return {
addTab: addTab addTab: addTab

8
public/style.css
View File

@ -43,7 +43,6 @@ a.brand img {
#workspace { #workspace {
margin-left: 160px; margin-left: 160px;
overflow: hidden; overflow: hidden;
background: #e3e3e3;
} }
#chart { #chart {
@ -154,6 +153,7 @@ a.brand img {
#sidebar { #sidebar {
background: #fff; background: #fff;
box-sizing: border-box;
} }
#sidebar.closing { #sidebar.closing {
background: #eee; background: #eee;
@ -239,9 +239,10 @@ a.brand img {
border-radius: 3px; border-radius: 3px;
} }
#sidebar-content { #sidebar-content {
font-size: 1.2em;
overflow-y: auto; overflow-y: auto;
position: absolute; position: absolute;
top: 50px; left: 5px; right: 0; bottom: 1px; top: 30px; left: 0px; right: 0; bottom: 1px;
} }
.node_label_italic { .node_label_italic {
@ -575,9 +576,8 @@ ul.red-ui-tabs {
margin: 0; margin: 0;
display: block; display: block;
height: 24px; height: 24px;
width: 100%;
border-bottom: 1px solid #999; border-bottom: 1px solid #999;
background: #e3e3e3;
} }
ul.red-ui-tabs li { ul.red-ui-tabs li {