eb425d17d9
Introduce a dedicated modal flow for grouped shared-branch tasks in the dashboard. - Add GroupTaskModal component and styles for grouped task details and actions. - Wire grouped-task modal state through App, modal manager hooks, and modal container components. - Update board/column/task-card interactions to open grouped tasks in the new modal. - Adjust subtask breakdown behavior and add focused tests for grouped task modal/task-card flows. - Document the grouped-task modal behavior and add a changeset for @runfusion/fusion. Files changed: .changeset/fn-5825-group-task-modal.md | 5 + docs/dashboard-guide.md | 5 +- packages/dashboard/app/App.tsx | 6 + packages/dashboard/app/components/AppModals.tsx | 24 ++++ packages/dashboard/app/components/Board.tsx | 4 +- packages/dashboard/app/components/Column.tsx | 4 +- .../dashboard/app/components/GroupTaskModal.css | 79 ++++++++++ .../dashboard/app/components/GroupTaskModal.tsx | 159 +++++++++++++++++++++ .../app/components/SubtaskBreakdownModal.tsx | 16 ++- packages/dashboard/app/components/TaskCard.tsx | 8 ++ .../components/__tests__/GroupTaskModal.test.tsx | 105 ++++++++++++++ .../app/components/__tests__/TaskCard.test.tsx | 18 +++ packages/dashboard/app/hooks/useModalManager.ts | 16 +++ packages/dashboard/vitest.config.ts | 2 +- 14 files changed, 445 insertions(+), 6 deletions(-) Fusion-Task-Id: FN-5825 Fusion-Task-Lineage: d9317a58-05ce-4437-8311-b7e2a186537b
80 lines
1.4 KiB
CSS
80 lines
1.4 KiB
CSS
.group-task-modal {
|
|
max-width: min(var(--layout-content-max-width), calc(100vw - var(--spacing-2xl)));
|
|
}
|
|
|
|
.group-task-modal-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.group-task-modal-state {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.group-task-modal-error {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.group-task-modal-summary,
|
|
.group-task-modal-members-card,
|
|
.group-task-modal-pr,
|
|
.group-task-modal-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.group-task-modal-summary-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.group-task-modal-label {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.group-task-modal-progress-text {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.group-task-modal-members {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.group-task-modal-member {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto auto auto;
|
|
gap: var(--spacing-sm);
|
|
align-items: center;
|
|
}
|
|
|
|
.group-task-modal-member-main {
|
|
min-width: 0;
|
|
}
|
|
|
|
.group-task-modal-member-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.group-task-modal-member {
|
|
grid-template-columns: auto 1fr auto;
|
|
}
|
|
|
|
.group-task-modal-member .badge,
|
|
.group-task-modal-member-status {
|
|
display: none;
|
|
}
|
|
}
|