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

feat(editor): Schema preview UI updates (#13578)

Browse Source
This commit is contained in:
Elias Meire
2025-03-05 10:29:13 +01:00
committed by GitHub
parent c821f1c532
commit 8790a0df3d
7 changed files with 148 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/frontend/editor-ui/src/components/VirtualSchemaItem.vue
View File

@@ -43,7 +43,10 @@ const emit = defineEmits<{
:data-node-type="nodeType"
data-target="mappable"
class="pill"
:class="{ 'pill--highlight': highlight, 'pill--preview': preview }"
:class="{
'pill--highlight': highlight,
'pill--preview': preview,
}"
data-test-id="run-data-schema-node-name"
>
<FontAwesomeIcon class="type-icon" :icon size="sm" />
@@ -77,6 +80,7 @@ const emit = defineEmits<{
justify-content: center;
cursor: pointer;
font-size: var(--font-size-s);
color: var(--color-text-light);
}
.pill {
@@ -98,16 +102,31 @@ const emit = defineEmits<{
}
&.pill--preview {
border-style: dashed;
border-width: 1.5px;
/* Cannot use CSS variable inside data URL, so instead switching based on data-theme and media query */
--schema-preview-dashed-border: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' viewBox='0 0 400 400' fill='none' rx='4' ry='4' stroke='%230000002A' stroke-width='2' stroke-dasharray='4%2c 4' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
--schema-preview-dashed-border-dark: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' viewBox='0 0 400 400' fill='none' rx='4' ry='4' stroke='%23FFFFFF2A' stroke-width='2' stroke-dasharray='4%2c 4' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
color: var(--color-text-light);
background-color: var(--color-run-data-background);
border: none;
max-width: calc(100% - var(--spacing-l));
background-image: var(--schema-preview-dashed-border);
.title {
color: var(--color-text-light);
border-left: 1.5px dashed var(--color-foreground-light);
}
}
}
@media (prefers-color-scheme: dark) {
body:not([data-theme]) .pill--preview {
background-image: var(--schema-preview-dashed-border-dark);
}
}
[data-theme='dark'] .pill--preview {
background-image: var(--schema-preview-dashed-border-dark);
}
.draggable .pill.pill--highlight {
color: var(--color-primary);
border-color: var(--color-primary-tint-1);