Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mobile: Implement new note menu redesign #11780

Draft
wants to merge 23 commits into
base: dev
Choose a base branch
from

Conversation

personalizedrefrigerator
Copy link
Collaborator

@personalizedrefrigerator personalizedrefrigerator commented Feb 5, 2025

Summary

This pull request partially implements a redesign of the new note creation process (design by @MartaLC).

In addition to changing the appearance of the "new note" menu, this replaces the react-native-paper FAB.Group component`, which had accessibility issues.

At the time of this writing, a version of this pull request can be accessed at personalizedrefrigerator.github.io/joplin/web-client/.

Screenshot

The menu includes shortcuts to creating a new note with a photo, drawing, or file attachment, in addition to "new note" and "new to-do" buttons:
screenshot: A menu along the bottom edge of the screen with camera, attachment, drawing, new to-do, and new note actions. The new to-do and new note actions are on a second row

On a wider screen, the menu is pushed to the right edge of the screen, to minimize distance between the menu and the "+" (Add new) button that opens the menu.
screenshot: The menu, on a wider screen

To-do

  • Accessibility: Improve focus order.
    • Currently, keyboard/screen reader focus visits the "camera"/"attachment"/"drawing" quick actions before visiting the "new to-do" and "new note" buttons.
  • Accessibility: Fix screen readers read "side menu closed" then "side menu opened" when opening the edgemenu.
  • Verify that the menu is shown in the correct place when RTL is enabled.
  • Determine how the menu should be positioned on wide screens.
    • Ideally, this would minimize the distance between the "new note" button and the "+" button that opened the menu. (Related: Fitts' Law).
  • Change the appearance of the "+" button that opens the menu to match the design.
  • Restyle the "new to-do" and "new note" buttons to match the design.
  • Fix swiping down to the left of the menu does nothing.
    • Swiping down from above the menu dismisses it. Swiping down to the left of the menu should do the same thing.
  • Automated tests.
  • Refactoring.

This reverts commit 0b6c104.
This commit pushes the menu to the right on large screens. This makes it
appear in the same place as the '+' button. This minimizes the distance
between the initial click and the next click for creating a button.

See also: [Fitts' Law](https://en.wikipedia.org/wiki/Fitts%27s_law)
@personalizedrefrigerator personalizedrefrigerator marked this pull request as draft February 5, 2025 03:06
@tomasz1986
Copy link

I think it may appear a bit unclear that both "camera", "attachment", and "drawing" are also a type of "new note" (as there is no connection between them and the "new note" button).

Just an idea, so please ignore if this is unfeasible or difficult to implement, but what do you think about being able to select one of the three options first (or none if not needed), and then pressing the "new note" or "new to-do" buttons? This way, it would be possible to create both notes and to-dos that contain "camera", "attachment", and "drawing" (and not only notes, as is the case right now).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants