Save Bar

Save and Discard in reach while you edit, and whether there's anything to save. Specification: docs/components/save-bar.md

Basics

A .canon-save-bar at the end of a <form>: its status, Discard (type="reset") and Save (type="submit"). Change something: the status counts the changes; Discard brings the form back; Save saves (⌘S too). The form's default values are what's saved, so nothing else needs tracking. This app saves on its own and answers with canon-saved, then a Toast.

Edit invoice

INV-2041

On a long page

On a page, the bar sticks to the bottom of the window while the form goes on below it, and takes a line once it's stuck. Scroll inside the frame; leave with changes and the page asks first.

Invoices

Edit INV-2041

Overdue

Edge cases

Right to left, the status sits on the right and the buttons on the left. Without Discard: Save alone.

Edit invoice

INV-2041

Edit invoice

INV-2041