diff --git a/public/index.html b/public/index.html index 19653d0b0..80dd288ed 100644 --- a/public/index.html +++ b/public/index.html @@ -131,8 +131,16 @@
+
+
+ + + +
+
+
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 {