Mobile: Implement new note menu redesign #11780
Draft
+1,024
−573
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)
the shortcut to all other notes
|
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). |
There was a problem hiding this comment.
Note: Renamed from packages/app-mobile/components/SideMenu.tsx, with a large number of changes.
…d-new-note-menu' into pr/mobile/redesigned-new-note-menu
2 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Goals:
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-paperFAB.Groupcomponent, 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:
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.
To-do
Modal. While the menu is open, theModalprevents accessibility/keyboard focus from reaching items not in the menu. However, it also makes auto-setting focus difficult. On Android, theModalseems to auto-focus the first item several hundred milliseconds after the modal opens.