chore: setup design references
This commit is contained in:
fsylvain committed
1 parent
2a64991916
commit
64f50074bd
38 files changed
+8443
No files matched your search
@@ -0,0 +1,182 @@
|
||||
# Editor
|
||||
|
||||
- **Route:** `/article/:id/edit`
|
||||
- **API:** GET /v1/article/{id} · PATCH /v1/article/{id} · PATCH …/publish|unpublish · POST …/image · DELETE
|
||||
- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "Editor" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
|
||||
|
||||
On mobile, Save and Publish sit in a sticky bottom bar and the details panel opens as a slideover. A session expiry mid-edit keeps the draft in sessionStorage and goes to /login?redirect=/article/12/edit. After logging in, the editor restores the draft and shows "Unsaved changes".
|
||||
|
||||
## States
|
||||
|
||||
### Loading
|
||||
|
||||
**Trigger:** GET in flight. Skeletons for the title, content and details.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "saved", loading true
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Saved
|
||||
|
||||
**Trigger:** Just opened or just saved. Save is disabled.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "saved"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Unsaved changes
|
||||
|
||||
**Trigger:** Any edit. Publish becomes "Save and publish". Leaving asks for confirmation.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "dirty"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Saving
|
||||
|
||||
**Trigger:** Save, or Ctrl/⌘ S.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "saving"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Save failed
|
||||
|
||||
**Trigger:** 500 or network failure. The changes are kept and Retry resends them.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "error"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Near the limit
|
||||
|
||||
**Trigger:** 90% of 10 000 HTML characters.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "dirty", len 9240
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Too long
|
||||
|
||||
**Trigger:** Over 10 000. Save and Publish are disabled until it's shorter.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "dirty", len 10214
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Preview
|
||||
|
||||
**Trigger:** The Preview switch. Shows the title and body in the content scale, the way a public site might.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "saved", preview true
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Upload: choose
|
||||
|
||||
**Trigger:** The image button in the toolbar, or a file dropped on the editor.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Modal: **Add an image**
|
||||
- upload state: state "idle"
|
||||
- cancel "Cancel"
|
||||
- Editor: status "draft", save "dirty"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Upload: in progress
|
||||
|
||||
**Trigger:** A valid file is uploading. Closing the dialog cancels the upload.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Modal: **Add an image**
|
||||
- upload state: state "uploading"
|
||||
- cancel "Cancel upload"
|
||||
- Editor: status "draft", save "dirty"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Upload: rejected
|
||||
|
||||
**Trigger:** Checked in the browser, so nothing is sent.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Modal: **Add an image**
|
||||
- upload state: state "rejected"
|
||||
- cancel "Cancel"
|
||||
- confirm "Choose another file"
|
||||
- Editor: status "draft", save "dirty"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Upload: inserted
|
||||
|
||||
**Trigger:** 201: the image goes in at the cursor, and the article now has unsaved changes.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Toast (success, circle-check): **Image added** "Save to keep it in the article."
|
||||
- Editor: status "draft", save "dirty", image true
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Publishing
|
||||
|
||||
**Trigger:** "Save and publish": the PATCH body, then the publish request.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "saving", pending "Saving and publishing…"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Published
|
||||
|
||||
**Trigger:** 200: the badge flips, Unpublish is offered and a toast confirms.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Toast (success, circle-check): **Article published** ""How we price a bathroom renovation" is now online."
|
||||
- Editor: status "online", save "saved"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Unpublishing
|
||||
|
||||
**Trigger:** Unpublish doesn't save pending edits.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "online", save "saved", pending "Unpublishing…"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Delete: confirm
|
||||
|
||||
**Trigger:** Delete… from the overflow menu. After a 204, it goes to /article with the "Article deleted" toast.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Modal: **Delete this article?**
|
||||
- text ""How we price a bathroom renovation" and its 3 images will be deleted. This can't be undone."
|
||||
- cancel "Cancel"
|
||||
- confirm "Delete article" (danger)
|
||||
- Editor: status "draft", save "saved"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Leave with unsaved changes
|
||||
|
||||
**Trigger:** Back, a nav link or closing the tab.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Modal: **Leave without saving?**
|
||||
- text "Your changes to "How we price a bathroom renovation" haven't been saved."
|
||||
- cancel "Discard changes"
|
||||
- confirm "Keep editing"
|
||||
- Editor: status "draft", save "dirty"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Offline
|
||||
|
||||
**Trigger:** The connection dropped. Writing continues, and Save and Publish wait.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "offline"
|
||||
- offline: true
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Not found (404)
|
||||
|
||||
**Trigger:** Unknown id, or the article was deleted elsewhere.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "saved", notfound true
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
Reference in new issue
Block a user