3fd4bdbc69
Remove native task drag-and-drop while preserving board panning and task actions. - Remove draggable task movement and drop handling from board, columns, lanes, lists, and cards. - Add task context-menu movement actions and update related documentation and release metadata. - Update component tests to cover non-draggable cards and board-pan exclusions. Files changed: .changeset/fn-051-task-card-moves.md | 7 + docs/dashboard-guide.md | 5 +- docs/task-management.md | 6 + packages/dashboard/app/components/Board.tsx | 63 +----- packages/dashboard/app/components/Column.tsx | 140 +------------- packages/dashboard/app/components/DockTaskList.tsx | 3 +- packages/dashboard/app/components/Lane.tsx | 9 - packages/dashboard/app/components/ListView.css | 12 +- packages/dashboard/app/components/ListView.tsx | 132 ++----------- packages/dashboard/app/components/TaskCard.css | 8 - packages/dashboard/app/components/TaskCard.tsx | 58 ++---- .../dashboard/app/components/TaskContextMenu.css | 37 ++++ .../dashboard/app/components/TaskContextMenu.tsx | 145 ++++++++++++-- .../__tests__/Board.canDropTask.test.tsx | 212 --------------------- .../app/components/__tests__/Board.test.tsx | 8 +- .../app/components/__tests__/Column.test.tsx | 101 +--------- .../app/components/__tests__/DockTaskList.test.tsx | 5 +- .../app/components/__tests__/Lane.test.tsx | 26 --- .../app/components/__tests__/ListView.test.tsx | 178 +---------------- .../app/components/__tests__/TaskCard.test.tsx | 60 ++---- .../components/__tests__/TaskContextMenu.test.tsx | 55 +++++- .../dashboard/app/components/boardCanDropTask.ts | 56 ----- .../app/components/dashboard/MainContent.tsx | 1 - .../app/components/useRightDockController.tsx | 1 - packages/dashboard/app/styles.css | 14 -- 25 files changed, 297 insertions(+), 1045 deletions(-) Fusion-Task-Id: FN-051 Fusion-Task-Lineage: b5614cb1-75f3-4307-a595-123f903adc99 Co-authored-by: Fusion <noreply@runfusion.ai>
95 lines
2.3 KiB
CSS
95 lines
2.3 KiB
CSS
.task-context-menu {
|
||
--task-context-menu-min-width: calc(var(--space-xl) * 6 + var(--space-lg));
|
||
--task-context-menu-max-width: min(calc(var(--space-xl) * 9 + var(--space-md)), calc(100vw - var(--space-xl)));
|
||
|
||
position: absolute;
|
||
z-index: 20;
|
||
min-width: var(--task-context-menu-min-width);
|
||
max-width: var(--task-context-menu-max-width);
|
||
padding: var(--space-xs) 0;
|
||
border: var(--btn-border-width) solid var(--border);
|
||
border-radius: var(--radius-sm);
|
||
background: var(--surface);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.task-context-menu__item {
|
||
display: block;
|
||
width: 100%;
|
||
padding: var(--space-sm) var(--space-md);
|
||
border: 0;
|
||
background: transparent;
|
||
color: var(--text);
|
||
font: inherit;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.task-context-menu__item:hover,
|
||
.task-context-menu__item:focus {
|
||
outline: none;
|
||
background: var(--surface-hover, color-mix(in srgb, var(--text) 6%, transparent));
|
||
}
|
||
|
||
.task-context-menu__item--danger {
|
||
color: var(--color-error);
|
||
}
|
||
|
||
.task-context-menu__item--danger:hover,
|
||
.task-context-menu__item--danger:focus {
|
||
background: color-mix(in srgb, var(--color-error) 8%, transparent);
|
||
}
|
||
|
||
.task-context-menu__item--note {
|
||
color: var(--text-muted);
|
||
font-size: calc(var(--space-sm) + var(--space-xs) * 0.75);
|
||
cursor: default;
|
||
}
|
||
|
||
.task-context-menu__submenu-parent {
|
||
position: relative;
|
||
}
|
||
|
||
.task-context-menu__submenu-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.task-context-menu__submenu-toggle::after {
|
||
content: "›";
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.task-context-menu__submenu {
|
||
position: absolute;
|
||
top: 0;
|
||
left: calc(100% - var(--space-xs));
|
||
min-width: var(--task-context-menu-min-width);
|
||
padding: var(--space-xs) 0;
|
||
border: var(--btn-border-width) solid var(--border);
|
||
border-radius: var(--radius-sm);
|
||
background: var(--surface);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.task-context-menu__submenu--opens-left {
|
||
right: calc(100% - var(--space-xs));
|
||
left: auto;
|
||
}
|
||
|
||
.task-context-menu__submenu-item {
|
||
padding-left: var(--space-lg);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.task-context-menu {
|
||
--task-context-menu-min-width: min(calc(100vw - var(--space-xl)), calc(var(--space-xl) * 6));
|
||
}
|
||
|
||
.task-context-menu__item {
|
||
padding: var(--space-md);
|
||
}
|
||
}
|