mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -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

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

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