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.

8 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.

1 Like

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:

5 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.

1 Like

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

Update

The prs on the side-menu width fix and the note-list sidebar have both been merged

I recently ran into some issues while working on the split layout functionality and view note button. ( Split Layout PR). There's a detailed explanation below:

View Note Button Obstructs Beta Editor Toolbar

I initially implemented the view note button using the ActionButton component which is based on react-native-action-button package and the view button was obstructing the beta editor's toolbar and the content of the note, but it was avoiding the keyboard. The position of the react-native-action-button can't be changed.

As a solution, I created a draggable custom button that was placed slightly higher than the beta editor's toolbar, so the button doesn't obstruct the beta editor's toolbar and it can be dragged away from any content it obstructs. But now there's other problems. It's tricky setting the position of the view button because the beta editor's toolbar has different positions on IOS and Android (IOS is slightly higher). In addition, the keyboard now covers the view button when it displays ( So I have to work on making the view note button readjust it 's position when the keyboard comes up ).

Screenshot

So I'll need to set the position of the view note button depending on whether it's an IOS device or Android device, then I'll also need to get the button to avoid the Keyboard or alternatively find a package that satisfies the needed requirements.

Split Layout Doesn't Work With Beta Editor

After merging the latest dev branch into the split layout branch, the split layout functionality stopped working properly with the beta editor, I now see two views of the note instead of the beta editor and a view of the note:

Screenshot

@personalizedrefriger Do you know why this might have happened?

The split layout still works with the regular editor. I'll keep looking into the code to see If I can figure out the cause.

Split Layout PR

2 Likes

That's a bug in the ExtendedWebView component! I'll try to fix it!

Explanation:
ExtendedWebView currently assumes only one ExtendedWebView exists at one time — all instances of ExtendedWebView write data to the same temporary file. Different instances of ExtendedWebView should use different temporary files.

Pull request: Mobile: Fix unable to show multiple WebViews at once by personalizedrefrigerator · Pull Request #6841 · laurent22/joplin · GitHub

1 Like

We might want to switch to another library — react-native-action-button is unmaintained. See also `react-native-action-button` blocking upgrade to `react-native` 0.69.4 .

1 Like