feat(editor): Show parameter hint on multilines (#5014)

Single/multi line for hints.
This commit is contained in:
Giulio Andreini 2023-02-27 07:25:57 +01:00 committed by GitHub
parent 40a934bbb4
commit 1942fd8232
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 4 deletions

View file

@ -1,12 +1,15 @@
<template> <template>
<n8n-text size="small" color="text-base" tag="div" v-if="hint"> <n8n-text size="small" color="text-base" tag="div" v-if="hint">
<div v-if="!renderHTML" :class="{ [$style.hint]: true, [$style.highlight]: highlight }"> <div
v-if="!renderHTML"
:class="{ [$style.singleline]: singleLine, [$style.highlight]: highlight }"
>
{{ hint }} {{ hint }}
</div> </div>
<div <div
v-else v-else
ref="hint" ref="hint"
:class="{ [$style.hint]: true, [$style.highlight]: highlight }" :class="{ [$style.singleline]: singleLine, [$style.highlight]: highlight }"
v-html="sanitizeHtml(hint)" v-html="sanitizeHtml(hint)"
></div> ></div>
</n8n-text> </n8n-text>
@ -25,6 +28,9 @@ export default Vue.extend({
highlight: { highlight: {
type: Boolean, type: Boolean,
}, },
singleLine: {
type: Boolean,
},
renderHTML: { renderHTML: {
type: Boolean, type: Boolean,
default: false, default: false,
@ -42,12 +48,11 @@ export default Vue.extend({
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.hint { .singleline {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.highlight { .highlight {
color: var(--color-secondary); color: var(--color-secondary);
} }

View file

@ -29,6 +29,7 @@
data-test-id="parameter-expression-preview" data-test-id="parameter-expression-preview"
:highlight="!!(expressionOutput && targetItem)" :highlight="!!(expressionOutput && targetItem)"
:hint="expressionOutput" :hint="expressionOutput"
:singleLine="true"
/> />
<input-hint <input-hint
v-else-if="parameterHint" v-else-if="parameterHint"