From d96b6e77c0388834e0c578114a23b78a3260cc22 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 23 Sep 2015 22:49:48 +0100 Subject: [PATCH] Allow config nodes to be scoped to an individual Flow --- Gruntfile.js | 1 - editor/js/history.js | 2 +- editor/js/main.js | 18 +++-- editor/js/nodes.js | 39 ++++++--- editor/js/ui/deploy.js | 2 +- editor/js/ui/editor.js | 130 +++++++++++++++++++++++++++--- editor/js/ui/palette.js | 2 +- editor/js/ui/sidebar.js | 1 - editor/js/ui/tab-config.js | 92 --------------------- editor/js/ui/view.js | 18 ++--- editor/js/ui/workspaces.js | 110 +++++++++++++++++++++++-- editor/sass/editor.scss | 33 +++++++- editor/sass/flow.scss | 11 ++- editor/sass/jquery.scss | 23 ++++++ editor/sass/mixins.scss | 6 ++ editor/sass/palette.scss | 2 +- editor/sass/style.scss | 7 +- editor/sass/tabs.scss | 1 + editor/sass/workspace.scss | 75 +++++++++++++++++ editor/sass/workspaceToolbar.scss | 4 +- editor/templates/index.mst | 12 ++- locales/en-US/editor.json | 18 +++-- 22 files changed, 447 insertions(+), 160 deletions(-) delete mode 100644 editor/js/ui/tab-config.js diff --git a/Gruntfile.js b/Gruntfile.js index 136d25f30..1c38d0e92 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -118,7 +118,6 @@ 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/history.js b/editor/js/history.js index 7e5d978e0..0945f4246 100644 --- a/editor/js/history.js +++ b/editor/js/history.js @@ -189,7 +189,7 @@ RED.history = (function() { }); if (ev.node.type === 'subflow') { - $("#menu-item-workspace-menu-"+ev.node.id.replace(".","-")).text(ev.node.name); + $("#menu-item-flow-menu-"+ev.node.id.replace(".","-")).text(ev.node.name); } RED.palette.refresh(); diff --git a/editor/js/main.js b/editor/js/main.js index 305fb7092..1be68e8f1 100644 --- a/editor/js/main.js +++ b/editor/js/main.js @@ -152,6 +152,9 @@ var RED = (function() { statusEnabled = state; RED.view.status(statusEnabled); } + function toggleConfigNodes(state) { + RED.workspaces.toggleConfigNodes(state); + } function loadEditor() { RED.menu.init({id:"btn-sidemenu", @@ -161,6 +164,7 @@ 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}, @@ -171,18 +175,18 @@ var RED = (function() { {id:"menu-item-export-library",label:RED._("menu.label.library"),disabled:true,onselect:RED.library.export} ]}, null, + {id:"menu-item-flow",label:RED._("menu.label.flows"),options:[ + {id:"menu-item-flow-add",label:RED._("menu.label.add"),onselect:RED.workspaces.add}, + {id:"menu-item-flow-edit",label:RED._("menu.label.rename"),onselect:RED.workspaces.edit}, + {id:"menu-item-flow-delete",label:RED._("menu.label.delete"),onselect:RED.workspaces.remove}, + null + ]}, + null, {id:"menu-item-subflow",label:RED._("menu.label.subflows"), options: [ {id:"menu-item-subflow-create",label:RED._("menu.label.createSubflow"),onselect:RED.subflow.createSubflow}, {id:"menu-item-subflow-convert",label:RED._("menu.label.selectionToSubflow"),disabled:true,onselect:RED.subflow.convertToSubflow}, ]}, null, - {id:"menu-item-workspace",label:RED._("menu.label.workspaces"),options:[ - {id:"menu-item-workspace-add",label:RED._("menu.label.add"),onselect:RED.workspaces.add}, - {id:"menu-item-workspace-edit",label:RED._("menu.label.rename"),onselect:RED.workspaces.edit}, - {id:"menu-item-workspace-delete",label:RED._("menu.label.delete"),onselect:RED.workspaces.remove}, - null - ]}, - null, {id:"menu-item-keyboard-shortcuts",label:RED._("menu.label.keyboardShortcuts"),onselect:RED.keyboard.showHelp}, {id:"menu-item-help", label: RED.settings.theme("menu.menu-item-help.label","Node-RED Website"), diff --git a/editor/js/nodes.js b/editor/js/nodes.js index ed1101ed0..d1cc69cef 100644 --- a/editor/js/nodes.js +++ b/editor/js/nodes.js @@ -156,7 +156,6 @@ RED.nodes = (function() { } if (n._def.category == "config") { configNodes[n.id] = n; - RED.sidebar.config.refresh(); } else { n.dirty = true; var updatedConfigNode = false; @@ -176,7 +175,7 @@ RED.nodes = (function() { } } if (updatedConfigNode) { - RED.sidebar.config.refresh(); + // TODO: refresh config tab? } if (n._def.category == "subflows" && typeof n.i === "undefined") { var nextId = 0; @@ -215,7 +214,7 @@ RED.nodes = (function() { if (id in configNodes) { node = configNodes[id]; delete configNodes[id]; - RED.sidebar.config.refresh(); + RED.workspaces.refresh(); } else { node = getNode(id); if (node) { @@ -245,11 +244,11 @@ RED.nodes = (function() { } } if (updatedConfigNode) { - RED.sidebar.config.refresh(); + RED.workspaces.refresh(); } } } - if (node._def.onremove) { + if (node && node._def.onremove) { node._def.onremove.call(n); } return {links:removedLinks,nodes:removedNodes}; @@ -273,16 +272,26 @@ RED.nodes = (function() { var removedNodes = []; var removedLinks = []; var n; + var node; for (n=0;n'+ + .prepend('
'+ ''+ ''+ ''+ diff --git a/editor/js/ui/editor.js b/editor/js/ui/editor.js index 1158446aa..3a40f4f0b 100644 --- a/editor/js/ui/editor.js +++ b/editor/js/ui/editor.js @@ -391,7 +391,7 @@ RED.editor = (function() { if (editing_node) { RED.sidebar.info.refresh(editing_node); } - RED.sidebar.config.refresh(); + RED.workspaces.refresh(); var buttons = $( this ).dialog("option","buttons"); if (buttons.length == 3) { @@ -671,12 +671,18 @@ RED.editor = (function() { ns = node_def.set.id; } + var activeWorkspace = RED.nodes.workspace(RED.workspaces.active()); + if (!activeWorkspace) { + activeWorkspace = RED.nodes.subflow(RED.workspaces.active()); + } if (configNode == null) { configNode = { id: (1+Math.random()*4294967295).toString(16), _def: node_def, - type: type + type: type, + z: activeWorkspace.id, + users: [] } for (var d in node_def.defaults) { if (node_def.defaults[d].value) { @@ -710,7 +716,7 @@ RED.editor = (function() { buttons = buttons.splice(1); } buttons[0].text = "Add"; - $("#node-config-dialog-user-count").html("").hide(); + $("#node-config-dialog-user-count").find("span").html("").parent().hide(); } else { if (buttons.length == 2) { buttons.unshift({ @@ -747,8 +753,60 @@ RED.editor = (function() { }); } buttons[1].text = "Update"; - $("#node-config-dialog-user-count").html(RED._("editor.nodesUse", {count:configNode.users.length})).show(); + $("#node-config-dialog-user-count").find("span").html(RED._("editor.nodesUse", {count:configNode.users.length})).parent().show(); } + + if (configNode._def.exclusive) { + $("#node-config-dialog-scope").hide(); + } else { + $("#node-config-dialog-scope").show(); + } + $("#node-config-dialog-scope-warning").hide(); + + + var nodeUserFlows = {}; + configNode.users.forEach(function(n) { + nodeUserFlows[n.z] = true; + }); + var flowCount = Object.keys(nodeUserFlows).length; + + var tabSelect = $("#node-config-dialog-scope").empty(); + tabSelect.off("change"); + tabSelect.append(''); + tabSelect.append(''); + RED.nodes.eachWorkspace(function(ws) { + var workspaceLabel = ws.label; + if (nodeUserFlows[ws.id]) { + workspaceLabel = "* "+workspaceLabel; + } + tabSelect.append(''); + }); + tabSelect.append(''); + RED.nodes.eachSubflow(function(ws) { + var workspaceLabel = ws.name; + if (nodeUserFlows[ws.id]) { + workspaceLabel = "* "+workspaceLabel; + } + tabSelect.append(''); + }); + if (flowCount > 0) { + tabSelect.on('change',function() { + var newScope = $(this).val(); + if (newScope === '') { + // global scope - everyone can use it + $("#node-config-dialog-scope-warning").hide(); + } else if (!nodeUserFlows[newScope] || flowCount > 1) { + // a user will loose access to it + $("#node-config-dialog-scope-warning").show(); + } else { + $("#node-config-dialog-scope-warning").hide(); + } + }); + } + + //tabSelect.append(''); + tabSelect.i18n(); + $( "#node-config-dialog" ).dialog("option","buttons",buttons); $("#node-config-dialog").i18n(); @@ -776,17 +834,39 @@ RED.editor = (function() { var select = $("#node-input-"+name); var node_def = RED.nodes.getType(type); select.children().remove(); + + var activeWorkspace = RED.nodes.workspace(RED.workspaces.active()); + if (!activeWorkspace) { + activeWorkspace = RED.nodes.subflow(RED.workspaces.active()); + } + + var configNodes = []; + RED.nodes.eachConfig(function(config) { - if (config.type == type) { + if (config.type == type && (!config.z || config.z === activeWorkspace.id)) { var label = ""; if (typeof node_def.label == "function") { label = node_def.label.call(config); } else { label = node_def.label; } - select.append(''); + configNodes.push({id:config.id,label:label}); } }); + + configNodes.sort(function(A,B) { + if (A.label < B.label) { + return -1; + } else if (A.label > B.label) { + return 1; + } + return 0; + }); + + configNodes.forEach(function(cn) { + select.append(''); + }); + select.append(''); window.setTimeout(function() { select.change();},50); } @@ -813,7 +893,7 @@ RED.editor = (function() { var configNode; var d; var input; - + var scope = $("#node-config-dialog-scope").val(); if (configAdding) { configNode = {type:configType,id:configId,users:[]}; for (d in configTypeDef.defaults) { @@ -828,6 +908,7 @@ RED.editor = (function() { } configNode.label = configTypeDef.label; configNode._def = configTypeDef; + configNode.z = scope; RED.nodes.add(configNode); updateConfigNodeSelect(configProperty,configType,configNode.id); } else { @@ -842,6 +923,26 @@ RED.editor = (function() { } } } + if (scope) { + configNode.users = configNode.users.filter(function(n) { + var keep = true; + for (var d in n._def.defaults) { + if (n._def.defaults.hasOwnProperty(d)) { + if (n._def.defaults[d].type === configNode.type && + n[d] === configNode.id && + n.z !== scope) { + keep = false; + n[d] = null; + n.dirty = true; + n.changed = true; + validateNode(n); + } + } + } + return keep; + }); + } + configNode.z = scope; updateConfigNodeSelect(configProperty,configType,configId); } if (configTypeDef.credentials) { @@ -857,6 +958,7 @@ RED.editor = (function() { } RED.nodes.dirty(true); + RED.view.redraw(true); $(this).dialog("close"); } @@ -903,7 +1005,16 @@ RED.editor = (function() { if (RED.view.state() != RED.state.EDITING) { RED.keyboard.enable(); } - RED.sidebar.config.refresh(); + RED.workspaces.refresh(); + }, + create: function() { + $("#node-config-dialog").parent().find("div.ui-dialog-buttonpane") + .prepend('
'); + + $("#node-config-dialog").parent().find('.ui-dialog-titlebar').append(''); + $("#node-config-dialog").parent().draggable({ + cancel: '.ui-dialog-content, .ui-dialog-titlebar-close, #node-config-dialog-scope-container' + }); } }); } @@ -933,7 +1044,7 @@ RED.editor = (function() { changes['name'] = editing_node.name; editing_node.name = newName; changed = true; - $("#menu-item-workspace-menu-"+editing_node.id.replace(".","-")).text(newName); + $("#menu-item-flow-menu-"+editing_node.id.replace(".","-")).text(newName); } RED.palette.refresh(); @@ -996,6 +1107,7 @@ RED.editor = (function() { RED.view.state(RED.state.DEFAULT); } RED.sidebar.info.refresh(editing_node); + RED.workspaces.refresh(); editing_node = null; } }); diff --git a/editor/js/ui/palette.js b/editor/js/ui/palette.js index d042d5eca..5382d3801 100644 --- a/editor/js/ui/palette.js +++ b/editor/js/ui/palette.js @@ -61,7 +61,7 @@ RED.palette = (function() { } function setLabel(type, el,label) { - var nodeWidth = 80; + var nodeWidth = 82; var nodeHeight = 25; var lineHeight = 20; var portHeight = 10; diff --git a/editor/js/ui/sidebar.js b/editor/js/ui/sidebar.js index 5149a96dc..f1320782a 100644 --- a/editor/js/ui/sidebar.js +++ b/editor/js/ui/sidebar.js @@ -188,7 +188,6 @@ 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/tab-config.js b/editor/js/ui/tab-config.js deleted file mode 100644 index b8de117d3..000000000 --- a/editor/js/ui/tab-config.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * Copyright 2013 IBM Corp. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - **/ -RED.sidebar.config = (function() { - - var content = document.createElement("div"); - content.style.paddingTop = "4px"; - content.style.paddingLeft = "4px"; - content.style.paddingRight = "4px"; - - var list = $("
    ",{class:"tab-config-list"}).appendTo(content); - - function init() { - RED.sidebar.addTab({ - id: "config", - label: RED._("sidebar.config.label"), - name: RED._("sidebar.config.name"), - content: content, - closeable: true, - visible: false, - onchange: function() { refresh(); } - }); - } - function show() { - refresh(); - RED.sidebar.show("config"); - } - - function refresh() { - list.empty(); - RED.nodes.eachConfig(function(node) { - var li = list.find("#tab-config-list-type-"+node.type); - if (li.length === 0) { - li = $("
  • ",{id:"tab-config-list-type-"+node.type}).appendTo(list); - $('
    '+node.type+'
    ').appendTo(li); - } - var label = ""; - if (typeof node._def.label == "function") { - label = node._def.label.call(node); - } else { - label = node._def.label; - } - label = label || " "; - - var entry = $('
    ').appendTo(li); - 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(); - }); - - $('
    '+label+'
    ').appendTo(entry); - $('
    '+node.users.length+'
    ').appendTo(entry); - }); - } - return { - init:init, - show:show, - refresh:refresh - } -})(); diff --git a/editor/js/ui/view.js b/editor/js/ui/view.js index 5ab3c5a20..41b0cbb33 100644 --- a/editor/js/ui/view.js +++ b/editor/js/ui/view.js @@ -256,8 +256,8 @@ RED.view = (function() { activeSubflow = RED.nodes.subflow(event.workspace); - RED.menu.setDisabled("menu-item-workspace-edit", activeSubflow); - RED.menu.setDisabled("menu-item-workspace-delete",RED.workspaces.count() == 1 || activeSubflow); + RED.menu.setDisabled("menu-item-flow-edit", activeSubflow); + RED.menu.setDisabled("menu-item-flow-delete",RED.workspaces.count() == 1 || activeSubflow); if (workspaceScrollPositions[event.workspace]) { chart.scrollLeft(workspaceScrollPositions[event.workspace].left); @@ -407,8 +407,8 @@ RED.view = (function() { lasso = vis.append('rect') .attr("ox",point[0]) .attr("oy",point[1]) - .attr("rx",2) - .attr("ry",2) + .attr("rx",1) + .attr("ry",1) .attr("x",point[0]) .attr("y",point[1]) .attr("width",0) @@ -1370,14 +1370,7 @@ RED.view = (function() { var statusLabel = status.append("svg:text") .attr("class","node_status_label") - .attr('x',20).attr('y',9) - .style({ - 'stroke-width': 0, - 'fill': '#888', - 'font-size':'9pt', - 'stroke':'#000', - 'text-anchor':'start' - }); + .attr('x',20).attr('y',9); //node.append("circle").attr({"class":"centerDot","cx":0,"cy":0,"r":5}); @@ -1802,7 +1795,6 @@ RED.view = (function() { if (updateActive) { updateActiveNodes(); } - RED.workspaces.refresh(); redraw(); }, focus: focusView, diff --git a/editor/js/ui/workspaces.js b/editor/js/ui/workspaces.js index 001d4b9b4..57730c733 100644 --- a/editor/js/ui/workspaces.js +++ b/editor/js/ui/workspaces.js @@ -90,6 +90,7 @@ RED.workspaces = (function() { activeWorkspace = tab.id; event.workspace = activeWorkspace; RED.events.emit("workspace:change",event); + refreshConfigNodeList(); }, ondblclick: function(tab) { if (tab.type != "subflow") { @@ -99,18 +100,18 @@ RED.workspaces = (function() { } }, onadd: function(tab) { - RED.menu.addItem("menu-item-workspace",{ - id:"menu-item-workspace-menu-"+tab.id.replace(".","-"), + RED.menu.addItem("menu-item-flow",{ + id:"menu-item-flow-menu-"+tab.id.replace(".","-"), label:tab.label, onselect:function() { workspace_tabs.activateTab(tab.id); } }); - RED.menu.setDisabled("menu-item-workspace-delete",workspace_tabs.count() == 1); + RED.menu.setDisabled("menu-item-flow-delete",workspace_tabs.count() == 1); }, onremove: function(tab) { - RED.menu.setDisabled("menu-item-workspace-delete",workspace_tabs.count() == 1); - RED.menu.removeItem("menu-item-workspace-menu-"+tab.id.replace(".","-")); + RED.menu.setDisabled("menu-item-flow-delete",workspace_tabs.count() == 1); + RED.menu.removeItem("menu-item-flow-menu-"+tab.id.replace(".","-")); }, minimumActiveTabWidth: 150 }); @@ -140,7 +141,7 @@ RED.workspaces = (function() { if (workspace.label != label) { workspace_tabs.renameTab(workspace.id,label); RED.nodes.dirty(true); - $("#menu-item-workspace-menu-"+workspace.id.replace(".","-")).text(label); + $("#menu-item-flow-menu-"+workspace.id.replace(".","-")).text(label); // TODO: update entry in menu } $( this ).dialog( "close" ); @@ -196,7 +197,19 @@ RED.workspaces = (function() { $('#btn-workspace-add-tab').on("click",function(e) {addWorkspace(); e.preventDefault()}); RED.events.on("sidebar:resize",workspace_tabs.resize); - RED.menu.setAction('menu-item-workspace-delete',function() { + $(".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-flow-delete',function() { deleteWorkspace(RED.nodes.workspace(activeWorkspace)); }); @@ -214,6 +227,84 @@ 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, @@ -246,9 +337,14 @@ RED.workspaces = (function() { workspace_tabs.renameTab(sf.id,sf.name); } }); + refreshConfigNodeList(); }, resize: function() { workspace_tabs.resize(); + }, + toggleConfigNodes: function(state) { + refreshConfigNodeList(); + $("#workspace").toggleClass("config-open",state); } } })(); diff --git a/editor/sass/editor.scss b/editor/sass/editor.scss index 04f9a7271..fe1722bc1 100644 --- a/editor/sass/editor.scss +++ b/editor/sass/editor.scss @@ -23,8 +23,8 @@ border-color: rgb(214, 97, 95) !important; } -.leftButton { - margin-right: 200px !important; +.ui-dialog .ui-dialog-buttonpane button.leftButton { + margin-right: 40px; } .form-row { @@ -42,7 +42,6 @@ .form-tips { background: #ffe; - font-size: 12px; padding: 8px; border-radius: 2px; border: 1px solid $secondary-border-color; @@ -67,7 +66,7 @@ .editor-button { @include workspace-button; height: 34px; - line-height: 30px; + line-height: 32px; font-size: 13px; border-radius: 4px; padding: 0 10px; @@ -79,3 +78,29 @@ border-radius: 2px; padding: 0 5px; } + +#node-config-dialog-scope-container { + cursor: auto; + float: right; + font-size: 12px !important; +} +#node-config-dialog-scope-warning { + display: inline-block; + margin-right: 5px; + color: #AD1625; + vertical-align: middle; +} +#node-config-dialog-scope { + margin: 1px 0 0 0; + padding: 0; + height: 22px; + width: 110px; +} +#node-config-dialog-user-count { + vertical-align: middle; + display:inline-block; + margin-top: 10px; + margin-right: 20px; + float:left; + font-size: 12px; +} diff --git a/editor/sass/flow.scss b/editor/sass/flow.scss index fbff71771..8b0b130f3 100644 --- a/editor/sass/flow.scss +++ b/editor/sass/flow.scss @@ -19,7 +19,7 @@ } .lasso { - stroke-width: 2px; + stroke-width: 1px; stroke: #ff7f0e; fill: rgba(20,125,255,0.1); stroke-dasharray: 10 5; @@ -165,6 +165,15 @@ .node_hovered { } +.node_status_label { + @include disable-selection; + stroke-width: 0; + fill: #888; + font-size:9pt; + stroke:#000; + text-anchor:start; +} + .port_hovered { stroke: $port-selected-color; fill: $port-selected-color; diff --git a/editor/sass/jquery.scss b/editor/sass/jquery.scss index 88045ead2..f8f71c9ce 100644 --- a/editor/sass/jquery.scss +++ b/editor/sass/jquery.scss @@ -14,6 +14,15 @@ * limitations under the License. **/ +.ui-widget { + font-size: 14px !important; + font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important; +} +.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { + font-size: 14px !important; + font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important; +} + /* jQuery Theme overrides */ .ui-tabs .ui-tabs-panel { padding: 0px; @@ -34,6 +43,9 @@ .ui-dialog .ui-dialog-content { padding: 25px 25px 10px 25px; } +.ui-dialog .ui-dialog-title { + width: auto; +} .ui-dialog .ui-dialog-titlebar { padding: 10px; background: #f3f3f3; @@ -50,3 +62,14 @@ .ui-dialog-no-close .ui-dialog-titlebar-close { display: none; } + +.ui-dialog-buttonset { + text-align: right; +} + +.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { + float: none; +} +.ui-dialog .ui-dialog-buttonpane { + padding: .3em 1em .5em 1em; +} diff --git a/editor/sass/mixins.scss b/editor/sass/mixins.scss index 881eb8317..2bce07ba8 100644 --- a/editor/sass/mixins.scss +++ b/editor/sass/mixins.scss @@ -50,10 +50,12 @@ } &:not(.disabled):focus { color: $workspace-button-color-focus; + text-decoration: none; } &:not(.disabled):active { color: $workspace-button-color-active; background: $workspace-button-background-active; + text-decoration: none; } } @mixin component-footer { @@ -75,6 +77,10 @@ line-height: 17px; width: 18px; height: 18px; + &.text-button { + width: auto; + padding: 0 5px; + } } @mixin component-shadow { diff --git a/editor/sass/palette.scss b/editor/sass/palette.scss index 47fa6c05d..4f7939a02 100644 --- a/editor/sass/palette.scss +++ b/editor/sass/palette.scss @@ -200,7 +200,7 @@ left: auto; right: 0; border-right: none; - border-left: 2px solid rgba(0,0,0,0.1); + border-left: 1px solid rgba(0,0,0,0.1); } .palette_icon { display: inline-block; diff --git a/editor/sass/style.scss b/editor/sass/style.scss index 2a7efe54d..49a339cff 100644 --- a/editor/sass/style.scss +++ b/editor/sass/style.scss @@ -47,9 +47,10 @@ body { - font: 14px "Helvetica" !important; - padding-top: 100px; - background: #f3f3f3; + font-size: 14px; + font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; + padding-top: 100px; + background: #f3f3f3; } #main-container { diff --git a/editor/sass/tabs.scss b/editor/sass/tabs.scss index a9a0afa83..2e97fa643 100644 --- a/editor/sass/tabs.scss +++ b/editor/sass/tabs.scss @@ -46,6 +46,7 @@ ul.red-ui-tabs li { ul.red-ui-tabs li a.red-ui-tab-label { display: block; + font-size: 14px; padding-left: 12px; width: 100%; height: 100%; diff --git a/editor/sass/workspace.scss b/editor/sass/workspace.scss index 8ea280d70..84a830d50 100644 --- a/editor/sass/workspace.scss +++ b/editor/sass/workspace.scss @@ -24,8 +24,22 @@ left:0px; right:0px; box-sizing:border-box; + 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; } @@ -73,3 +87,64 @@ #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/sass/workspaceToolbar.scss b/editor/sass/workspaceToolbar.scss index 9b4ac5b4f..1bee0d510 100644 --- a/editor/sass/workspaceToolbar.scss +++ b/editor/sass/workspaceToolbar.scss @@ -23,13 +23,15 @@ position: absolute; top: 35px; left:0; - width: 100%; + right: 0; padding: 7px; height: 40px; box-sizing: border-box; background: #fff; border-bottom: 1px solid $secondary-border-color; white-space: nowrap; + transition: right 0.2s ease; + overflow: hidden; .button { @include workspace-button; diff --git a/editor/templates/index.mst b/editor/templates/index.mst index 714925e8b..10968d3f2 100644 --- a/editor/templates/index.mst +++ b/editor/templates/index.mst @@ -58,6 +58,16 @@
      +
      +
      +
      +
        +
        +
        +
        +
          +
          +