72378cb4f2
Make pending task images compact and inspectable across task creation surfaces. - Extract shared pending-image thumbnail controls for Quick Add, Task Form, and inline creation. - Open full images in a responsive, movable, resizable FloatingWindow with Escape focus restoration. - Add styling, coverage, operator documentation, and a minor changeset. Files changed: .changeset/fn-8037-image-preview-modal.md | 7 ++ docs/dashboard-guide.md | 4 +- .../quick-entry-image-preview-modal.test.tsx | 60 ++++++++++ .../dashboard/app/components/FloatingWindow.css | 22 ++++ .../dashboard/app/components/InlineCreateCard.css | 14 ++- .../dashboard/app/components/InlineCreateCard.tsx | 26 ++--- .../app/components/PendingImagePreviews.css | 35 ++++++ .../app/components/PendingImagePreviews.tsx | 121 +++++++++++++++++++++ .../dashboard/app/components/QuickEntryBox.tsx | 27 ++--- packages/dashboard/app/components/TaskForm.tsx | 26 ++--- 10 files changed, 280 insertions(+), 62 deletions(-) Fusion-Task-Id: FN-8037 Fusion-Task-Lineage: 3d92f695-67c9-4791-bfcc-ad25f6aa56f4 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
36 lines
991 B
CSS
36 lines
991 B
CSS
/*
|
|
FNXC:QuickAddAttachments 2026-07-16-00:00:
|
|
The open button fills the compact shared thumbnail shell while the remove button remains an independent layered control. The preview image deliberately retains its natural dimensions in the resizable FloatingWindow body, whose scroll area is governed by the user-selected window size.
|
|
*/
|
|
.pending-image-preview__open {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pending-image-preview__open:focus-visible {
|
|
outline: var(--focus-ring-width, thin) solid var(--focus-ring, var(--color-primary));
|
|
outline-offset: calc(var(--space-xs) * -1);
|
|
}
|
|
|
|
.pending-image-preview__modal-content {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
padding: var(--space-md);
|
|
}
|
|
|
|
.pending-image-preview__modal-content img {
|
|
display: block;
|
|
width: auto;
|
|
height: auto;
|
|
max-width: none;
|
|
max-height: none;
|
|
}
|