91 lines
3.8 KiB
Markdown
91 lines
3.8 KiB
Markdown
# Wireframes
|
|
|
|
This document contains the product wireframes drawn in Excalidraw. The editable sources live under `docs/wireframe.assets/*.excalidraw`. For easy viewing, we generate an SVG-based copy at `docs/.wireframe.md`.
|
|
|
|
<!--
|
|
Note: `.excalidraw.svg` is a special Excalidraw-flavored SVG. We keep `.excalidraw` as the editable source and export to `.svg` for documentation preview.
|
|
Refs:
|
|
- https://github.com/excalidraw/excalidraw
|
|
- https://github.com/excalidraw/svg-to-excalidraw
|
|
-->
|
|
|
|
## Welcome / First screen
|
|
|
|
Purpose: let the user open a PDF quickly via drag & drop or file picker.
|
|
Route: root
|
|
|
|
Design notes:
|
|
- Central drop zone with hint text: “Drag a PDF here or click to select”.
|
|
- Minimal top bar with app name and a "Configure" button with a gear icon for settings.
|
|
- Clean layout encouraging first action.
|
|
|
|
Illustration:
|
|
|
|
|
|
|
|
## Settings dialog
|
|
|
|
Purpose: provide basic configuration before/after opening a PDF.
|
|
Route: root --> settings
|
|
|
|
Design notes:
|
|
- Opened via "Configure" button in the top bar.
|
|
- Modal with simple sections (e.g., General, Display).
|
|
- Primary action to save, secondary to cancel.
|
|
|
|
Illustration:
|
|
|
|
|
|
|
|
## PDF opened
|
|
|
|
Purpose: view and navigate the PDF; for signature placement.
|
|
Route: root --> opened
|
|
|
|
Design notes:
|
|
- Top: A small toolbar sits at the top edge with file name text, open pdf file button, previous/next page widgets and zoom controls.
|
|
- On the far left of the toolbar there is a button that can turn the document pages overview sidebar on and off.
|
|
- On the far right of the toolbar there is a button that can turn the signature cards overview sidebar on and off.
|
|
- Navigation: Previous page, Next page, and a page number input (e.g., “2 / 10”) with jump-on-Enter.
|
|
- Zoom: Zoom out, Zoom level dropdown (percent), Zoom in, Fit width, Fit page, Reset zoom.
|
|
- Optional: Find/search within PDF (if supported by engine).
|
|
- Left pane: vertical strip of page thumbnails (e.g., page1, page2, page3). Clicking a thumbnail navigates to that page; the current page is visually indicated.
|
|
- Center: main PDF viewer shows the active page.
|
|
- wheel to scroll pages.
|
|
- Ctrl/Cmd + wheel to zoom.
|
|
- Right pane: signatures drawer displaying saved signatures as cards.
|
|
- able to drag and drop signature cards onto the PDF as placed signatures.
|
|
- Each signature card shows a preview.
|
|
- long tap/right-click will show menu with options to delete, adjust graphic of image.
|
|
- "adjust graphic" opens a simple image editor, which can remove backgrounds, Rotate (rotation handle).
|
|
- There is an empty card with "new signature" prompt and 2 buttons: "from file" and "draw".
|
|
- "from file" opens a file picker to select an image as a signature card.
|
|
- "draw" opens a simple drawing interface (draw canvas) to create a signature card.
|
|
- Interaction: drag a signature card from the right drawer onto the currently visible page to place it.
|
|
|
|
Signature controls (after placing on page):
|
|
- Select to show bounding box with resize handles and a small inline action bar.
|
|
- Actions: Move (drag), Resize (corner/side handles), Delete (trash icon or Delete key).
|
|
- Lock: Lock/Unlock position.
|
|
- Keyboard: Arrow keys to nudge (Shift for 10px); Shift-resize to keep aspect; Esc to cancel; Ctrl/Cmd+D to duplicate; Del/Backspace to delete.
|
|
|
|
Illustration:
|
|
|
|
|
|
|
|
---
|
|
|
|
## How to view and export
|
|
|
|
We keep links in this file pointing to `.excalidraw`. To preview the SVGs and generate `docs/.wireframe.md` with `.svg` links, run from repo root:
|
|
|
|
dart run tool/gen_view_wireframe_md.dart
|
|
|
|
This will:
|
|
- Copy `docs/wireframe.md` to `docs/.wireframe.md` and rewrite image links to `.svg`.
|
|
- Export any `*.excalidraw` under `docs/` to `*.svg` if they are new or modified.
|
|
|
|
## Next wireframes (optional)
|
|
|
|
- Save/Export result dialog and success state.
|