frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add changed badge for category header + fix cropped badge

Browse Source
This commit is contained in:
GogoVega
2024-07-02 16:12:02 +02:00
parent 54e0de64a7
commit b8eeef182c
2 changed files with 26 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js vendored
View File

@@ -56,7 +56,16 @@ RED.sidebar.config = (function() {
} else {
$('<span class="red-ui-palette-node-config-label" data-i18n="sidebar.config.'+name+'">').appendTo(header);
}
$('<span class="red-ui-sidebar-node-config-filter-info"></span>').appendTo(header);
const changeBadgeContainer = $('<svg class="red-ui-sidebar-config-category-changed red-ui-flow-node-changed" width="10" height="10" viewBox="-1 -1 12 12"></svg>').appendTo(header);
const changeBadge = document.createElementNS("http://www.w3.org/2000/svg", "circle");
changeBadge.setAttribute("cx", "5");
changeBadge.setAttribute("cy", "5");
changeBadge.setAttribute("r", "5");
changeBadgeContainer.append(changeBadge);
category = $('<ul class="red-ui-palette-content red-ui-sidebar-node-config-list"></ul>').appendTo(container);
category.on("click", function(e) {
$(content).find(".red-ui-palette-node").removeClass("selected");
@@ -179,12 +188,15 @@ RED.sidebar.config = (function() {
}
if (node.changed) {
const nodeDivAnnotations = $('<svg class="red-ui-palette-node-annotations red-ui-flow-node-changed" width="10" height="10" style="left:calc(100% - 15px);"></svg>').appendTo(nodeDiv);
const nodeDivAnnotations = $('<svg class="red-ui-palette-node-annotations red-ui-flow-node-changed" width="10" height="10" viewBox="-1 -1 12 12" style="left:calc(100% - 15px);"></svg>').appendTo(nodeDiv);
const changedBadge = document.createElementNS("http://www.w3.org/2000/svg", "circle");
changedBadge.setAttribute("cx", "5");
changedBadge.setAttribute("cy", "5");
changedBadge.setAttribute("r", "5");
nodeDivAnnotations.append($(changedBadge));
const categoryHeader = list.parent().find(".red-ui-sidebar-config-tray-header.red-ui-palette-header");
categoryHeader.addClass("red-ui-sidebar-config-changed");
}
if (!node.valid) {
@@ -265,6 +277,10 @@ RED.sidebar.config = (function() {
$(this).remove();
delete categories[id];
}
// Remove the `changed` badge from the category header
const categoryHeader = $(this).find(".red-ui-sidebar-config-tray-header.red-ui-palette-header");
categoryHeader.removeClass("red-ui-sidebar-config-changed");
})
var globalConfigNodes = [];
var configList = {};

9
packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss vendored
View File

@@ -115,6 +115,15 @@ ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type {
.red-ui-palette-node-config-invalid {
border-color: var(--red-ui-form-input-border-error-color)
}
.red-ui-sidebar-config-tray-header.red-ui-palette-header:not(.red-ui-sidebar-config-changed) .red-ui-flow-node-changed {
display: none;
}
.red-ui-sidebar-config-tray-header.red-ui-palette-header.red-ui-sidebar-config-changed .red-ui-flow-node-changed {
display: inline-block;
position: absolute;
top: 1px;
right: 1px;
}
.red-ui-palette-node-annotations {
position: absolute;
//left: calc(100% - 15px);