Replace toolbar with a floating context based menu
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 659
- Forks
- 133
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 110
Description
Problem
Toolbars pose significant disadvantages and are best avoided in simple text editing apps. Among these disadvantages:
-
They requires users to continuously jump between the selected text and the toolbar with their pointing device.
Select text -> Move to toolbar -> click button -> move cursor back to text -> repeat -
They're always present, cluttering the UI and distracting users, whether they're needed or not at any point in time.
-
In collectives, our toolbar inconveniently sits between the title and the rest of the page, disconnecting them in a weird way. Moving it on top of the title is not a great solution because its controls do not affect the styling of the title. In the home page, it sits even further below, after the recent pages widget.
Screenshot
Describe the solution you'd like
A context menu works much better than a toolbar because all the important actions that one might want to perform on a selection are available next to where the text actually is.
Additional context
Some concerns have been raised by @juliusknorr about mobile usability, I don't remember them currently. Maybe @mejo- and @max-nextcloud you do?
In any event we could either solve those concerns by modifying the context menu itself, or fall back to the bottom-toolbar on mobile.
A few examples:
Microsoft loop
Notion
Anytype
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No files or tests are named in the issue. Start by locating the current toolbar entry point and reviewing the unresolved mobile-usability concerns before deciding the interaction scope. Done means the toolbar replacement behavior and mobile handling are defined and implemented consistently across the mentioned contexts.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100