mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Namespace all palette css
This commit is contained in:
Nick O'Leary
parent
10c818474c
commit
a2632fdcc8
@ -115,9 +115,9 @@ var RED = (function() {
|
||||
var stepConfig = function() {
|
||||
if (configs.length === 0) {
|
||||
$("body").i18n();
|
||||
$("#palette > .palette-spinner").hide();
|
||||
$(".palette-scroll").removeClass("hide");
|
||||
$("#palette-search").removeClass("hide");
|
||||
$("#red-ui-palette > .red-ui-palette-spinner").hide();
|
||||
$(".red-ui-palette-scroll").removeClass("hide");
|
||||
$("#red-ui-palette-search").removeClass("hide");
|
||||
loadFlows(function() {
|
||||
if (RED.settings.theme("projects.enabled",false)) {
|
||||
RED.projects.refresh(function(activeProject) {
|
||||
|
||||
@ -45,11 +45,11 @@ RED.stack = (function() {
|
||||
return {
|
||||
add: function(entry) {
|
||||
entries.push(entry);
|
||||
entry.container = $('<div class="palette-category">').appendTo(container);
|
||||
entry.container = $('<div class="red-ui-palette-category">').appendTo(container);
|
||||
if (!visible) {
|
||||
entry.container.hide();
|
||||
}
|
||||
var header = $('<div class="palette-header"></div>').appendTo(entry.container);
|
||||
var header = $('<div class="red-ui-palette-header"></div>').appendTo(entry.container);
|
||||
entry.header = header;
|
||||
entry.contentWrap = $('<div></div>',{style:"position:relative"}).appendTo(entry.container);
|
||||
if (options.fill) {
|
||||
|
||||
@ -273,7 +273,7 @@ RED.deploy = (function() {
|
||||
deployInflight = true;
|
||||
$("#header-shade").show();
|
||||
$("#editor-shade").show();
|
||||
$("#palette-shade").show();
|
||||
$("#red-ui-palette-shade").show();
|
||||
$("#sidebar-shade").show();
|
||||
|
||||
$.ajax({
|
||||
@ -308,7 +308,7 @@ RED.deploy = (function() {
|
||||
$(".deploy-button-spinner").hide();
|
||||
$("#header-shade").hide();
|
||||
$("#editor-shade").hide();
|
||||
$("#palette-shade").hide();
|
||||
$("#red-ui-palette-shade").hide();
|
||||
$("#sidebar-shade").hide();
|
||||
},delta);
|
||||
});
|
||||
@ -424,7 +424,7 @@ RED.deploy = (function() {
|
||||
deployInflight = true;
|
||||
$("#header-shade").show();
|
||||
$("#editor-shade").show();
|
||||
$("#palette-shade").show();
|
||||
$("#red-ui-palette-shade").show();
|
||||
$("#sidebar-shade").show();
|
||||
$.ajax({
|
||||
url:"flows",
|
||||
@ -494,7 +494,7 @@ RED.deploy = (function() {
|
||||
$(".deploy-button-spinner").hide();
|
||||
$("#header-shade").hide();
|
||||
$("#editor-shade").hide();
|
||||
$("#palette-shade").hide();
|
||||
$("#red-ui-palette-shade").hide();
|
||||
$("#sidebar-shade").hide();
|
||||
},delta);
|
||||
});
|
||||
|
||||
@ -497,7 +497,7 @@ RED.diff = (function() {
|
||||
}
|
||||
nodeDiv.css('backgroundColor',colour);
|
||||
|
||||
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
|
||||
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
|
||||
RED.utils.createIconElement(icon_url, iconContainer, false);
|
||||
|
||||
return nodeDiv;
|
||||
|
||||
@ -913,7 +913,7 @@ RED.editor = (function() {
|
||||
var icon_url = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+icon;
|
||||
iconDiv.data('icon',icon_url);
|
||||
nodeDiv.css('backgroundColor',colour);
|
||||
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
|
||||
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
|
||||
RED.utils.createIconElement(icon_url, iconContainer, true);
|
||||
|
||||
if (iconPath.module === moduleName && iconPath.file === icon) {
|
||||
@ -983,7 +983,7 @@ RED.editor = (function() {
|
||||
var colour = RED.utils.getNodeColor(node.type, node._def);
|
||||
var icon_url = RED.utils.getNodeIcon(node._def,node);
|
||||
nodeDiv.css('backgroundColor',colour);
|
||||
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
|
||||
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
|
||||
RED.utils.createIconElement(icon_url, iconContainer, true);
|
||||
|
||||
iconButton.on("click", function(e) {
|
||||
|
||||
@ -580,7 +580,7 @@ RED.palette.editor = (function() {
|
||||
content: modulesTab
|
||||
})
|
||||
|
||||
var filterDiv = $('<div>',{class:"palette-search"}).appendTo(modulesTab);
|
||||
var filterDiv = $('<div>',{class:"red-ui-palette-search"}).appendTo(modulesTab);
|
||||
filterInput = $('<input type="text" data-i18n="[placeholder]palette.filter"></input>')
|
||||
.appendTo(filterDiv)
|
||||
.searchBox({
|
||||
@ -643,7 +643,7 @@ RED.palette.editor = (function() {
|
||||
var enableButton = $('<a href="#" class="editor-button editor-button-small"></a>').text(RED._('palette.editor.disableall')).appendTo(buttonGroup);
|
||||
|
||||
var contentRow = $('<div>',{class:"palette-module-content"}).appendTo(container);
|
||||
var shade = $('<div class="palette-module-shade hide"><img src="red/images/spin.svg" class="palette-spinner"/></div>').appendTo(container);
|
||||
var shade = $('<div class="palette-module-shade hide"><img src="red/images/spin.svg" class="red-ui-palette-spinner"/></div>').appendTo(container);
|
||||
|
||||
object.elements = {
|
||||
updateButton: updateButton,
|
||||
@ -736,7 +736,7 @@ RED.palette.editor = (function() {
|
||||
|
||||
var toolBar = $('<div>',{class:"palette-editor-toolbar"}).appendTo(installTab);
|
||||
|
||||
var searchDiv = $('<div>',{class:"palette-search"}).appendTo(installTab);
|
||||
var searchDiv = $('<div>',{class:"red-ui-palette-search"}).appendTo(installTab);
|
||||
searchInput = $('<input type="text" data-i18n="[placeholder]palette.search"></input>')
|
||||
.appendTo(searchDiv)
|
||||
.searchBox({
|
||||
@ -875,7 +875,7 @@ RED.palette.editor = (function() {
|
||||
}
|
||||
});
|
||||
|
||||
$('<div id="palette-module-install-shade" class="palette-module-shade hide"><div class="palette-module-shade-status"></div><img src="red/images/spin.svg" class="palette-spinner"/></div>').appendTo(installTab);
|
||||
$('<div id="palette-module-install-shade" class="palette-module-shade hide"><div class="palette-module-shade-status"></div><img src="red/images/spin.svg" class="red-ui-palette-spinner"/></div>').appendTo(installTab);
|
||||
}
|
||||
function update(entry,version,container,done) {
|
||||
if (RED.settings.theme('palette.editable') === false) {
|
||||
|
||||
@ -23,43 +23,43 @@ RED.palette = (function() {
|
||||
var sidebarControls;
|
||||
|
||||
function createCategory(originalCategory,rootCategory,category,ns) {
|
||||
if ($("#palette-base-category-"+rootCategory).length === 0) {
|
||||
if ($("#red-ui-palette-base-category-"+rootCategory).length === 0) {
|
||||
createCategoryContainer(originalCategory,rootCategory, ns+":palette.label."+rootCategory);
|
||||
}
|
||||
$("#palette-container-"+rootCategory).show();
|
||||
if ($("#palette-"+category).length === 0) {
|
||||
$("#palette-base-category-"+rootCategory).append('<div id="palette-'+category+'"></div>');
|
||||
$("#red-ui-palette-container-"+rootCategory).show();
|
||||
if ($("#red-ui-palette-"+category).length === 0) {
|
||||
$("#red-ui-palette-base-category-"+rootCategory).append('<div id="red-ui-palette-'+category+'"></div>');
|
||||
}
|
||||
}
|
||||
function createCategoryContainer(originalCategory,category, labelId) {
|
||||
var label = RED._(labelId, {defaultValue:category});
|
||||
label = (label || category).replace(/_/g, " ");
|
||||
var catDiv = $('<div id="palette-container-'+category+'" class="palette-category palette-close hide">'+
|
||||
'<div id="palette-header-'+category+'" class="palette-header"><i class="expanded fa fa-angle-down"></i><span>'+label+'</span></div>'+
|
||||
'<div class="palette-content" id="palette-base-category-'+category+'">'+
|
||||
'<div id="palette-'+category+'-input"></div>'+
|
||||
'<div id="palette-'+category+'-output"></div>'+
|
||||
'<div id="palette-'+category+'-function"></div>'+
|
||||
var catDiv = $('<div id="red-ui-palette-container-'+category+'" class="red-ui-palette-category palette-close hide">'+
|
||||
'<div id="red-ui-palette-header-'+category+'" class="red-ui-palette-header"><i class="expanded fa fa-angle-down"></i><span>'+label+'</span></div>'+
|
||||
'<div class="red-ui-palette-content" id="red-ui-palette-base-category-'+category+'">'+
|
||||
'<div id="red-ui-palette-'+category+'-input"></div>'+
|
||||
'<div id="red-ui-palette-'+category+'-output"></div>'+
|
||||
'<div id="red-ui-palette-'+category+'-function"></div>'+
|
||||
'</div>'+
|
||||
'</div>').appendTo("#palette-container");
|
||||
'</div>').appendTo("#red-ui-palette-container");
|
||||
catDiv.data('category',originalCategory);
|
||||
catDiv.data('label',label);
|
||||
categoryContainers[category] = {
|
||||
container: catDiv,
|
||||
close: function() {
|
||||
catDiv.removeClass("palette-open");
|
||||
catDiv.addClass("palette-closed");
|
||||
$("#palette-base-category-"+category).slideUp();
|
||||
$("#palette-header-"+category+" i").removeClass("expanded");
|
||||
catDiv.removeClass("red-ui-palette-open");
|
||||
catDiv.addClass("red-ui-palette-closed");
|
||||
$("#red-ui-palette-base-category-"+category).slideUp();
|
||||
$("#red-ui-palette-header-"+category+" i").removeClass("expanded");
|
||||
},
|
||||
open: function() {
|
||||
catDiv.addClass("palette-open");
|
||||
catDiv.removeClass("palette-closed");
|
||||
$("#palette-base-category-"+category).slideDown();
|
||||
$("#palette-header-"+category+" i").addClass("expanded");
|
||||
catDiv.addClass("red-ui-palette-open");
|
||||
catDiv.removeClass("red-ui-palette-closed");
|
||||
$("#red-ui-palette-base-category-"+category).slideDown();
|
||||
$("#red-ui-palette-header-"+category+" i").addClass("expanded");
|
||||
},
|
||||
toggle: function() {
|
||||
if (catDiv.hasClass("palette-open")) {
|
||||
if (catDiv.hasClass("red-ui-palette-open")) {
|
||||
categoryContainers[category].close();
|
||||
} else {
|
||||
categoryContainers[category].open();
|
||||
@ -67,7 +67,7 @@ RED.palette = (function() {
|
||||
}
|
||||
};
|
||||
|
||||
$("#palette-header-"+category).on('click', function(e) {
|
||||
$("#red-ui-palette-header-"+category).on('click', function(e) {
|
||||
categoryContainers[category].toggle();
|
||||
});
|
||||
}
|
||||
@ -85,17 +85,17 @@ RED.palette = (function() {
|
||||
var displayLines = [];
|
||||
|
||||
var currentLine = words[0];
|
||||
var currentLineWidth = RED.view.calculateTextWidth(currentLine, "palette_label", 0);
|
||||
var currentLineWidth = RED.view.calculateTextWidth(currentLine, "red-ui-palette-label", 0);
|
||||
|
||||
for (var i=1;i<words.length;i++) {
|
||||
var newWidth = RED.view.calculateTextWidth(currentLine+" "+words[i], "palette_label", 0);
|
||||
var newWidth = RED.view.calculateTextWidth(currentLine+" "+words[i], "red-ui-palette-label", 0);
|
||||
if (newWidth < nodeWidth) {
|
||||
currentLine += " "+words[i];
|
||||
currentLineWidth = newWidth;
|
||||
} else {
|
||||
displayLines.push(currentLine);
|
||||
currentLine = words[i];
|
||||
currentLineWidth = RED.view.calculateTextWidth(currentLine, "palette_label", 0);
|
||||
currentLineWidth = RED.view.calculateTextWidth(currentLine, "red-ui-palette-label", 0);
|
||||
}
|
||||
}
|
||||
displayLines.push(currentLine);
|
||||
@ -104,10 +104,10 @@ RED.palette = (function() {
|
||||
var multiLineNodeHeight = 8+(lineHeight*displayLines.length);
|
||||
el.css({height:multiLineNodeHeight+"px"});
|
||||
|
||||
var labelElement = el.find(".palette_label");
|
||||
var labelElement = el.find(".red-ui-palette-label");
|
||||
labelElement.html(lines).attr('dir', RED.text.bidi.resolveBaseTextDir(lines));
|
||||
|
||||
el.find(".palette_port").css({top:(multiLineNodeHeight/2-5)+"px"});
|
||||
el.find(".red-ui-palette-port").css({top:(multiLineNodeHeight/2-5)+"px"});
|
||||
|
||||
var popOverContent;
|
||||
try {
|
||||
@ -145,7 +145,7 @@ RED.palette = (function() {
|
||||
|
||||
function setIcon(element,sf) {
|
||||
var icon_url = RED.utils.getNodeIcon(sf._def);
|
||||
var iconContainer = element.find(".palette_icon_container");
|
||||
var iconContainer = element.find(".red-ui-palette-icon-container");
|
||||
RED.utils.createIconElement(icon_url, iconContainer, true);
|
||||
}
|
||||
|
||||
@ -155,7 +155,7 @@ RED.palette = (function() {
|
||||
|
||||
function addNodeType(nt,def) {
|
||||
var nodeTypeId = escapeNodeType(nt);
|
||||
if ($("#palette_node_"+nodeTypeId).length) {
|
||||
if ($("#red-ui-palette-node_"+nodeTypeId).length) {
|
||||
return;
|
||||
}
|
||||
if (exclusion.indexOf(def.category)===-1) {
|
||||
@ -165,7 +165,7 @@ RED.palette = (function() {
|
||||
var rootCategory = category.split("-")[0];
|
||||
|
||||
var d = document.createElement("div");
|
||||
d.id = "palette_node_"+nodeTypeId;
|
||||
d.id = "red-ui-palette-node_"+nodeTypeId;
|
||||
d.type = nt;
|
||||
|
||||
var label = /^(.*?)([ -]in|[ -]out)?$/.exec(nt)[1];
|
||||
@ -178,17 +178,17 @@ RED.palette = (function() {
|
||||
}
|
||||
|
||||
$('<div/>', {
|
||||
class: "palette_label"
|
||||
+ (((!def.align && def.inputs !== 0 && def.outputs === 0) || "right" === def.align) ? " palette_label_right" : "")
|
||||
class: "red-ui-palette-label"
|
||||
+ (((!def.align && def.inputs !== 0 && def.outputs === 0) || "right" === def.align) ? " red-ui-palette-label-right" : "")
|
||||
}).appendTo(d);
|
||||
|
||||
d.className="palette_node";
|
||||
d.className="red-ui-palette-node";
|
||||
|
||||
if (def.icon) {
|
||||
var icon_url = RED.utils.getNodeIcon(def);
|
||||
var iconContainer = $('<div/>', {
|
||||
class: "palette_icon_container"
|
||||
+ (((!def.align && def.inputs !== 0 && def.outputs === 0) || "right" === def.align) ? " palette_icon_container_right" : "")
|
||||
class: "red-ui-palette-icon-container"
|
||||
+ (((!def.align && def.inputs !== 0 && def.outputs === 0) || "right" === def.align) ? " red-ui-palette-icon-container-right" : "")
|
||||
}).appendTo(d);
|
||||
RED.utils.createIconElement(icon_url, iconContainer, true);
|
||||
}
|
||||
@ -197,19 +197,19 @@ RED.palette = (function() {
|
||||
|
||||
if (def.outputs > 0) {
|
||||
var portOut = document.createElement("div");
|
||||
portOut.className = "palette_port palette_port_output";
|
||||
portOut.className = "red-ui-palette-port red-ui-palette-port-output";
|
||||
d.appendChild(portOut);
|
||||
}
|
||||
|
||||
if (def.inputs > 0) {
|
||||
var portIn = document.createElement("div");
|
||||
portIn.className = "palette_port palette_port_input";
|
||||
portIn.className = "red-ui-palette-port red-ui-palette-port-input";
|
||||
d.appendChild(portIn);
|
||||
}
|
||||
|
||||
createCategory(def.category,rootCategory,category,(coreCategories.indexOf(rootCategory) !== -1)?"node-red":def.set.id);
|
||||
|
||||
$("#palette-"+category).append(d);
|
||||
$("#red-ui-palette-"+category).append(d);
|
||||
|
||||
$(d).data('category',rootCategory);
|
||||
|
||||
@ -258,8 +258,8 @@ RED.palette = (function() {
|
||||
revertDuration: 300,
|
||||
containment:'#main-container',
|
||||
start: function() {
|
||||
paletteWidth = $("#palette").width();
|
||||
paletteTop = $("#palette").parent().position().top + $("#palette-container").position().top;
|
||||
paletteWidth = $("#red-ui-palette").width();
|
||||
paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top;
|
||||
RED.view.focus();
|
||||
},
|
||||
stop: function() { d3.select('.link_splice').classed('link_splice',false); if (spliceTimer) { clearTimeout(spliceTimer); spliceTimer = null;}},
|
||||
@ -338,8 +338,8 @@ RED.palette = (function() {
|
||||
}
|
||||
setLabel(nt,$(d),label,nodeInfo);
|
||||
|
||||
var categoryNode = $("#palette-container-"+rootCategory);
|
||||
if (categoryNode.find(".palette_node").length === 1) {
|
||||
var categoryNode = $("#red-ui-palette-container-"+rootCategory);
|
||||
if (categoryNode.find(".red-ui-palette-node").length === 1) {
|
||||
categoryContainers[rootCategory].open();
|
||||
}
|
||||
|
||||
@ -348,12 +348,12 @@ RED.palette = (function() {
|
||||
|
||||
function removeNodeType(nt) {
|
||||
var nodeTypeId = escapeNodeType(nt);
|
||||
var paletteNode = $("#palette_node_"+nodeTypeId);
|
||||
var categoryNode = paletteNode.closest(".palette-category");
|
||||
var paletteNode = $("#red-ui-palette-node_"+nodeTypeId);
|
||||
var categoryNode = paletteNode.closest(".red-ui-palette-category");
|
||||
paletteNode.remove();
|
||||
if (categoryNode.find(".palette_node").length === 0) {
|
||||
if (categoryNode.find(".red-ui-palette-node").length === 0) {
|
||||
if (categoryNode.find("i").hasClass("expanded")) {
|
||||
categoryNode.find(".palette-content").slideToggle();
|
||||
categoryNode.find(".red-ui-palette-content").slideToggle();
|
||||
categoryNode.find("i").toggleClass("expanded");
|
||||
}
|
||||
}
|
||||
@ -361,10 +361,10 @@ RED.palette = (function() {
|
||||
|
||||
function hideNodeType(nt) {
|
||||
var nodeTypeId = escapeNodeType(nt);
|
||||
var paletteNode = $("#palette_node_"+nodeTypeId);
|
||||
var paletteNode = $("#red-ui-palette-node_"+nodeTypeId);
|
||||
paletteNode.hide();
|
||||
var categoryNode = paletteNode.closest(".palette-category");
|
||||
var cl = categoryNode.find(".palette_node");
|
||||
var categoryNode = paletteNode.closest(".red-ui-palette-category");
|
||||
var cl = categoryNode.find(".red-ui-palette-node");
|
||||
var c = 0;
|
||||
for (var i = 0; i < cl.length; i++) {
|
||||
if ($(cl[i]).css('display') === 'none') { c += 1; }
|
||||
@ -374,32 +374,32 @@ RED.palette = (function() {
|
||||
|
||||
function showNodeType(nt) {
|
||||
var nodeTypeId = escapeNodeType(nt);
|
||||
var paletteNode = $("#palette_node_"+nodeTypeId);
|
||||
var categoryNode = paletteNode.closest(".palette-category");
|
||||
var paletteNode = $("#red-ui-palette-node_"+nodeTypeId);
|
||||
var categoryNode = paletteNode.closest(".red-ui-palette-category");
|
||||
categoryNode.show();
|
||||
paletteNode.show();
|
||||
}
|
||||
|
||||
function refreshNodeTypes() {
|
||||
RED.nodes.eachSubflow(function(sf) {
|
||||
var paletteNode = $("#palette_node_subflow_"+sf.id.replace(".","_"));
|
||||
var portInput = paletteNode.find(".palette_port_input");
|
||||
var portOutput = paletteNode.find(".palette_port_output");
|
||||
var paletteNode = $("#red-ui-palette-node_subflow_"+sf.id.replace(".","_"));
|
||||
var portInput = paletteNode.find(".red-ui-palette-port-input");
|
||||
var portOutput = paletteNode.find(".red-ui-palette-port-output");
|
||||
|
||||
var paletteLabel = paletteNode.find(".palette_label");
|
||||
paletteLabel.attr("class","palette_label"
|
||||
+ (((!sf._def.align && sf.in.length !== 0 && sf.out.length === 0) || "right" === sf._def.align) ? " palette_label_right" : "")
|
||||
var paletteLabel = paletteNode.find(".red-ui-palette-label");
|
||||
paletteLabel.attr("class","red-ui-palette-label"
|
||||
+ (((!sf._def.align && sf.in.length !== 0 && sf.out.length === 0) || "right" === sf._def.align) ? " red-ui-palette-label-right" : "")
|
||||
);
|
||||
|
||||
var paletteIconContainer = paletteNode.find(".palette_icon_container");
|
||||
paletteIconContainer.attr("class","palette_icon_container"
|
||||
+ (((!sf._def.align && sf.in.length !== 0 && sf.out.length === 0) || "right" === sf._def.align) ? " palette_icon_container_right" : "")
|
||||
var paletteIconContainer = paletteNode.find(".red-ui-palette-icon-container");
|
||||
paletteIconContainer.attr("class","red-ui-palette-icon-container"
|
||||
+ (((!sf._def.align && sf.in.length !== 0 && sf.out.length === 0) || "right" === sf._def.align) ? " red-ui-palette-icon-container-right" : "")
|
||||
);
|
||||
|
||||
|
||||
if (portInput.length === 0 && sf.in.length > 0) {
|
||||
var portIn = document.createElement("div");
|
||||
portIn.className = "palette_port palette_port_input";
|
||||
portIn.className = "red-ui-palette-port red-ui-palette-port-input";
|
||||
paletteNode.append(portIn);
|
||||
} else if (portInput.length !== 0 && sf.in.length === 0) {
|
||||
portInput.remove();
|
||||
@ -407,7 +407,7 @@ RED.palette = (function() {
|
||||
|
||||
if (portOutput.length === 0 && sf.out.length > 0) {
|
||||
var portOut = document.createElement("div");
|
||||
portOut.className = "palette_port palette_port_output";
|
||||
portOut.className = "red-ui-palette-port red-ui-palette-port-output";
|
||||
paletteNode.append(portOut);
|
||||
} else if (portOutput.length !== 0 && sf.out.length === 0) {
|
||||
portOutput.remove();
|
||||
@ -421,17 +421,17 @@ RED.palette = (function() {
|
||||
var category = newCategory.replace(/ /g,"_");
|
||||
createCategory(newCategory,category,category,"node-red");
|
||||
|
||||
var currentCategoryNode = paletteNode.closest(".palette-category");
|
||||
var currentCategoryNode = paletteNode.closest(".red-ui-palette-category");
|
||||
var newCategoryNode = $("#palette-"+category);
|
||||
newCategoryNode.append(paletteNode);
|
||||
if (newCategoryNode.find(".palette_node").length === 1) {
|
||||
if (newCategoryNode.find(".red-ui-palette-node").length === 1) {
|
||||
categoryContainers[category].open();
|
||||
}
|
||||
|
||||
paletteNode.data('category',newCategory);
|
||||
if (currentCategoryNode.find(".palette_node").length === 0) {
|
||||
if (currentCategoryNode.find(".red-ui-palette-node").length === 0) {
|
||||
if (currentCategoryNode.find("i").hasClass("expanded")) {
|
||||
currentCategoryNode.find(".palette-content").slideToggle();
|
||||
currentCategoryNode.find(".red-ui-palette-content").slideToggle();
|
||||
currentCategoryNode.find("i").toggleClass("expanded");
|
||||
}
|
||||
}
|
||||
@ -444,8 +444,8 @@ RED.palette = (function() {
|
||||
|
||||
function filterChange(val) {
|
||||
var re = new RegExp(val.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'),'i');
|
||||
$("#palette-container .palette_node").each(function(i,el) {
|
||||
var currentLabel = $(el).find(".palette_label").text();
|
||||
$("#red-ui-palette-container .red-ui-palette-node").each(function(i,el) {
|
||||
var currentLabel = $(el).find(".red-ui-palette-label").text();
|
||||
if (val === "" || re.test(el.id) || re.test(currentLabel)) {
|
||||
$(this).show();
|
||||
} else {
|
||||
@ -456,7 +456,7 @@ RED.palette = (function() {
|
||||
for (var category in categoryContainers) {
|
||||
if (categoryContainers.hasOwnProperty(category)) {
|
||||
if (categoryContainers[category].container
|
||||
.find(".palette_node")
|
||||
.find(".red-ui-palette-node")
|
||||
.filter(function() { return $(this).css('display') !== 'none'}).length === 0) {
|
||||
categoryContainers[category].close();
|
||||
} else {
|
||||
@ -468,6 +468,13 @@ RED.palette = (function() {
|
||||
|
||||
function init() {
|
||||
|
||||
$('<img src="red/images/spin.svg" class="red-ui-palette-spinner hide"/>').appendTo("#red-ui-palette");
|
||||
$('<div id="red-ui-palette-search" class="red-ui-palette-search hide"><input type="text" data-i18n="[placeholder]palette.filter"></input></div>').appendTo("#red-ui-palette");
|
||||
$('<div id="red-ui-palette-container" class="red-ui-palette-scroll hide"></div>').appendTo("#red-ui-palette");
|
||||
$('<div class="red-ui-component-footer"></div>').appendTo("#red-ui-palette");
|
||||
$('<div id="red-ui-palette-shade" class="hide"></div>').appendTo("#red-ui-palette");
|
||||
|
||||
|
||||
RED.events.on('registry:node-type-added', function(nodeType) {
|
||||
var def = RED.nodes.getType(nodeType);
|
||||
addNodeType(nodeType,def);
|
||||
@ -508,25 +515,26 @@ RED.palette = (function() {
|
||||
}
|
||||
});
|
||||
|
||||
$("#palette > .palette-spinner").show();
|
||||
$("#red-ui-palette > .red-ui-palette-spinner").show();
|
||||
|
||||
$("#palette-search input").searchBox({
|
||||
|
||||
$("#red-ui-palette-search input").searchBox({
|
||||
delay: 100,
|
||||
change: function() {
|
||||
filterChange($(this).val());
|
||||
}
|
||||
})
|
||||
|
||||
sidebarControls = $('<div class="sidebar-control-left"><i class="fa fa-chevron-left"</div>').appendTo($("#palette"));
|
||||
sidebarControls = $('<div class="sidebar-control-left"><i class="fa fa-chevron-left"</div>').appendTo($("#red-ui-palette"));
|
||||
RED.popover.tooltip(sidebarControls,RED._("keyboard.togglePalette"),"core:toggle-palette");
|
||||
|
||||
sidebarControls.on("click", function() {
|
||||
RED.menu.toggleSelected("menu-item-palette");
|
||||
})
|
||||
$("#palette").on("mouseenter", function() {
|
||||
$("#red-ui-palette").on("mouseenter", function() {
|
||||
sidebarControls.toggle("slide", { direction: "left" }, 200);
|
||||
})
|
||||
$("#palette").on("mouseleave", function() {
|
||||
$("#red-ui-palette").on("mouseleave", function() {
|
||||
sidebarControls.hide();
|
||||
})
|
||||
|
||||
@ -546,7 +554,10 @@ RED.palette = (function() {
|
||||
createCategoryContainer(category, category, "palette.label."+category);
|
||||
});
|
||||
|
||||
$("#palette-collapse-all").on("click", function(e) {
|
||||
|
||||
var paletteFooterButtons = $('<span class="button-group"></span>').appendTo("#red-ui-palette .red-ui-component-footer");
|
||||
var paletteCollapseAll = $('<button type="button" class="red-ui-footer-button"><i class="fa fa-angle-double-up"></i></button>').appendTo(paletteFooterButtons);
|
||||
paletteCollapseAll.on("click", function(e) {
|
||||
e.preventDefault();
|
||||
for (var cat in categoryContainers) {
|
||||
if (categoryContainers.hasOwnProperty(cat)) {
|
||||
@ -554,9 +565,10 @@ RED.palette = (function() {
|
||||
}
|
||||
}
|
||||
});
|
||||
RED.popover.tooltip($("#palette-collapse-all"),RED._('palette.actions.collapse-all'));
|
||||
RED.popover.tooltip(paletteCollapseAll,RED._('palette.actions.collapse-all'));
|
||||
|
||||
$("#palette-expand-all").on("click", function(e) {
|
||||
var paletteExpandAll = $('<button type="button" class="red-ui-footer-button"><i class="fa fa-angle-double-down"></i></button>').appendTo(paletteFooterButtons);
|
||||
paletteExpandAll.on("click", function(e) {
|
||||
e.preventDefault();
|
||||
for (var cat in categoryContainers) {
|
||||
if (categoryContainers.hasOwnProperty(cat)) {
|
||||
@ -564,7 +576,7 @@ RED.palette = (function() {
|
||||
}
|
||||
}
|
||||
});
|
||||
RED.popover.tooltip($("#palette-expand-all"),RED._('palette.actions.expand-all'));
|
||||
RED.popover.tooltip(paletteExpandAll,RED._('palette.actions.expand-all'));
|
||||
|
||||
RED.actions.add("core:toggle-palette", function(state) {
|
||||
if (state === undefined) {
|
||||
@ -576,11 +588,11 @@ RED.palette = (function() {
|
||||
}
|
||||
function togglePalette(state) {
|
||||
if (!state) {
|
||||
$("#main-container").addClass("palette-closed");
|
||||
$("#main-container").addClass("red-ui-palette-closed");
|
||||
sidebarControls.hide();
|
||||
sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left");
|
||||
} else {
|
||||
$("#main-container").removeClass("palette-closed");
|
||||
$("#main-container").removeClass("red-ui-palette-closed");
|
||||
sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left");
|
||||
}
|
||||
setTimeout(function() { $(window).trigger("resize"); } ,200);
|
||||
@ -589,7 +601,7 @@ RED.palette = (function() {
|
||||
|
||||
function getCategories() {
|
||||
var categories = [];
|
||||
$("#palette-container .palette-category").each(function(i,d) {
|
||||
$("#red-ui-palette-container .red-ui-palette-category").each(function(i,d) {
|
||||
categories.push({id:$(d).data('category'),label:$(d).data('label')});
|
||||
})
|
||||
return categories;
|
||||
|
||||
@ -2228,13 +2228,13 @@ RED.projects = (function() {
|
||||
$(this).parent().find(".ui-dialog-titlebar-close").hide();
|
||||
// $("#header-shade").show();
|
||||
// $("#editor-shade").show();
|
||||
// $("#palette-shade").show();
|
||||
// $("#red-ui-palette-shade").show();
|
||||
// $("#sidebar-shade").show();
|
||||
},
|
||||
close: function(e) {
|
||||
// $("#header-shade").hide();
|
||||
// $("#editor-shade").hide();
|
||||
// $("#palette-shade").hide();
|
||||
// $("#red-ui-palette-shade").hide();
|
||||
// $("#sidebar-shade").hide();
|
||||
}
|
||||
});
|
||||
|
||||
@ -213,7 +213,7 @@ RED.search = (function() {
|
||||
}
|
||||
nodeDiv.css('backgroundColor',colour);
|
||||
|
||||
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
|
||||
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-description"}).appendTo(div);
|
||||
@ -256,7 +256,7 @@ RED.search = (function() {
|
||||
RED.keyboard.add("*","escape",function(){hide()});
|
||||
$("#header-shade").show();
|
||||
$("#editor-shade").show();
|
||||
$("#palette-shade").show();
|
||||
$("#red-ui-palette-shade").show();
|
||||
$("#sidebar-shade").show();
|
||||
$("#sidebar-separator").hide();
|
||||
indexWorkspace();
|
||||
@ -277,7 +277,7 @@ RED.search = (function() {
|
||||
visible = false;
|
||||
$("#header-shade").hide();
|
||||
$("#editor-shade").hide();
|
||||
$("#palette-shade").hide();
|
||||
$("#red-ui-palette-shade").hide();
|
||||
$("#sidebar-shade").hide();
|
||||
$("#sidebar-separator").show();
|
||||
if (dialog !== null) {
|
||||
@ -301,7 +301,7 @@ RED.search = (function() {
|
||||
|
||||
$("#header-shade").on('mousedown',hide);
|
||||
$("#editor-shade").on('mousedown',hide);
|
||||
$("#palette-shade").on('mousedown',hide);
|
||||
$("#red-ui-palette-shade").on('mousedown',hide);
|
||||
$("#sidebar-shade").on('mousedown',hide);
|
||||
}
|
||||
|
||||
|
||||
@ -44,7 +44,7 @@ RED.sidebar.config = (function() {
|
||||
function getOrCreateCategory(name,parent,label) {
|
||||
name = name.replace(/\./i,"-");
|
||||
if (!categories[name]) {
|
||||
var container = $('<div class="palette-category workspace-config-node-category" id="workspace-config-node-category-'+name+'"></div>').appendTo(parent);
|
||||
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 palette-header"><i class="fa fa-angle-down expanded"></i></div>').appendTo(container);
|
||||
if (label) {
|
||||
$('<span class="config-node-label"/>').text(label).appendTo(header);
|
||||
@ -52,7 +52,7 @@ RED.sidebar.config = (function() {
|
||||
$('<span class="config-node-label" data-i18n="sidebar.config.'+name+'">').appendTo(header);
|
||||
}
|
||||
$('<span class="config-node-filter-info"></span>').appendTo(header);
|
||||
category = $('<ul class="palette-content config-node-list"></ul>').appendTo(container);
|
||||
category = $('<ul class="red-ui-palette-content config-node-list"></ul>').appendTo(container);
|
||||
container.i18n();
|
||||
var icon = header.find("i");
|
||||
var result = {
|
||||
@ -139,11 +139,11 @@ RED.sidebar.config = (function() {
|
||||
currentType = node.type;
|
||||
}
|
||||
|
||||
var entry = $('<li class="palette_node config_node palette_node_id_'+node.id.replace(/\./g,"-")+'"></li>').appendTo(list);
|
||||
var entry = $('<li class="red-ui-palette-node config_node red-ui-palette-node_id_'+node.id.replace(/\./g,"-")+'"></li>').appendTo(list);
|
||||
entry.data('node',node.id);
|
||||
$('<div class="palette_label"></div>').text(label).appendTo(entry);
|
||||
$('<div class="red-ui-palette-label"></div>').text(label).appendTo(entry);
|
||||
if (node._def.hasUsers !== false) {
|
||||
var iconContainer = $('<div/>',{class:"palette_icon_container palette_icon_container_right"}).appendTo(entry);
|
||||
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container red-ui-palette-icon-container-right"}).appendTo(entry);
|
||||
if (node.users.length === 0) {
|
||||
iconContainer.text(0);
|
||||
} else {
|
||||
@ -163,7 +163,7 @@ RED.sidebar.config = (function() {
|
||||
if (e.metaKey) {
|
||||
$(this).toggleClass("selected");
|
||||
} else {
|
||||
$(content).find(".palette_node").removeClass("selected");
|
||||
$(content).find(".red-ui-palette-node").removeClass("selected");
|
||||
$(this).addClass("selected");
|
||||
}
|
||||
RED.sidebar.info.refresh(node);
|
||||
@ -246,11 +246,11 @@ RED.sidebar.config = (function() {
|
||||
});
|
||||
RED.actions.add("core:show-config-tab", function() {RED.sidebar.show('config')});
|
||||
RED.actions.add("core:select-all-config-nodes", function() {
|
||||
$(content).find(".palette_node").addClass("selected");
|
||||
$(content).find(".red-ui-palette-node").addClass("selected");
|
||||
})
|
||||
RED.actions.add("core:delete-config-selection", function() {
|
||||
var selectedNodes = [];
|
||||
$(content).find(".palette_node.selected").each(function() {
|
||||
$(content).find(".red-ui-palette-node.selected").each(function() {
|
||||
selectedNodes.push($(this).data('node'));
|
||||
});
|
||||
if (selectedNodes.length > 0) {
|
||||
@ -296,7 +296,7 @@ RED.sidebar.config = (function() {
|
||||
|
||||
|
||||
RED.events.on("view:selection-changed",function() {
|
||||
$(content).find(".palette_node").removeClass("selected");
|
||||
$(content).find(".red-ui-palette-node").removeClass("selected");
|
||||
});
|
||||
|
||||
$("#workspace-config-node-collapse-all").on("click", function(e) {
|
||||
@ -352,7 +352,7 @@ RED.sidebar.config = (function() {
|
||||
$('#workspace-config-node-filter-all').trigger("click");
|
||||
id = id.replace(/\./g,"-");
|
||||
setTimeout(function() {
|
||||
var node = $(".palette_node_id_"+id);
|
||||
var node = $(".red-ui-palette-node_id_"+id);
|
||||
var y = node.position().top;
|
||||
var h = node.height();
|
||||
var scrollWindow = $(".sidebar-node-config");
|
||||
|
||||
@ -268,12 +268,12 @@ RED.sidebar.info = (function() {
|
||||
var container = propRow.children()[1];
|
||||
|
||||
var div = $('<span>',{class:""}).appendTo(container);
|
||||
var nodeDiv = $('<div>',{class:"palette_node palette_node_small"}).appendTo(div);
|
||||
var nodeDiv = $('<div>',{class:"red-ui-palette-node red-ui-palette-node-small"}).appendTo(div);
|
||||
var colour = RED.utils.getNodeColor(configNode.type,configNode._def);
|
||||
var icon_url = RED.utils.getNodeIcon(configNode._def);
|
||||
nodeDiv.css({'backgroundColor':colour, "cursor":"pointer"});
|
||||
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
|
||||
$('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
|
||||
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
|
||||
$('<div/>',{class:"red-ui-palette-icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
|
||||
var nodeContainer = $('<span></span>').css({"verticalAlign":"top","marginLeft":"6px"}).text(configLabel).appendTo(container);
|
||||
|
||||
nodeDiv.on('dblclick',function() {
|
||||
|
||||
@ -117,7 +117,7 @@ RED.tray = (function() {
|
||||
function finishBuild() {
|
||||
$("#header-shade").show();
|
||||
$("#editor-shade").show();
|
||||
$("#palette-shade").show();
|
||||
$("#red-ui-palette-shade").show();
|
||||
$(".sidebar-shade").show();
|
||||
tray.preferredWidth = Math.max(el.width(),500);
|
||||
if (!options.maximized) {
|
||||
@ -269,7 +269,7 @@ RED.tray = (function() {
|
||||
if (stack.length === 0) {
|
||||
$("#header-shade").hide();
|
||||
$("#editor-shade").hide();
|
||||
$("#palette-shade").hide();
|
||||
$("#red-ui-palette-shade").hide();
|
||||
$(".sidebar-shade").hide();
|
||||
RED.events.emit("editor:close");
|
||||
RED.view.focus();
|
||||
|
||||
@ -145,7 +145,7 @@ RED.typeSearch = (function() {
|
||||
var icon_url = RED.utils.getNodeIcon(def);
|
||||
nodeDiv.css('backgroundColor',colour);
|
||||
|
||||
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
|
||||
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
|
||||
RED.utils.createIconElement(icon_url, iconContainer, false);
|
||||
|
||||
if (def.inputs > 0) {
|
||||
|
||||
@ -923,12 +923,12 @@ RED.utils = (function() {
|
||||
/**
|
||||
* Create or update an icon element and append it to iconContainer.
|
||||
* @param iconUrl - Url of icon.
|
||||
* @param iconContainer - Icon container element with palette_icon_container class.
|
||||
* @param iconContainer - Icon container element with red-ui-palette-icon-container class.
|
||||
* @param isLarge - Whether the icon size is large.
|
||||
*/
|
||||
function createIconElement(iconUrl, iconContainer, isLarge) {
|
||||
// Removes the previous icon when icon was changed.
|
||||
var iconElement = iconContainer.find(".palette_icon");
|
||||
var iconElement = iconContainer.find(".red-ui-palette-icon");
|
||||
if (iconElement.length !== 0) {
|
||||
iconElement.remove();
|
||||
}
|
||||
@ -944,13 +944,13 @@ RED.utils = (function() {
|
||||
if (fontAwesomeUnicode) {
|
||||
var faIconElement = $('<i/>').appendTo(iconContainer);
|
||||
var faLarge = isLarge ? "fa-lg " : "";
|
||||
faIconElement.addClass("palette_icon_fa fa fa-fw " + faLarge + iconPath.file);
|
||||
faIconElement.addClass("red-ui-palette-icon-fa fa fa-fw " + faLarge + iconPath.file);
|
||||
return;
|
||||
}
|
||||
// If the specified name is not defined in font-awesome, show arrow-in icon.
|
||||
iconUrl = RED.settings.apiRootUrl+"icons/node-red/arrow-in.png"
|
||||
}
|
||||
var imageIconElement = $('<div/>',{class:"palette_icon"}).appendTo(iconContainer);
|
||||
var imageIconElement = $('<div/>',{class:"red-ui-palette-icon"}).appendTo(iconContainer);
|
||||
imageIconElement.css("backgroundImage", "url("+iconUrl+")");
|
||||
}
|
||||
|
||||
|
||||
@ -393,7 +393,7 @@ RED.view = (function() {
|
||||
|
||||
// Handle nodes dragged from the palette
|
||||
$("#chart").droppable({
|
||||
accept:".palette_node",
|
||||
accept:".red-ui-palette-node",
|
||||
drop: function( event, ui ) {
|
||||
d3.event = event;
|
||||
var selected_tool = ui.draggable[0].type;
|
||||
|
||||
@ -296,13 +296,13 @@ RED.workspaces = (function() {
|
||||
if (selectedTabs.length === 0) {
|
||||
$("#chart svg").css({"pointer-events":"auto",filter:"none"})
|
||||
$("#workspace-toolbar").css({"pointer-events":"auto",filter:"none"})
|
||||
$("#palette-container").css({"pointer-events":"auto",filter:"none"})
|
||||
$("#red-ui-palette-container").css({"pointer-events":"auto",filter:"none"})
|
||||
$(".sidebar-shade").hide();
|
||||
} else {
|
||||
RED.view.select(false)
|
||||
$("#chart svg").css({"pointer-events":"none",filter:"opacity(60%)"})
|
||||
$("#workspace-toolbar").css({"pointer-events":"none",filter:"opacity(60%)"})
|
||||
$("#palette-container").css({"pointer-events":"none",filter:"opacity(60%)"})
|
||||
$("#red-ui-palette-container").css({"pointer-events":"none",filter:"opacity(60%)"})
|
||||
$(".sidebar-shade").show();
|
||||
}
|
||||
},
|
||||
|
||||
@ -253,16 +253,16 @@
|
||||
background-size: contain;
|
||||
position: relative;
|
||||
|
||||
.palette_icon {
|
||||
.red-ui-palette-icon {
|
||||
background-position: 49% 50%;
|
||||
width: 15px;
|
||||
}
|
||||
.palette_icon_fa {
|
||||
.red-ui-palette-icon-fa {
|
||||
position: relative;
|
||||
top: -2.5px;
|
||||
left: 0px;
|
||||
}
|
||||
.palette_icon_container {
|
||||
.red-ui-palette-icon-container {
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
@ -410,10 +410,10 @@
|
||||
width: 18px;
|
||||
height: 15px;
|
||||
}
|
||||
.palette_icon_container {
|
||||
.red-ui-palette-icon-container {
|
||||
width: 18px;
|
||||
}
|
||||
.palette_icon {
|
||||
.red-ui-palette-icon {
|
||||
width: 15px;
|
||||
}
|
||||
ul,li,ol {
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
.editor-tray-content {
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
.palette_icon_fa {
|
||||
.red-ui-palette-icon-fa {
|
||||
top: 6px;
|
||||
left: 4px;
|
||||
}
|
||||
@ -154,7 +154,7 @@
|
||||
background: $background-color;
|
||||
color: $workspace-button-color;
|
||||
}
|
||||
#palette-shade, #editor-shade, #header-shade, #sidebar-shade {
|
||||
#red-ui-palette-shade, #editor-shade, #header-shade, #sidebar-shade {
|
||||
@include shade;
|
||||
z-index: 2;
|
||||
}
|
||||
@ -443,7 +443,7 @@
|
||||
border-color: white;
|
||||
}
|
||||
}
|
||||
.palette_icon_fa {
|
||||
.red-ui-palette-icon-fa {
|
||||
top: 6px;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
**/
|
||||
|
||||
|
||||
#palette {
|
||||
#red-ui-palette{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
@ -28,29 +28,18 @@
|
||||
transition: width 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.palette-closed {
|
||||
#palette { width: 8px; }
|
||||
#palette-search { display: none; }
|
||||
#palette-container { display: none; }
|
||||
#palette-footer { display: none; }
|
||||
}
|
||||
|
||||
.palette-expanded {
|
||||
& #palette {
|
||||
width: 380px;
|
||||
box-shadow: 1px 0 6px rgba(0,0,0,0.1);
|
||||
.red-ui-palette-closed {
|
||||
#red-ui-palette {
|
||||
width: 8px;
|
||||
.red-ui-component-footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
& #workspace { left: 379px !important; }
|
||||
& #palette-collapse-all { display: none; }
|
||||
& #palette-expand-all { display: none; }
|
||||
& #palette-container { display: none !important; }
|
||||
& #palette-search { display: none !important; }
|
||||
& #palette-edit { background: $workspace-button-background-active }
|
||||
& #palette-editor { display: block !important }
|
||||
#red-ui-palette-search { display: none; }
|
||||
#red-ui-palette-container { display: none; }
|
||||
}
|
||||
|
||||
|
||||
.palette-scroll {
|
||||
.red-ui-palette-scroll {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
right: 0;
|
||||
@ -60,10 +49,10 @@
|
||||
overflow-y: auto;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
#palette > .palette-spinner {
|
||||
#red-ui-palette> .red-ui-palette-spinner {
|
||||
padding-top: 80px;
|
||||
}
|
||||
.palette-search {
|
||||
.red-ui-palette-search {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
@ -74,15 +63,15 @@
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
.palette-category {
|
||||
.red-ui-palette-category {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
.palette-content {
|
||||
.red-ui-palette-content {
|
||||
background: #fff;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.palette-header {
|
||||
.red-ui-palette-header {
|
||||
position: relative;
|
||||
background: $palette-header-background;
|
||||
cursor: pointer;
|
||||
@ -96,7 +85,7 @@
|
||||
background: $palette-header-background !important;
|
||||
}
|
||||
}
|
||||
.palette-header > i {
|
||||
.red-ui-palette-header > i {
|
||||
position: absolute;
|
||||
left: 11px;
|
||||
top: 12px;
|
||||
@ -107,15 +96,15 @@
|
||||
-moz-transform: rotate(-90deg);
|
||||
-o-transform: rotate(-90deg);
|
||||
}
|
||||
.palette-header i.expanded {
|
||||
.red-ui-palette-header i.expanded {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
}
|
||||
.palette-header span {
|
||||
.red-ui-palette-header span {
|
||||
clear: both;
|
||||
}
|
||||
.palette_label {
|
||||
.red-ui-palette-label {
|
||||
font-size: 13px;
|
||||
margin: 4px 0 4px 32px;
|
||||
line-height: 20px;
|
||||
@ -123,11 +112,11 @@
|
||||
text-align: center;
|
||||
@include disable-selection;
|
||||
}
|
||||
.palette_label_right {
|
||||
.red-ui-palette-label-right {
|
||||
margin: 4px 32px 4px 0;
|
||||
}
|
||||
|
||||
.palette_node {
|
||||
.red-ui-palette-node {
|
||||
display: block;
|
||||
cursor:move;
|
||||
background: #ddd;
|
||||
@ -141,11 +130,11 @@
|
||||
background-size: contain;
|
||||
position: relative;
|
||||
}
|
||||
.palette_node:hover {
|
||||
.red-ui-palette-node:hover {
|
||||
border-color: $node-selected-color;
|
||||
background-color: #eee;
|
||||
}
|
||||
.palette_port {
|
||||
.red-ui-palette-port {
|
||||
position: absolute;
|
||||
top:8px;
|
||||
left: -5px;
|
||||
@ -157,16 +146,16 @@
|
||||
height: 10px;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
.palette_port_output {
|
||||
.red-ui-palette-port-output {
|
||||
left:auto;
|
||||
right: -6px;
|
||||
}
|
||||
|
||||
.palette_node:hover .palette_port {
|
||||
.red-ui-palette-node:hover .red-ui-palette-port {
|
||||
border-color: #999;
|
||||
background-color: #eee;
|
||||
}
|
||||
.palette_icon_container {
|
||||
.red-ui-palette-icon-container {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top:0;
|
||||
@ -176,13 +165,13 @@
|
||||
border-right: 1px solid rgba(0,0,0,0.1);
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
}
|
||||
.palette_icon_container_right {
|
||||
.red-ui-palette-icon-container-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
border-right: none;
|
||||
border-left: 1px solid rgba(0,0,0,0.1);
|
||||
}
|
||||
.palette_icon {
|
||||
.red-ui-palette-icon {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
@ -190,13 +179,13 @@
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.palette_icon_fa {
|
||||
.red-ui-palette-icon-fa {
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 3px;
|
||||
}
|
||||
.palette_node_small {
|
||||
.red-ui-palette-node-small {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 18px;
|
||||
@ -205,15 +194,15 @@
|
||||
vertical-align: middle;
|
||||
cursor: default;
|
||||
|
||||
.palette_icon_container {
|
||||
.red-ui-palette-icon-container {
|
||||
width: 18px;
|
||||
border-right: none;
|
||||
}
|
||||
.palette_icon {
|
||||
.red-ui-palette-icon {
|
||||
margin-left: -1px;
|
||||
width: 15px;
|
||||
}
|
||||
.palette_icon_fa {
|
||||
.red-ui-palette-icon-fa {
|
||||
top: 2px;
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
@ -283,7 +283,7 @@
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.palette-category {
|
||||
.red-ui-palette-category {
|
||||
&:not(.palette-category-expanded) button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
font-size: 13px;
|
||||
border-left-width: 3px;
|
||||
border-right-width: 3px;
|
||||
.palette_icon_fa {
|
||||
.red-ui-palette-icon-fa {
|
||||
position: relative;
|
||||
top: -2.5px;
|
||||
left: 0px;
|
||||
@ -91,10 +91,10 @@
|
||||
.red-ui-search-result-node-output{
|
||||
left: 16px;
|
||||
}
|
||||
.palette_icon_container {
|
||||
.red-ui-palette-icon-container {
|
||||
width: 18px;
|
||||
}
|
||||
.palette_icon {
|
||||
.red-ui-palette-icon {
|
||||
width: 15px;
|
||||
}
|
||||
.red-ui-search-result-description {
|
||||
@ -150,7 +150,7 @@
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
.palette_icon_fa {
|
||||
.red-ui-palette-icon-fa {
|
||||
top: 6px;
|
||||
left: 3px;
|
||||
}
|
||||
@ -169,7 +169,7 @@
|
||||
background-size: contain;
|
||||
position: relative;
|
||||
|
||||
.palette_icon_container {
|
||||
.red-ui-palette-icon-container {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
.config-node-list {
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
.palette_node {
|
||||
.red-ui-palette-node {
|
||||
overflow: hidden;
|
||||
&.selected {
|
||||
border-color: $node-selected-color;
|
||||
@ -40,7 +40,7 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.palette_icon_container {
|
||||
.red-ui-palette-icon-container {
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
background-color: #e8e8e8;
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
right: 0;
|
||||
overflow-y: scroll;
|
||||
|
||||
.palette-category {
|
||||
.red-ui-palette-category {
|
||||
&:not(.palette-category-expanded) button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
.red-ui-stack {
|
||||
background: white;
|
||||
.palette-category {
|
||||
.red-ui-palette-category {
|
||||
background: white;
|
||||
|
||||
&:last-child {
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
|
||||
}
|
||||
|
||||
.palette-closed #workspace {
|
||||
.red-ui-palette-closed #workspace {
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
|
||||
@ -51,18 +51,7 @@
|
||||
<div id="editor-shade" class="hide"></div>
|
||||
</div>
|
||||
<div id="editor-stack"></div>
|
||||
<div id="palette">
|
||||
<img src="red/images/spin.svg" class="palette-spinner hide"/>
|
||||
<div id="palette-search" class="palette-search hide">
|
||||
<input type="text" data-i18n="[placeholder]palette.filter"></input>
|
||||
</div>
|
||||
<div id="palette-container" class="palette-scroll hide"></div>
|
||||
<div id="palette-footer" class="red-ui-component-footer">
|
||||
<a class="red-ui-footer-button" id="palette-collapse-all" href="#"><i class="fa fa-angle-double-up"></i></a>
|
||||
<a class="red-ui-footer-button" id="palette-expand-all" href="#"><i class="fa fa-angle-double-down"></i></a>
|
||||
</div>
|
||||
<div id="palette-shade" class="hide"></div>
|
||||
</div><!-- /palette -->
|
||||
<div id="red-ui-palette"></div>
|
||||
<div id="sidebar">
|
||||
<ul id="sidebar-tabs"></ul>
|
||||
<div id="sidebar-content"></div>
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
if (activeSubflow) {
|
||||
flowMap[activeSubflow.id] = {
|
||||
id: activeSubflow.id,
|
||||
class: 'palette-header',
|
||||
class: 'red-ui-palette-header',
|
||||
label: "Subflow : "+(activeSubflow.name || activeSubflow.id),
|
||||
expanded: true,
|
||||
children: []
|
||||
@ -63,7 +63,7 @@
|
||||
RED.nodes.eachWorkspace(function(ws) {
|
||||
flowMap[ws.id] = {
|
||||
id: ws.id,
|
||||
class: 'palette-header',
|
||||
class: 'red-ui-palette-header',
|
||||
label: (ws.label || ws.id)+(node.z===ws.id ? " *":""),
|
||||
expanded: true,
|
||||
children: []
|
||||
|
||||
Loading…
Reference in New Issue
Block a user