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

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

Browse Source
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) {
var container = $('<span class="red-ui-node-icon-container">');
var def = node._def;
var nodeDiv = $('<div>',{class:"red-ui-node-icon"})
if (node.type === "_selection_") {
@ -1156,9 +1158,9 @@ RED.utils = (function() {
var icon_url = RED.utils.getNodeIcon(def,node);
RED.utils.createIconElement(icon_url, nodeDiv, true);
nodeDiv.appendTo(container);
if (includeLabel) {
var container = $('<span>');
nodeDiv.appendTo(container);
var labelText = RED.utils.getNodeLabel(node,node.name || (node.type+": "+node.id));
var label = $('<div>',{class:"red-ui-node-label"}).appendTo(container);
if (labelText) {
@ -1166,9 +1168,8 @@ RED.utils = (function() {
} else {
label.html("&nbsp;")
}
return container;
}
return nodeDiv;
return container;
}
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 {
display: inline-block;
float:left;
width: 24px;
height: 20px;
line-height: 20px;
margin-top: 1px;
// width: 30px;
// height: 25px;
@ -266,10 +266,28 @@
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 {
margin-left: 32px;
line-height: 23px;
white-space: nowrap;
margin-left: 4px;
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;
}
.red-ui-search-result-description {
margin-left:28px;
margin-left:8px;
}
.red-ui-search-result-node-label {
color: $secondary-text-color;
@ -133,7 +133,8 @@
}
.red-ui-search-result {
padding: 8px 2px 8px 5px;
display: block;
display: flex;
align-items: start;
cursor: pointer;
color: $list-item-color;
background: $list-item-background;
@ -156,12 +157,7 @@
display: table;
clear: both;
}
.red-ui-palette-icon-fa {
top: 6px;
left: 3px;
}
}
.red-ui-search-result-node {
display: inline-block;
width: 30px;
@ -180,8 +176,9 @@
}
.red-ui-search-result-node-description {
margin-left: 40px;
margin-left: 10px;
margin-right: 5px;
flex-grow: 1;
}
.red-ui-search-result-node-label {
color: $primary-text-color;