feat(editor): Help users discover expressions when using drag n drop (#8869)

This commit is contained in:
Elias Meire
2024-03-13 12:57:08 +01:00
committed by GitHub
parent 71f1b23771
commit e78cc2d8d2
28 changed files with 559 additions and 323 deletions

View File

@@ -39,6 +39,8 @@ const text = computed(() =>
Array.isArray(props.schema.value) ? '' : shorten(props.schema.value, 600, 0),
);
const dragged = computed(() => props.draggingPath === props.schema.path);
const getJsonParameterPath = (path: string): string =>
getMappedExpression({
nodeName: props.node!.name,
@@ -83,7 +85,7 @@ const getIconBySchemaType = (type: Schema['type']): string => {
:class="{
[$style.pill]: true,
[$style.mappable]: mappingEnabled,
[$style.dragged]: draggingPath === schema.path,
[$style.highlight]: dragged,
}"
>
<span
@@ -203,6 +205,25 @@ const getIconBySchemaType = (type: Schema['type']): string => {
}
}
:global(.highlightSchema) {
.pill.mappable {
&,
&:hover,
span,
&:hover span span {
color: var(--color-primary);
border-color: var(--color-primary-tint-1);
background-color: var(--color-primary-tint-3);
svg {
path {
fill: var(--color-primary);
}
}
}
}
}
.pill {
float: left;
display: inline-flex;
@@ -237,22 +258,6 @@ const getIconBySchemaType = (type: Schema['type']): string => {
}
}
}
&.dragged {
&,
&:hover,
span {
color: var(--color-primary);
border-color: var(--color-primary-tint-1);
background-color: var(--color-primary-tint-3);
svg {
path {
fill: var(--color-primary);
}
}
}
}
}
.label {