fix: Update settings icons on canvas style (#17636)

This commit is contained in:
Shireen Missi
2025-07-28 15:07:11 +01:00
committed by GitHub
parent 3ce9a998ae
commit 0338ebb3dd
10 changed files with 17 additions and 45 deletions

View File

@@ -1,10 +0,0 @@
<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_650_18839)">
<path d="M5.4989 0.351562C5.96754 -0.117074 6.72753 -0.117074 7.19617 0.351562L11.996 5.15137C12.0955 5.25089 12.1731 5.36418 12.2303 5.48438C12.2567 5.53953 12.279 5.59683 12.2968 5.65625C12.3136 5.71272 12.3255 5.77017 12.3339 5.82812C12.3419 5.88433 12.3475 5.94156 12.3475 6C12.3475 6.06071 12.3416 6.12043 12.3329 6.17871C12.3299 6.19893 12.3272 6.21919 12.3231 6.23926C12.3023 6.34228 12.2669 6.43964 12.2216 6.53125C12.2163 6.54195 12.2116 6.55291 12.2059 6.56348C12.198 6.57845 12.1891 6.59284 12.1805 6.60742C12.1682 6.62838 12.1562 6.64959 12.1425 6.66992C12.0992 6.73406 12.0505 6.79412 11.996 6.84863L7.19617 11.6484C6.72753 12.1171 5.96754 12.1171 5.4989 11.6484C5.03045 11.1798 5.03033 10.4197 5.4989 9.95117L8.25085 7.2002H1.54773C0.884978 7.2002 0.347534 6.66275 0.347534 6C0.347702 5.33739 0.885082 4.80078 1.54773 4.80078H8.25183L5.4989 2.04883C5.03033 1.58025 5.03045 0.820214 5.4989 0.351562Z" fill="#909398"/>
</g>
<defs>
<clipPath id="clip0_650_18839">
<rect width="12" height="12" fill="white" transform="translate(0.347534)"/>
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -1,10 +0,0 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_650_18836)">
<path d="M4.73335 9.60167C5.30603 9.89454 5.57535 10.5792 5.33688 11.1915C5.08244 11.8446 4.34649 12.1675 3.69339 11.913C2.89755 11.6029 2.15254 11.127 1.51297 10.4874C0.953268 9.9277 0.518901 9.28719 0.211269 8.60257L0.087408 8.30693L0.0459264 8.18365C-0.125896 7.56369 0.196633 6.90193 0.808955 6.66337C1.42121 6.4249 2.10584 6.69422 2.39869 7.26692L2.45186 7.38553L2.52664 7.56198C2.71023 7.97058 2.96972 8.35447 3.30778 8.69254C3.69419 9.07896 4.14008 9.36356 4.61475 9.5485L4.73335 9.60167ZM1.51297 1.51303C2.15254 0.873444 2.89755 0.397506 3.69339 0.0874113L3.81666 0.0459281C4.4366 -0.1259 5.09833 0.19664 5.33688 0.808985C5.59124 1.46209 5.26782 2.19752 4.61475 2.45195C4.14008 2.63689 3.69419 2.92149 3.30778 3.30791C2.96972 3.64599 2.71023 4.02987 2.52664 4.43847L2.45186 4.61492L2.39869 4.73353C2.10584 5.30623 1.42121 5.57556 0.808955 5.33708C0.15585 5.08263 -0.167031 4.34666 0.087408 3.69353C0.397491 2.89766 0.873411 2.15262 1.51297 1.51303ZM8.69222 8.69254C9.03028 8.35447 9.28977 7.97058 9.47336 7.56198L9.54814 7.38553L9.60131 7.26692C9.89416 6.69422 10.5788 6.4249 11.191 6.66337C11.8034 6.90193 12.1259 7.56369 11.9541 8.18365L11.9126 8.30693L11.7887 8.60257C11.4811 9.28719 11.0467 9.9277 10.487 10.4874C9.84746 11.127 9.10245 11.6029 8.30661 11.913C7.65351 12.1675 6.91756 11.8446 6.66312 11.1915C6.40876 10.5384 6.73218 9.80294 7.38525 9.5485L7.5617 9.47371C7.97028 9.29012 8.35415 9.03062 8.69222 8.69254ZM10.487 1.51303C11.1266 2.15262 11.6025 2.89766 11.9126 3.69353C12.167 4.34666 11.8441 5.08263 11.191 5.33708C10.5788 5.57556 9.89416 5.30623 9.60131 4.73353L9.54814 4.61492L9.47336 4.43847C9.28977 4.02987 9.03028 3.64599 8.69222 3.30791C8.30581 2.92149 7.85992 2.63689 7.38525 2.45195C6.73218 2.19752 6.40876 1.46209 6.66312 0.808985C6.91756 0.155856 7.65351 -0.167037 8.30661 0.0874113L8.60224 0.211277C9.28683 0.51892 9.92732 0.953304 10.487 1.51303Z" fill="#909398"/>
</g>
<defs>
<clipPath id="clip0_650_18836">
<rect width="12" height="12" fill="white"/>
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.1 KiB

View File

@@ -1,10 +0,0 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_650_18838)">
<path d="M10.3926 5.23047C11.0302 5.23047 11.5477 5.74714 11.5479 6.38477V8.69434C11.5479 9.75721 10.6859 10.6191 9.62305 10.6191H4.23438V11.6143C4.23438 11.9572 3.81963 12.1292 3.57715 11.8867L1.42676 9.73633C1.27682 9.58605 1.27675 9.34261 1.42676 9.19238L3.57715 7.04199C3.81965 6.79969 4.23438 6.97159 4.23438 7.31445V8.30957H9.23828V6.38477C9.23843 5.7472 9.755 5.23056 10.3926 5.23047ZM7.31348 0.385742C7.31348 0.0428174 7.72822 -0.129203 7.9707 0.113281L10.1201 2.26367C10.2704 2.41399 10.2704 2.6573 10.1201 2.80762L7.9707 4.95801C7.72822 5.20049 7.31348 5.02847 7.31348 4.68555V3.69043H2.30957V5.61523C2.30957 6.25299 1.79205 6.77051 1.1543 6.77051C0.516755 6.77027 0 6.25284 0 5.61523V3.30566C0.000146327 2.24287 0.86198 1.38184 1.9248 1.38184H7.31348V0.385742Z" fill="#909398"/>
</g>
<defs>
<clipPath id="clip0_650_18838">
<rect width="12" height="12" fill="white"/>
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -1,3 +0,0 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.52246 0.00585938C7.12758 0.0672969 7.59961 0.578867 7.59961 1.2002V9.60059H9.59961C10.2623 9.60059 10.7996 10.1372 10.7998 10.7998C10.7998 11.4625 10.2624 12 9.59961 12H3.2002C2.53745 12 2 11.4625 2 10.7998C2.00016 10.1372 2.53755 9.60059 3.2002 9.60059H5.2002V2.40039H3.2002C2.53752 2.40039 2.00011 1.86284 2 1.2002C2 0.537456 2.53745 0 3.2002 0H6.40039L6.52246 0.00585938Z" fill="#909398"/>
</svg>

Before

Width:  |  Height:  |  Size: 508 B

View File

@@ -0,0 +1 @@
<svg viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M224.975 49.429c17.138-17.139 44.919-17.139 62.057 0l175.546 175.546a43.8 43.8 0 0 1 9.347 13.817l.146.349q.125.298.243.598.1.25.197.5l.147.388q.133.356.261.716l.09.257q.141.407.275.818l.044.136a39 39 0 0 1 .306.988 43.9 43.9 0 0 1 1.802 12.473c0 12.497-5.225 23.774-13.608 31.767L287.032 462.578c-17.138 17.138-44.919 17.138-62.057 0s-17.139-44.92 0-62.059l100.618-100.618H80.458c-24.238 0-43.887-19.649-43.887-43.886s19.65-43.887 43.887-43.887h245.158L224.975 111.486c-17.139-17.138-17.139-44.919 0-62.057" fill="currentColor"/></svg>

After

Width:  |  Height:  |  Size: 619 B

View File

@@ -0,0 +1 @@
<svg viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M209.675 387.718c20.945 10.711 30.794 35.749 22.073 58.141-9.306 23.886-36.221 35.695-60.107 26.389-29.106-11.34-56.354-28.746-79.744-52.137-20.47-20.47-36.356-43.894-47.607-68.932l-4.53-10.812-1.517-4.508c-6.284-22.673 5.511-46.874 27.906-55.599 22.392-8.721 47.431 1.129 58.141 22.073l1.945 4.338 2.735 6.453c6.714 14.943 16.204 28.982 28.568 41.346 14.132 14.132 30.44 24.54 47.799 31.304zM91.897 91.905c23.39-23.39 50.638-40.796 79.744-52.137l4.508-1.517c22.673-6.284 46.874 5.512 55.599 27.906 9.303 23.885-2.526 50.781-26.411 60.086-17.359 6.763-33.667 17.171-47.799 31.303-12.364 12.364-21.854 26.403-28.568 41.347l-2.735 6.453-1.945 4.337c-10.71 20.945-35.75 30.794-58.141 22.073-23.886-9.306-35.695-36.221-26.39-60.107 11.341-29.106 28.747-56.353 52.138-79.744M354.462 354.47c12.364-12.364 21.854-26.403 28.568-41.346l2.735-6.453 1.945-4.338c10.71-20.944 35.749-30.794 58.141-22.073 22.394 8.725 34.19 32.926 27.906 55.599l-1.517 4.508-4.53 10.812c-11.251 25.038-27.137 48.462-47.607 68.932-23.39 23.391-50.638 40.797-79.744 52.137-23.886 9.306-50.801-2.503-60.107-26.389-9.303-23.885 2.526-50.78 26.411-60.085l6.453-2.735c14.943-6.715 28.982-16.205 41.346-28.569m65.641-262.565c23.391 23.391 40.796 50.638 52.137 79.744 9.306 23.886-2.503 50.801-26.389 60.107-22.392 8.721-47.431-1.128-58.141-22.073l-1.945-4.337-2.735-6.453c-6.714-14.944-16.204-28.983-28.568-41.347-14.132-14.132-30.44-24.54-47.799-31.303-23.885-9.305-35.714-36.201-26.411-60.086 9.306-23.886 36.221-35.694 60.107-26.389l10.812 4.53c25.038 11.25 48.462 27.137 68.932 47.607" fill="currentColor" /></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@@ -0,0 +1 @@
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M416.648 227.85c23.324 0 42.232 18.908 42.232 42.232v84.462c0 38.872-31.513 70.384-70.385 70.385H191.423v36.402c0 12.541-15.163 18.822-24.031 9.954l-78.63-78.631c-5.498-5.497-5.498-14.411 0-19.908l78.63-78.631c8.868-8.868 24.031-2.587 24.031 9.954v36.398h182.995v-70.385c0-23.324 18.907-42.231 42.23-42.232M304.028 50.669c0-12.541 15.163-18.822 24.031-9.954l78.63 78.631c5.498 5.497 5.498 14.41 0 19.908l-78.63 78.631c-8.868 8.867-24.031 2.587-24.031-9.954v-36.38H121.033v70.385c0 23.324-18.908 42.231-42.231 42.231s-42.23-18.907-42.23-42.231v-84.462c0-38.872 31.512-70.385 70.384-70.385h197.072z" fill="currentColor"/></svg>

After

Width:  |  Height:  |  Size: 696 B

View File

@@ -0,0 +1 @@
<svg viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M275.114 36.8c22.13 2.247 39.401 20.934 39.401 43.657v307.204h73.142c24.237 0 43.886 19.648 43.886 43.885s-19.648 43.886-43.886 43.886H153.6c-24.238-.001-43.886-19.649-43.886-43.886s19.648-43.885 43.886-43.885h73.143V124.343H153.6c-24.238 0-43.886-19.649-43.886-43.886s19.648-43.885 43.886-43.886h117.029z" fill="currentColor"/></svg>

After

Width:  |  Height:  |  Size: 417 B

View File

@@ -1,11 +1,11 @@
import Binary from './custom/binary.svg';
import BoltFilled from './custom/bolt-filled.svg';
import Continue from './custom/Continue.svg';
import EmptyOutput from './custom/EmptyOutput.svg';
import Continue from './custom/continue.svg';
import EmptyOutput from './custom/empty-output.svg';
import GripLinesVertical from './custom/grip-lines-vertical.svg';
import PopOut from './custom/pop-out.svg';
import Retry from './custom/Retry.svg';
import RunOnce from './custom/RunOnce.svg';
import Retry from './custom/retry.svg';
import RunOnce from './custom/run-once.svg';
import Schema from './custom/schema.svg';
import Spinner from './custom/spinner.svg';
import StatusCanceled from './custom/status-canceled.svg';

View File

@@ -11,6 +11,7 @@ const workflowHelpers = useWorkflowHelpers();
const workflow = computed(() => workflowHelpers.getCurrentWorkflow());
const node = computed(() => workflow.value.getNode(name.value));
const size = 'medium';
</script>
<template>
@@ -18,7 +19,7 @@ const node = computed(() => workflow.value.getNode(name.value));
<N8nTooltip v-if="node?.alwaysOutputData">
<template #content>
<div :class="$style.tooltipHeader">
<N8nIcon icon="always-output-data" />
<N8nIcon icon="always-output-data" :size="size" />
<strong :class="$style.tooltipTitle">{{
i18n.baseText('nodeSettings.alwaysOutputData.displayName')
}}</strong>
@@ -28,14 +29,14 @@ const node = computed(() => workflow.value.getNode(name.value));
</div>
</template>
<div data-test-id="canvas-node-status-always-output-data">
<N8nIcon icon="always-output-data" />
<N8nIcon icon="always-output-data" :size="size" />
</div>
</N8nTooltip>
<N8nTooltip v-if="node?.executeOnce">
<template #content>
<div :class="$style.tooltipHeader">
<N8nIcon icon="execute-once" />
<N8nIcon icon="execute-once" :size="size" />
<strong :class="$style.tooltipTitle">{{
i18n.baseText('nodeSettings.executeOnce.displayName')
}}</strong>
@@ -45,14 +46,14 @@ const node = computed(() => workflow.value.getNode(name.value));
</div>
</template>
<div data-test-id="canvas-node-status-execute-once">
<N8nIcon icon="execute-once" />
<N8nIcon icon="execute-once" :size="size" />
</div>
</N8nTooltip>
<N8nTooltip v-if="node?.retryOnFail">
<template #content>
<div :class="$style.tooltipHeader">
<N8nIcon icon="retry-on-fail" />
<N8nIcon icon="retry-on-fail" :size="size" />
<strong :class="$style.tooltipTitle">{{
i18n.baseText('nodeSettings.retryOnFail.displayName')
}}</strong>
@@ -62,7 +63,7 @@ const node = computed(() => workflow.value.getNode(name.value));
</div>
</template>
<div data-test-id="canvas-node-status-retry-on-fail">
<N8nIcon icon="retry-on-fail" />
<N8nIcon icon="retry-on-fail" :size="size" />
</div>
</N8nTooltip>
@@ -71,7 +72,7 @@ const node = computed(() => workflow.value.getNode(name.value));
>
<template #content>
<div :class="$style.tooltipHeader">
<N8nIcon icon="continue-on-error" />
<N8nIcon icon="continue-on-error" :size="size" />
<strong :class="$style.tooltipTitle">{{
i18n.baseText('node.settings.continuesOnError.title')
}}</strong>
@@ -81,7 +82,7 @@ const node = computed(() => workflow.value.getNode(name.value));
</div>
</template>
<div data-test-id="canvas-node-status-continue-on-error">
<N8nIcon icon="continue-on-error" />
<N8nIcon icon="continue-on-error" :size="size" />
</div>
</N8nTooltip>
</div>