Joplin Mobile Tablet Layout

Introduction

The current Joplin mobile app is designed for mobile phones. On wider screens like tablet devices, a layout that takes advantage of the extra screen space is needed. I plan to take a progressive enhancement approach in my solution. I plan to build on the current mobile layout and make more features show up when the app detects extra screen space.

Goals

To implement a layout that:

  • Builds on the current mobile layout
  • Uses the extra screen space for new features
  • Looks good

Approach

Here's a summary of my approach to solving this problem:

  1. Reduce the width of the side menu on tablet devices.
    Screenshots of the current side menu: Portrait Mode | Landscape Mode

  2. Implement a simultaneous view/edit layout.
    The current drawer navigation won’t be changed. However, when viewing a particular note, if there’s extra space ( on a tablet device and possibly in landscape mode on a mobile phone ) a button that toggles to simultaneous view/edit layout will show up.

  1. Implement a note list sidebar
    The note list sidebar will show all the notes in the currently selected notebook. It will allow users to easily switch between a selected note or todo in the current notebook or add new ones.

Timeline

Week 1 (May 20 - May 26)

  • Learn about the community and interact with other members.
  • Discuss the project requirements with the community.
  • Work on understanding the codebase better by fixing bugs in the mobile app.

Week 2 (May 27 - June 2)

  • Work on understanding the codebase better by fixing bugs in the mobile app.

Week 3 (June 3 - June 9)

  • Study relevant documentation
  • Do some research about implementation

Week 4 (June 10 - June 16) Coding Phase Begins

  • Do some research about implementation
  • Set up project

Week 5 (June 17 - June 23)

  • Work on drawer width fix

Week 6 (June 24 - June 30)

  • Work on drawer width fix
  • Test drawer width fix

Week 7 (July 1 - July 7)

  • Test drawer width fix
  • Work on note list sidebar

Week 8 (July 8 - July 14)

  • Work on note list sidebar

Week 9 (July 15 - July 21)

  • Work on note list sidebar
  • Test note list sidebar

Week 10 (July 21 - July 28)

  • Test note list sidebar
  • Work on simultaneous view/edit layout

Week 11 (July 21 - July 28)

  • Work on simultaneous view/edit layout

Week 12 (July 29 - August 4)

  • Work on simultaneous view/edit
  • Test simultaneous view/edit layout

August 4 - September 4
Finishing touches and contingencies.

Suggestions and feedback are welcome. Thank you.

7 Likes

Thanks for information, it makes sense. One thing is that rather than provide Figma links, please provide a series a screenshots showing the different UI states, otherwise it may be hard to find out what you mean (for example I've tried randomly clicking on Figma but I didn't see the menu).

The schedule seems ok but please could you break it down into smaller parts - maybe week by week? Also I don't believe you'll need to write documentation for this.

One thing to keep in mind is that a good part of the existing mobile UI code is old and written in JS, however new code should be written in TypeScript. So you may have to convert old files to TypeScript before modifying them - it probably won't be too difficult but still something you'll need to consider.

Noted. I'll make changes. Thank you.

I've long wished that Joplin UX would improve on tablet & phone. Thanks for taking a few steps in that direction, good luck! The mockups look great!

1 Like

Thanks for the update. Feel free to update the top post with the new version.

I don't have the permissions to edit the top post anymore, that's why I flagged it. I'd like to delete it.

I've increased your trust level @ToluMals, could you try again to edit the post please?

Update

I updated the UI design of the note list sidebar to include a search bar. It will be useful for notebooks with alot of notes and todos.

Done. Thank you.

great! hope to improve the way app's search.

1 Like

BTW it'd be great if you can make note and notebook titles a bit higher. When trying to tap on one note, the row is a bit small for big fingers. Other tactile apps usually have bigger entries.

1 Like

@Yajo Noted. I'll make sure the note titles in the side bar that I'm about to implement are large enough.

But to change the height of note and notebook titles in other parts of the app, I think the ideal process is to create a topic that addresses this and then an issue will be created, and it can be worked on.

One thing that I always wanted in the mobile app (phone or tablet) is to see the status of the current note while I'm working on it. Is it synced with the server? Is there any pending changes that need to be synced? Or is it currently in the process of syncing with the server?

This would be shown in small button, somewhere in the top bar. Tapping the button would start a sync process. In other words, it act in a similar way as a Save button that also show you if the document needs to be saved or not.

3 states needed:

  1. Need to sync
  2. Currently syncing (maybe with an animation?)
  3. OK: All changes were pushed to the server (sync target)

This would help reduce the main source of conflicted changes, by providing clear visual feedback. Too often I've had conflicts while working on my phone, then closing the app thinking that my changes were sent on the server, then editing that note on another device, only to discovers hours later that not all my work from the first device was sent to the server, and now I have to merge a bunch of conflicts. :cry:

If you want, I can provide some visual mockups for what I have in mind! :wink:

4 Likes

Great! I was hoping for a big change in the mobile apps department especially the tablet. Will this also be updated for iPads (iOS)?

To be honest the mobile UI,s is what is holding me back on making the switch to Joplin from Standardnotes. So I really hope this change will convince me to make the switch.

1 Like

Yes, the change will affect iPads as well.

Hi

I just checked your figma sketches and I was really happy to see that eye button to go back to view mode. I am really looking forward to any improvement here, thank you.

Did you consider to add some gestures?

1 Like

No I haven't considered adding gestures. But I'll keep it in mind, now that you've brought it to my attention.

2 Likes