mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-10 06:34:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(editor): limit when to show mapping tooltip (#3976)

Browse source 
* limit when to show mapping tooltip

* refactor tooltip pos

* update tooltip pos

* update var name
This commit is contained in:
Mutasem Aldmour 2022-08-31 10:51:26 +02:00 committed by GitHub
parent b2c674591c
commit 8fc9f07f39
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
packages/editor-ui/src/components/RunDataTable.vue
View file

@ -53,7 +53,7 @@
[$style.draggingHeader]: isDragging,
}"
>
<span>{{ column || '&nbsp;' }}</span>
<span>
<n8n-tooltip
v-if="mappingEnabled"
placement="bottom-start"
@ -61,23 +61,24 @@
:value="i === 0 && showHintWithDelay"
>
<div
v-if="focusedMappableInput"
slot="content"
v-html="
$locale.baseText('dataMapping.tableHint', {
interpolate: { name: focusedMappableInput },
})
$locale.baseText(
focusedMappableInput
? 'dataMapping.tableHint'
: 'dataMapping.dragColumnToFieldHint',
{
interpolate: { name: focusedMappableInput },
},
)
"
></div>
<div
v-else
slot="content"
v-html="$locale.baseText('dataMapping.dragColumnToFieldHint')"
></div>
<div :class="$style.dragButton">
<font-awesome-icon icon="grip-vertical" />
</div>
<span>{{ column || '&nbsp;' }}</span>
</n8n-tooltip>
</span>
<div :class="$style.dragButton">
<font-awesome-icon icon="grip-vertical" />
</div>
</div>
</template>
</Draggable>
@ -199,9 +200,18 @@ export default mixins(externalHooks).extend({
draggedColumn: false,
draggingPath: null as null | string,
hoveringPath: null as null | string,
mappingHintVisible: false,
};
},
mounted() {
if (this.showMappingHint) {
this.mappingHintVisible = true;
setTimeout(() => {
this.mappingHintVisible = false;
}, 6000);
}
if (this.showMappingHint && this.showHint) {
setTimeout(() => {
this.showHintWithDelay = this.showHint;
@ -228,7 +238,7 @@ export default mixins(externalHooks).extend({
showHint(): boolean {
return (
!this.draggedColumn &&
(this.showMappingHint ||
((this.showMappingHint && this.mappingHintVisible) ||
(!!this.focusedMappableInput &&
window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true'))
);
@ -409,7 +419,10 @@ export default mixins(externalHooks).extend({
// Remove key so that we know that it got added
leftEntryColumns.splice(leftEntryColumns.indexOf(key), 1);
hasJson[key] = hasJson[key] || (typeof entry[key] === 'object' && Object.keys(entry[key] || {}).length > 0) || false;
hasJson[key] =
hasJson[key] ||
(typeof entry[key] === 'object' && Object.keys(entry[key] || {}).length > 0) ||
false;
} else {
// Entry does not have key so add null
entryRows.push(null);
@ -422,7 +435,10 @@ export default mixins(externalHooks).extend({
tableColumns.push(key);
// Add the value
entryRows.push(entry[key]);
hasJson[key] = hasJson[key] || (typeof entry[key] === 'object' && Object.keys(entry[key] || {}).length > 0) || false;
hasJson[key] =
hasJson[key] ||
(typeof entry[key] === 'object' && Object.keys(entry[key] || {}).length > 0) ||
false;
});
// Add the data of the entry