admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 10:02:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): Properly set colors for connections and labels on nodes with pinned data (#8209)

Browse Source 
Co-authored-by: Alex Grozav <alex@grozav.com>
This commit is contained in:
Csaba Tuncsik
2024-01-11 14:03:23 +01:00
committed by GitHub
parent 884396ea0d
commit 3b8ccb9fb9
5 changed files with 518 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
packages/editor-ui/src/views/NodeView.vue
View File

@@ -2157,6 +2157,9 @@ export default defineComponent({
}, []);
this.workflowsStore.addWorkflowTagIds(tagIds);
setTimeout(() => {
this.addPinDataConnections(this.workflowsStore.pinnedWorkflowData || ({} as IPinData));
});
}
} catch (error) {
this.showError(error, this.$locale.baseText('nodeView.showError.importWorkflowData.title'));
@@ -3803,7 +3806,22 @@ export default defineComponent({
}) {
const pinData = this.workflowsStore.pinnedWorkflowData;
if (pinData?.[name]) return;
if (pinData?.[name]) {
const { outgoing } = this.getIncomingOutgoingConnections(name);
outgoing.forEach((connection: Connection) => {
if (connection.__meta?.sourceNodeName === name) {
const hasRun = this.workflowsStore.getWorkflowResultDataByNodeName(name) !== null;
NodeViewUtils.addClassesToOverlays({
connection,
overlayIds: [NodeViewUtils.OVERLAY_RUN_ITEMS_ID],
classNames: hasRun ? ['has-run'] : [],
includeConnector: true,
});
}
});
return;
}
const sourceNodeName = name;
const sourceNode = this.workflowsStore.getNodeByName(sourceNodeName);
@@ -4690,6 +4708,7 @@ export default defineComponent({
NodeViewUtils.addConnectionOutputSuccess(connection, {
total: pinData[nodeName].length,
iterations: 0,
classNames: ['pinned'],
});
});
});
@@ -5209,3 +5228,36 @@ export default defineComponent({
top: var(--spacing-l);
}
</style>
<style lang="scss" scoped>
@mixin applyColorToConnection($partialSelector, $cssColorVarName, $labelCssColorVarName) {
.jtk-connector#{$partialSelector}:not(.jtk-hover) {
path:not(.jtk-connector-outline) {
stroke: var(#{$cssColorVarName});
}
path[jtk-overlay-id='reverse-arrow'],
path[jtk-overlay-id='endpoint-arrow'],
path[jtk-overlay-id='midpoint-arrow'] {
fill: var(#{$cssColorVarName});
}
}
.connection-run-items-label#{$partialSelector} {
color: var(#{$labelCssColorVarName});
}
}
:deep(.node-view) {
@include applyColorToConnection('.success', '--color-success-light', '--color-success');
@include applyColorToConnection(
'.success.pinned',
'--color-foreground-xdark',
'--color-foreground-xdark'
);
@include applyColorToConnection(
'.success.pinned.has-run',
'--color-secondary',
'--color-secondary'
);
}
</style>