',{class:"red-ui-search-result-node"}).appendTo(iconButton);
+ var colour = node._def.color;
+ var icon_url = RED.utils.getNodeIcon(node._def,node);
+ nodeDiv.css('backgroundColor',colour);
+ var iconContainer = $('
',{class:"palette_icon_container"}).appendTo(nodeDiv);
+ var iconDiv = $('
',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
- moduleChange(selectIconModule, selectIconFile, iconModuleHidden, iconFileHidden, iconSets, false);
- var iconFileList = iconSets[selectIconModule.val()];
- if (!iconFileList || iconFileList.indexOf(iconPath.file) === -1) {
- selectIconFile.append($("
").val(iconPath.file).text(iconPath.file));
- }
- selectIconFile.val(iconPath.file);
- }
- }
-
- function moduleChange(selectIconModule, selectIconFile, iconModuleHidden, iconFileHidden, iconSets, updateIconFile) {
- selectIconFile.children().remove();
- var moduleName = selectIconModule.val();
- if (moduleName !== null) {
- iconModuleHidden.val(moduleName);
- }
- var iconFileList = iconSets[moduleName];
- if (iconFileList) {
- iconFileList.forEach(function(fileName) {
- if (updateIconFile) {
- updateIconFile = false;
- iconFileHidden.val(fileName);
+ iconButton.click(function(e) {
+ e.preventDefault();
+ var iconPath;
+ var icon = $("#node-settings-icon").text()||"";
+ if (icon) {
+ iconPath = RED.utils.separateIconPath(icon);
+ } else {
+ iconPath = RED.utils.getDefaultNodeIcon(node._def, node);
}
- selectIconFile.append($("
").val(fileName).text(fileName));
- });
+ showIconPicker(iconRow,node,iconPath,function(newIcon) {
+ $("#node-settings-icon").text(newIcon||"");
+ var icon_url = RED.utils.getNodeIcon(node._def,{type:node.type,icon:newIcon});
+ iconDiv.css("backgroundImage","url("+icon_url+")");
+ });
+ })
+ $('
').text(node.icon).appendTo(iconRow);
}
- selectIconFile.prop("disabled", !iconFileList);
- selectIconFile.removeClass("input-error");
- selectIconModule.removeClass("input-error");
}
function updateLabels(editing_node, changes, outputMap) {
@@ -1086,9 +1100,7 @@ RED.editor = (function() {
}
if (!editing_node._def.defaults || !editing_node._def.defaults.hasOwnProperty("icon")) {
- var iconModule = $("#node-settings-icon-module-hidden").val();
- var iconFile = $("#node-settings-icon-file-hidden").val();
- var icon = (iconModule && iconFile) ? iconModule+"/"+iconFile : "";
+ var icon = $("#node-settings-icon").text()||""
if (!isDefaultIcon) {
if (icon !== editing_node.icon) {
changes.icon = editing_node.icon;
@@ -1692,9 +1704,7 @@ RED.editor = (function() {
if (updateLabels(editing_node, changes, null)) {
changed = true;
}
- var iconModule = $("#node-settings-icon-module-hidden").val();
- var iconFile = $("#node-settings-icon-file-hidden").val();
- var icon = (iconModule && iconFile) ? iconModule+"/"+iconFile : "";
+ var icon = $("#node-settings-icon").text()||"";
if ((editing_node.icon === undefined && icon !== "node-red/subflow.png") ||
(editing_node.icon !== undefined && editing_node.icon !== icon)) {
changes.icon = editing_node.icon;
@@ -1839,7 +1849,6 @@ RED.editor = (function() {
$("#subflow-dialog-user-count").text(RED._("subflow.subflowInstances", {count:userCount})).show();
buildLabelForm(portLabels.content,subflow);
- validateIcon(subflow);
trayBody.i18n();
},
close: function() {
diff --git a/editor/sass/editor.scss b/editor/sass/editor.scss
index af116c9ef..c4df4791b 100644
--- a/editor/sass/editor.scss
+++ b/editor/sass/editor.scss
@@ -353,3 +353,64 @@
}
}
+#node-settings-icon {
+ margin-left: 10px;
+ width: calc(100% - 163px);
+}
+.red-ui-icon-picker {
+ position: absolute;
+ border: 1px solid $primary-border-color;
+ box-shadow: 0 1px 6px -3px black;
+ background: white;
+ z-Index: 21;
+ display: none;
+ select {
+ box-sizing: border-box;
+ margin: 3px;
+ width: calc(100% - 6px);
+ }
+}
+.red-ui-icon-list {
+ width: 308px;
+ height: 200px;
+ overflow-y: scroll;
+ line-height: 0px;
+}
+.red-ui-icon-list-icon {
+ display: inline-block;
+ margin: 2px;
+ padding: 4px;
+ cursor: pointer;
+ border-radius: 4px;
+ &:hover {
+ background: lighten($node-selected-color,20%);
+ }
+ &.selected {
+ background: lighten($node-selected-color,20%);
+ .red-ui-search-result-node {
+ border-color: white;
+ }
+ }
+}
+.red-ui-icon-list-module {
+ background: $palette-header-background;
+ font-size: 0.9em;
+ padding: 3px;
+ color: #666;
+ clear: both;
+ i {
+ margin-right: 5px;
+ }
+}
+.red-ui-icon-meta {
+ border-top: 1px solid $secondary-border-color;
+ span {
+ padding: 4px;
+ color: #666;
+ font-size: 0.9em;
+ }
+ button {
+ float: right;
+ margin: 2px;
+ }
+}