diff --git a/public/red/ui/sidebar.js b/public/red/ui/sidebar.js
index 04dc519f6..2f6f9ce5d 100644
--- a/public/red/ui/sidebar.js
+++ b/public/red/ui/sidebar.js
@@ -18,12 +18,12 @@ RED.sidebar = function() {
//$('#sidebar').tabs();
var sidebar_tabs = RED.tabs.create({
id:"sidebar-tabs",
- onchange:function(id) {
+ onchange:function(tab) {
$("#sidebar-content").children().hide();
- $("#"+id).show();
+ $("#"+tab.id).show();
},
- onremove: function(id) {
- $("#"+id).remove();
+ onremove: function(tab) {
+ $("#"+tab.id).remove();
}
});
function addTab(title,content,closeable) {
diff --git a/public/red/ui/tabs.js b/public/red/ui/tabs.js
index 082982da4..adb4cdddf 100644
--- a/public/red/ui/tabs.js
+++ b/public/red/ui/tabs.js
@@ -20,6 +20,8 @@ RED.tabs = function() {
function createTabs(options) {
+ var tabs = {};
+
var ul = $("#"+options.id)
ul.addClass("red-ui-tabs");
ul.children().first().addClass("active");
@@ -32,7 +34,7 @@ RED.tabs = function() {
function onTabDblClick() {
if (options.ondblclick) {
- options.ondblclick($(this).attr('href').slice(1));
+ options.ondblclick(tabs[$(this).attr('href').slice(1)]);
}
return false;
}
@@ -45,11 +47,11 @@ RED.tabs = function() {
ul.children().removeClass("active");
link.parent().addClass("active");
if (options.onchange) {
- options.onchange(link.attr('href').slice(1));
+ options.onchange(tabs[link.attr('href').slice(1)]);
}
}
-
}
+
function updateTabWidths() {
var tabs = ul.find("li.red-ui-tab");
var width = ul.width();
@@ -57,8 +59,8 @@ RED.tabs = function() {
var tabWidth = (width-6-(tabCount*7))/tabCount;
var pct = 100*tabWidth/width;
tabs.css({width:pct+"%"});
-
}
+
ul.find("li.red-ui-tab a").on("click",onTabClick).on("dblclick",onTabDblClick);
updateTabWidths();
@@ -74,12 +76,15 @@ RED.tabs = function() {
}
li.remove();
if (options.onremove) {
- options.onremove(id);
+ options.onremove(tabs[id]);
}
+ delete tabs[id];
updateTabWidths();
}
+
return {
addTab: function(tab) {
+ tabs[tab.id] = tab;
var li = $("
",{class:"red-ui-tab"}).appendTo(ul);
var link = $("
",{href:"#"+tab.id, class:"red-ui-tab-label"}).appendTo(li);
link.html(tab.label);
diff --git a/public/red/ui/view.js b/public/red/ui/view.js
index 8ffa4722b..d17e1f325 100644
--- a/public/red/ui/view.js
+++ b/public/red/ui/view.js
@@ -70,11 +70,17 @@ RED.view = function() {
var workspace_tabs = RED.tabs.create({
id: "workspace-tabs",
- onchange: function(id) {
- RED.view.setWorkspace(id);
+ onchange: function(tab) {
+ if (tab.type == "subflow") {
+ $("#workspace-toolbar").show();
+ } else {
+ $("#workspace-toolbar").hide();
+ }
+
+ RED.view.setWorkspace(tab.id);
},
- ondblclick: function(id) {
- showRenameWorkspaceDialog(id);
+ ondblclick: function(tab) {
+ showRenameWorkspaceDialog(tab.id);
},
onadd: function(tab) {
var menuli = $("
");
@@ -98,6 +104,8 @@ RED.view = function() {
} else {
$('#btn-workspace-delete').parent().removeClass("disabled");
}
+ $('#workspace-menu-list a[href="#'+tab.id+'"]').parent().remove();
+
}
});
@@ -1224,7 +1232,6 @@ RED.view = function() {
},
removeWorkspace: function(ws) {
workspace_tabs.removeTab(ws.id);
- $('#workspace-menu-list a[href="#'+ws.id+'"]').parent().remove();
},
getWorkspace: function() {
return activeWorkspace;
@@ -1272,6 +1279,12 @@ RED.view = function() {
importNodes: importNodes,
resize: function() {
workspace_tabs.resize();
+ },
+
+ addFlow: function() {
+ var ws = {type:"subflow",id:RED.nodes.id(),label:"Flow 1", closeable: true};
+ RED.nodes.addWorkspace(ws);
+ workspace_tabs.addTab(ws);
}
};
}();
diff --git a/public/style.css b/public/style.css
index 0ed9f06ab..472ec306b 100644
--- a/public/style.css
+++ b/public/style.css
@@ -36,6 +36,15 @@ body {
font-size: 40px;
color: #fff;
}
+
+div.btn-group, a.btn {
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
a.brand {
line-height: 16px;
}
@@ -71,6 +80,17 @@ a.brand img {
left:0px;
right:0px;
}
+
+#workspace-toolbar {
+ display: none;
+ position: absolute;
+ top: 30px;
+ left:0;
+ right: 18px;
+ padding: 5px;
+ background: #f3f3f3;
+}
+
#chart-zoom-controls {
padding-top: 3px;
text-align: right;
@@ -691,6 +711,11 @@ ul.red-ui-tabs {
height: 24px;
border-bottom: 1px solid #999;
background: #e3e3e3;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
ul.red-ui-tabs li {