fsylvain/RenewCMS
1
1 Fork 0
Code Issues Pull Requests Packages Projects Releases 20 Wiki Activity

chore: 2 big design passes to harmonize and fix stuff

Browse Source
This commit is contained in:
Florian Sylvain committed 2026-10-11 07:45:17 +02:00
1 parent 67b3ff03d0
commit 5e05b606a7
43 files changed
+2167 -4183
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/design/screens/editor.md
+93 -214
View File
@@ -1,219 +1,98 @@
# 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).
Route: `/article/:id/edit`. API: GET /v1/article/{id} · PATCH /v1/article/{id} · PATCH …/publish|unpublish · POST …/image · DELETE.
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: crop and resize
**Trigger:** A JPEG, PNG or WEBP passed the checks, and nothing is sent yet. The crop starts as the whole image and the width defaults to 1600 px. SVGs skip this step.
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Modal: **Crop and resize** "north-wall.jpg · 3.9 MB"
- crop: ratio "Original", width "1600 px"
- cancel "Choose another file"
- confirm "Upload image"
- Editor: status "draft", save "dirty"
- Mobile: leading arrow-left button, trailing ellipsis
### Upload: crop to a ratio
**Trigger:** 16:9 chosen. The frame keeps the ratio while it's dragged or resized. Arrow keys move it; Shift and arrow keys resize it.
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Modal: **Crop and resize** "north-wall.jpg · 3.9 MB"
- crop: ratio "16:9", width "1600 px"
- cancel "Choose another file"
- confirm "Upload image"
- Editor: status "draft", save "dirty"
- Mobile: leading arrow-left button, trailing ellipsis
### Upload: crop narrower than the width
**Trigger:** The crop is smaller than the chosen width, so it keeps its own size.
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Modal: **Crop and resize** "north-wall.jpg · 3.9 MB"
- crop: ratio "1:1", width "1600 px"
- note: "The crop is 640 px wide, so it's uploaded at that size. Enlarging it would make it blurry."
- cancel "Choose another file"
- confirm "Upload image"
- Editor: status "draft", save "dirty"
- Mobile: leading arrow-left button, trailing ellipsis
### Upload: in progress
**Trigger:** Upload image was pressed. The cropped, resized 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" ("Uploading 180 of 420 KB")
- 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" will be deleted. Its images stay in your library. 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
Visual reference: `RenewCMS Screens Back-office.dc.html`, groups "Editor". Frames: `AppFrame.dc.html` (shell, sidebar, topbar, drawer) plus the screen frame where listed in components.md.
## Copy per state (generated from the board source, pass 2)
Every state below is drawn in light and dark (theme switch on the board), at 1440×900 and 390×844 (both frames sit side by side). Board: `RenewCMS Screens Back-office.dc.html`. Copy is exact; where a cell is empty the state reuses the fixed copy.
### Fixed copy in the frame
- This article doesn't exist
- It may have been deleted, or the link is wrong.
- All articles
- Online
- Draft
- Retry
- Preview
- Save
- Delete
- Every bathroom is different, but the way we price them isn't. We start with a visit, measure everything, and
- write down what stays
- We also check the
- timber windows
- /articles/winter-checklist
- Edit
- Open
- Remove
- before any tiling starts.
- What goes into the price
- Stripping out and making good
- Plumbing moves, if any
- Tiles, fittings and a day for silicone
- /static/uploadedImages/3f9c…e1.jpg
- We don't add a margin on materials you choose yourself.
- Details
- Created
- 12 Mar 2026, 09:14
- Updated
- Today, 11:02
- ID
- Images
- Public API URL
- /v1/article/12
- Title
- Titles can't be changed after an article is created. To use a different title, create a new article and delete this one.
### Editor (group "Editor", 41 states)
Route: `/article/:id/edit`. API: GET /v1/article/{id} · PATCH /v1/article/{id} · PATCH …/publish|unpublish · POST …/image · DELETE.
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".
| # | State | Trigger | Copy |
|---|---|---|---|
| 1 | Loading | GET in flight. Skeletons for the title, content and details. | |
| 2 | Saved | Just opened or just saved. Save is disabled. | |
| 3 | Unsaved changes | Any edit. Publish becomes "Save and publish". Leaving asks for confirmation. | |
| 4 | Saving | Save, or Ctrl/⌘ S. | |
| 5 | Save failed | 500 or network failure. The changes are kept and Retry resends them. | |
| 6 | Very long article | No length limit. The count stays neutral and correct at 120,000 characters. Save and Publish stay enabled. | |
| 7 | Very long article: saving | Save with large content. The status shows the spinner and the page stays editable. | "Saving 120,000 characters. This can take a few seconds." |
| 8 | Very long article: saved | 200. Status reads Saved with the time. The count is unchanged. | |
| 9 | Very long article: save failed | 500, 413 or network failure. Nothing is lost; Retry resends the same content. | "Couldn't save. Your text is kept. Retry." |
| 10 | Preview | The Preview switch. Shows the title and body in the content scale, the way a public site might. | |
| 11 | Link: create from selection | Ctrl/⌘ K or the link button with text selected. Link text is prefilled from the selection; URL has focus. | "Link text" / "timber windows" / "URL" |
| 12 | Link: create with no selection | Nothing selected. Link text is empty and has focus. | "Link text" / "What the reader sees" / "URL" |
| 13 | Link: edit existing | Edit in the link popover, or Ctrl/⌘ K inside a link. Prefilled; "Remove link" is offered. | "Edit link" / "Save link" / "Link text" / "timber windows" / "URL" |
| 14 | Link: invalid URL | On submit or blur. Nothing is inserted. | "Link text" / "timber windows" / "URL" / "Enter a valid URL. Use http(s), mailto, a path or #anchor." |
| 15 | Link: empty text | On submit with empty link text. | "Link text" / "Enter the link text." / "What the reader sees" / "URL" |
| 16 | Link: long URL | The field truncates in the middle of the line; the full value is available by scrolling the field and in the title attribute. | "Edit link" / "Save link" / "Link text" / "planning guidance" / "URL" |
| 17 | Link button: default | Toolbar button, icon link, after the list buttons. Desktop 28 px, mobile 40 px. Text colour --ui-text-toned. The toolbar scrolls sideways on mobile (see "Toolbar overflow"). | |
| 18 | Link button: hover and tooltip | Pointer or keyboard focus after 400 ms. Tooltip "Insert link (Ctrl+K)"; on macOS it reads "Insert link (⌘K)". Touch has no tooltip. | |
| 19 | Link button: focus-visible | 2 px --ui-primary outline, 1 px offset inside the toolbar. Enter or Space opens the link dialog. | |
| 20 | Link button: active (cursor in a link) | The cursor or selection is inside a link: aria-pressed true, --rc-sand fill and --rc-on-sand icon. Pressing it opens the dialog in edit mode. | |
| 21 | Link button: disabled | An image is selected in the editor. The button is at 40% opacity, aria-disabled, no tooltip. Ctrl/⌘ K does nothing. | |
| 22 | Link popover and sheet | Click a link, or Enter on a focused link. Desktop: popover under the link with the URL and Edit, Open and Remove. Mobile (touch): bottom sheet with the link text, the URL and Edit link, Open link, Remove link at 48 px. Esc or a tap outside closes it. Remove asks for no confirmation; undo restores the link. | |
| 23 | Rendered link: default | Same as the published page: --ui-text-highlighted, 1 px underline, 3 px offset. | |
| 24 | Rendered link: hover | Underline thickens to 2 px. | |
| 25 | Rendered link: focus | Tab or arrow keys into the link: 2 px --ui-primary outline, 2 px offset. | |
| 26 | Rendered link: selected | Text selected across the link: --rc-sand fill, --rc-on-sand text. | |
| 27 | Toolbar overflow (390 px) | The full toolbar does not fit at 390 px. It scrolls sideways in one row (no wrap); a 24 or 32 px fade marks each hidden side. This frame is scrolled to the end, so the link, remove-formatting and Image buttons are visible. Desktop is unchanged. | |
| 28 | Upload: choose | The image button in the toolbar, or a file dropped on the editor. | "Add an image" / "Cancel" |
| 29 | Upload: crop and resize | A JPEG, PNG or WEBP passed the checks, and nothing is sent yet. The crop starts as the whole image and the width defaults to 1600 px. SVGs skip this step. | |
| 30 | Upload: crop to a ratio | 16:9 chosen. The frame keeps the ratio while it's dragged or resized. Arrow keys move it; Shift and arrow keys resize it. | |
| 31 | Upload: crop narrower than the width | The crop is smaller than the chosen width, so it keeps its own size. | |
| 32 | Upload: in progress | Upload image was pressed. The cropped, resized file is uploading. Closing the dialog cancels the upload. | "Add an image" / "Cancel upload" |
| 33 | Upload: rejected | Checked in the browser, so nothing is sent. | "Add an image" / "Cancel" / "Choose another file" |
| 34 | Upload: inserted | 201: the image goes in at the cursor, and the article now has unsaved changes. | "Image added" / "Save to keep it in the article." |
| 35 | Publishing | "Save and publish": the PATCH body, then the publish request. | "Saving and publishing…" |
| 36 | Published | 200: the badge flips, Unpublish is offered and a toast confirms. | "Article published" / ""How we price a bathroom renovation" is now online." |
| 37 | Unpublishing | Unpublish doesn't save pending edits. | "Unpublishing…" |
| 38 | Delete: confirm | Delete… from the overflow menu. After a 204, it goes to /article with the "Article deleted" toast. | "Delete this article?" / ""How we price a bathroom renovation" and its 3 images will be deleted. This can't be undone." / "Cancel" / "Delete article" |
| 39 | Leave with unsaved changes | Back, a nav link or closing the tab. | "Leave without saving?" / "Your changes to "How we price a bathroom renovation" haven't been saved." / "Discard changes" / "Keep editing" |
| 40 | Offline | The connection dropped. Writing continues, and Save and Publish wait. | |
| 41 | Not found (404) | Unknown id, or the article was deleted elsewhere. | |