Namespace more editor component CSS

This commit is contained in:
Nick O'Leary
2019-05-08 13:26:48 +01:00
parent b98e85016a
commit 50228c5970
15 changed files with 354 additions and 770 deletions

View File

@@ -15,7 +15,7 @@
**/
RED.eventLog = (function() {
var template = '<script type="text/x-red" data-template-name="_eventLog"><div class="form-row node-text-editor-row"><div style="height: 100%;min-height: 150px;" class="node-text-editor" id="event-log-editor"></div></div></script>';
var template = '<script type="text/x-red" data-template-name="_eventLog"><div class="form-row node-text-editor-row"><div style="height: 100%;min-height: 150px;" class="node-text-editor" id="red-ui-event-log-editor"></div></div></script>';
var eventLogEditor;
var backlog = [];
@@ -73,7 +73,7 @@ RED.eventLog = (function() {
var trayBody = tray.find('.red-ui-tray-body');
var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
eventLogEditor = RED.editor.createEditor({
id: 'event-log-editor',
id: 'red-ui-event-log-editor',
value: backlog.join("\n"),
lineNumbers: false,
readOnly: true,

View File

@@ -194,7 +194,7 @@ RED.search = (function() {
searchInput.i18n();
var searchResultsDiv = $("<div>",{class:"red-ui-search-results-container"}).appendTo(dialog);
searchResults = $('<ol>',{id:"search-result-list", style:"position: absolute;top: 5px;bottom: 5px;left: 5px;right: 5px;"}).appendTo(searchResultsDiv).editableList({
searchResults = $('<ol>',{style:"position: absolute;top: 5px;bottom: 5px;left: 5px;right: 5px;"}).appendTo(searchResultsDiv).editableList({
addButton: false,
addItem: function(container,i,object) {
var node = object.node;

View File

@@ -22,15 +22,15 @@ RED.sidebar.config = (function() {
content.tabIndex = 0;
$('<div class="red-ui-sidebar-header"><span class="button-group">'+
'<a class="red-ui-sidebar-header-button-toggle selected" id="workspace-config-node-filter-all" href="#"><span data-i18n="sidebar.config.filterAll"></span></a>'+
'<a class="red-ui-sidebar-header-button-toggle" id="workspace-config-node-filter-unused" href="#"><span data-i18n="sidebar.config.filterUnused"></span></a> '+
'<a class="red-ui-sidebar-header-button-toggle selected" id="red-ui-sidebar-config-filter-all" href="#"><span data-i18n="sidebar.config.filterAll"></span></a>'+
'<a class="red-ui-sidebar-header-button-toggle" id="red-ui-sidebar-config-filter-unused" href="#"><span data-i18n="sidebar.config.filterUnused"></span></a> '+
'</span></div>'
).appendTo(content);
var toolbar = $('<div>'+
'<a class="red-ui-footer-button" id="workspace-config-node-collapse-all" href="#"><i class="fa fa-angle-double-up"></i></a> '+
'<a class="red-ui-footer-button" id="workspace-config-node-expand-all" href="#"><i class="fa fa-angle-double-down"></i></a>'+
'<a class="red-ui-footer-button" id="red-ui-sidebar-config-collapse-all" href="#"><i class="fa fa-angle-double-up"></i></a> '+
'<a class="red-ui-footer-button" id="red-ui-sidebar-config-expand-all" href="#"><i class="fa fa-angle-double-down"></i></a>'+
'</div>');
var globalCategories = $("<div>").appendTo(content);
@@ -44,8 +44,8 @@ RED.sidebar.config = (function() {
function getOrCreateCategory(name,parent,label) {
name = name.replace(/\./i,"-");
if (!categories[name]) {
var container = $('<div class="red-ui-palette-category workspace-config-node-category" id="workspace-config-node-category-'+name+'"></div>').appendTo(parent);
var header = $('<div class="workspace-config-node-tray-header red-ui-palette-header"><i class="fa fa-angle-down expanded"></i></div>').appendTo(container);
var container = $('<div class="red-ui-palette-category red-ui-sidebar-config-category" id="red-ui-sidebar-config-category-'+name+'"></div>').appendTo(parent);
var header = $('<div class="red-ui-sidebar-config-tray-header red-ui-palette-header"><i class="fa fa-angle-down expanded"></i></div>').appendTo(container);
if (label) {
$('<span class="red-ui-palette-node-config-label"/>').text(label).appendTo(header);
} else {
@@ -208,8 +208,8 @@ RED.sidebar.config = (function() {
validList[sf.id.replace(/\./g,"-")] = true;
getOrCreateCategory(sf.id,subflowCategories,sf.name);
})
$(".workspace-config-node-category").each(function() {
var id = $(this).attr('id').substring("workspace-config-node-category-".length);
$(".red-ui-sidebar-config-category").each(function() {
var id = $(this).attr('id').substring("red-ui-sidebar-config-category-".length);
if (!validList[id]) {
$(this).remove();
delete categories[id];
@@ -299,7 +299,7 @@ RED.sidebar.config = (function() {
$(content).find(".red-ui-palette-node").removeClass("selected");
});
$("#workspace-config-node-collapse-all").on("click", function(e) {
$("#red-ui-sidebar-config-collapse-all").on("click", function(e) {
e.preventDefault();
for (var cat in categories) {
if (categories.hasOwnProperty(cat)) {
@@ -307,7 +307,7 @@ RED.sidebar.config = (function() {
}
}
});
$("#workspace-config-node-expand-all").on("click", function(e) {
$("#red-ui-sidebar-config-expand-all").on("click", function(e) {
e.preventDefault();
for (var cat in categories) {
if (categories.hasOwnProperty(cat)) {
@@ -317,39 +317,39 @@ RED.sidebar.config = (function() {
}
}
});
$('#workspace-config-node-filter-all').on("click",function(e) {
$('#red-ui-sidebar-config-filter-all').on("click",function(e) {
e.preventDefault();
if (showUnusedOnly) {
$(this).addClass('selected');
$('#workspace-config-node-filter-unused').removeClass('selected');
$('#red-ui-sidebar-config-filter-unused').removeClass('selected');
showUnusedOnly = !showUnusedOnly;
refreshConfigNodeList();
}
});
$('#workspace-config-node-filter-unused').on("click",function(e) {
$('#red-ui-sidebar-config-filter-unused').on("click",function(e) {
e.preventDefault();
if (!showUnusedOnly) {
$(this).addClass('selected');
$('#workspace-config-node-filter-all').removeClass('selected');
$('#red-ui-sidebar-config-filter-all').removeClass('selected');
showUnusedOnly = !showUnusedOnly;
refreshConfigNodeList();
}
});
RED.popover.tooltip($('#workspace-config-node-filter-all'),"Show all config nodes");
RED.popover.tooltip($('#workspace-config-node-filter-unused'),"Show all unused config nodes");
RED.popover.tooltip($('#red-ui-sidebar-config-filter-all'),"Show all config nodes");
RED.popover.tooltip($('#red-ui-sidebar-config-filter-unused'),"Show all unused config nodes");
}
function show(id) {
if (typeof id === 'boolean') {
if (id) {
$('#workspace-config-node-filter-unused').trigger("click");
$('#red-ui-sidebar-config-filter-unused').trigger("click");
} else {
$('#workspace-config-node-filter-all').trigger("click");
$('#red-ui-sidebar-config-filter-all').trigger("click");
}
}
refreshConfigNodeList();
if (typeof id === "string") {
$('#workspace-config-node-filter-all').trigger("click");
$('#red-ui-sidebar-config-filter-all').trigger("click");
id = id.replace(/\./g,"-");
setTimeout(function() {
var node = $(".red-ui-palette-node_id_"+id);

View File

@@ -45,7 +45,6 @@ RED.typeSearch = (function() {
}
function createDialog() {
//shade = $('<div>',{class:"red-ui-type-search-shade"}).appendTo("#red-ui-main-container");
dialog = $("<div>",{id:"red-ui-type-search",class:"red-ui-search red-ui-type-search"}).appendTo("#red-ui-main-container");
var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(dialog);
searchInput = $('<input type="text" id="red-ui-type-search-input">').attr("placeholder",RED._("search.addNode")).appendTo(searchDiv).searchBox({
@@ -104,7 +103,7 @@ RED.typeSearch = (function() {
});
searchResultsDiv = $("<div>",{class:"red-ui-search-results-container"}).appendTo(dialog);
searchResults = $('<ol>',{id:"search-result-list", style:"position: absolute;top: 0;bottom: 0;left: 0;right: 0;"}).appendTo(searchResultsDiv).editableList({
searchResults = $('<ol>',{style:"position: absolute;top: 0;bottom: 0;left: 0;right: 0;"}).appendTo(searchResultsDiv).editableList({
addButton: false,
filter: function(data) {
if (activeFilter === "" ) {

View File

@@ -36,10 +36,10 @@
if (!isShowing) {
return;
}
var navNode = navVis.selectAll(".navnode").data(RED.view.getActiveNodes(),function(d){return d.id});
var navNode = navVis.selectAll(".red-ui-navigator-node").data(RED.view.getActiveNodes(),function(d){return d.id});
navNode.exit().remove();
navNode.enter().insert("rect")
.attr('class','navnode')
.attr('class','red-ui-navigator-node')
.attr("pointer-events", "none");
navNode.each(function(d) {
d3.select(this).attr("x",function(d) { return (d.x-d.w/2)/nav_scale })
@@ -68,7 +68,7 @@
function toggle() {
if (!isShowing) {
isShowing = true;
$("#btn-navigate").addClass("selected");
$("#red-ui-view-navigate").addClass("selected");
resizeNavBorder();
refreshNodes();
$("#red-ui-workspace-chart").on("scroll",onScroll);
@@ -77,7 +77,7 @@
isShowing = false;
navContainer.fadeOut(100);
$("#red-ui-workspace-chart").off("scroll",onScroll);
$("#btn-navigate").removeClass("selected");
$("#red-ui-view-navigate").removeClass("selected");
}
}
@@ -101,16 +101,7 @@
.attr("width", nav_width)
.attr("height", nav_height)
.attr("pointer-events", "all")
.style({
position: "absolute",
bottom: 0,
right:0,
zIndex: 101,
"border-left": "1px solid #ccc",
"border-top": "1px solid #ccc",
background: "rgba(245,245,245,0.8)",
"box-shadow": "-1px 0 3px rgba(0,0,0,0.1)"
});
.attr("id","red-ui-navigator-canvas")
navBox.append("rect").attr("x",0).attr("y",0).attr("width",nav_width).attr("height",nav_height).style({
fill:"none",
@@ -142,28 +133,21 @@
isDragging = false;
})
navBorder = navBox.append("rect")
.attr("stroke-dasharray","5,5")
.attr("pointer-events", "none")
.style({
stroke: "#999",
strokeWidth: 1,
fill: "white",
});
navBorder = navBox.append("rect").attr("class","red-ui-navigator-border")
navVis = navBox.append("svg:g")
RED.statusBar.add({
id: "view-navigator",
align: "right",
element: $('<button class="red-ui-footer-button-toggle single" id="btn-navigate"><i class="fa fa-map-o"></i></button>')
element: $('<button class="red-ui-footer-button-toggle single" id="red-ui-view-navigate"><i class="fa fa-map-o"></i></button>')
})
$("#btn-navigate").on("click", function(evt) {
$("#red-ui-view-navigate").on("click", function(evt) {
evt.preventDefault();
toggle();
})
RED.popover.tooltip($("#btn-navigate"),RED._('actions.toggle-navigator'),'core:toggle-navigator');
RED.popover.tooltip($("#red-ui-view-navigate"),RED._('actions.toggle-navigator'),'core:toggle-navigator');
},
refresh: refreshNodes,
resize: resizeNavBorder,

View File

@@ -184,7 +184,7 @@ RED.view = (function() {
// .attr("y",point[1])
// .attr("width",0)
// .attr("height",0)
// .attr("class","lasso");
// .attr("class","nr-ui-view-lasso");
},touchLongPressTimeout);
}
})
@@ -962,7 +962,7 @@ RED.view = (function() {
.attr("y",point[1])
.attr("width",0)
.attr("height",0)
.attr("class","lasso");
.attr("class","nr-ui-view-lasso");
d3.event.preventDefault();
}
}
@@ -2766,7 +2766,7 @@ RED.view = (function() {
.attr("x", 38)
.attr("dy", ".35em")
.attr("text-anchor","start")
.classed("hidden",hideLabel);
.classed("hide",hideLabel);
if (d._def.align) {
text.attr("class","node_label node_label_"+d._def.align);
@@ -2788,8 +2788,8 @@ RED.view = (function() {
//node.append("path").attr("class","node_error").attr("d","M 3,-3 l 10,0 l -5,-8 z");
//TODO: these ought to be SVG
node.append("image").attr("class","node_error hidden").attr("xlink:href","red/images/icons/node-error.png").attr("x",0).attr("y",-6).attr("width",10).attr("height",9);
node.append("image").attr("class","node_changed hidden").attr("xlink:href","red/images/icons/node-changed.png").attr("x",12).attr("y",-6).attr("width",10).attr("height",10);
node.append("image").attr("class","node_error hide").attr("xlink:href","red/images/icons/node-error.png").attr("x",0).attr("y",-6).attr("width",10).attr("height",9);
node.append("image").attr("class","node_changed hide").attr("xlink:href","red/images/icons/node-changed.png").attr("x",12).attr("y",-6).attr("width",10).attr("height",10);
});
node.each(function(d,i) {
@@ -2944,9 +2944,8 @@ RED.view = (function() {
}
s = " "+s;
}
return "node_label"+
(d._def.align?" node_label_"+d._def.align:"")+s;
}).classed("hidden",hideLabel);
return "node_label"+(d._def.align?" node_label_"+d._def.align:"")+s;
}).classed("hide",hideLabel);
if (d._def.icon) {
var icon = thisNode.select(".node_icon");
var faIcon = thisNode.select(".fa-lg");
@@ -2968,15 +2967,13 @@ RED.view = (function() {
}
}
thisNode.selectAll(".node_tools").attr("x",function(d){return d.w-35;}).attr("y",function(d){return d.h-20;});
thisNode.selectAll(".node_changed")
.attr("x",function(d){return d.w-10})
.classed("hidden",function(d) { return !(d.changed||d.moved); });
.classed("hide",function(d) { return !(d.changed||d.moved); });
thisNode.selectAll(".node_error")
.attr("x",function(d){return d.w-10-((d.changed||d.moved)?13:0)})
.classed("hidden",function(d) { return d.valid; });
.classed("hide",function(d) { return d.valid; });
thisNode.selectAll(".port_input").each(function(d,i) {
var port = d3.select(this);