admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 10:31:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): Show collapse icon when hovering anywhere on the column (no-changelog) (#17230)

Browse Source
This commit is contained in:
Suguru Inoue
2025-07-11 13:27:01 +02:00
committed by GitHub
parent 7657cce5a4
commit ba7b2d8fd9
1 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/frontend/editor-ui/src/components/RunDataTable.vue
View File

@@ -65,6 +65,7 @@ const forceShowGrip = ref(false);
const draggedColumn = ref(false); const draggedColumn = ref(false);
const draggingPath = ref<string | null>(null); const draggingPath = ref<string | null>(null);
const hoveringPath = ref<string | null>(null); const hoveringPath = ref<string | null>(null);
const hoveringColumnIndex = ref<number>(-1);
const activeRow = ref<number | null>(null); const activeRow = ref<number | null>(null);
const columnLimit = ref(MAX_COLUMNS_LIMIT); const columnLimit = ref(MAX_COLUMNS_LIMIT);
const columnLimitExceeded = ref(false); const columnLimitExceeded = ref(false);
@@ -158,10 +159,14 @@ function showExecutionLink(index: number) {
function onMouseEnterCell(e: MouseEvent) { function onMouseEnterCell(e: MouseEvent) {
const target = e.target; const target = e.target;
if (target && props.mappingEnabled) { const col = (target as HTMLElement).dataset.col;
const col = (target as HTMLElement).dataset.col; const parsedCol = col ? parseInt(col, 10) : Number.NaN;
if (col && !isNaN(parseInt(col, 10))) {
activeColumn.value = parseInt(col, 10); if (!isNaN(parsedCol)) {
hoveringColumnIndex.value = parsedCol;
if (target && props.mappingEnabled) {
activeColumn.value = parsedCol;
} }
} }
@@ -178,6 +183,7 @@ function onMouseLeaveCell() {
activeColumn.value = -1; activeColumn.value = -1;
activeRow.value = null; activeRow.value = null;
emit('activeRowChanged', null); emit('activeRowChanged', null);
hoveringColumnIndex.value = -1;
} }
function onMouseEnterKey(path: Array<string | number>, colIndex: number) { function onMouseEnterKey(path: Array<string | number>, colIndex: number) {
@@ -556,7 +562,10 @@ watch(
<th <th
v-for="(column, i) in tableData.columns || []" v-for="(column, i) in tableData.columns || []"
:key="column" :key="column"
:class="collapsingColumnIndex === i ? $style.isCollapsingColumn : ''" :class="{
[$style.isCollapsingColumn]: collapsingColumnIndex === i,
[$style.isHoveredColumn]: hoveringColumnIndex === i,
}"
> >
<N8nTooltip placement="bottom-start" :disabled="!mappingEnabled" :show-after="1000"> <N8nTooltip placement="bottom-start" :disabled="!mappingEnabled" :show-after="1000">
<template #content> <template #content>
@@ -999,12 +1008,13 @@ th.isCollapsingColumn + th {
flex-shrink: 0; flex-shrink: 0;
} }
visibility: hidden; opacity: 0;
margin-block: calc(-2 * var(--spacing-2xs)); margin-block: calc(-2 * var(--spacing-2xs));
.isCollapsingColumn &, .isCollapsingColumn &,
th.isHoveredColumn &,
th:hover & { th:hover & {
visibility: visible; opacity: 1;
} }
} }
</style> </style>