diff --git a/Gruntfile.js b/Gruntfile.js index 3bd9a9d86..bceb3edb8 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -118,6 +118,7 @@ module.exports = function(grunt) { "editor/js/ui/sidebar.js", "editor/js/ui/palette.js", "editor/js/ui/tab-info.js", + "editor/js/ui/tab-config.js", "editor/js/ui/editor.js", "editor/js/ui/clipboard.js", "editor/js/ui/library.js", diff --git a/editor/js/main.js b/editor/js/main.js index 6cc8f8d6e..52030d590 100644 --- a/editor/js/main.js +++ b/editor/js/main.js @@ -152,9 +152,6 @@ var RED = (function() { statusEnabled = state; RED.view.status(statusEnabled); } - function toggleConfigNodes(state) { - RED.workspaces.toggleConfigNodes(state); - } function loadEditor() { RED.menu.init({id:"btn-sidemenu", @@ -164,7 +161,6 @@ var RED = (function() { null ]}, {id:"menu-item-status",label:RED._("menu.label.displayStatus"),toggle:true,onselect:toggleStatus, selected: true}, - {id:"menu-item-config-nodes",label:RED._("menu.label.displayConfig"),toggle:true,onselect:toggleConfigNodes, selected: false}, null, {id:"menu-item-import",label:RED._("menu.label.import"),options:[ {id:"menu-item-import-clipboard",label:RED._("menu.label.clipboard"),onselect:RED.clipboard.import}, diff --git a/editor/js/ui/sidebar.js b/editor/js/ui/sidebar.js index f1320782a..5149a96dc 100644 --- a/editor/js/ui/sidebar.js +++ b/editor/js/ui/sidebar.js @@ -188,6 +188,7 @@ RED.sidebar = (function() { RED.keyboard.add(/* SPACE */ 32,{ctrl:true},function(){RED.menu.setSelected("menu-item-sidebar",!RED.menu.isSelected("menu-item-sidebar"));d3.event.preventDefault();}); showSidebar(); RED.sidebar.info.init(); + RED.sidebar.config.init(); // hide info bar at start if screen rather narrow... if ($(window).width() < 600) { toggleSidebar(); } } diff --git a/editor/js/ui/workspaces.js b/editor/js/ui/workspaces.js index a369f5fa9..29b37a56d 100644 --- a/editor/js/ui/workspaces.js +++ b/editor/js/ui/workspaces.js @@ -90,7 +90,7 @@ RED.workspaces = (function() { activeWorkspace = tab.id; event.workspace = activeWorkspace; RED.events.emit("workspace:change",event); - refreshConfigNodeList(); + RED.sidebar.config.refresh(); }, ondblclick: function(tab) { if (tab.type != "subflow") { @@ -197,18 +197,6 @@ RED.workspaces = (function() { $('#btn-workspace-add-tab').on("click",function(e) {addWorkspace(); e.preventDefault()}); RED.events.on("sidebar:resize",workspace_tabs.resize); - $(".workspace-config-node-tray-header").on('click', function(e) { - var icon = $(this).find("i"); - if (icon.hasClass("expanded")) { - icon.removeClass("expanded"); - $(this).next().slideUp(); - } else { - icon.addClass("expanded"); - $(this).next().slideDown(); - } - - }); - RED.menu.setAction('menu-item-workspace-delete',function() { deleteWorkspace(RED.nodes.workspace(activeWorkspace)); }); @@ -228,83 +216,6 @@ RED.workspaces = (function() { } } - function createConfigNodeList(nodes,list) { - nodes.sort(function(A,B) { - if (A.type < B.type) { return -1;} - if (A.type > B.type) { return 1;} - return 0; - }); - list.empty(); - if (nodes.length === 0) { - $('
  • none
    • ').appendTo(list); - } else { - var currentType = ""; - nodes.forEach(function(node) { - var label = ""; - if (typeof node._def.label == "function") { - label = node._def.label.call(node); - } else { - label = node._def.label; - } - label = label || node.id; - if (node.type != currentType) { - $('
  • '+node.type+'
    • ').appendTo(list); - currentType = node.type; - } - - var entry = $('
  • ').appendTo(list); - $('
    ').text(label).appendTo(entry); - - var iconContainer = $('
    ',{class:"palette_icon_container palette_icon_container_right"}).text(node.users.length).appendTo(entry); - if (node.users.length === 0) { - entry.addClass("config_node_unused"); - } - entry.on('click',function(e) { - RED.sidebar.info.refresh(node); - }); - entry.on('dblclick',function(e) { - RED.editor.editConfig("", node.type, node.id); - }); - var userArray = node.users.map(function(n) { return n.id }); - entry.on('mouseover',function(e) { - RED.nodes.eachNode(function(node) { - if( userArray.indexOf(node.id) != -1) { - node.highlighted = true; - node.dirty = true; - } - }); - RED.view.redraw(); - }); - - entry.on('mouseout',function(e) { - RED.nodes.eachNode(function(node) { - if(node.highlighted) { - node.highlighted = false; - node.dirty = true; - } - }); - RED.view.redraw(); - }); - }); - } - } - - function refreshConfigNodeList() { - - var localConfigNodes = []; - var globalConfigNodes = []; - - RED.nodes.eachConfig(function(cn) { - if (cn.z == activeWorkspace) { - localConfigNodes.push(cn); - } else if (!cn.z) { - globalConfigNodes.push(cn); - } - }); - createConfigNodeList(localConfigNodes,$("#workspace-config-node-tray-locals")); - createConfigNodeList(globalConfigNodes,$("#workspace-config-node-tray-globals")); - } - return { init: init, add: addWorkspace, @@ -337,14 +248,10 @@ RED.workspaces = (function() { workspace_tabs.renameTab(sf.id,sf.name); } }); - refreshConfigNodeList(); + RED.sidebar.config.refresh(); }, resize: function() { workspace_tabs.resize(); - }, - toggleConfigNodes: function(state) { - refreshConfigNodeList(); - $("#workspace").toggleClass("config-open",state); } } })(); diff --git a/editor/sass/tab-config.scss b/editor/sass/tab-config.scss index a5ee6c772..ecb575f2c 100644 --- a/editor/sass/tab-config.scss +++ b/editor/sass/tab-config.scss @@ -13,51 +13,57 @@ * See the License for the specific language governing permissions and * limitations under the License. **/ - -ul.tab-config-list { - list-style-type: none; - padding: 3px; - margin: 0; + +.sidebar-node-config { + background: #f3f3f3; + height: 100%; + overflow-y:auto; @include disable-selection; } -ul.tab-config-list li { - max-width: 400px; - font-size: 13px; - background: #f3f3f3; - margin: 10px auto; - border-radius: 3px; - border: 1px solid #ccc; - padding: 3px 8px; -} -div.tab-config-list-type { -} + .config-node-list { + margin: 0; + list-style-type: none; + } + .config_node { + width: 160px; + height: 30px; + background: #f3f3f3; + color: #666; + cursor: pointer; -div.tab-config-list-entry { - position: relative; - margin: 4px 0; - padding: 8px 4px 8px 10px; - background: #fff; - border: 1px solid #ccc; - border-radius: 4px; - cursor: pointer; -} -div.tab-config-list-entry:hover { - background: #f6f6f6; -} - -div.tab-config-list-label { -} -div.tab-config-list-users { - position: absolute; - right: 3px; - top: 3px; - bottom: 3px; - line-height: 27px; - font-size: 11px; - background: #f6f6f6; - float: right; - border: 1px solid #eee; - border-radius: 3px; - padding: 1px 5px; -} + .palette_label { + margin-left: 8px; + line-height: 24px; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .palette_icon_container { + font-size: 12px; + line-height: 30px; + background-color: #e8e8e8; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + } + .config_node_type { + color: #999; + text-align: right; + padding-right: 3px; + &:not(:first-child) { + margin-top: 20px; + } + } + .config_node_none { + color: #ddd; + text-align:right; + padding-right: 3px; + } + .config_node_unused { + border-color: #aaa; + background: #f9f9f9; + border-style: dashed; + color: #aaa; + } diff --git a/editor/sass/workspace.scss b/editor/sass/workspace.scss index 84a830d50..bb7126874 100644 --- a/editor/sass/workspace.scss +++ b/editor/sass/workspace.scss @@ -27,19 +27,6 @@ transition: right 0.2s ease; } -#workspace.config-open { - #chart { - right: 190px; - } - #workspace-config-node-tray { - right: 0px; - } - #workspace-toolbar { - right: 190px; - } -} - - #chart svg:focus { outline: none; } @@ -87,64 +74,3 @@ #workspace-footer { @include component-footer; } - -#workspace-config-node-tray { - @include disable-selection; - position: absolute; - top: 35px; - bottom:25px; - right:-190px; - width: 190px; - border-left: 1px solid $secondary-border-color; - box-sizing:border-box; - background: #f3f3f3; - transition: right 0.2s ease; - overflow-y: auto; -} - -.config-node-list { - margin: 0; - list-style-type: none; -} -.config_node { - width: 160px; - height: 30px; - background: #f3f3f3; - color: #666; - cursor: pointer; - - .palette_label { - margin-left: 8px; - line-height: 24px; - text-align: left; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .palette_icon_container { - font-size: 12px; - line-height: 30px; - background-color: #e8e8e8; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } -} -.config_node_type { - color: #999; - text-align: right; - padding-right: 3px; - &:not(:first-child) { - margin-top: 20px; - } -} -.config_node_none { - color: #ddd; - text-align:right; - padding-right: 3px; -} -.config_node_unused { - border-color: #aaa; - background: #f9f9f9; - border-style: dashed; - color: #aaa; -} diff --git a/editor/templates/index.mst b/editor/templates/index.mst index 20ee1f902..e618b33db 100644 --- a/editor/templates/index.mst +++ b/editor/templates/index.mst @@ -58,16 +58,6 @@
    -
    -
    -
    -
      -
      -
      -
      -
        -
        -