Mobile: Settings screen: Create separate pages for each screen

[personalizedrefrigerator]

Summary

Groups Joplin Mobile's settings screen into sections, where only one section is shown at a time.

In tablet mode, this design is similar to that of the desktop app.

Testing

Although this pull request has been marked as "ready for review", due to the large number of changes it makes to the settings page, a number of features need to be tested:

• Filesystem sync (including choosing a new location)

  • Android API < 29
  • Android API > 29

• Profile export

  • Android API < 29
  • Android API > 29

• Sync report export

  • Android API < 29
  • Android API > 29

• JEX export

  • iOS
  • Android

• Changing the theme

  • iOS
  • Android

• Attempting to exit the configuration screen with unsaved settings

  • iOS
  • Android

• Changing a slider setting

  • iOS
  • Android

• Changing a dropdown setting

  • iOS
  • Android

• Changing a text input setting

  • iOS
  • Android

• There are some VoiceOver issues -- accessibility focus doesn't go to the right place when switching screens. However, setAccessibilityFocus doesn't seem to be working (the title text component doesn't seem to be focusable, which might be related...). It might also be related to testing on a simulator and not a physical device.

I've built an Android pre-release with these changes (APK).

Screenshots

Screen recording

demo7.mp4

[laurent22]

Thanks Henry, that looks very good.

• Is it possible to use the exact same icons as the desktop app by any chance? If too complicated, like if we need to import another icon pack then don't worry about it. It would be good at least to have the Markdown section use the official Markdown icon.

• In dark theme, is it possible to make the section description a bit brighter when it is currently selected?

• I've also left a few comments regarding the section descriptions

Also thanks for refactoring several parts of the code to TypeScript!

[laurent22]

Technically those are plugins, but from a user perspective they are just options to turn on or off, so we don't need to mention "Markdown plugins". Maybe instead: "Media player, math, diagrams, table of content" (No "...")

[laurent22]

"Export your data" (since you can also export folders, tags, etc.)

[laurent22]

"Toggle note history"?

[laurent22]

"Email To Note, login information"

[laurent22]

"markdown toolbar" => "editor toolbar"

[personalizedrefrigerator]

Is it possible to use the exact same icons as the desktop app by any chance? If too complicated, like if we need to import another icon pack then don't worry about it. It would be good at least to have the Markdown section use the official Markdown icon.

For some icons, we would need to add the Icomoon icon pack. I've made the icons that don't require this the same as on desktop:

Note that the FontAwesome export icon is centered, but the arrow on the right (at least to me) makes it look off-center.

[mjourdan]

Please find some observations based on the pre-release apk.

Details I noticed:

• under "notes history", once used, the slider can't be moved back at the default value of 90 days. It lacks of precision in the lower values, while gives more precision than necessary in the higher values
• my synchronisations and encryption settings are missing, as well as my profiles and their notes. I don't know if it's a bug or if app versions are isolated on purpose

Otherwise, moving settings under separate categories makes them much more approachable!

Now, the settings hierarchy probably requires adjustments, as:

• there are many top level categories (9 is maybe too much)
• sometimes top level categories hold very few settings, ("notes history" counts 2 settings only)
• there are toggle buttons to enable audio and video players into the "mardown" category
• there is a toggle to enable the markdown toolbar under the "note" category

There are "tools", "export" and "more" categories whose respective purposes are not clear:

• sync status is under a tools category, while there is a synchronization category
• there is "profile management" under "tools", but there is a "profile export" button under "export"
• there is a button "export debug report" under export, while version information for reporting issues are to be found under "more"

Things could be rearranged to better reflect how they relate to each other. For instance, it is stated in the doc that synchronisation settings are per profile. The settings hierarchy currently doesn't reflect that, as the synchronisation settings are directly attached to a top-level category, while profiles themselves are burried down below a "tools" category.

Similarly, encryption settings should be shown (and maybe enforced) before synchronisation, otherwise it puts people's privacy at risk as their data will be synchronised without being encrypted first.

If you agree with the general idea, maybe I can provide you with a refined hierarchy as an attempt to solve the issues listed above?

[personalizedrefrigerator]

Thank you for the feedback!

This pull request currently uses the existing sections and settings and displays them in a different way. As such, it might make sense to include section/setting changes in a separarte pull request.

The impact of many of the categorization issues could be improved by adding a search feature (which I would like to add soon).

under "notes history", once used, the slider can't be moved back at the default value of 90 days. It lacks of precision in the lower values, while gives more precision than necessary in the higher values

I'm able to reproduce this in the settings screen before this pull request. As such, it isn't a new issue.

I also don't see a way to have a smaller scale for smaller values and larger scale for larger values with the slider library we're currently using.

Here are some ideas for fixing/improving this:

1. Use a text box instead of a slider (will allow entering exact values, but likely harder to use on mobile)
2. Fix https://github.com/laurent22/joplin/issues/8664
3. Use a different scale within the slider than what is shown to the left of the slider (e.g. $\texttt{setting\_value}=1.1^{\texttt{slider\_value}}$
   • This might be bad for accessibility, depending on how the slider reports its value.
   • I'm not sure whether the internal slider value would still be displayed to the user by the slider library.

my synchronisations and encryption settings are missing, as well as my profiles and their notes. I don't know if it's a bug or if app versions are isolated on purpose

When I compile a release, I generally give it a different app ID and name from the main Joplin app (and the official Joplin beta releases). The goal is to make it easier to test a release without being forced to uninstall/reinstall the main application. It should show up as "Joplin (Beta)" on the device's home screen.

• sometimes top level categories hold very few settings, ("notes history" counts 2 settings only)
• there are many top level categories (9 is maybe too much)

Some categories are difficult to update because they're shared with the desktop app. Changes made to these categories (and many of the settings in them) affect both clients.

However, the "Tools", "Export", and "More information" categories are mobile specific, so should be much easier to re-organize without affecting the desktop app.

Some notes:

• "Export debug report" and "export profile" are only present on Android (the file picker/"give access to a folder" functionality is unimplemented on iOS)
• "Export debug report" does roughly the same thing as clicking the "share" button in the "log" screen, except includes more information (and might be easier to save/share from Android because it shows a "save" dialog instead of a "share" dialog).

As such, I propose getting rid of "Export debug report" entirely and merging its functionality into the "share" feature from the log.

The current pull request is focused on converting the categories from headings into links on a separate page.

there are toggle buttons to enable audio and video players into the "mardown" category

These settings are also in the "markdown" category in the desktop app (I think they don't apply to HTML notes, but I would need to check). With the current code structure, I expect it to be difficult to move them on mobile and not on desktop.

there is a toggle to enable the markdown toolbar under the "note" category

It might make sense to call this the "note editor toolbar" instead. It also includes "search" and "attach", which are arguably more general features.

I do think it makes sense to have this near the "spellcheck" setting, so if we move this to a different category, it could make sense to move "spellcheck" as well.

Things could be rearranged to better reflect how they relate to each other. For instance, it is stated in the doc that synchronisation settings are per profile. The settings hierarchy currently doesn't reflect that, as the synchronisation settings are directly attached to a top-level category, while profiles themselves are burried down below a "tools" category.

This might be an artifact of the profiles feature being added relatively recently.

It might make sense to move the "Encryption configuration" button to just below the sync target button (and perhaps call it "enable encryption" if encryption isn't enabled).

For instance, it is stated in the doc that synchronisation settings are per profile.

Note that most settings seem to be per-profile. For example, the app theme, the language, the time format, etc.