_vg
25 September 2024 18:15
1
The current Android toolbar is B I {;} H1 H2 ... bullet-list numbered-list
. Some of those I never use. I have to hit the ...
so many times every day to reach those I often need e.g. move bullet point left/right.
I wish I could customize which items appear on the toolbar so that I could save a ton of clicks everyday.
If I remember correctly Obsidian does this beautifully.
7 Likes
I also use a lot of bullet-list and task-list indentation and outdentation.
I only see B I {;} ... task-list link search
, but would prefer hiding (in ...) much less used items like code-block and task-list (typically used to only start the list) in favor of showing indent and outdent.
A whole taskbar ordering system is a lot, but a single switch to preference indent and outdent would help a lot already.
A scrolling toolbar might work too.
I'm linking a related pull request:
laurent22:dev
← personalizedrefrigerator:pr/mobile/implement-toolbar-redesign
opened 10:47PM - 05 Dec 24 UTC
# Summary
This pull request:
- Switches the mobile app to a scrolling toolba… r.
- Exposes whether a toolbar button is highlighted to accessibility tools.
- Allows configuring whether items are present in the toolbar or not.
A version of this pull request can be tried at https://personalizedrefrigerator.github.io/joplin/web-client/.
This pull request partially implements a design by @MartaLC for the mobile editor toolbar.
# Screenshots
## Small screen/web
**Light mode**:
![screenshot: Toolbar is shown at the bottom of the screen in light mode, with horizontal scroll](https://github.com/user-attachments/assets/7c3a9210-7670-49f8-8974-bce349d72245)
![screenshot: Toolbar configuration dialog is shown above the toolbar. Each option has a checkbox](https://github.com/user-attachments/assets/f54af9b9-22d6-432d-8720-ce14082dab4a)
**Dark mode**:
![screenshot: Scrolling toolbar in dark mode](https://github.com/user-attachments/assets/6dd2ee38-cb67-4444-baf3-6503b5e48005)
![screenshot: Scrolling toolbar config dialog in dark mode](https://github.com/user-attachments/assets/6132f4d2-d2c4-4066-a94f-af223e6030c1)
## Large screen/web
**Light mode**:
![image](https://github.com/user-attachments/assets/fe4ac019-7321-460c-bc53-3f8676d820c9)
**Dark mode**:
![image](https://github.com/user-attachments/assets/ef4aab30-ad64-45bf-b8f4-b5adc72e7b4c)
**With a plugin command added to the toolbar**:
![image](https://github.com/user-attachments/assets/4b5b1164-115a-4c14-954b-a15c777fd980)
# Testing
## Automated tests
This pull request includes three automated tests. These tests check:
1. That the settings dialog can open.
2. That checking/unchecking items in the settings dialog adds/removes them from the toolbar.
3. That the "math" command is only available when math markup is enabled in the main app settings.
## Manual testing
This pull request has been tested manually by:
1. Opening an existing note.
2. Moving the cursor into an ordered list.
3. Verifying that the "ordered list" item has a shaded background:
4. Clicking the "ordered list" toggle button.
5. Verifying that the ordered list is removed.
6. Verifying that the list item no longer has a shaded background.
7. Pressing the search button.
8. Verifying that this opens the search dialog.
9. Pressing the "tags" button.
10. Verifying that this opens the tags dialog.
11. Clicking "cancel".
12. Clicking "bold".
13. Verifying that this adds `****` to the note.
14. Clicking "code".
15. Verifying that this adds ``` `` ``` to the note.
16. Clicking "link".
17. Verifying that this opens the link dialog.
18. Closing the link dialog.
19. Clicking "attach file".
20. Verifying that this opens the attachment dialog.
21. Attaching an image.
22. Deleting the image.
23. Clicking "settings".
24. Verifying that the settings dialog is visible.
25. Unchecking "math" and "code".
26. Verifying that the items have been removed from the toolbar.
27. Closing, then re-opening settings.
28. Clicking "restore default".
29. Clicking "cancel" in the confirmation dialog.
30. Verifying that "math" and "code" are still not visible.
31. Re-opening the settings dialog.
32. Clicking "restore default".
33. Clicking "ok".
34. Verifying that the code and math buttons are restored.
The above testing was done with the web client (Chrome). More limited manual testing has been done on Android 13 and, with an earlier commit, iOS 18.
7 Likes
_vg
16 December 2024 20:30
4
The new feature is an amazing time saver. Thank you so much, you made my day.
1 Like
_vg
31 December 2024 12:58
5