Mobile plugins: Best way to support opening plugin panels?

Features
,
1

Summary

Initial for mobile plugins has been merged. Some parts of the new UI, particularly the UI for showing plugin panels, can be improved.

See also:

Current UI

Currently, plugin panels are shown through an item in the note actions menu:

screenshot: "Show plugin panels" menu item highlighted
screenshot: "Show plugin panels" menu item highlighted1360×1162 111 KB

This isn't ideal — that menu already has a large number of items and can only be accessed while a note is open. Here are two possible alternatives:

1. Show the toggle button in the main toolbar

If there plugin panels, a button is added to the main toolbar to show them in a pop-up dialog.

Advanages:

  • Allows opening plugin panels from any screen.
  • A draft implementation already exists.
    This has the benefit of allowing plugins to be shown even when a note is not open. I also have a draft implementation of this on a separate branch (though it needs accessibility changes).

Disadvantages:

  • Adds additional icons to the toolbar, decreasing space for existing items like the notebook dropdown.

screenshot: main toolbar toggle button shown, clicking on it (indicated by an arrow), shows a dialog that lists open plugin panels
screenshot: main toolbar toggle button shown, clicking on it (indicated by an arrow), shows a dialog that lists open plugin panels896×1499 190 KB

2. Show the plugin panels in the "properties" sidebar

Advantages:

  • Doesn't take up additional space in the main toolbar or the note actions menu.

Disadvantages:

  • More difficult to discover.
  • Only possible to open when on the notes screen.
  • Not implemented yet.
  • The sidebar is currently opened with a menu item labeled "Properties", which may need to be renamed.

screenshot: Sidebar on right side of screen expanded, includes created and updated time, and view on map. Just below view on map is a large blue rectangle.

Questions

  • What are some other designs that should be considered for this feature?
  • What apps solve a similar problem in an easy-to-use way?
4 Likes
2

@uxamanda, @bernard, if you're around and have any suggestion we'd love to hear it!

3

The first alternative's advantages are hard to ignore. As for the lone disadvantage, here are questions related to increasing long or heavily indented notebook (dropdown) title visibility:

Would it be possible to add a mobile tooltip (like Search has) to the notebook (dropdown) title in the toolbar? Edge case notebook names could then show inside the tooltip, wrapped to fit the viewport width.

Would it be possible to extend the notebook dropdown menu to the right viewport edge (mostly for portrait mode)? Yes, the menu edge and caret won't align. However, on-screen context and the beta feature of tapping the dropdown field to clear the dropdown should suffice.

I think there's room to add icons to the toolbar, especially if the above is possible. Other mobile editors tend to have 2-6 commonly used icon buttons on the right side, as seen in these examples: 7 of the Best Markdown Editors for Android and iPhone - Make Tech Easier

This is off-topic, but how about adding other common actions to the toolbar when appropriate? For example, I'd find the ability to sync or check when Joplin is syncing without leaving the sidebar open helpful. I'd also find the ability to pin a few hamburger menu options to the toolbar helpful for quicker action access when viewing or editing a note.

Edit: To make the above on topic, pinning specific plugins to the toolbar could also be as helpful as pinning extensions to a desktop browser toolbar.

1 Like
4

Just wanted to say that the way this was implemented in v3 is great! I really enjoy having access to panels at any given time. Thank you!

3 Likes