Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

10 — Interaction Specification (Files Module)

Micro-interactions and motion for file flows. Motion tokens (m-fast, m-base), haptics, and platform patterns are authoritative in 00-shared/08_Interaction_&_Motion — this file applies them to the files domain.


1. Opening the upload sheet

  • Trigger: "Attach" CTA → AppBottomSheet slides up (m-base, 280 ms, ease-out); scrim dims list.
  • Tablet/desktop: centered dialog ≤ 480 dp, scale+fade (m-fast).
  • Haptic: light (HapticFeedback.lightImpact) on open (mobile).

2. Picking a file

  • System picker is a platform-owned transition (no app animation).
  • On selection return: preview card animates in (m-fast fade+slide 8 dp); Upload CTA becomes enabled (color shift per tokens — no bounce).
  • Re-pick replaces the preview (old card out m-fast, new in).

3. Upload progress

  • Progress card: AppProgress fills 0→100% with per-frame value from transport onSendProgress; percent label; bytes counter 1.2 MB / 3.2 MB.
  • Indeterminate until first progress event (server buffering) — AppProgress indeterminate variant, not a frozen 0%.
  • Cancel: press state ripple; card collapses out (m-fast); snackbar "Upload cancelled".
  • Success: card → green check 200 ms → auto-dismiss; tile inserts into list with m-base slide + highlight pulse (2 × m-fast).

4. Upload failure

  • Card flips to error color; inline "Retry" button (re-POST). Error shake on the card (8 dp, m-fast) per 00-shared/08.
  • Snackbar alternative only when the card is dismissed.

5. Download interaction

  • Tap download → progress row appears under the tile (inline, no full-screen dialog for single files).
  • Percent from onReceiveProgress; indeterminate until first bytes.
  • Done (web): browser download UI takes over — show snackbar "Downloaded name".
  • Done (mobile): system notification; tap → share/open sheet (forward-looking).
  • Failure: row shows error + Retry (restarts from 0 — no resume).

6. Delete confirmation

  • Menu → AppDialog destructive variant: title + file name + red Delete (danger color token), Cancel ghost.
  • Confirm: button spinner (no double-tap), row removal animates out (m-base collapse), snackbar "File deleted". No undo action (proposed: restore later).
  • Dismiss: scrim tap / back / ESC cancels without animation of the row.

7. Long-press & swipe (proposed)

  • Long-press row → multi-select mode (proposed); swipe-left → delete shortcut on admin rows (proposed) — requires server multi-delete (planned) before shipping.

8. Drag & drop (desktop) (forward-looking)

  • Drag a local file onto the list/section → drop zone highlight → auto-open UploadSheet prefilled. Browser-only; no server change.

9. Offline behavior

  • Offline banner pins to top of list; upload/download actions disabled with explanation (no server reachability). Reconnect → retry queue drains (forward-looking).

10. Pull-to-refresh

  • List re-fetch (GET /files) with standard RefreshIndicator; no haptic unless completion > 500 ms (platform default).

11. Motion budget summary

InteractionTokenNote
Sheet open/closem-basebottom slide
Row insert/removem-basecollapse + highlight pulse
Preview card swapm-fastfade + 8 dp slide
Error shakem-fast8 dp
Dialog confirmm-fastscale+fade