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

feat(editor): Added animated tooltips to draggable columns in input panel

Browse source 
* 💄 Added animated tooltip to draggable columns in input panel

* 💄 Adding gif to data mapping discoverability tooltip
This commit is contained in:
Milorad FIlipović 2022-08-17 11:51:30 +02:00 committed by GitHub
parent e3f0ee68b4
commit 054cc010ed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 3 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
packages/editor-ui/public/static/data-mapping-gif.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 262 KiB

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

@ -15,7 +15,7 @@
<tr>
<th v-for="(column, i) in tableData.columns || []" :key="column">
<n8n-tooltip placement="bottom-start" :disabled="!mappingEnabled || showHintWithDelay" :open-delay="1000">
<div slot="content">{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}</div>
<div slot="content" v-html="$locale.baseText('dataMapping.dragColumnToFieldHint')"></div>
<Draggable type="mapping" :data="getExpression(column)" :disabled="!mappingEnabled" @dragstart="onDragStart" @dragend="(column) => onDragEnd(column)">
<template v-slot:preview="{ canDrop }">
<div :class="[$style.dragPill, canDrop ? $style.droppablePill: $style.defaultPill]">

4
packages/editor-ui/src/plugins/i18n/locales/en.json
View file

@ -161,11 +161,11 @@
"dataDisplay.needHelp": "Need help?",
"dataDisplay.nodeDocumentation": "Node Documentation",
"dataDisplay.openDocumentationFor": "Open {nodeTypeDisplayName} documentation",
"dataMapping.dragColumnToFieldHint": "Drag onto a field to map column to that field",
"dataMapping.dragColumnToFieldHint": "<img src='/static/data-mapping-gif.gif'/> Drag onto a field to map column to that field",
"dataMapping.dragFromPreviousHint": "Map data from previous nodes to <b>{name}</b><br/> by first clicking this button",
"dataMapping.success.title": "You just mapped some data!",
"dataMapping.success.moreInfo": "Check out our <a href=\"https://docs.n8n.io/data/data-mapping\" target=\"_blank\">docs</a> for more details on mapping data in n8n",
"dataMapping.tableHint": "Drag a column onto <b>{name}</b> to map it",
"dataMapping.tableHint": "<img src='/static/data-mapping-gif.gif'/> Drag a column onto <b>{name}</b> to map it",
"dataMapping.mapSpecificColumnToField": "Map {name} to field",
"displayWithChange.cancelEdit": "Cancel Edit",
"displayWithChange.clickToChange": "Click to Change",