frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Improve red-ui-node-icon css and add red-ui-node-icon-small modifier class

This commit is contained in:
Nick O'Leary 2021-05-13 13:39:29 +01:00
parent 4ff991764e
commit 1a30fe4a1a
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
3 changed files with 31 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1133,6 +1133,8 @@ RED.utils = (function() {
} }
function createNodeIcon(node, includeLabel) { function createNodeIcon(node, includeLabel) {
var container = $('<span class="red-ui-node-icon-container">');
var def = node._def; var def = node._def;
var nodeDiv = $('<div>',{class:"red-ui-node-icon"}) var nodeDiv = $('<div>',{class:"red-ui-node-icon"})
if (node.type === "_selection_") { if (node.type === "_selection_") {
@ -1156,9 +1158,9 @@ RED.utils = (function() {
var icon_url = RED.utils.getNodeIcon(def,node); var icon_url = RED.utils.getNodeIcon(def,node);
RED.utils.createIconElement(icon_url, nodeDiv, true); RED.utils.createIconElement(icon_url, nodeDiv, true);
nodeDiv.appendTo(container);
if (includeLabel) { if (includeLabel) {
var container = $('<span>');
nodeDiv.appendTo(container);
var labelText = RED.utils.getNodeLabel(node,node.name || (node.type+": "+node.id)); var labelText = RED.utils.getNodeLabel(node,node.name || (node.type+": "+node.id));
var label = $('<div>',{class:"red-ui-node-label"}).appendTo(container); var label = $('<div>',{class:"red-ui-node-label"}).appendTo(container);
if (labelText) { if (labelText) {
@ -1166,9 +1168,8 @@ RED.utils = (function() {
} else { } else {
label.html("&nbsp;") label.html("&nbsp;")
} }
return container;
} }
return nodeDiv; return container;
} }
function getDarkerColor(c) { function getDarkerColor(c) {

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

@ -240,9 +240,9 @@
} }
.red-ui-node-icon { .red-ui-node-icon {
display: inline-block; display: inline-block;
float:left;
width: 24px; width: 24px;
height: 20px; height: 20px;
line-height: 20px;
margin-top: 1px; margin-top: 1px;
// width: 30px; // width: 30px;
// height: 25px; // height: 25px;
@ -266,10 +266,28 @@
left: 0px; left: 0px;
} }
} }
.red-ui-node-icon-container {
display: flex;
align-items: center;
}
.red-ui-node-icon-container.red-ui-node-icon-small {
.red-ui-node-icon {
width: 18px;
height: 15px;
line-height: 15px;
.red-ui-palette-icon {
width: 15px;
}
.red-ui-palette-icon-fa {
font-size: 11px;
}
}
.red-ui-node-label {
}
}
.red-ui-node-label { .red-ui-node-label {
margin-left: 32px;
line-height: 23px;
white-space: nowrap; white-space: nowrap;
margin-left: 4px;
color: $secondary-text-color; color: $secondary-text-color;
} }

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

@ -103,7 +103,7 @@
left: -1px; left: -1px;
} }
.red-ui-search-result-description { .red-ui-search-result-description {
margin-left:28px; margin-left:8px;
} }
.red-ui-search-result-node-label { .red-ui-search-result-node-label {
color: $secondary-text-color; color: $secondary-text-color;
@ -133,7 +133,8 @@
} }
.red-ui-search-result { .red-ui-search-result {
padding: 8px 2px 8px 5px; padding: 8px 2px 8px 5px;
display: block; display: flex;
align-items: start;
cursor: pointer; cursor: pointer;
color: $list-item-color; color: $list-item-color;
background: $list-item-background; background: $list-item-background;
@ -156,12 +157,7 @@
display: table; display: table;
clear: both; clear: both;
} }
.red-ui-palette-icon-fa {
top: 6px;
left: 3px;
}
} }
.red-ui-search-result-node { .red-ui-search-result-node {
display: inline-block; display: inline-block;
width: 30px; width: 30px;
@ -180,8 +176,9 @@
} }
.red-ui-search-result-node-description { .red-ui-search-result-node-description {
margin-left: 40px; margin-left: 10px;
margin-right: 5px; margin-right: 5px;
flex-grow: 1;
} }
.red-ui-search-result-node-label { .red-ui-search-result-node-label {
color: $primary-text-color; color: $primary-text-color;