nextcloud / nextcloud/text

Replace toolbar with a floating context based menu

Open
#7,352 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
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

    Image

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
Image
Notion
Image
Anytype
Image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.