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 id="sidebar">
<ul id="sidebar-tabs">
<li><a href="#tab-info">info</a></li>
</ul>
<div id="sidebar-content">
<div id="tab-info" style="position: relative;"></div>
</div>
<ul id="sidebar-tabs"></ul>
<div id="sidebar-content"></div>
</div>
<div id="sidebar-separator"></div>

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

@ -15,7 +15,30 @@
**/
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();});
RED.keyboard.add(/* SPACE */ 32,{ctrl:true},function(){toggleSidebar();d3.event.preventDefault();});
@ -50,6 +73,7 @@ RED.sidebar = function() {
sidebarSeparator.closing = false;
$("#sidebar").removeClass("closing");
}
sidebar_tabs.resize();
RED.view.resize();
},
@ -64,9 +88,9 @@ RED.sidebar = function() {
});
function toggleSidebar() {
if ($('#sidebar').tabs( "option", "active" ) === false) {
$('#sidebar').tabs( "option", "active",0);
}
//if ($('#sidebar').tabs( "option", "active" ) === false) {
// $('#sidebar').tabs( "option", "active",0);
//}
var btnSidebar = $("#btn-sidebar");
btnSidebar.toggleClass("active");
@ -78,15 +102,6 @@ RED.sidebar = function() {
}
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 {
addTab: addTab

8
public/style.css
View File

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