frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Merge pull request #2556 from node-red/outliner

Browse Source 
Add Outliner to Info sidebar and add help sidebar
This commit is contained in:
Nick O'Leary 2020-05-11 16:26:41 +01:00 committed by GitHub
commit f2e2c7e4d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
33 changed files with 1856 additions and 416 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gruntfile.js
View File

@ -165,6 +165,8 @@ module.exports = function(grunt) {
"packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js", "packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js",
"packages/node_modules/@node-red/editor-client/src/js/ui/palette.js", "packages/node_modules/@node-red/editor-client/src/js/ui/palette.js",
"packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js", "packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js",
"packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js",
"packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js",
"packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js", "packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js",
"packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js", "packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js",
"packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js", "packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js",

13
packages/node_modules/@node-red/editor-client/locales/en-US/editor.json vendored
View File

@ -585,7 +585,18 @@
"nodeHelp": "Node Help", "nodeHelp": "Node Help",
"none":"None", "none":"None",
"arrayItems": "__count__ items", "arrayItems": "__count__ items",
"showTips":"You can open the tips from the settings panel" "showTips":"You can open the tips from the settings panel",
"outline": "Outline",
"globalConfig": "Global Configuration Nodes"
},
"help": {
"name": "Help",
"label": "help",
"search": "Search help",
"nodeHelp": "Node Help",
"showHelp": "Show help",
"showTopics": "Show topics",
"noHelp": "No help topic selected"
}, },
"config": { "config": {
"name": "Configuration nodes", "name": "Configuration nodes",

4
packages/node_modules/@node-red/editor-client/src/js/nodes.js vendored
View File

@ -348,6 +348,9 @@ RED.nodes = (function() {
workspacesOrder.splice(targetIndex,0,ws.id); workspacesOrder.splice(targetIndex,0,ws.id);
} }
RED.events.emit('flows:add',ws); RED.events.emit('flows:add',ws);
if (targetIndex !== undefined) {
RED.events.emit('flows:reorder',workspacesOrder)
}
} }
function getWorkspace(id) { function getWorkspace(id) {
return workspaces[id]; return workspaces[id];
@ -1521,7 +1524,6 @@ RED.nodes = (function() {
groupsByZ = {}; groupsByZ = {};
var subflowIds = Object.keys(subflows); var subflowIds = Object.keys(subflows);
subflows = {};
subflowIds.forEach(function(id) { subflowIds.forEach(function(id) {
RED.subflow.removeSubflow(id) RED.subflow.removeSubflow(id)
}); });

9
packages/node_modules/@node-red/editor-client/src/js/red.js vendored
View File

@ -124,9 +124,9 @@ var RED = (function() {
$("#red-ui-palette > .red-ui-palette-spinner").hide(); $("#red-ui-palette > .red-ui-palette-spinner").hide();
$(".red-ui-palette-scroll").removeClass("hide"); $(".red-ui-palette-scroll").removeClass("hide");
$("#red-ui-palette-search").removeClass("hide"); $("#red-ui-palette-search").removeClass("hide");
loadFlows(function() {
if (RED.settings.theme("projects.enabled",false)) { if (RED.settings.theme("projects.enabled",false)) {
RED.projects.refresh(function(activeProject) { RED.projects.refresh(function(activeProject) {
loadFlows(function() {
RED.sidebar.info.refresh() RED.sidebar.info.refresh()
if (!activeProject) { if (!activeProject) {
// Projects enabled but no active project // Projects enabled but no active project
@ -140,12 +140,14 @@ var RED = (function() {
} }
completeLoad(); completeLoad();
}); });
});
} else { } else {
loadFlows(function() {
// Projects disabled by the user // Projects disabled by the user
RED.sidebar.info.refresh() RED.sidebar.info.refresh()
completeLoad(); completeLoad();
}
}); });
}
} else { } else {
var config = configs.shift(); var config = configs.shift();
appendNodeConfig(config,stepConfig); appendNodeConfig(config,stepConfig);
@ -431,8 +433,7 @@ var RED = (function() {
'<img width="50px" src="red/images/node-red-icon.svg" />'+ '<img width="50px" src="red/images/node-red-icon.svg" />'+
'</div>'; '</div>';
RED.sidebar.info.set(aboutHeader+RED.utils.renderMarkdown(data)); RED.sidebar.help.set(aboutHeader+RED.utils.renderMarkdown(data));
RED.sidebar.info.show();
}); });
} }

25
packages/node_modules/@node-red/editor-client/src/js/ui/common/colorPicker.js vendored
View File

@ -1,26 +1,5 @@
RED.colorPicker = (function() { RED.colorPicker = (function() {
function getDarkerColor(c) {
var r,g,b;
if (/^#[a-f0-9]{6}$/i.test(c)) {
r = parseInt(c.substring(1, 3), 16);
g = parseInt(c.substring(3, 5), 16);
b = parseInt(c.substring(5, 7), 16);
} else if (/^#[a-f0-9]{3}$/i.test(c)) {
r = parseInt(c.substring(1, 2)+c.substring(1, 2), 16);
g = parseInt(c.substring(2, 3)+c.substring(2, 3), 16);
b = parseInt(c.substring(3, 4)+c.substring(3, 4), 16);
} else {
return c;
}
var l = 0.3 * r/255 + 0.59 * g/255 + 0.11 * b/255 ;
r = Math.max(0,r-50);
g = Math.max(0,g-50);
b = Math.max(0,b-50);
var s = ((r<<16) + (g<<8) + b).toString(16);
return '#'+'000000'.slice(0, 6-s.length)+s;
}
function create(options) { function create(options) {
var color = options.value; var color = options.value;
var id = options.id; var id = options.id;
@ -57,7 +36,7 @@ RED.colorPicker = (function() {
"background-color": color, "background-color": color,
"opacity": opacity "opacity": opacity
}); });
var border = getDarkerColor(color); var border = RED.utils.getDarkerColor(color);
if (border[0] === '#') { if (border[0] === '#') {
border += Math.round(255*Math.floor(opacity*100)/100).toString(16); border += Math.round(255*Math.floor(opacity*100)/100).toString(16);
} else { } else {
@ -132,7 +111,7 @@ RED.colorPicker = (function() {
height: height+"px", height: height+"px",
margin: margin+"px", margin: margin+"px",
backgroundColor: col, backgroundColor: col,
"border-color": getDarkerColor(col) "border-color": RED.utils.getDarkerColor(col)
}).appendTo(row); }).appendTo(row);
button.on("click", function (e) { button.on("click", function (e) {
e.preventDefault(); e.preventDefault();

16
packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js vendored
View File

@ -183,7 +183,7 @@
if (this.options.resizeItem) { if (this.options.resizeItem) {
var that = this; var that = this;
this.element.children().each(function(i) { this.element.children().each(function(i) {
that.options.resizeItem($(this).find(".red-ui-editableList-item-content"),i); that.options.resizeItem($(this).children(".red-ui-editableList-item-content"),i);
}); });
} }
}, },
@ -223,7 +223,7 @@
var items = this.element.children(); var items = this.element.children();
var that = this; var that = this;
items.sort(function(A,B) { items.sort(function(A,B) {
return that.activeSort($(A).find(".red-ui-editableList-item-content").data('data'),$(B).find(".red-ui-editableList-item-content").data('data')); return that.activeSort($(A).children(".red-ui-editableList-item-content").data('data'),$(B).children(".red-ui-editableList-item-content").data('data'));
}); });
$.each(items,function(idx,li) { $.each(items,function(idx,li) {
that.element.append(li); that.element.append(li);
@ -305,7 +305,7 @@
} }
if (this.options.addItem) { if (this.options.addItem) {
var index = that.element.children().length-1; var index = that.element.children().length-1;
setTimeout(function() { // setTimeout(function() {
that.options.addItem(row,index,data); that.options.addItem(row,index,data);
if (that.activeFilter) { if (that.activeFilter) {
try { try {
@ -321,7 +321,7 @@
that.uiContainer.scrollTop(that.element.height()); that.uiContainer.scrollTop(that.element.height());
},0); },0);
} }
},0); // },0);
} }
}, },
addItem: function(data) { addItem: function(data) {
@ -334,7 +334,7 @@
}, },
removeItem: function(data) { removeItem: function(data) {
var items = this.element.children().filter(function(f) { var items = this.element.children().filter(function(f) {
return data === $(this).find(".red-ui-editableList-item-content").data('data'); return data === $(this).children(".red-ui-editableList-item-content").data('data');
}); });
items.remove(); items.remove();
if (this.options.removeItem) { if (this.options.removeItem) {
@ -342,7 +342,7 @@
} }
}, },
items: function() { items: function() {
return this.element.children().map(function(i) { return $(this).find(".red-ui-editableList-item-content"); }); return this.element.children().map(function(i) { return $(this).children(".red-ui-editableList-item-content"); });
}, },
empty: function() { empty: function() {
this.element.empty(); this.element.empty();
@ -365,14 +365,14 @@
}, },
show: function(item) { show: function(item) {
var items = this.element.children().filter(function(f) { var items = this.element.children().filter(function(f) {
return item === $(this).find(".red-ui-editableList-item-content").data('data'); return item === $(this).children(".red-ui-editableList-item-content").data('data');
}); });
if (items.length > 0) { if (items.length > 0) {
this.uiContainer.scrollTop(this.uiContainer.scrollTop()+items.position().top) this.uiContainer.scrollTop(this.uiContainer.scrollTop()+items.position().top)
} }
}, },
getItem: function(li) { getItem: function(li) {
var el = li.find(".red-ui-editableList-item-content"); var el = li.children(".red-ui-editableList-item-content");
if (el.length) { if (el.length) {
return el.data('data'); return el.data('data');
} else { } else {

15
packages/node_modules/@node-red/editor-client/src/js/ui/common/panels.js vendored
View File

@ -29,6 +29,10 @@ RED.panels = (function() {
if (!vertical) { if (!vertical) {
container.addClass("red-ui-panels-horizontal"); container.addClass("red-ui-panels-horizontal");
} }
$(children[0]).addClass("red-ui-panel");
$(children[1]).addClass("red-ui-panel");
var separator = $('<div class="red-ui-panels-separator"></div>').insertAfter(children[0]); var separator = $('<div class="red-ui-panels-separator"></div>').insertAfter(children[0]);
var startPosition; var startPosition;
var panelSizes = []; var panelSizes = [];
@ -52,11 +56,11 @@ RED.panels = (function() {
var newSizes = [panelSizes[0]+delta,panelSizes[1]-delta]; var newSizes = [panelSizes[0]+delta,panelSizes[1]-delta];
if (vertical) { if (vertical) {
$(children[0]).height(newSizes[0]); $(children[0]).height(newSizes[0]);
$(children[1]).height(newSizes[1]); // $(children[1]).height(newSizes[1]);
ui.position.top -= delta; ui.position.top -= delta;
} else { } else {
$(children[0]).width(newSizes[0]); $(children[0]).width(newSizes[0]);
$(children[1]).width(newSizes[1]); // $(children[1]).width(newSizes[1]);
ui.position.left -= delta; ui.position.left -= delta;
} }
if (options.resize) { if (options.resize) {
@ -71,6 +75,9 @@ RED.panels = (function() {
var panel = { var panel = {
ratio: function(ratio) { ratio: function(ratio) {
if (ratio === undefined) {
return panelRatio;
}
panelRatio = ratio; panelRatio = ratio;
modifiedSizes = true; modifiedSizes = true;
if (ratio === 0 || ratio === 1) { if (ratio === 0 || ratio === 1) {
@ -99,10 +106,10 @@ RED.panels = (function() {
panelSizes = [topPanelSize,bottomPanelSize]; panelSizes = [topPanelSize,bottomPanelSize];
if (vertical) { if (vertical) {
$(children[0]).outerHeight(panelSizes[0]); $(children[0]).outerHeight(panelSizes[0]);
$(children[1]).outerHeight(panelSizes[1]); // $(children[1]).outerHeight(panelSizes[1]);
} else { } else {
$(children[0]).outerWidth(panelSizes[0]); $(children[0]).outerWidth(panelSizes[0]);
$(children[1]).outerWidth(panelSizes[1]); // $(children[1]).outerWidth(panelSizes[1]);
} }
} }
if (options.resize) { if (options.resize) {

26
packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js vendored
View File

@ -136,6 +136,23 @@ RED.popover = (function() {
closePopup(true); closePopup(true);
}); });
} }
if (trigger === 'hover' && options.interactive) {
div.on('mouseenter', function(e) {
clearTimeout(timer);
active = true;
})
div.on('mouseleave', function(e) {
if (timer) {
clearTimeout(timer);
}
if (active) {
timer = setTimeout(function() {
active = false;
closePopup();
},delay.hide);
}
})
}
if (instant) { if (instant) {
div.show(); div.show();
} else { } else {
@ -163,8 +180,10 @@ RED.popover = (function() {
if (trigger === 'hover') { if (trigger === 'hover') {
target.on('mouseenter',function(e) { target.on('mouseenter',function(e) {
clearTimeout(timer); clearTimeout(timer);
if (!active) {
active = true; active = true;
timer = setTimeout(openPopup,delay.show); timer = setTimeout(openPopup,delay.show);
}
}); });
target.on('mouseleave disabled', function(e) { target.on('mouseleave disabled', function(e) {
if (timer) { if (timer) {
@ -278,6 +297,7 @@ RED.popover = (function() {
var closeCallback = options.onclose; var closeCallback = options.onclose;
var target = options.target; var target = options.target;
var align = options.align || "left"; var align = options.align || "left";
var offset = options.offset || [0,0];
var pos = target.offset(); var pos = target.offset();
var targetWidth = target.width(); var targetWidth = target.width();
@ -285,7 +305,7 @@ RED.popover = (function() {
var panelHeight = panel.height(); var panelHeight = panel.height();
var panelWidth = panel.width(); var panelWidth = panel.width();
var top = (targetHeight+pos.top); var top = (targetHeight+pos.top) + offset[1];
if (top+panelHeight > $(window).height()) { if (top+panelHeight > $(window).height()) {
top -= (top+panelHeight)-$(window).height() + 5; top -= (top+panelHeight)-$(window).height() + 5;
} }
@ -296,12 +316,12 @@ RED.popover = (function() {
if (align === "left") { if (align === "left") {
panel.css({ panel.css({
top: top+"px", top: top+"px",
left: (pos.left)+"px", left: (pos.left+offset[0])+"px",
}); });
} else if(align === "right") { } else if(align === "right") {
panel.css({ panel.css({
top: top+"px", top: top+"px",
left: (pos.left-panelWidth)+"px", left: (pos.left-panelWidth+offset[0])+"px",
}); });
} }
panel.slideDown(100); panel.slideDown(100);

394
packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js vendored
View File

@ -27,7 +27,8 @@
* *
* methods: * methods:
* - data(items) - clears existing items and replaces with new data * - data(items) - clears existing items and replaces with new data
* * - clearSelection - clears the selected items
* - filter(filterFunc) - filters the tree using the provided function
* events: * events:
* - treelistselect : function(event, item) {} * - treelistselect : function(event, item) {}
* - treelistconfirm : function(event,item) {} * - treelistconfirm : function(event,item) {}
@ -59,9 +60,9 @@
* properties and functions: * properties and functions:
* *
* item.parent - set to the parent item * item.parent - set to the parent item
* item.depth - the depth in the tree (0 == root)
* item.treeList.container * item.treeList.container
* item.treeList.label - the label element for the item * item.treeList.label - the label element for the item
* item.treeList.depth - the depth in the tree (0 == root)
* item.treeList.parentList - the editableList instance this item is in * item.treeList.parentList - the editableList instance this item is in
* item.treeList.remove() - removes the item from the tree * item.treeList.remove() - removes the item from the tree
* item.treeList.makeLeaf(detachChildElements) - turns an element with children into a leaf node, * item.treeList.makeLeaf(detachChildElements) - turns an element with children into a leaf node,
@ -78,8 +79,8 @@
* Optionally selects the item after adding. * Optionally selects the item after adding.
* item.treeList.expand(done) - expands the parent item to show children. Optional 'done' callback. * item.treeList.expand(done) - expands the parent item to show children. Optional 'done' callback.
* item.treeList.collapse() - collapse the parent item to hide children. * item.treeList.collapse() - collapse the parent item to hide children.
* * item.treeList.sortChildren(sortFunction) - does a one-time sort of the children using sortFunction
* * item.treeList.replaceElement(element) - replace the custom element for the item
* *
* *
*/ */
@ -100,6 +101,8 @@
var target; var target;
switch(evt.keyCode) { switch(evt.keyCode) {
case 13: // ENTER case 13: // ENTER
evt.preventDefault();
evt.stopPropagation();
if (selected.children) { if (selected.children) {
if (selected.treeList.container.hasClass("expanded")) { if (selected.treeList.container.hasClass("expanded")) {
selected.treeList.collapse() selected.treeList.collapse()
@ -112,6 +115,8 @@
break; break;
case 37: // LEFT case 37: // LEFT
evt.preventDefault();
evt.stopPropagation();
if (selected.children&& selected.treeList.container.hasClass("expanded")) { if (selected.children&& selected.treeList.container.hasClass("expanded")) {
selected.treeList.collapse() selected.treeList.collapse()
} else if (selected.parent) { } else if (selected.parent) {
@ -119,6 +124,8 @@
} }
break; break;
case 38: // UP case 38: // UP
evt.preventDefault();
evt.stopPropagation();
target = that._getPreviousSibling(selected); target = that._getPreviousSibling(selected);
if (target) { if (target) {
target = that._getLastDescendant(target); target = that._getLastDescendant(target);
@ -128,6 +135,8 @@
} }
break; break;
case 39: // RIGHT case 39: // RIGHT
evt.preventDefault();
evt.stopPropagation();
if (selected.children) { if (selected.children) {
if (!selected.treeList.container.hasClass("expanded")) { if (!selected.treeList.container.hasClass("expanded")) {
selected.treeList.expand() selected.treeList.expand()
@ -135,6 +144,8 @@
} }
break break
case 40: //DOWN case 40: //DOWN
evt.preventDefault();
evt.stopPropagation();
if (selected.children && Array.isArray(selected.children) && selected.children.length > 0 && selected.treeList.container.hasClass("expanded")) { if (selected.children && Array.isArray(selected.children) && selected.children.length > 0 && selected.treeList.container.hasClass("expanded")) {
target = selected.children[0]; target = selected.children[0];
} else { } else {
@ -151,7 +162,7 @@
} }
}); });
this._data = []; this._data = [];
this._items = {};
this._topList = $('<ol class="red-ui-treeList-list">').css({ this._topList = $('<ol class="red-ui-treeList-list">').css({
position:'absolute', position:'absolute',
top: 0, top: 0,
@ -244,7 +255,8 @@
that._trigger("changeparent",null,evt); that._trigger("changeparent",null,evt);
}); });
that._trigger("sort",null,parent); that._trigger("sort",null,parent);
} },
filter: parent.treeList.childFilter
}); });
if (!!that.options.sortable) { if (!!that.options.sortable) {
subtree.addClass('red-ui-treeList-sortable'); subtree.addClass('red-ui-treeList-sortable');
@ -289,21 +301,178 @@
} }
return reparentedEvent; return reparentedEvent;
}, },
_addSubtree: function(parentList, container, item, depth) { _initItem: function(item,depth) {
if (item.treeList) {
return;
}
var that = this; var that = this;
this._items[item.id] = item;
item.treeList = {}; item.treeList = {};
item.treeList.depth = depth; item.depth = depth;
item.treeList.container = container;
item.treeList.parentList = parentList;
item.treeList.remove = function() { item.treeList.remove = function() {
parentList.editableList('removeItem',item); if (item.treeList.parentList) {
item.treeList.parentList.editableList('removeItem',item);
}
if (item.parent) { if (item.parent) {
var index = item.parent.children.indexOf(item); var index = item.parent.children.indexOf(item);
item.parent.children.splice(index,1) item.parent.children.splice(index,1)
that._trigger("sort",null,item.parent); that._trigger("sort",null,item.parent);
} }
delete(that._items[item.id]);
} }
item.treeList.insertChildAt = function(newItem,position,select) {
newItem.parent = item;
item.children.splice(position,0,newItem);
var processChildren = function(parent,i) {
that._initItem(i,parent.depth+1)
i.parent = parent;
if (i.children && typeof i.children !== 'function') {
i.children.forEach(function(item) {
processChildren(i, item, parent.depth+2)
});
}
}
processChildren(item,newItem);
if (!item.deferBuild) {
item.treeList.childList.editableList('insertItemAt',newItem,position)
if (select) {
setTimeout(function() {
that.select(newItem)
},100);
}
that._trigger("sort",null,item);
}
}
item.treeList.addChild = function(newItem,select) {
item.treeList.insertChildAt(newItem,item.children.length,select);
}
item.treeList.expand = function(done) {
if (!item.children) {
if (done) { done(false) }
return;
}
if (!item.treeList.container) {
item.expanded = true;
if (done) { done(false) }
return;
}
var container = item.treeList.container;
if (container.hasClass("expanded")) {
if (done) { done(false) }
return;
}
if (!container.hasClass("built") && (item.deferBuild || typeof item.children === 'function')) {
container.addClass('built');
var childrenAdded = false;
var spinner;
var startTime = 0;
var completeBuild = function(children) {
childrenAdded = true;
item.treeList.childList = that._addChildren(container,item,children,depth).hide();
var delta = Date.now() - startTime;
if (delta < 400) {
setTimeout(function() {
item.treeList.childList.slideDown('fast');
if (spinner) {
spinner.remove();
}
},400-delta);
} else {
item.treeList.childList.slideDown('fast');
if (spinner) {
spinner.remove();
}
}
item.expanded = true;
if (done) { done(true) }
that._trigger("childrenloaded",null,item)
}
if (typeof item.children === 'function') {
item.children(completeBuild,item);
} else {
delete item.deferBuild;
completeBuild(item.children);
}
if (!childrenAdded) {
startTime = Date.now();
spinner = $('<div class="red-ui-treeList-spinner">').css({
"background-position": (35+depth*20)+'px 50%'
}).appendTo(container);
}
} else {
if (that._loadingData) {
item.treeList.childList.show();
} else {
item.treeList.childList.slideDown('fast');
}
item.expanded = true;
if (done) { done(!that._loadingData) }
}
container.addClass("expanded");
}
item.treeList.collapse = function() {
if (!item.children) {
return;
}
item.expanded = false;
if (item.treeList.container) {
item.treeList.childList.slideUp('fast');
item.treeList.container.removeClass("expanded");
}
}
item.treeList.sortChildren = function(sortFunc) {
if (!item.children) {
return;
}
item.children.sort(sortFunc);
if (item.treeList.childList) {
// Do a one-off sort of the list, which means calling sort twice:
// 1. first with the desired sort function
item.treeList.childList.editableList('sort',sortFunc);
// 2. and then with null to remove it
item.treeList.childList.editableList('sort',null);
}
}
item.treeList.replaceElement = function (element) {
if (item.element) {
if (item.treeList.container) {
$(item.element).remove();
$(element).appendTo(item.treeList.label);
var labelPaddingWidth = (item.gutter?item.gutter.width()+2:0)+(item.depth*20);
$(element).css({
width: "calc(100% - "+(labelPaddingWidth+20+(item.icon?20:0))+"px)"
})
}
item.element = element;
}
}
if (item.children && typeof item.children !== "function") {
item.children.forEach(function(i) {
that._initItem(i,depth+1);
})
}
},
_addSubtree: function(parentList, container, item, depth) {
var that = this;
this._initItem(item,depth);
// item.treeList = {};
// item.treeList.depth = depth;
item.treeList.container = container;
item.treeList.parentList = parentList;
// item.treeList.remove = function() {
// parentList.editableList('removeItem',item);
// if (item.parent) {
// var index = item.parent.children.indexOf(item);
// item.parent.children.splice(index,1)
// that._trigger("sort",null,item.parent);
// }
// delete(that._items[item.id]);
// }
var label = $("<div>",{class:"red-ui-treeList-label"}).appendTo(container); var label = $("<div>",{class:"red-ui-treeList-label"}).appendTo(container);
item.treeList.label = label; item.treeList.label = label;
@ -357,6 +526,7 @@
treeListIcon.off("click.red-ui-treeList-expand"); treeListIcon.off("click.red-ui-treeList-expand");
delete item.children; delete item.children;
container.removeClass("expanded"); container.removeClass("expanded");
delete item.expanded;
} }
item.treeList.makeParent = function(children) { item.treeList.makeParent = function(children) {
if (treeListIcon.children().length) { if (treeListIcon.children().length) {
@ -388,86 +558,6 @@
item.treeList.childList = that._addChildren(container,item,item.children,depth).hide(); item.treeList.childList = that._addChildren(container,item,item.children,depth).hide();
} }
} }
item.treeList.insertChildAt = function(newItem,position,select) {
newItem.parent = item;
item.children.splice(position,0,newItem);
if (!item.deferBuild) {
item.treeList.childList.editableList('insertItemAt',newItem,position)
if (select) {
setTimeout(function() {
that.select(newItem)
},100);
}
that._trigger("sort",null,item);
}
}
item.treeList.addChild = function(newItem,select) {
item.treeList.insertChildAt(newItem,item.children.length,select);
}
item.treeList.expand = function(done) {
if (!item.children) {
return;
}
if (container.hasClass("expanded")) {
if (done) { done() }
return;
}
if (!container.hasClass("built") && (item.deferBuild || typeof item.children === 'function')) {
container.addClass('built');
var childrenAdded = false;
var spinner;
var startTime = 0;
var completeBuild = function(children) {
childrenAdded = true;
item.treeList.childList = that._addChildren(container,item,children,depth).hide();
var delta = Date.now() - startTime;
if (delta < 400) {
setTimeout(function() {
item.treeList.childList.slideDown('fast');
if (spinner) {
spinner.remove();
}
},400-delta);
} else {
item.treeList.childList.slideDown('fast');
if (spinner) {
spinner.remove();
}
}
if (done) { done() }
that._trigger("childrenloaded",null,item)
}
if (typeof item.children === 'function') {
item.children(completeBuild,item);
} else {
delete item.deferBuild;
completeBuild(item.children);
}
if (!childrenAdded) {
startTime = Date.now();
spinner = $('<div class="red-ui-treeList-spinner">').css({
"background-position": (35+depth*20)+'px 50%'
}).appendTo(container);
}
} else {
if (that._loadingData) {
item.treeList.childList.show();
} else {
item.treeList.childList.slideDown('fast');
}
if (done) { done() }
}
container.addClass("expanded");
}
item.treeList.collapse = function() {
if (!item.children) {
return;
}
item.treeList.childList.slideUp('fast');
container.removeClass("expanded");
}
var treeListIcon = $('<span class="red-ui-treeList-icon"></span>').appendTo(label); var treeListIcon = $('<span class="red-ui-treeList-icon"></span>').appendTo(label);
if (item.children) { if (item.children) {
@ -499,7 +589,9 @@
} }
} else { } else {
label.on("click", function(e) { label.on("click", function(e) {
if (!that.options.multi) {
that._topList.find(".selected").removeClass("selected"); that._topList.find(".selected").removeClass("selected");
}
label.addClass("selected"); label.addClass("selected");
that._trigger("select",e,item) that._trigger("select",e,item)
}) })
@ -508,9 +600,23 @@
that._trigger("confirm",e,item); that._trigger("confirm",e,item);
} }
}) })
item.treeList.select = function(v) {
if (!that.options.multi) {
that._topList.find(".selected").removeClass("selected");
}
label.toggleClass("selected",v);
if (v) {
that._trigger("select",null,item)
}
that.reveal(item);
}
} }
if (item.icon) { if (item.icon) {
if (typeof item.icon === "string") {
$('<span class="red-ui-treeList-icon"><i class="'+item.icon+'" /></span>').appendTo(label); $('<span class="red-ui-treeList-icon"><i class="'+item.icon+'" /></span>').appendTo(label);
} else {
$('<span class="red-ui-treeList-icon">').appendTo(label).append(item.icon);
}
} }
if (item.hasOwnProperty('label') || item.hasOwnProperty('sublabel')) { if (item.hasOwnProperty('label') || item.hasOwnProperty('sublabel')) {
if (item.hasOwnProperty('label')) { if (item.hasOwnProperty('label')) {
@ -542,6 +648,7 @@
var that = this; var that = this;
if (items !== undefined) { if (items !== undefined) {
this._data = items; this._data = items;
this._items = {};
this._topList.editableList('empty'); this._topList.editableList('empty');
this._loadingData = true; this._loadingData = true;
for (var i=0; i<items.length;i++) { for (var i=0; i<items.length;i++) {
@ -556,18 +663,71 @@
return this._data; return this._data;
} }
}, },
show: function(id) { show: function(item) {
for (var i=0;i<this._data.length;i++) { if (typeof item === "string") {
if (this._data[i].id === id) { item = this._items[item]
this._topList.editableList('show',this._data[i]);
} }
if (!item) {
return;
}
var that = this;
var stack = [];
var i = item;
while(i) {
stack.unshift(i);
i = i.parent;
}
var isOpening = false;
var handleStack = function(opening) {
isOpening = isOpening ||opening
var item = stack.shift();
if (stack.length === 0) {
setTimeout(function() {
that.reveal(item);
},isOpening?200:0);
} else {
item.treeList.expand(handleStack)
}
}
handleStack();
},
reveal: function(item) {
if (typeof item === "string") {
item = this._items[item]
}
if (!item) {
return;
}
var listOffset = this._topList.offset().top;
var itemOffset = item.treeList.label.offset().top;
var scrollTop = this._topList.parent().scrollTop();
itemOffset -= listOffset+scrollTop;
var treeHeight = this._topList.parent().height();
var itemHeight = item.treeList.label.outerHeight();
if (itemOffset < itemHeight/2) {
this._topList.parent().scrollTop(scrollTop+itemOffset-itemHeight/2-itemHeight)
} else if (itemOffset+itemHeight > treeHeight) {
this._topList.parent().scrollTop(scrollTop+((itemOffset+2.5*itemHeight)-treeHeight));
} }
}, },
select: function(item) { select: function(item, triggerEvent) {
if (typeof item === "string") {
item = this._items[item]
}
if (!this.options.multi) {
this._topList.find(".selected").removeClass("selected"); this._topList.find(".selected").removeClass("selected");
}
if (!item) {
return;
}
this.show(item.id);
item.treeList.label.addClass("selected"); item.treeList.label.addClass("selected");
if (triggerEvent !== false) {
this._trigger("select",null,item) this._trigger("select",null,item)
}
},
clearSelection: function() {
this._topList.find(".selected").removeClass("selected");
}, },
selected: function() { selected: function() {
var s = this._topList.find(".selected"); var s = this._topList.find(".selected");
@ -581,8 +741,46 @@
if (s.length) { if (s.length) {
return s.parent().data('data'); return s.parent().data('data');
} else { } else {
// TODO: This may be a bug.. it causes the call to return itself
// not undefined.
return undefined; return undefined;
} }
},
filter: function(filterFunc,expandResults) {
var filter = function(item) {
var matchCount = 0;
if (filterFunc && filterFunc(item)) {
matchCount++;
}
var childCount = 0;
if (item.children && typeof item.children !== "function") {
if (item.treeList.childList) {
childCount = item.treeList.childList.editableList('filter', filter);
} else {
item.treeList.childFilter = filter;
if (filterFunc) {
item.children.forEach(function(i) {
if (filter(i)) {
childCount++;
}
})
}
}
matchCount += childCount;
if (childCount > 0) {
item.treeList.expand();
}
}
if (!filterFunc) {
return true
}
return matchCount > 0
}
return this._topList.editableList('filter', filter);
},
get: function(id) {
return this._items[id] || null;
} }
}); });

22
packages/node_modules/@node-red/editor-client/src/js/ui/editor.js vendored
View File

@ -790,6 +790,11 @@ RED.editor = (function() {
nodeDiv.css({ nodeDiv.css({
'backgroundColor': backgroundColor 'backgroundColor': backgroundColor
}); });
var borderColor = RED.utils.getDarkerColor(backgroundColor);
if (borderColor !== backgroundColor) {
nodeDiv.css('border-color',borderColor)
}
} }
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
RED.utils.createIconElement(icon_url, iconContainer, true); RED.utils.createIconElement(icon_url, iconContainer, true);
@ -932,7 +937,12 @@ RED.editor = (function() {
$("#red-ui-editor-node-color").on('change', function(ev) { $("#red-ui-editor-node-color").on('change', function(ev) {
// Horribly out of scope... // Horribly out of scope...
nodeDiv.css('backgroundColor',$(this).val()); var colour = $(this).val();
nodeDiv.css('backgroundColor',colour);
var borderColor = RED.utils.getDarkerColor(colour);
if (borderColor !== colour) {
nodeDiv.css('border-color',borderColor)
}
}) })
} }
@ -948,6 +958,11 @@ RED.editor = (function() {
var colour = RED.utils.getNodeColor(node.type, node._def); var colour = RED.utils.getNodeColor(node.type, node._def);
var icon_url = RED.utils.getNodeIcon(node._def,node); var icon_url = RED.utils.getNodeIcon(node._def,node);
nodeDiv.css('backgroundColor',colour); nodeDiv.css('backgroundColor',colour);
var borderColor = RED.utils.getDarkerColor(colour);
if (borderColor !== colour) {
nodeDiv.css('border-color',borderColor)
}
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
RED.utils.createIconElement(icon_url, iconContainer, true); RED.utils.createIconElement(icon_url, iconContainer, true);
@ -1071,7 +1086,7 @@ RED.editor = (function() {
return nodeInfoEditor; return nodeInfoEditor;
} }
function showEditDialog(node) { function showEditDialog(node, defaultTab) {
var editing_node = node; var editing_node = node;
var isDefaultIcon; var isDefaultIcon;
var defaultIcon; var defaultIcon;
@ -1589,6 +1604,9 @@ RED.editor = (function() {
prepareEditDialog(node,node._def,"node-input", function() { prepareEditDialog(node,node._def,"node-input", function() {
trayBody.i18n(); trayBody.i18n();
finishedBuilding = true; finishedBuilding = true;
if (defaultTab) {
editorTabs.activateTab(defaultTab);
}
done(); done();
}); });
}, },

5
packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js vendored
View File

@ -15,7 +15,7 @@
**/ **/
(function() { (function() {
var template = '<script type="text/x-red" data-template-name="_buffer"><div id="red-ui-editor-type-buffer-panels"><div id="red-ui-editor-type-buffer-panel-str" class="red-ui-panel"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><button class="red-ui-editor-type-buffer-type red-ui-button red-ui-button-small"><i class="fa fa-exclamation-circle"></i> <span id="red-ui-editor-type-buffer-type-string" data-i18n="bufferEditor.modeString"></span><span id="red-ui-editor-type-buffer-type-array" data-i18n="bufferEditor.modeArray"></span></button></div><div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-buffer-str"></div></div></div><div id="red-ui-editor-type-buffer-panel-bin" class="red-ui-panel"><div class="form-row node-text-editor-row" style="margin-top: 10px"><div class="node-text-editor" id="red-ui-editor-type-buffer-bin"></div></div></div></div></script>'; var template = '<script type="text/x-red" data-template-name="_buffer"><div id="red-ui-editor-type-buffer-panels"><div id="red-ui-editor-type-buffer-panel-str" class="red-ui-panel"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><button class="red-ui-editor-type-buffer-type red-ui-button red-ui-button-small"><i class="fa fa-exclamation-circle"></i> <span id="red-ui-editor-type-buffer-type-string" data-i18n="bufferEditor.modeString"></span><span id="red-ui-editor-type-buffer-type-array" data-i18n="bufferEditor.modeArray"></span></button></div><div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-buffer-str"></div></div></div><div id="red-ui-editor-type-buffer-panel-bin" class="red-ui-panel"><div class="form-row node-text-editor-row" style="margin-top: 10px; margin-bottom:0;"><div class="node-text-editor" id="red-ui-editor-type-buffer-bin"></div></div></div></div></script>';
function stringToUTF8Array(str) { function stringToUTF8Array(str) {
var data = []; var data = [];
@ -187,8 +187,7 @@
$(".red-ui-editor-type-buffer-type").on("click", function(e) { $(".red-ui-editor-type-buffer-type").on("click", function(e) {
e.preventDefault(); e.preventDefault();
RED.sidebar.info.set(RED._("bufferEditor.modeDesc")); RED.sidebar.help.set(RED._("bufferEditor.modeDesc"));
RED.sidebar.info.show();
}) })

7
packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js vendored
View File

@ -237,8 +237,7 @@
var changeTimer; var changeTimer;
$(".red-ui-editor-type-expression-legacy").on("click", function(e) { $(".red-ui-editor-type-expression-legacy").on("click", function(e) {
e.preventDefault(); e.preventDefault();
RED.sidebar.info.set(RED._("expressionEditor.compatModeDesc")); RED.sidebar.help.set(RED._("expressionEditor.compatModeDesc"));
RED.sidebar.info.show();
}) })
var testExpression = function() { var testExpression = function() {
var value = testDataEditor.getValue(); var value = testDataEditor.getValue();
@ -318,9 +317,9 @@
var p2 = $("#red-ui-editor-type-expression-panel-info > .form-row > div:first-child"); var p2 = $("#red-ui-editor-type-expression-panel-info > .form-row > div:first-child");
p2Height -= p2.outerHeight(true) + 20; p2Height -= p2.outerHeight(true) + 20;
$(".red-ui-editor-type-expression-tab-content").height(p2Height); $(".red-ui-editor-type-expression-tab-content").height(p2Height);
$("#red-ui-editor-type-expression-test-data").css("height",(p2Height-5)+"px"); $("#red-ui-editor-type-expression-test-data").css("height",(p2Height-25)+"px");
testDataEditor.resize(); testDataEditor.resize();
$("#red-ui-editor-type-expression-test-result").css("height",(p2Height-5)+"px"); $("#red-ui-editor-type-expression-test-result").css("height",(p2Height-25)+"px");
testResultEditor.resize(); testResultEditor.resize();
} }
}); });

7
packages/node_modules/@node-red/editor-client/src/js/ui/group.js vendored
View File

@ -427,15 +427,16 @@ RED.group = (function() {
h: 0, h: 0,
_def: RED.group.def _def: RED.group.def
} }
group.z = nodes[0].z;
RED.nodes.addGroup(group);
try { try {
addToGroup(group,nodes); addToGroup(group,nodes);
} catch(err) { } catch(err) {
RED.notify(err,"error"); RED.notify(err,"error");
return; return;
} }
group.z = nodes[0].z;
RED.nodes.addGroup(group);
return group; return group;
} }
function addToGroup(group,nodes) { function addToGroup(group,nodes) {

28
packages/node_modules/@node-red/editor-client/src/js/ui/palette.js vendored
View File

@ -165,6 +165,7 @@ RED.palette = (function() {
metaData = typeInfo.set.module+" : "; metaData = typeInfo.set.module+" : ";
} }
metaData += type; metaData += type;
$('<button type="button" onclick="RED.sidebar.help.show(\''+type+'\'); return false;" class="red-ui-button red-ui-button-small" style="float: right"><i class="fa fa-book"></i></button>').appendTo(popOverContent)
$('<p>',{style:"font-size: 0.8em"}).text(metaData).appendTo(popOverContent); $('<p>',{style:"font-size: 0.8em"}).text(metaData).appendTo(popOverContent);
} }
} catch(err) { } catch(err) {
@ -255,6 +256,7 @@ RED.palette = (function() {
var popover = RED.popover.create({ var popover = RED.popover.create({
target:d, target:d,
trigger: "hover", trigger: "hover",
interactive: true,
width: "300px", width: "300px",
content: "hi", content: "hi",
delay: { show: 750, hide: 50 } delay: { show: 750, hide: 50 }
@ -270,19 +272,19 @@ RED.palette = (function() {
// html: true, // html: true,
// container:'body' // container:'body'
// }); // });
d.on("click", function() { // d.on("click", function() {
RED.view.focus(); // RED.view.focus();
var helpText; // var helpText;
if (nt.indexOf("subflow:") === 0) { // if (nt.indexOf("subflow:") === 0) {
helpText = RED.utils.renderMarkdown(RED.nodes.subflow(nt.substring(8)).info||"")||('<span class="red-ui-help-info-none">'+RED._("sidebar.info.none")+'</span>'); // helpText = RED.utils.renderMarkdown(RED.nodes.subflow(nt.substring(8)).info||"")||('<span class="red-ui-help-info-none">'+RED._("sidebar.info.none")+'</span>');
} else { // } else {
helpText = $("script[data-help-name='"+d.attr("data-palette-type")+"']").html()||('<span class="red-ui-help-info-none">'+RED._("sidebar.info.none")+'</span>'); // helpText = $("script[data-help-name='"+d.attr("data-palette-type")+"']").html()||('<span class="red-ui-help-info-none">'+RED._("sidebar.info.none")+'</span>');
} // }
// Don't look too closely. RED.sidebar.info.set will set the 'Description' // // Don't look too closely. RED.sidebar.info.set will set the 'Description'
// section of the sidebar. Pass in the title of the Help section so it looks // // section of the sidebar. Pass in the title of the Help section so it looks
// right. // // right.
RED.sidebar.info.set(helpText,RED._("sidebar.info.nodeHelp")); // RED.sidebar.type.show(helpText,RED._("sidebar.info.nodeHelp"));
}); // });
var chart = $("#red-ui-workspace-chart"); var chart = $("#red-ui-workspace-chart");
var chartSVG = $("#red-ui-workspace-chart>svg").get(0); var chartSVG = $("#red-ui-workspace-chart>svg").get(0);
var activeSpliceLink; var activeSpliceLink;

1
packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js vendored
View File

@ -2314,6 +2314,7 @@ RED.projects = (function() {
if (data.active) { if (data.active) {
$.getJSON("projects/"+data.active, function(project) { $.getJSON("projects/"+data.active, function(project) {
activeProject = project; activeProject = project;
RED.events.emit("projects:load",activeProject);
RED.sidebar.versionControl.refresh(true); RED.sidebar.versionControl.refresh(true);
if (done) { if (done) {
done(activeProject); done(activeProject);

157
packages/node_modules/@node-red/editor-client/src/js/ui/search.js vendored
View File

@ -23,8 +23,7 @@ RED.search = (function() {
var visible = false; var visible = false;
var index = {}; var index = {};
var keys = []; var currentResults = [];
var results = [];
var previousActiveElement; var previousActiveElement;
@ -66,23 +65,9 @@ RED.search = (function() {
} }
} }
function indexWorkspace() {
index = {};
RED.nodes.eachWorkspace(indexNode);
RED.nodes.eachSubflow(indexNode);
RED.nodes.eachConfig(indexNode);
RED.nodes.eachNode(indexNode);
keys = Object.keys(index);
keys.sort();
keys.forEach(function(key) {
index[key] = Object.keys(index[key]).map(function(id) {
return index[key][id];
})
})
}
function search(val) { function search(val) {
searchResults.editableList('empty'); var results = [];
var keys = Object.keys(index);
var typeFilter; var typeFilter;
var m = /(?:^| )type:([^ ]+)/.exec(val); var m = /(?:^| )type:([^ ]+)/.exec(val);
if (m) { if (m) {
@ -92,8 +77,7 @@ RED.search = (function() {
val = val.trim(); val = val.trim();
selected = -1;
results = [];
if (val.length > 0 || typeFilter) { if (val.length > 0 || typeFilter) {
val = val.toLowerCase(); val = val.toLowerCase();
var i; var i;
@ -104,10 +88,14 @@ RED.search = (function() {
var key = keys[i]; var key = keys[i];
var kpos = keys[i].indexOf(val); var kpos = keys[i].indexOf(val);
if (kpos > -1) { if (kpos > -1) {
for (j=0;j<index[key].length;j++) { var ids = Object.keys(index[key]);
var node = index[key][j]; for (j=0;j<ids.length;j++) {
var node = index[key][ids[j]];
if (!typeFilter || node.node.type === typeFilter) { if (!typeFilter || node.node.type === typeFilter) {
nodes[node.node.id] = nodes[node.node.id] = node; nodes[node.node.id] = nodes[node.node.id] = {
node: node.node,
label: node.label
};
nodes[node.node.id].index = Math.min(nodes[node.node.id].index||Infinity,kpos); nodes[node.node.id].index = Math.min(nodes[node.node.id].index||Infinity,kpos);
} }
} }
@ -121,22 +109,8 @@ RED.search = (function() {
for (i=0;i<list.length;i++) { for (i=0;i<list.length;i++) {
results.push(nodes[list[i]]); results.push(nodes[list[i]]);
} }
if (results.length > 0) {
for (i=0;i<Math.min(results.length,25);i++) {
searchResults.editableList('addItem',results[i])
}
if (results.length > 25) {
searchResults.editableList('addItem', {
more: {
results: results,
start: 25
}
})
}
} else {
searchResults.editableList('addItem',{});
}
} }
return results;
} }
function ensureSelectedIsVisible() { function ensureSelectedIsVisible() {
@ -161,13 +135,37 @@ RED.search = (function() {
searchInput = $('<input type="text" data-i18n="[placeholder]menu.label.searchInput">').appendTo(searchDiv).searchBox({ searchInput = $('<input type="text" data-i18n="[placeholder]menu.label.searchInput">').appendTo(searchDiv).searchBox({
delay: 200, delay: 200,
change: function() { change: function() {
search($(this).val()); searchResults.editableList('empty');
selected = -1;
currentResults = search($(this).val());
if (currentResults.length > 0) {
for (i=0;i<Math.min(currentResults.length,25);i++) {
searchResults.editableList('addItem',currentResults[i])
} }
if (currentResults.length > 25) {
searchResults.editableList('addItem', {
more: {
results: currentResults,
start: 25
}
})
}
} else {
searchResults.editableList('addItem',{});
}
}
});
var copySearchContainer = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-caret-right"></button>').appendTo(searchDiv).on('click', function(evt) {
evt.preventDefault();
RED.sidebar.info.outliner.search(searchInput.val())
hide();
}); });
searchInput.on('keydown',function(evt) { searchInput.on('keydown',function(evt) {
var children; var children;
if (results.length > 0) { if (currentResults.length > 0) {
if (evt.keyCode === 40) { if (evt.keyCode === 40) {
// Down // Down
children = searchResults.children(); children = searchResults.children();
@ -199,21 +197,21 @@ RED.search = (function() {
var object = $(children[selected]).find(".red-ui-editableList-item-content").data('data'); var object = $(children[selected]).find(".red-ui-editableList-item-content").data('data');
if (object) { if (object) {
searchResults.editableList('removeItem',object); searchResults.editableList('removeItem',object);
for (i=object.more.start;i<Math.min(results.length,object.more.start+25);i++) { for (i=object.more.start;i<Math.min(currentResults.length,object.more.start+25);i++) {
searchResults.editableList('addItem',results[i]) searchResults.editableList('addItem',currentResults[i])
} }
if (results.length > object.more.start+25) { if (currentResults.length > object.more.start+25) {
searchResults.editableList('addItem', { searchResults.editableList('addItem', {
more: { more: {
results: results, results: currentResults,
start: object.more.start+25 start: object.more.start+25
} }
}) })
} }
} }
} else { } else {
if (results.length > 0) { if (currentResults.length > 0) {
reveal(results[Math.max(0,selected)].node); reveal(currentResults[Math.max(0,selected)].node);
} }
} }
} }
@ -234,13 +232,13 @@ RED.search = (function() {
div.on("click", function(evt) { div.on("click", function(evt) {
evt.preventDefault(); evt.preventDefault();
searchResults.editableList('removeItem',object); searchResults.editableList('removeItem',object);
for (i=object.more.start;i<Math.min(results.length,object.more.start+25);i++) { for (i=object.more.start;i<Math.min(currentResults.length,object.more.start+25);i++) {
searchResults.editableList('addItem',results[i]) searchResults.editableList('addItem',currentResults[i])
} }
if (results.length > object.more.start+25) { if (currentResults.length > object.more.start+25) {
searchResults.editableList('addItem', { searchResults.editableList('addItem', {
more: { more: {
results: results, results: currentResults,
start: object.more.start+25 start: object.more.start+25
} }
}) })
@ -253,17 +251,7 @@ RED.search = (function() {
var def = node._def; var def = node._def;
div = $('<a>',{href:'#',class:"red-ui-search-result"}).appendTo(container); div = $('<a>',{href:'#',class:"red-ui-search-result"}).appendTo(container);
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(div); RED.utils.createNodeIcon(node).appendTo(div);
var colour = RED.utils.getNodeColor(node.type,def);
var icon_url = RED.utils.getNodeIcon(def,node);
if (node.type === 'tab') {
colour = "#C0DEED";
}
nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
RED.utils.createIconElement(icon_url, iconContainer, true);
var contentDiv = $('<div>',{class:"red-ui-search-result-node-description"}).appendTo(div); var contentDiv = $('<div>',{class:"red-ui-search-result-node-description"}).appendTo(div);
if (node.z) { if (node.z) {
var workspace = RED.nodes.workspace(node.z); var workspace = RED.nodes.workspace(node.z);
@ -308,7 +296,7 @@ RED.search = (function() {
$("#red-ui-palette-shade").show(); $("#red-ui-palette-shade").show();
$("#red-ui-sidebar-shade").show(); $("#red-ui-sidebar-shade").show();
$("#red-ui-sidebar-separator").hide(); $("#red-ui-sidebar-separator").hide();
indexWorkspace();
if (dialog === null) { if (dialog === null) {
createDialog(); createDialog();
} }
@ -342,6 +330,28 @@ RED.search = (function() {
} }
} }
function clearIndex() {
index = {};
}
function addItemToIndex(item) {
indexNode(item);
}
function removeItemFromIndex(item) {
var keys = Object.keys(index);
for (var i=0,l=keys.length;i<l;i++) {
delete index[keys[i]][item.id];
if (Object.keys(index[keys[i]]).length === 0) {
delete index[keys[i]];
}
}
}
function updateItemOnIndex(item) {
removeItemFromIndex(item);
addItemToIndex(item);
}
function init() { function init() {
RED.actions.add("core:search",show); RED.actions.add("core:search",show);
@ -358,12 +368,33 @@ RED.search = (function() {
$("#red-ui-editor-shade").on('mousedown',hide); $("#red-ui-editor-shade").on('mousedown',hide);
$("#red-ui-palette-shade").on('mousedown',hide); $("#red-ui-palette-shade").on('mousedown',hide);
$("#red-ui-sidebar-shade").on('mousedown',hide); $("#red-ui-sidebar-shade").on('mousedown',hide);
RED.events.on("workspace:clear", clearIndex)
RED.events.on("flows:add", addItemToIndex)
RED.events.on("flows:remove", removeItemFromIndex)
RED.events.on("flows:change", updateItemOnIndex)
RED.events.on("subflows:add", addItemToIndex)
RED.events.on("subflows:remove", removeItemFromIndex)
RED.events.on("subflows:change", updateItemOnIndex)
RED.events.on("nodes:add",addItemToIndex);
RED.events.on("nodes:remove",removeItemFromIndex);
RED.events.on("nodes:change",updateItemOnIndex);
RED.events.on("groups:add",addItemToIndex);
RED.events.on("groups:remove",removeItemFromIndex);
RED.events.on("groups:change",updateItemOnIndex);
} }
return { return {
init: init, init: init,
show: show, show: show,
hide: hide hide: hide,
search: search
}; };
})(); })();

1
packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js vendored
View File

@ -250,6 +250,7 @@ RED.sidebar = (function() {
RED.popover.tooltip($("#red-ui-sidebar-separator").find(".red-ui-sidebar-control-right"),RED._("keyboard.toggleSidebar"),"core:toggle-sidebar"); RED.popover.tooltip($("#red-ui-sidebar-separator").find(".red-ui-sidebar-control-right"),RED._("keyboard.toggleSidebar"),"core:toggle-sidebar");
showSidebar(); showSidebar();
RED.sidebar.info.init(); RED.sidebar.info.init();
RED.sidebar.help.init();
RED.sidebar.config.init(); RED.sidebar.config.init();
RED.sidebar.context.init(); RED.sidebar.context.init();
// hide info bar at start if screen rather narrow... // hide info bar at start if screen rather narrow...

6
packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js vendored
View File

@ -463,15 +463,15 @@ RED.subflow = (function() {
var activeSubflow = RED.nodes.subflow(id); var activeSubflow = RED.nodes.subflow(id);
RED.nodes.eachNode(function(n) { RED.nodes.eachNode(function(n) {
if (n.type == "subflow:"+activeSubflow.id) { if (n.type == "subflow:"+id) {
removedNodes.push(n); removedNodes.push(n);
} }
if (n.z == activeSubflow.id) { if (n.z == id) {
removedNodes.push(n); removedNodes.push(n);
} }
}); });
RED.nodes.eachConfig(function(n) { RED.nodes.eachConfig(function(n) {
if (n.z == activeSubflow.id) { if (n.z == id) {
removedNodes.push(n); removedNodes.push(n);
} }
}); });

333
packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js vendored Normal file
View File

@ -0,0 +1,333 @@
/**
* Copyright JS Foundation and other contributors, http://js.foundation
*
* 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.help = (function() {
var content;
var toolbar;
var helpSection;
var panels;
var panelRatio;
var helpTopics = [];
var treeList;
var tocPanel;
var helpIndex = {};
function resizeStack() {
var h = $(content).parent().height() - toolbar.outerHeight();
panels.resize(h)
}
function init() {
content = document.createElement("div");
content.className = "red-ui-sidebar-info"
toolbar = $("<div>", {class:"red-ui-sidebar-header red-ui-info-toolbar"}).appendTo(content);
$('<span class="button-group"><a id="red-ui-sidebar-help-show-toc" class="red-ui-button red-ui-button-small selected" href="#"><i class="fa fa-list-ul"></i></a></span>').appendTo(toolbar)
var showTOCButton = toolbar.find('#red-ui-sidebar-help-show-toc')
RED.popover.tooltip(showTOCButton,RED._("sidebar.help.showTopics"));
showTOCButton.on("click",function(e) {
e.preventDefault();
if ($(this).hasClass('selected')) {
hideTOC();
} else {
showTOC();
}
});
var stackContainer = $("<div>",{class:"red-ui-sidebar-help-stack"}).appendTo(content);
tocPanel = $("<div>", {class: "red-ui-sidebar-help-toc"}).appendTo(stackContainer);
var helpPanel = $("<div>").css({
"overflow-y": "scroll"
}).appendTo(stackContainer);
panels = RED.panels.create({
container: stackContainer
})
panels.ratio(0.5);
helpSearch = $('<input type="text" data-i18n="[placeholder]sidebar.help.search">').appendTo(toolbar).searchBox({
delay: 100,
change: function() {
var val = $(this).val().toLowerCase();
if (val) {
showTOC();
var c = treeList.treeList('filter',function(item) {
if (item.depth === 0) {
return true;
}
return (item.nodeType && item.nodeType.indexOf(val) > -1) ||
(item.subflowLabel && item.subflowLabel.indexOf(val) > -1)
},true)
} else {
treeList.treeList('filter',null);
var selected = treeList.treeList('selected');
if (selected.id) {
treeList.treeList('show',selected.id);
}
}
}
})
helpSection = $("<div>",{class:"red-ui-help"}).css({
"padding":"6px",
}).appendTo(helpPanel)
$('<span class="red-ui-help-info-none">'+RED._("sidebar.help.noHelp")+'</span>').appendTo(helpSection);
treeList = $("<div>").css({width: "100%"}).appendTo(tocPanel).treeList({data: []})
treeList.on('treelistselect', function(e,item) {
if (item.nodeType) {
showHelp(item.nodeType);
}
})
RED.sidebar.addTab({
id: "help",
label: RED._("sidebar.help.label"),
name: RED._("sidebar.help.name"),
iconClass: "fa fa-book",
action:"core:show-help-tab",
content: content,
pinned: true,
enableOnEdit: true,
onchange: function() {
resizeStack()
}
});
$(window).on("resize", resizeStack);
$(window).on("focus", resizeStack);
RED.events.on('registry:node-type-added', queueRefresh);
RED.events.on('registry:node-type-removed', queueRefresh);
RED.events.on('subflows:change', refreshSubflow);
RED.actions.add("core:show-help-tab",show);
}
var refreshTimer;
function queueRefresh() {
if (!refreshTimer) {
refreshTimer = setTimeout(function() {
refreshTimer = null;
refreshHelpIndex();
},500);
}
}
function refreshSubflow(sf) {
var item = treeList.treeList('get',"node-type:subflow:"+sf.id);
item.subflowLabel = sf._def.label().toLowerCase();
item.treeList.replaceElement(getNodeLabel({_def:sf._def,type:sf._def.label()}));
}
function hideTOC() {
var tocButton = $('#red-ui-sidebar-help-show-toc')
if (tocButton.hasClass('selected')) {
tocButton.removeClass('selected');
panelRatio = panels.ratio();
tocPanel.css({"transition":"height 0.2s"})
panels.ratio(0)
setTimeout(function() {
tocPanel.css({"transition":""})
},250);
}
}
function showTOC() {
var tocButton = $('#red-ui-sidebar-help-show-toc')
if (!tocButton.hasClass('selected')) {
tocButton.addClass('selected');
tocPanel.css({"transition":"height 0.2s"})
panels.ratio(Math.max(0.3,Math.min(panelRatio,0.7)));
setTimeout(function() {
tocPanel.css({"transition":""})
var selected = treeList.treeList('selected');
if (selected.id) {
treeList.treeList('show',selected);
}
},250);
}
}
function refreshHelpIndex() {
helpTopics = [];
var modules = RED.nodes.registry.getModuleList();
var moduleNames = Object.keys(modules);
moduleNames.sort();
var helpData = [{
label: RED._("sidebar.help.nodeHelp"),
children: [],
expanded: true
}]
var subflows = RED.nodes.registry.getNodeTypes().filter(function(t) {return /subflow/.test(t)});
if (subflows.length > 0) {
helpData[0].children.push({
label: RED._("menu.label.subflows"),
children: []
})
subflows.forEach(function(nodeType) {
var sf = RED.nodes.getType(nodeType);
helpData[0].children[0].children.push({
id:"node-type:"+nodeType,
nodeType: nodeType,
subflowLabel: sf.label().toLowerCase(),
element: getNodeLabel({_def:sf,type:sf.label()})
})
})
}
moduleNames.forEach(function(moduleName) {
var module = modules[moduleName];
var nodeTypes = [];
var setNames = Object.keys(module.sets);
setNames.forEach(function(setName) {
module.sets[setName].types.forEach(function(nodeType) {
if ($("script[data-help-name='"+nodeType+"']").length) {
nodeTypes.push({
id: "node-type:"+nodeType,
nodeType: nodeType,
element:getNodeLabel({_def:RED.nodes.getType(nodeType),type:nodeType})
})
}
})
})
if (nodeTypes.length > 0) {
nodeTypes.sort(function(A,B) {
return A.nodeType.localeCompare(B.nodeType)
})
helpData[0].children.push({
id: moduleName,
icon: "fa fa-cube",
label: moduleName,
children: nodeTypes
})
}
});
treeList.treeList("data",helpData);
}
function getNodeLabel(n) {
var div = $('<div>',{class:"red-ui-info-outline-item"});
RED.utils.createNodeIcon(n).appendTo(div);
var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
$('<div>',{class:"red-ui-search-result-node-label red-ui-info-outline-item-label"}).text(n.name||n.type).appendTo(contentDiv);
return div;
}
function showHelp(nodeType) {
helpSection.empty();
var helpText;
var title;
var m = /^subflow(:(.+))?$/.exec(nodeType);
if (m && m[2]) {
var subflowNode = RED.nodes.subflow(m[2]);
helpText = (RED.utils.renderMarkdown(subflowNode.info||"")||('<span class="red-ui-help-info-none">'+RED._("sidebar.info.none")+'</span>'));
title = subflowNode.name || nodeType;
} else {
helpText = $("script[data-help-name='"+nodeType+"']").html()||('<span class="red-ui-help-info-none">'+RED._("sidebar.info.none")+'</span>');
title = nodeType;
}
setInfoText(title, helpText, helpSection);
var ratio = panels.ratio();
if (ratio > 0.7) {
panels.ratio(0.7)
}
treeList.treeList("select","node-type:"+nodeType, false);
}
function show(type) {
RED.sidebar.show("help");
if (type) {
hideTOC();
showHelp(type);
}
}
// TODO: DRY - projects.js
function addTargetToExternalLinks(el) {
$(el).find("a").each(function(el) {
var href = $(this).attr('href');
if (/^https?:/.test(href)) {
$(this).attr('target','_blank');
}
});
return el;
}
function setInfoText(title, infoText,target) {
if (title) {
$("<h1>",{class:"red-ui-help-title"}).text(title).appendTo(target);
}
var info = addTargetToExternalLinks($('<div class="red-ui-help"><span class="red-ui-text-bidi-aware" dir=\"'+RED.text.bidi.resolveBaseTextDir(infoText)+'">'+infoText+'</span></div>')).appendTo(target);
info.find(".red-ui-text-bidi-aware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "<span></span>" );
var foldingHeader = "H3";
info.find(foldingHeader).wrapInner('<a class="red-ui-help-info-header expanded" href="#"></a>')
.find("a").prepend('<i class="fa fa-angle-right">').on("click", function(e) {
e.preventDefault();
var isExpanded = $(this).hasClass('expanded');
var el = $(this).parent().next();
while(el.length === 1 && el[0].nodeName !== foldingHeader) {
el.toggle(!isExpanded);
el = el.next();
}
$(this).toggleClass('expanded',!isExpanded);
})
target.parent().scrollTop(0);
}
function set(html,title) {
$(helpSection).empty();
setInfoText(title,html,helpSection);
hideTOC();
show();
}
function refreshSelection(selection) {
if (selection === undefined) {
selection = RED.view.selection();
}
if (selection.nodes) {
if (selection.nodes.length == 1) {
var node = selection.nodes[0];
if (node.type === "subflow" && node.direction) {
// ignore subflow virtual ports
} else if (node.type !== 'group'){
showHelp(node.type);
}
} else {
refresh(selection.nodes);
}
}
}
RED.events.on("view:selection-changed",refreshSelection);
return {
init: init,
show: show,
set: set
}
})();

405
packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js vendored Normal file
View File

@ -0,0 +1,405 @@
RED.sidebar.info.outliner = (function() {
var treeList;
var searchInput;
var projectInfo;
var projectInfoLabel;
var flowList;
var subflowList;
var globalConfigNodes;
var objects = {};
function getFlowData() {
var flowData = [
{
label: RED._("menu.label.flows"),
expanded: true,
children: []
},
{
label: RED._("menu.label.subflows"),
children: []
},
{
id: "__global__",
label: RED._("sidebar.info.globalConfig"),
children: []
}
]
flowList = flowData[0];
subflowList = flowData[1];
globalConfigNodes = flowData[2];
return flowData;
}
function getProjectLabel(p) {
var div = $('<div>',{class:"red-ui-info-outline-item red-ui-info-outline-item-flow"});
div.css("width", "calc(100% - 40px)");
var contentDiv = $('<div>',{class:"red-ui-search-result-description red-ui-info-outline-item-label"}).appendTo(div);
contentDiv.text(p.name);
var controls = $('<div>',{class:"red-ui-info-outline-item-controls"}).appendTo(div);
var editProjectButton = $('<button class="red-ui-button red-ui-button-small" style="position:absolute;right:5px;top: 3px;"><i class="fa fa-ellipsis-h"></i></button>')
.appendTo(controls)
.on("click", function(evt) {
evt.preventDefault();
RED.projects.editProject();
});
RED.popover.tooltip(editProjectButton,RED._('sidebar.project.showProjectSettings'));
return div;
}
var empties = {};
function getEmptyItem(id) {
var item = {
empty: true,
element: $('<div class="red-ui-info-outline-item red-ui-info-outline-item-empty">').text("empty")
}
empties[id] = item;
return item;
}
function getNodeLabelText(n) {
var label = n.name || n.id;
if (n._def.label) {
try {
label = (typeof n._def.label === "function" ? n._def.label.call(n) : n._def.label)||"";
} catch(err) {
console.log("Definition error: "+type+".label",err);
}
}
return label;
}
function getNodeLabel(n) {
var div = $('<div>',{class:"red-ui-info-outline-item"});
RED.utils.createNodeIcon(n).appendTo(div);
var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
var labelText = getNodeLabelText(n);
var label = $('<div>',{class:"red-ui-search-result-node-label red-ui-info-outline-item-label"}).appendTo(contentDiv);
if (labelText) {
label.text(labelText)
} else {
label.html("&nbsp;")
}
addControls(n, div);
return div;
}
function getFlowLabel(n) {
var div = $('<div>',{class:"red-ui-info-outline-item red-ui-info-outline-item-flow"});
var contentDiv = $('<div>',{class:"red-ui-search-result-description red-ui-info-outline-item-label"}).appendTo(div);
contentDiv.text(typeof n === "string"? n : n.label);
addControls(n, div);
return div;
}
function getSubflowLabel(n) {
var div = $('<div>',{class:"red-ui-info-outline-item"});
RED.utils.createNodeIcon(n).appendTo(div);
var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
var labelText = getNodeLabelText(n);
var label = $('<div>',{class:"red-ui-search-result-node-label red-ui-info-outline-item-label"}).appendTo(contentDiv);
if (labelText) {
label.text(labelText)
} else {
label.html("&nbsp;")
}
addControls(n, div);
return div;
// var div = $('<div>',{class:"red-ui-info-outline-item red-ui-info-outline-item-flow"});
// var contentDiv = $('<div>',{class:"red-ui-search-result-description red-ui-info-outline-item-label"}).appendTo(div);
// contentDiv.text(n.name || n.id);
// addControls(n, div);
// return div;
}
function addControls(n,div) {
if (n.type === 'group') {
return;
}
var controls = $('<div>',{class:"red-ui-info-outline-item-controls red-ui-info-outline-item-hover-controls"}).appendTo(div);
if (n._def.button) {
$('<button type="button" class="red-ui-info-outline-item-control-action red-ui-button red-ui-button-small"><i class="fa fa-toggle-right"></i></button>').appendTo(controls).on("click",function(evt) {
evt.preventDefault();
evt.stopPropagation();
RED.view.clickNodeButton(n);
})
}
if (n.type !== 'group') {
$('<button type="button" class="red-ui-info-outline-item-control-reveal red-ui-button red-ui-button-small"><i class="fa fa-eye"></i></button>').appendTo(controls).on("click",function(evt) {
evt.preventDefault();
evt.stopPropagation();
RED.view.reveal(n.id);
})
}
if (n.type !== 'group' && n.type !== 'subflow') {
$('<button type="button" class="red-ui-info-outline-item-control-disable red-ui-button red-ui-button-small"><i class="fa fa-circle-thin"></i><i class="fa fa-ban"></i></button>').appendTo(controls).on("click",function(evt) {
evt.preventDefault();
evt.stopPropagation();
if (n.type === 'tab') {
if (n.disabled) {
RED.workspaces.enable(n.id)
} else {
RED.workspaces.disable(n.id)
}
} else {
// TODO: this ought to be a utility function in RED.nodes
var historyEvent = {
t: "edit",
node: n,
changed: n.changed,
changes: {
d: n.d
},
dirty:RED.nodes.dirty()
}
if (n.d) {
delete n.d;
} else {
n.d = true;
}
n.dirty = true;
n.changed = true;
RED.events.emit("nodes:change",n);
RED.nodes.dirty(true)
RED.view.redraw();
}
});
} else {
$('<div class="red-ui-info-outline-item-control-spacer">').appendTo(controls)
}
controls.find("button").on("dblclick", function(evt) {
evt.preventDefault();
evt.stopPropagation();
})
}
function onProjectLoad(activeProject) {
objects = {};
var newFlowData = getFlowData();
projectInfoLabel.empty();
getProjectLabel(activeProject).appendTo(projectInfoLabel);
projectInfo.show();
treeList.treeList('data',newFlowData);
}
function build() {
var container = $("<div>", {class:"red-ui-info-outline"}).css({'height': '100%'});
var toolbar = $("<div>", {class:"red-ui-sidebar-header red-ui-info-toolbar"}).appendTo(container);
searchInput = $('<input type="text" data-i18n="[placeholder]menu.label.search">').appendTo(toolbar).searchBox({
delay: 300,
change: function() {
var val = $(this).val();
var searchResults = RED.search.search(val);
if (val) {
var resultMap = {};
for (var i=0,l=searchResults.length;i<l;i++) {
resultMap[searchResults[i].node.id] = true;
}
var c = treeList.treeList('filter',function(item) {
if (item.depth === 0) {
return true;
}
return item.id && objects[item.id] && resultMap[item.id]
},true)
} else {
treeList.treeList('filter',null);
var selected = treeList.treeList('selected');
if (selected.id) {
treeList.treeList('show',selected.id);
}
}
}
});
projectInfo = $('<div class="red-ui-treeList-label red-ui-info-outline-project"><span class="red-ui-treeList-icon"><i class="fa fa-archive"></i></span></div>').hide().appendTo(container)
projectInfoLabel = $('<span>').appendTo(projectInfo);
// <div class="red-ui-info-outline-item red-ui-info-outline-item-flow" style=";"><div class="red-ui-search-result-description red-ui-info-outline-item-label">Space Monkey</div><div class="red-ui-info-outline-item-controls"><button class="red-ui-button red-ui-button-small" style="position:absolute;right:5px;"><i class="fa fa-ellipsis-h"></i></button></div></div></div>').appendTo(container)
treeList = $("<div>").css({width: "100%"}).appendTo(container).treeList({
data:getFlowData()
})
// treeList.on('treelistselect', function(e,item) {
// console.log(item)
// RED.view.reveal(item.id);
// })
// treeList.treeList('data',[ ... ] )
treeList.on('treelistconfirm', function(e,item) {
var node = RED.nodes.node(item.id);
if (node) {
if (node._def.category === "config") {
RED.editor.editConfig("", node.type, node.id);
} else {
RED.editor.edit(node);
}
}
})
RED.events.on("projects:load", onProjectLoad)
RED.events.on("flows:add", onFlowAdd)
RED.events.on("flows:remove", onObjectRemove)
RED.events.on("flows:change", onFlowChange)
RED.events.on("flows:reorder", onFlowsReorder)
RED.events.on("subflows:add", onSubflowAdd)
RED.events.on("subflows:remove", onObjectRemove)
RED.events.on("subflows:change", onSubflowChange)
RED.events.on("nodes:add",onNodeAdd);
RED.events.on("nodes:remove",onObjectRemove);
RED.events.on("nodes:change",onNodeChange);
RED.events.on("groups:add",onNodeAdd);
RED.events.on("groups:remove",onObjectRemove);
RED.events.on("groups:change",onNodeChange);
RED.events.on("view:selection-changed", onSelectionChanged);
RED.events.on("workspace:clear", onWorkspaceClear)
return container;
}
function onWorkspaceClear() {
treeList.treeList('data',getFlowData());
}
function onFlowAdd(ws) {
objects[ws.id] = {
id: ws.id,
element: getFlowLabel(ws),
children:[getEmptyItem(ws.id)],
deferBuild: true,
icon: "red-ui-icons red-ui-icons-flow"
}
flowList.treeList.addChild(objects[ws.id])
objects[ws.id].element.toggleClass("red-ui-info-outline-item-disabled", !!ws.disabled)
objects[ws.id].treeList.container.toggleClass("red-ui-info-outline-item-disabled", !!ws.disabled)
}
function onFlowChange(n) {
var existingObject = objects[n.id];
existingObject.element.find(".red-ui-info-outline-item-label").text(n.label || n.id);
existingObject.element.toggleClass("red-ui-info-outline-item-disabled", !!n.disabled)
existingObject.treeList.container.toggleClass("red-ui-info-outline-item-disabled", !!n.disabled)
}
function onFlowsReorder(order) {
var indexMap = {};
order.forEach(function(id,index) {
indexMap[id] = index;
})
flowList.treeList.sortChildren(function(A,B) {
if (A.id === "__global__") { return -1 }
if (B.id === "__global__") { return 1 }
return indexMap[A.id] - indexMap[B.id]
})
}
function onSubflowAdd(sf) {
objects[sf.id] = {
id: sf.id,
element: getNodeLabel(sf),
children:[getEmptyItem(sf.id)],
deferBuild: true
}
subflowList.treeList.addChild(objects[sf.id])
}
function onSubflowChange(sf) {
var existingObject = objects[sf.id];
existingObject.treeList.replaceElement(getNodeLabel(sf));
// existingObject.element.find(".red-ui-info-outline-item-label").text(n.name || n.id);
RED.nodes.eachNode(function(n) {
if (n.type == "subflow:"+sf.id) {
var sfInstance = objects[n.id];
sfInstance.treeList.replaceElement(getNodeLabel(n));
}
});
}
function onNodeChange(n) {
var existingObject = objects[n.id];
var parent = n.g||n.z;
var nodeLabelText = getNodeLabelText(n);
if (nodeLabelText) {
existingObject.element.find(".red-ui-info-outline-item-label").text(nodeLabelText);
} else {
existingObject.element.find(".red-ui-info-outline-item-label").html("&nbsp;");
}
if (parent !== existingObject.parent.id) {
existingObject.treeList.remove();
if (!parent) {
globalConfigNodes.treeList.addChild(existingObject);
} else {
objects[parent].treeList.addChild(existingObject)
}
}
existingObject.element.toggleClass("red-ui-info-outline-item-disabled", !!n.d)
}
function onObjectRemove(n) {
var existingObject = objects[n.id];
existingObject.treeList.remove();
delete objects[n.d]
var parent = existingObject.parent;
if (parent.children.length === 0) {
parent.treeList.addChild(getEmptyItem(parent.id));
}
}
function onNodeAdd(n) {
objects[n.id] = {
id: n.id,
element: getNodeLabel(n)
}
if (n.type === "group") {
objects[n.id].children = [];
objects[n.id].deferBuild = true;
}
var parent = n.g||n.z;
if (parent) {
if (objects[parent]) {
if (empties[parent]) {
empties[parent].treeList.remove();
delete empties[parent];
}
objects[parent].treeList.addChild(objects[n.id])
} else {
// The parent hasn't been added yet
console.log("missing",parent)
}
} else {
// No parent - add to Global flow list
globalConfigNodes.treeList.addChild(objects[n.id])
}
objects[n.id].element.toggleClass("red-ui-info-outline-item-disabled", !!n.d)
}
function onSelectionChanged(selection) {
treeList.treeList('clearSelection');
}
return {
build: build,
search: function(val) {
searchInput.searchBox('value',val)
},
reveal: function(node) {
treeList.treeList('select', objects[node.id])
}
}
})();

288
packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js vendored
View File

@ -16,16 +16,32 @@
RED.sidebar.info = (function() { RED.sidebar.info = (function() {
var content; var content;
var sections; var panels;
var propertiesSection;
var infoSection; var infoSection;
var helpSection;
var propertiesPanelContent;
var propertiesPanelHeader;
var propertiesPanelHeaderIcon;
var propertiesPanelHeaderLabel;
var propertiesPanelHeaderReveal;
var propertiesPanelHeaderHelp;
var selectedObject;
var tipContainer;
var tipBox; var tipBox;
// TODO: remove this
var expandedSections = { var expandedSections = {
"property": false "property": false
}; };
function resizeStack() {
if (panels) {
var h = $(content).parent().height() - tipContainer.outerHeight();
panels.resize(h)
}
}
function init() { function init() {
content = document.createElement("div"); content = document.createElement("div");
@ -35,31 +51,78 @@ RED.sidebar.info = (function() {
var stackContainer = $("<div>",{class:"red-ui-sidebar-info-stack"}).appendTo(content); var stackContainer = $("<div>",{class:"red-ui-sidebar-info-stack"}).appendTo(content);
sections = RED.stack.create({ var outlinerPanel = $("<div>").css({
container: stackContainer "overflow": "hidden",
}).hide(); "height": "calc(70%)"
}).appendTo(stackContainer);
var propertiesPanel = $("<div>").css({
"overflow":"hidden",
"height":"100%",
"display": "flex",
"flex-direction": "column"
}).appendTo(stackContainer);
propertiesPanelHeader = $("<div>", {class:"red-ui-palette-header red-ui-info-header"}).css({
"flex":"0 0 auto"
}).appendTo(propertiesPanel);
propertiesSection = sections.add({ propertiesPanelHeaderIcon = $("<span>").appendTo(propertiesPanelHeader);
title: RED._("sidebar.info.info"), propertiesPanelHeaderLabel = $("<span>").appendTo(propertiesPanelHeader);
collapsible: true propertiesPanelHeaderHelp = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-book"></button>').css({
position: 'absolute',
top: '12px',
right: '38px'
}).on("click", function(evt) {
evt.preventDefault();
evt.stopPropagation();
if (selectedObject) {
RED.sidebar.help.show(selectedObject.type)
}
}).appendTo(propertiesPanelHeader);
RED.popover.tooltip(propertiesPanelHeaderHelp,RED._("sidebar.help.showHelp"));
propertiesPanelHeaderReveal = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-search"></button>').css({
position: 'absolute',
top: '12px',
right: '8px'
}).on("click", function(evt) {
evt.preventDefault();
evt.stopPropagation();
if (selectedObject) {
RED.sidebar.info.outliner.reveal(selectedObject);
}
}).appendTo(propertiesPanelHeader);
RED.popover.tooltip(propertiesPanelHeaderReveal,"Show in outline");
propertiesPanelContent = $("<div>").css({
"flex":"1 1 auto",
"overflow-y":"scroll",
}).appendTo(propertiesPanel);
panels = RED.panels.create({container: stackContainer})
panels.ratio(0.6);
RED.sidebar.info.outliner.build().appendTo(outlinerPanel);
RED.sidebar.addTab({
id: "info",
label: RED._("sidebar.info.label"),
name: RED._("sidebar.info.name"),
iconClass: "fa fa-info",
action:"core:show-info-tab",
content: content,
pinned: true,
enableOnEdit: true
}); });
propertiesSection.expand();
infoSection = sections.add({ $(window).on("resize", resizeStack);
title: RED._("sidebar.info.desc"), $(window).on("focus", resizeStack);
collapsible: true
});
infoSection.expand();
infoSection.content.css("padding","6px");
helpSection = sections.add({
title: RED._("sidebar.info.nodeHelp"),
collapsible: true
});
helpSection.expand();
helpSection.content.css("padding","6px");
var tipContainer = $('<div class="red-ui-help-tips"></div>').appendTo(content); // Tip Box
tipContainer = $('<div class="red-ui-help-tips"></div>').appendTo(content);
tipBox = $('<div class="red-ui-help-tip"></div>').appendTo(tipContainer); tipBox = $('<div class="red-ui-help-tip"></div>').appendTo(tipContainer);
var tipButtons = $('<div class="red-ui-help-tips-buttons"></div>').appendTo(tipContainer); var tipButtons = $('<div class="red-ui-help-tips-buttons"></div>').appendTo(tipContainer);
@ -75,17 +138,6 @@ RED.sidebar.info = (function() {
RED.actions.invoke("core:toggle-show-tips"); RED.actions.invoke("core:toggle-show-tips");
RED.notify(RED._("sidebar.info.showTips")); RED.notify(RED._("sidebar.info.showTips"));
}); });
RED.sidebar.addTab({
id: "info",
label: RED._("sidebar.info.label"),
name: RED._("sidebar.info.name"),
iconClass: "fa fa-info",
action:"core:show-info-tab",
content: content,
pinned: true,
enableOnEdit: true
});
if (tips.enabled()) { if (tips.enabled()) {
tips.start(); tips.start();
} else { } else {
@ -113,42 +165,29 @@ RED.sidebar.info = (function() {
refreshSelection(); refreshSelection();
return; return;
} }
sections.show(); $(propertiesPanelContent).empty();
$(propertiesSection.content).empty();
$(infoSection.content).empty();
$(helpSection.content).empty();
infoSection.title.text(RED._("sidebar.info.desc"));
var propRow; var propRow;
var table = $('<table class="red-ui-info-table"></table>').appendTo(propertiesSection.content); var table = $('<table class="red-ui-info-table"></table>').appendTo(propertiesPanelContent);
var tableBody = $('<tbody>').appendTo(table); var tableBody = $('<tbody>').appendTo(table);
var subflowNode; var subflowNode;
var subflowUserCount; var subflowUserCount;
var activeProject = RED.projects.getActiveProject();
if (activeProject) {
propRow = $('<tr class="red-ui-help-info-row"><td>'+ RED._("sidebar.project.name") + '</td><td></td></tr>').appendTo(tableBody);
$(propRow.children()[1]).text(activeProject.name||"");
$('<tr class="red-ui-help-property-expand blank"><td colspan="2"></td></tr>').appendTo(tableBody);
var editProjectButton = $('<button class="red-ui-button red-ui-button-small" style="position:absolute;right:2px;"><i class="fa fa-ellipsis-h"></i></button>')
.appendTo(propRow.children()[1])
.on("click", function(evt) {
evt.preventDefault();
RED.projects.editProject();
});
RED.popover.tooltip(editProjectButton,RED._('sidebar.project.showProjectSettings'));
}
propertiesSection.container.show();
infoSection.container.show();
helpSection.container.show();
if (node === null) { if (node === null) {
return; return;
} else if (Array.isArray(node)) { } else if (Array.isArray(node)) {
// Multiple things selected // Multiple things selected
// - hide help and info sections // - hide help and info sections
propertiesPanelHeaderIcon.empty();
RED.utils.createNodeIcon({type:"_selection_"}).appendTo(propertiesPanelHeaderIcon);
propertiesPanelHeaderLabel.text("Selection");
propertiesPanelHeaderReveal.hide();
propertiesPanelHeaderHelp.hide();
selectedObject = null;
var types = { var types = {
nodes:0, nodes:0,
flows:0, flows:0,
@ -167,8 +206,7 @@ RED.sidebar.info = (function() {
types.nodes++; types.nodes++;
} }
}); });
helpSection.container.hide(); // infoSection.container.hide();
infoSection.container.hide();
// - show the count of selected nodes // - show the count of selected nodes
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.selection")+"</td><td></td></tr>").appendTo(tableBody); propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.selection")+"</td><td></td></tr>").appendTo(tableBody);
@ -189,10 +227,10 @@ RED.sidebar.info = (function() {
// A single 'thing' selected. // A single 'thing' selected.
// Check to see if this is a subflow or subflow instance // Check to see if this is a subflow or subflow instance
var m = /^subflow(:(.+))?$/.exec(node.type); var subflowRegex = /^subflow(:(.+))?$/.exec(node.type);
if (m) { if (subflowRegex) {
if (m[2]) { if (subflowRegex[2]) {
subflowNode = RED.nodes.subflow(m[2]); subflowNode = RED.nodes.subflow(subflowRegex[2]);
} else { } else {
subflowNode = node; subflowNode = node;
} }
@ -205,25 +243,21 @@ RED.sidebar.info = (function() {
} }
}); });
} }
propertiesPanelHeaderIcon.empty();
RED.utils.createNodeIcon(node).appendTo(propertiesPanelHeaderIcon);
propertiesPanelHeaderLabel.text(RED.utils.getNodeLabel(node, node.type+" "+node.id));
propertiesPanelHeaderReveal.show();
selectedObject = node;
if (node.type === "tab" || node.type === "subflow") { if (node.type === "tab" || node.type === "subflow") {
// If nothing is selected, but we're on a flow or subflow tab. // If nothing is selected, but we're on a flow or subflow tab.
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info."+(node.type==='tab'?'flow':'subflow'))+'</td><td></td></tr>').appendTo(tableBody); propertiesPanelHeaderHelp.hide();
RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.tabName")+"</td><td></td></tr>").appendTo(tableBody);
$(propRow.children()[1]).text(node.label||node.name||"");
if (node.type === "tab") {
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.status")+'</td><td></td></tr>').appendTo(tableBody);
$(propRow.children()[1]).text((!!!node.disabled)?RED._("sidebar.info.enabled"):RED._("sidebar.info.disabled"))
}
} else if (node.type === "group") { } else if (node.type === "group") {
// An actual node is selected in the editor - build up its properties table propertiesPanelHeaderHelp.hide();
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.group")+"</td><td></td></tr>").appendTo(tableBody);
RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]); propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.group")+'</td><td></td></tr>').appendTo(tableBody);
if (node.name) {
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("common.label.name")+'</td><td></td></tr>').appendTo(tableBody);
$('<span class="red-ui-text-bidi-aware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'"></span>').text(node.name).appendTo(propRow.children()[1]);
}
propRow = $('<tr class="red-ui-help-info-row"><td>&nbsp;</td><td></td></tr>').appendTo(tableBody);
var typeCounts = { var typeCounts = {
nodes:0, nodes:0,
groups: 0 groups: 0
@ -246,22 +280,30 @@ RED.sidebar.info = (function() {
} else { } else {
// An actual node is selected in the editor - build up its properties table propertiesPanelHeaderHelp.show ();
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.node")+"</td><td></td></tr>").appendTo(tableBody);
RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]); propRow = $('<tr class="red-ui-help-info-row"><td></td><td></td></tr>').appendTo(tableBody);
if (node.type !== "subflow" && node.type !== "unknown" && node.name) {
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("common.label.name")+'</td><td></td></tr>').appendTo(tableBody); if (!subflowRegex) {
$('<span class="red-ui-text-bidi-aware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'"></span>').text(node.name).appendTo(propRow.children()[1]); $(propRow.children()[0]).text(RED._("sidebar.info.node"))
} else {
$(propRow.children()[0]).text(RED._("sidebar.info.subflow"))
} }
if (!m) { RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.type")+"</td><td></td></tr>").appendTo(tableBody);
if (!subflowRegex) {
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.type")+'</td><td></td></tr>').appendTo(tableBody);
$(propRow.children()[1]).text((node.type === "unknown")?node._orig.type:node.type); $(propRow.children()[1]).text((node.type === "unknown")?node._orig.type:node.type);
if (node.type === "unknown") { if (node.type === "unknown") {
$('<span style="float: right; font-size: 0.8em"><i class="fa fa-warning"></i></span>').prependTo($(propRow.children()[1])) $('<span style="float: right; font-size: 0.8em"><i class="fa fa-warning"></i></span>').prependTo($(propRow.children()[1]))
} }
} }
var count = 0; var count = 0;
if (!m && node.type != "subflow" && node.type != "group") { if (!subflowRegex && node.type != "subflow" && node.type != "group") {
var blankRow = $('<tr class="red-ui-help-property-expand blank"><td colspan="2"></td></tr>').appendTo(tableBody);
var defaults; var defaults;
if (node.type === 'unknown') { if (node.type === 'unknown') {
defaults = {}; defaults = {};
@ -276,7 +318,6 @@ RED.sidebar.info = (function() {
$(propRow.children()[1]).text(RED.nodes.getType(node.type).set.module); $(propRow.children()[1]).text(RED.nodes.getType(node.type).set.module);
count++; count++;
} }
$('<tr class="red-ui-help-property-expand red-ui-help-info-property-row blank'+(expandedSections.property?"":" hide")+'"><td colspan="2"></td></tr>').appendTo(tableBody);
if (defaults) { if (defaults) {
for (var n in defaults) { for (var n in defaults) {
@ -284,7 +325,8 @@ RED.sidebar.info = (function() {
var val = node[n]; var val = node[n];
var type = typeof val; var type = typeof val;
count++; count++;
propRow = $('<tr class="red-ui-help-info-property-row'+(expandedSections.property?"":" hide")+'"><td>'+n+"</td><td></td></tr>").appendTo(tableBody); propRow = $('<tr class="red-ui-help-info-property-row'+(expandedSections.property?"":" hide")+'"><td></td><td></td></tr>').appendTo(tableBody);
$(propRow.children()[0]).text(n);
if (defaults[n].type) { if (defaults[n].type) {
var configNode = RED.nodes.node(val); var configNode = RED.nodes.node(val);
if (!configNode) { if (!configNode) {
@ -314,37 +356,35 @@ RED.sidebar.info = (function() {
} }
} }
if (count > 0) { if (count > 0) {
$('<tr class="red-ui-help-property-expand blank"><td colspan="2"><a href="#" class="node-info-property-header'+(expandedSections.property?" expanded":"")+'"><span class="red-ui-help-property-more">'+RED._("sidebar.info.showMore")+'</span><span class="red-ui-help-property-less">'+RED._("sidebar.info.showLess")+'</span> <i class="fa fa-caret-down"></i></a></td></tr>').appendTo(tableBody); $('<a href="#" class="node-info-property-header'+(expandedSections.property?" expanded":"")+'"><span class="red-ui-help-property-more">'+RED._("sidebar.info.showMore")+'</span><span class="red-ui-help-property-less">'+RED._("sidebar.info.showLess")+'</span> <i class="fa fa-caret-down"></i></a>').appendTo(blankRow.children()[0]);
} }
} }
if (node.type !== 'tab') { if (node.type !== 'tab') {
if (m) { if (subflowRegex) {
$('<tr class="blank"><th colspan="2">'+RED._("sidebar.info.subflow")+'</th></tr>').appendTo(tableBody); $('<tr class="blank"><th colspan="2">'+RED._("sidebar.info.subflow")+'</th></tr>').appendTo(tableBody);
$('<tr class="node-info-subflow-row"><td>'+RED._("common.label.name")+'</td><td><span class="red-ui-text-bidi-aware" dir=\"'+RED.text.bidi.resolveBaseTextDir(subflowNode.name)+'">'+RED.utils.sanitize(subflowNode.name)+'</span></td></tr>').appendTo(tableBody); $('<tr class="node-info-subflow-row"><td>'+RED._("common.label.name")+'</td><td><span class="red-ui-text-bidi-aware" dir=\"'+RED.text.bidi.resolveBaseTextDir(subflowNode.name)+'">'+RED.utils.sanitize(subflowNode.name)+'</span></td></tr>').appendTo(tableBody);
} }
} }
} }
if (m) { if (subflowRegex) {
propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("subflow.category")+'</td><td></td></tr>').appendTo(tableBody); propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("subflow.category")+'</td><td></td></tr>').appendTo(tableBody);
var category = subflowNode.category||"subflows"; var category = subflowNode.category||"subflows";
$(propRow.children()[1]).text(RED._("palette.label."+category,{defaultValue:category})) $(propRow.children()[1]).text(RED._("palette.label."+category,{defaultValue:category}))
$('<tr class="node-info-subflow-row"><td>'+RED._("sidebar.info.instances")+"</td><td>"+subflowUserCount+'</td></tr>').appendTo(tableBody); $('<tr class="node-info-subflow-row"><td>'+RED._("sidebar.info.instances")+"</td><td>"+subflowUserCount+'</td></tr>').appendTo(tableBody);
} }
var helpText = ""; // var helpText = "";
if (node.type === "tab" || node.type === "subflow") { // if (node.type === "tab" || node.type === "subflow") {
$(helpSection.container).hide(); // } else {
} else { // if (subflowNode && node.type !== "subflow") {
$(helpSection.container).show(); // // Selected a subflow instance node.
if (subflowNode && node.type !== "subflow") { // // - The subflow template info goes into help
// Selected a subflow instance node. // helpText = (RED.utils.renderMarkdown(subflowNode.info||"")||('<span class="red-ui-help-info-none">'+RED._("sidebar.info.none")+'</span>'));
// - The subflow template info goes into help // } else {
helpText = (RED.utils.renderMarkdown(subflowNode.info||"")||('<span class="red-ui-help-info-none">'+RED._("sidebar.info.none")+'</span>')); // helpText = $("script[data-help-name='"+node.type+"']").html()||('<span class="red-ui-help-info-none">'+RED._("sidebar.info.none")+'</span>');
} else { // }
helpText = $("script[data-help-name='"+node.type+"']").html()||('<span class="red-ui-help-info-none">'+RED._("sidebar.info.none")+'</span>'); // setInfoText(helpText, helpSection.content);
} // }
setInfoText(helpText, helpSection.content);
}
var infoText = ""; var infoText = "";
@ -356,7 +396,26 @@ RED.sidebar.info = (function() {
if (node.info) { if (node.info) {
infoText = infoText + RED.utils.renderMarkdown(node.info || "") infoText = infoText + RED.utils.renderMarkdown(node.info || "")
} }
setInfoText(infoText, infoSection.content); var infoSectionContainer = $("<div>").css("padding","0 6px 6px").appendTo(propertiesPanelContent)
// var editInfo = $('<button class="red-ui-button red-ui-button-small" style="float: right"><i class="fa fa-file-text-o"></button>').appendTo(infoSectionContainer).on("click", function(evt) {
// //.text(RED._("sidebar.info.editDescription"))
// evt.preventDefault();
// evt.stopPropagation();
// if (node.type === 'tab') {
//
// } else if (node.type === 'subflow') {
//
// } else if (node.type === 'group') {
//
// } else if (node._def.category !== 'config') {
// RED.editor.edit(node,"editor-tab-description");
// } else {
//
// }
// })
setInfoText(infoText, infoSectionContainer);
$(".red-ui-sidebar-info-stack").scrollTop(0); $(".red-ui-sidebar-info-stack").scrollTop(0);
$(".node-info-property-header").on("click", function(e) { $(".node-info-property-header").on("click", function(e) {
@ -372,7 +431,7 @@ RED.sidebar.info = (function() {
// propRow = $('<tr class="red-ui-help-info-row"><td>Actions</td><td></td></tr>').appendTo(tableBody); // propRow = $('<tr class="red-ui-help-info-row"><td>Actions</td><td></td></tr>').appendTo(tableBody);
// var actionBar = $(propRow.children()[1]); // var actionBar = $(propRow.children()[1]);
// //
// // var actionBar = $('<div>',{style:"background: #fefefe; padding: 3px;"}).appendTo(propertiesSection.content); // // var actionBar = $('<div>',{style:"background: #fefefe; padding: 3px;"}).appendTo(propertiesPanel);
// $('<button type="button" class="red-ui-button"><i class="fa fa-code"></i></button>').appendTo(actionBar); // $('<button type="button" class="red-ui-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
// $('<button type="button" class="red-ui-button"><i class="fa fa-code"></i></button>').appendTo(actionBar); // $('<button type="button" class="red-ui-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
// $('<button type="button" class="red-ui-button"><i class="fa fa-code"></i></button>').appendTo(actionBar); // $('<button type="button" class="red-ui-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
@ -447,6 +506,7 @@ RED.sidebar.info = (function() {
} }
function startTips() { function startTips() {
$(".red-ui-sidebar-info").addClass('show-tips'); $(".red-ui-sidebar-info").addClass('show-tips');
resizeStack();
if (enabled) { if (enabled) {
if (!startTimeout && !refreshTimeout) { if (!startTimeout && !refreshTimeout) {
if (tipCount === -1) { if (tipCount === -1) {
@ -460,6 +520,7 @@ RED.sidebar.info = (function() {
} }
function stopTips() { function stopTips() {
$(".red-ui-sidebar-info").removeClass('show-tips'); $(".red-ui-sidebar-info").removeClass('show-tips');
resizeStack();
clearInterval(refreshTimeout); clearInterval(refreshTimeout);
clearTimeout(startTimeout); clearTimeout(startTimeout);
refreshTimeout = null; refreshTimeout = null;
@ -484,15 +545,8 @@ RED.sidebar.info = (function() {
} }
function set(html,title) { function set(html,title) {
// tips.stop(); console.warn("Deprecated use of RED.sidebar.info.set - use RED.sidebar.help.set instead")
// sections.show(); RED.sidebar.help.set(html,title);
refresh(null);
propertiesSection.container.hide();
helpSection.container.hide();
infoSection.container.show();
infoSection.title.text(title||RED._("sidebar.info.desc"));
setInfoText(html,infoSection.content);
$(".red-ui-sidebar-info-stack").scrollTop(0);
} }
function refreshSelection(selection) { function refreshSelection(selection) {

73
packages/node_modules/@node-red/editor-client/src/js/ui/utils.js vendored
View File

@ -806,9 +806,9 @@ RED.utils = (function() {
function separateIconPath(icon) { function separateIconPath(icon) {
var result = {module: "", file: ""}; var result = {module: "", file: ""};
if (icon) { if (icon) {
var index = icon.indexOf('icons/'); var index = icon.indexOf(RED.settings.apiRootUrl+'icons/');
if (index !== -1) { if (index === 0) {
icon = icon.substring(index+6); icon = icon.substring((RED.settings.apiRootUrl+'icons/').length);
} }
index = icon.indexOf('/'); index = icon.indexOf('/');
if (index !== -1) { if (index !== -1) {
@ -859,10 +859,15 @@ RED.utils = (function() {
} }
function getNodeIcon(def,node) { function getNodeIcon(def,node) {
if (def.category === 'config') { if (node && node.type === '_selection_') {
return "font-awesome/fa-object-ungroup";
} else if (node && node.type === 'group') {
return "font-awesome/fa-object-group"
} else if (def.category === 'config') {
return RED.settings.apiRootUrl+"icons/node-red/cog.svg" return RED.settings.apiRootUrl+"icons/node-red/cog.svg"
} else if (node && node.type === 'tab') { } else if (node && node.type === 'tab') {
return RED.settings.apiRootUrl+"icons/node-red/subflow.svg" return "red-ui-icons/red-ui-icons-flow"
// return RED.settings.apiRootUrl+"images/subflow_tab.svg"
} else if (node && node.type === 'unknown') { } else if (node && node.type === 'unknown') {
return RED.settings.apiRootUrl+"icons/node-red/alert.svg" return RED.settings.apiRootUrl+"icons/node-red/alert.svg"
} else if (node && node.icon) { } else if (node && node.icon) {
@ -921,6 +926,8 @@ RED.utils = (function() {
var l; var l;
if (node.type === 'tab') { if (node.type === 'tab') {
l = node.label || defaultLabel l = node.label || defaultLabel
} else if (node.type === 'group') {
l = node.name || defaultLabel
} else { } else {
l = node._def.label; l = node._def.label;
try { try {
@ -1054,11 +1061,63 @@ RED.utils = (function() {
} }
// If the specified name is not defined in font-awesome, show arrow-in icon. // If the specified name is not defined in font-awesome, show arrow-in icon.
iconUrl = RED.settings.apiRootUrl+"icons/node-red/arrow-in.svg" iconUrl = RED.settings.apiRootUrl+"icons/node-red/arrow-in.svg"
} else if (iconPath.module === "red-ui-icons") {
var redIconElement = $('<i/>').appendTo(iconContainer);
redIconElement.addClass("red-ui-palette-icon red-ui-icons " + iconPath.file);
return;
} }
var imageIconElement = $('<div/>',{class:"red-ui-palette-icon"}).appendTo(iconContainer); var imageIconElement = $('<div/>',{class:"red-ui-palette-icon"}).appendTo(iconContainer);
imageIconElement.css("backgroundImage", "url("+iconUrl+")"); imageIconElement.css("backgroundImage", "url("+iconUrl+")");
} }
function createNodeIcon(node) {
var def = node._def;
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"})
if (node.type === "_selection_") {
nodeDiv.addClass("red-ui-palette-icon-selection");
} else if (node.type === "group") {
nodeDiv.addClass("red-ui-palette-icon-group");
} else if (node.type === 'tab') {
nodeDiv.addClass("red-ui-palette-icon-flow");
} else {
var colour = RED.utils.getNodeColor(node.type,def);
// if (node.type === 'tab') {
// colour = "#C0DEED";
// }
nodeDiv.css('backgroundColor',colour);
var borderColor = getDarkerColor(colour);
if (borderColor !== colour) {
nodeDiv.css('border-color',borderColor)
}
}
var icon_url = RED.utils.getNodeIcon(def,node);
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
RED.utils.createIconElement(icon_url, iconContainer, true);
return nodeDiv;
}
function getDarkerColor(c) {
var r,g,b;
if (/^#[a-f0-9]{6}$/i.test(c)) {
r = parseInt(c.substring(1, 3), 16);
g = parseInt(c.substring(3, 5), 16);
b = parseInt(c.substring(5, 7), 16);
} else if (/^#[a-f0-9]{3}$/i.test(c)) {
r = parseInt(c.substring(1, 2)+c.substring(1, 2), 16);
g = parseInt(c.substring(2, 3)+c.substring(2, 3), 16);
b = parseInt(c.substring(3, 4)+c.substring(3, 4), 16);
} else {
return c;
}
var l = 0.3 * r/255 + 0.59 * g/255 + 0.11 * b/255 ;
r = Math.max(0,r-50);
g = Math.max(0,g-50);
b = Math.max(0,b-50);
var s = ((r<<16) + (g<<8) + b).toString(16);
return '#'+'000000'.slice(0, 6-s.length)+s;
}
return { return {
createObjectElement: buildMessageElement, createObjectElement: buildMessageElement,
getMessageProperty: getMessageProperty, getMessageProperty: getMessageProperty,
@ -1076,6 +1135,8 @@ RED.utils = (function() {
parseContextKey: parseContextKey, parseContextKey: parseContextKey,
createIconElement: createIconElement, createIconElement: createIconElement,
sanitize: sanitize, sanitize: sanitize,
renderMarkdown: renderMarkdown renderMarkdown: renderMarkdown,
createNodeIcon: createNodeIcon,
getDarkerColor: getDarkerColor
} }
})(); })();

11
packages/node_modules/@node-red/editor-client/src/js/ui/view.js vendored
View File

@ -3060,7 +3060,9 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
function nodeButtonClicked(d) { function nodeButtonClicked(d) {
if (mouse_mode === RED.state.SELECTING_NODE) { if (mouse_mode === RED.state.SELECTING_NODE) {
if (d3.event) {
d3.event.stopPropagation(); d3.event.stopPropagation();
}
return; return;
} }
var activeWorkspace = RED.workspaces.active(); var activeWorkspace = RED.workspaces.active();
@ -3087,8 +3089,10 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
RED.notify(RED._("notification.warning", {message:RED._("notification.warnings.nodeActionDisabled")}),"warning"); RED.notify(RED._("notification.warning", {message:RED._("notification.warnings.nodeActionDisabled")}),"warning");
} }
} }
if (d3.event) {
d3.event.preventDefault(); d3.event.preventDefault();
} }
}
function showTouchMenu(obj,pos) { function showTouchMenu(obj,pos) {
var mdn = mousedown_node; var mdn = mousedown_node;
@ -4660,6 +4664,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
RED.workspaces.show(id); RED.workspaces.show(id);
} else { } else {
var node = RED.nodes.node(id); var node = RED.nodes.node(id);
if (node) {
if (node._def.category !== 'config' && node.z) { if (node._def.category !== 'config' && node.z) {
node.highlighted = true; node.highlighted = true;
node.dirty = true; node.dirty = true;
@ -4698,6 +4703,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
RED.sidebar.config.show(id); RED.sidebar.config.show(id);
} }
} }
}
}, },
gridSize: function(v) { gridSize: function(v) {
if (v === undefined) { if (v === undefined) {
@ -4776,6 +4782,11 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
scroll: function(x,y) { scroll: function(x,y) {
chart.scrollLeft(chart.scrollLeft()+x); chart.scrollLeft(chart.scrollLeft()+x);
chart.scrollTop(chart.scrollTop()+y) chart.scrollTop(chart.scrollTop()+y)
},
clickNodeButton: function(n) {
if (n._def.button) {
nodeButtonClicked(n);
}
} }
}; };
})(); })();

2
packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js vendored
View File

@ -372,7 +372,9 @@ RED.workspaces = (function() {
var changes = { disabled: workspace.disabled }; var changes = { disabled: workspace.disabled };
workspace.disabled = disabled; workspace.disabled = disabled;
$("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!workspace.disabled); $("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!workspace.disabled);
if (id === activeWorkspace) {
$("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!workspace.disabled); $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!workspace.disabled);
}
var historyEvent = { var historyEvent = {
t: "edit", t: "edit",
changes:changes, changes:changes,

4
packages/node_modules/@node-red/editor-client/src/sass/colors.scss vendored
View File

@ -23,7 +23,7 @@ $primary-background: #f3f3f3;//#0ff;
$secondary-background: #fff;//#ff0; $secondary-background: #fff;//#ff0;
$secondary-background-selected: #efefef;//#e9e900; $secondary-background-selected: #efefef;//#e9e900;
$secondary-background-inactive: #f0f0f0;//#f0f000; $secondary-background-inactive: #f0f0f0;//#f0f000;
$secondary-background-hover: #ddd;//#dd0; $secondary-background-hover: #e6e6e6;//#dd0;
$secondary-background-disabled: #f9f9f9;//#fafa0; $secondary-background-disabled: #f9f9f9;//#fafa0;
$tertiary-background: #f7f7f7;//#f0f; $tertiary-background: #f7f7f7;//#f0f;
@ -94,7 +94,7 @@ $list-item-secondary-color: $secondary-text-color;
$list-item-background: $secondary-background; $list-item-background: $secondary-background;
$list-item-background-disabled: $secondary-background-inactive; $list-item-background-disabled: $secondary-background-inactive;
$list-item-background-hover: $secondary-background-hover; $list-item-background-hover: $secondary-background-hover;
$list-item-background-selected: $secondary-background-selected; $list-item-background-selected: #ffebc7; // #fff1e5;
$list-item-border-selected: $secondary-text-color-selected; $list-item-border-selected: $secondary-text-color-selected;
$tab-text-color-active: $header-text-color; $tab-text-color-active: $header-text-color;

3
packages/node_modules/@node-red/editor-client/src/sass/editor.scss vendored
View File

@ -304,9 +304,6 @@ button.red-ui-button-small
&:first-child { &:first-child {
padding: 20px 20px 0; padding: 20px 20px 0;
} }
&:last-child {
padding-bottom: 20px;
}
} }
} }
.red-ui-editor-type-expression-tab-content { .red-ui-editor-type-expression-tab-content {

15
packages/node_modules/@node-red/editor-client/src/sass/palette.scss vendored
View File

@ -186,6 +186,21 @@
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.red-ui-search-result-node {
&.red-ui-palette-icon-flow,
&.red-ui-palette-icon-group,
&.red-ui-palette-icon-selection {
background: none;
border-color: transparent;
.red-ui-palette-icon-container {
background: none;
}
.red-ui-palette-icon-fa {
color: $secondary-text-color;
font-size: 18px;
}
}
}
.red-ui-palette-icon-fa { .red-ui-palette-icon-fa {
color: white; color: white;
position: absolute; position: absolute;

13
packages/node_modules/@node-red/editor-client/src/sass/panels.scss vendored
View File

@ -22,9 +22,19 @@
// border: 1px solid red; // border: 1px solid red;
box-sizing: border-box; box-sizing: border-box;
} }
display: flex;
flex-direction: column;
>.red-ui-panel:first-child {
flex: 0 0 auto;
}
>.red-ui-panel:last-child {
flex: 1 1 auto;
}
} }
.red-ui-panels-separator { .red-ui-panels-separator {
flex: 0 0 auto;
border-top: 1px solid $secondary-border-color; border-top: 1px solid $secondary-border-color;
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid $secondary-border-color;
height: 7px; height: 7px;
@ -37,10 +47,13 @@
.red-ui-panel { .red-ui-panel {
overflow: auto; overflow: auto;
height: calc(50% - 4px); height: calc(50% - 4px);
position: relative;
} }
.red-ui-panels.red-ui-panels-horizontal { .red-ui-panels.red-ui-panels-horizontal {
height: 100%; height: 100%;
flex-direction: row;
&>.red-ui-panel { &>.red-ui-panel {
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;

10
packages/node_modules/@node-red/editor-client/src/sass/popover.scss vendored
View File

@ -150,6 +150,16 @@
.red-ui-popover a.red-ui-button, .red-ui-popover a.red-ui-button,
.red-ui-popover button.red-ui-button { .red-ui-popover button.red-ui-button {
&:not(.primary) {
border-color: $popover-button-border-color;
background: $popover-background;
color: $popover-color !important;
}
&:not(.primary):not(.disabled):not(.ui-button-disabled):hover {
border-color: $popover-button-border-color-hover;
}
&.primary { &.primary {
border-color: $popover-button-border-color; border-color: $popover-button-border-color;
} }

11
packages/node_modules/@node-red/editor-client/src/sass/search.scss vendored
View File

@ -24,6 +24,13 @@
top: 0px; top: 0px;
border: 1px solid $primary-border-color; border: 1px solid $primary-border-color;
box-shadow: 0 0 10px $shadow; box-shadow: 0 0 10px $shadow;
background: $secondary-background;
.red-ui-searchBox-container {
display: inline-block;
margin-right: 6px;
width: calc(100% - 30px);
}
} }
.red-ui-type-search { .red-ui-type-search {
@ -87,6 +94,8 @@
} }
.red-ui-palette-icon { .red-ui-palette-icon {
width: 15px; width: 15px;
position:relative;
left: -1px;
} }
.red-ui-search-result-description { .red-ui-search-result-description {
margin-left:28px; margin-left:28px;
@ -153,7 +162,7 @@
width: 30px; width: 30px;
float:left; float:left;
height: 25px; height: 25px;
border-radius: 5px; border-radius: 3px;
border: 1px solid $node-border; border: 1px solid $node-border;
background-position: 5% 50%; background-position: 5% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;

1
packages/node_modules/@node-red/editor-client/src/sass/style.scss vendored
View File

@ -42,6 +42,7 @@
@import "tab-config"; @import "tab-config";
@import "tab-context"; @import "tab-context";
@import "tab-info"; @import "tab-info";
@import "tab-help";
@import "popover"; @import "popover";
@import "flow"; @import "flow";
@import "palette-editor"; @import "palette-editor";

27
packages/node_modules/@node-red/editor-client/src/sass/tab-help.scss vendored Normal file
View File

@ -0,0 +1,27 @@
.red-ui-sidebar-help-stack {
// height: calc(100% - 39px);
}
.red-ui-help-search {
border-bottom: 1px solid $secondary-border-color;
}
.red-ui-sidebar-help-toc {
.red-ui-treeList-label {
font-size: 13px;
padding: 2px 0;
overflow: hidden;
white-space: nowrap;
}
}
#red-ui-sidebar-help-show-toc {
i.fa-angle-right {
transition: all 0.2s ease-in-out;
}
&.selected {
i.fa-angle-right {
transform: rotate(90deg);
}
}
}

248
packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss vendored
View File

@ -14,9 +14,25 @@
* limitations under the License. * limitations under the License.
**/ **/
.red-ui-sidebar-info {
height: 100%;
}
.red-ui-sidebar-info hr { .red-ui-sidebar-info hr {
margin: 10px 0; margin: 10px 0;
} }
.red-ui-info-header {
padding-left: 9px;
line-height: 21px;
cursor: default;
> * {
vertical-align: middle
}
> span {
display: inline-block;
margin-left: 5px;
}
border-bottom: 1px solid $secondary-border-color;
}
table.red-ui-info-table { table.red-ui-info-table {
font-size: 14px; font-size: 14px;
margin: 0 0 10px; margin: 0 0 10px;
@ -125,6 +141,9 @@ div.red-ui-info-table {
font-size: 1.296em; font-size: 1.296em;
line-height: 1.3em; line-height: 1.3em;
margin: 8px auto; margin: 8px auto;
&.red-ui-help-title {
border-bottom: 1px solid $tertiary-border-color;
}
} }
h2 { h2 {
font-weight: 500; font-weight: 500;
@ -214,12 +233,13 @@ div.red-ui-info-table {
} }
.red-ui-sidebar-info-stack { .red-ui-sidebar-info-stack {
position: absolute; height: 100%;
top: 0; // position: absolute;
bottom: 0; // top: 0;
left: 0; // bottom: 0;
right: 0; // left: 0;
overflow-y: scroll; // right: 0;
// overflow-y: scroll;
} }
.red-ui-help-tips { .red-ui-help-tips {
display: none; display: none;
@ -227,20 +247,23 @@ div.red-ui-info-table {
left:0; left:0;
right:0; right:0;
bottom: 0; bottom: 0;
height: 150px; height: 0;
transition: height 0.2s, padding 0.2s;
box-sizing: border-box; box-sizing: border-box;
border-top: 1px solid $secondary-border-color; border-top: 1px solid $secondary-border-color;
background-color: $secondary-background; background-color: $secondary-background;
padding: 20px; padding: 0;
box-shadow: 0 5px 20px 0px $shadow; box-shadow: 0 5px 20px 0px $shadow;
overflow-y: auto; overflow-y: auto;
} }
.red-ui-sidebar-info.show-tips { .red-ui-sidebar-info.show-tips {
.red-ui-sidebar-info-stack { .red-ui-sidebar-info-stack {
bottom: 150px; height: calc(100% - 150px);
} }
.red-ui-help-tips { .red-ui-help-tips {
display: block; display: block;
height: 150px;
padding: 20px;
} }
} }
@ -279,3 +302,210 @@ div.red-ui-info-table {
border-radius: 4px; border-radius: 4px;
padding: 2px 4px 2px; padding: 2px 4px 2px;
} }
.red-ui-info-outline,.red-ui-sidebar-help-toc {
display: flex;
flex-direction: column;
.red-ui-treeList {
flex-grow: 1;
position: relative;
}
.red-ui-treeList-container {
position: absolute;
top: 0;
bottom: 0;
}
.red-ui-treeList-container,.red-ui-editableList-border {
border: none;
border-radius: 0;
}
.red-ui-treeList-label {
font-size: 13px;
padding: 2px 0;
overflow: hidden;
}
.red-ui-info-outline-project {
border-bottom: 1px solid $secondary-border-color;
}
.red-ui-info-outline-item {
display: inline-block;
padding: 0;
font-size: 13px;
border: none;
.red-ui-palette-icon-fa {
position: relative;
top: 1px;
left: 0px;
}
&:hover {
background: inherit
}
&.red-ui-info-outline-item-flow {
.red-ui-search-result-description {
margin-left: 4px;
}
}
&.red-ui-info-outline-item-group .red-ui-search-result-node {
background: none;
border-color: transparent;
.red-ui-palette-icon-container {
background: none;
}
.red-ui-palette-icon-fa {
color: $secondary-text-color;
font-size: 18px;
}
}
&.red-ui-info-outline-item-empty {
font-style: italic;
color: $form-placeholder-color;
}
}
.red-ui-search-result-node {
width: 24px;
height: 20px;
margin-top: 1px;
}
.red-ui-palette-icon-container {
width: 24px;
}
.red-ui-palette-icon {
width: 20px;
}
.red-ui-search-result-description {
margin-left: 32px;
line-height: 22px;
white-space: nowrap;
}
.red-ui-search-result-node-label {
color: $secondary-text-color;
}
}
.red-ui-info-outline-item-control-spacer {
display: inline-block;
width: 23px;
}
.red-ui-info-outline-item-controls {
position: absolute;
top:0;
bottom: 0;
right: 0px;
padding: 2px 3px 0 1px;
text-align: right;
background: $list-item-background;
.red-ui-treeList-label:hover & {
background: $list-item-background-hover;
}
.red-ui-treeList-label.selected & {
background: $list-item-background-selected;
}
&.red-ui-info-outline-item-hover-controls button {
min-width: 23px;
}
.red-ui-treeList-label:not(:hover) &.red-ui-info-outline-item-hover-controls {
button {
border: none;
background: none;
}
}
.red-ui-info-outline-item-control-reveal,
.red-ui-info-outline-item-control-action {
display: none;
}
.red-ui-treeList-label:hover & {
.red-ui-info-outline-item-control-reveal,
.red-ui-info-outline-item-control-action {
display: inline-block;
}
}
.fa-ban {
display: none;
}
.red-ui-info-outline-item.red-ui-info-outline-item-disabled & {
.fa-ban {
display: inline-block;
}
.fa-circle-thin {
display: none;
}
}
button {
margin-right: 3px
}
}
.red-ui-info-outline-item-disabled {
.red-ui-search-result-node {
opacity: 0.4;
}
.red-ui-info-outline-item-label {
font-style: italic;
color: $secondary-text-color-disabled;
}
.red-ui-icons-flow {
opacity: 0.4;
}
}
.red-ui-icons {
display: inline-block;
width: 18px;
&:before {
white-space: pre;
content: ' '
}
}
.red-ui-icons-flow {
background-image: url('images/subflow_tab.svg');
background-repeat: no-repeat;
background-size: contain;
filter: brightness(2.5);
}
.red-ui-info-toolbar {
min-height: 39px;
height: 39px;
box-sizing: border-box;
text-align: left;
// padding-left: 9px;
// box-sizing: border-box;
// background: $palette-header-background;
// border-bottom: 1px solid $secondary-border-color;
.red-ui-searchBox-container {
position: absolute;
top: 6px;
right: 8px;
width: calc(100% - 150px);
max-width: 250px;
background: $palette-header-background;
input.red-ui-searchBox-input {
border: 1px solid $secondary-border-color;
border-radius: 3px;
font-size: 12px;
height: 26px;
}
input:focus.red-ui-searchBox-input {
border: 1px solid $secondary-border-color;
}
i.fa-search, i.fa-times {
top: 7px;
}
}
}