Michael Meeks
Making the Writer ruler's indent and tab-stop widgets explain themselves.
Making the Writer ruler’s indent and tab-stop widgets explain themselves.
The Writer ruler has always carried small widgets for the paragraph and first-line indents, but they were hard to understand and gave no hint of what they did. Michael Meeks opened issue 15776 and posted a first draft that added tooltips with icons to make the widgets obvious. That sparked a design discussion with Ivana Koron, Andreas Kainz and Pedro Silva about how much to show and how to keep it consistent with the other tooltips. Darshan Upadhyay then took the ruler further with a set of follow-up changes, building on Michael’s draft and the conclusions from that discussion. All the pieces are now merged.
The first draft
Reworked indent markers (cool#15887)
The indent marker shapes and their dragging behaviour were reworked to be clearer and more intuitive, with a compact value tooltip. Hovering or dragging a marker shows its value, and while dragging the value updates live as the marker moves. A drag now continues until the mouse button is released, even when the pointer leaves the ruler.
Tab stop hints (cool#15889)
Tab stops on the ruler already worked, but the interaction was not discoverable. A hint now appears next to the pointer over the empty tab-stop area of the ruler, telling the user how to insert and edit a tab stop.
Design discussion and references
Issue 15776: https://github.com/CollaboraOnline/online/issues/15776
First draft (Screenshot): https://github.com/CollaboraOnline/online/issues/15776#issuecomment-4459031513
Andreas Kainz icon and layout ideas: https://github.com/CollaboraOnline/online/issues/15776#issuecomment-4468167616
Ivana Koron keep it short and to the point: https://github.com/CollaboraOnline/online/issues/15776#issuecomment-4486306942
Ivana and Pedro combined design (basis for the shipped version): https://github.com/CollaboraOnline/online/issues/15776#issuecomment-4543309268
UX notes (Pedro Silva): https://github.com/CollaboraOnline/online/issues/15776#issuecomment-4508209850
Merged changes (Gerrit)
New indent marker icons (filled and dark variants): https://gerrit.collaboraoffice.com/c/online/+/4640
ValueTooltip widget: https://gerrit.collaboraoffice.com/c/online/+/4641
cool#15887 rework indent markers, dragging and value tooltips:
cool#15889 stop hint: https://gerrit.collaboraoffice.com/c/online/+/4667
