Wiki editor: Improve design for consistency
Problem to solve
Editing wiki pages is inconsistent with the UX patterns of editing issues and merge requests. We should make them consistent.
Edit issue | Edit wiki |
---|---|
Target audience
Further details
Wiki's are not consistent with the rest of the GitLab interface and need to be brought inline and up to date to make them more relevant and useful.
Proposal
Update the wiki edit interface to be consistent with equivalent GitLab page designs.
- Edit page heading should be smaller and say "Created X time ago by user" (remove duplicate page title)
- Title/description form style should match discussion layout
- Format drop down should be in same position as template drop down
- Page history should be shown in the view mode, not while editing
@jareko
New design proposals fromSee designs tab
What does success look like, and how can we measure that?
This is reducing UX debt and is unlikely to increase usage of wiki's in and of itself/
Todo list
Wiki page view
-
Move title to be part of the main wiki content (!44390 (merged)) -
Move "edit" button below "new page" button (!44391 (merged)) -
Use Toast for notification when wiki page is updated (!46201 (merged)) -
Wiki page: Add avatar to header (next to user fullname) (!46405 (closed))
Wiki page editing view:
-
shift labels inline with input fields (on the left hand side of fields) (!45247 (merged)) -
remove "Page history" button (!45247 (merged)) -
Change color of "tip" text (below "title" field) to text-muted
(!45247 (merged)) -
Wiki edit page: Add "last edited by" with User fullname and avatar (replacing the large page breadcrumb/page title)
Wiki page "delete" modal:
-
Make it smaller (?) (!45740 (merged)) -
Add "Cancel" button next to "Delete page" button (!45740 (merged))
Wiki page diff view:
-
Make consistent with all the above pages: !31545 (comment 343409157)
Won't do:
- Make action footer on "editing" page sticky
- Shift button position/order on the action footer on "editing" page
- Make "editing" page input fields columnar (inline with each other)
Prototype here
Edited by Tom Quirk