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:
Reduce the width of the side menu on tablet devices.
Screenshots of the current side menu: Portrait Mode | Landscape Mode
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.
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.
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.
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.
@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:
Need to sync
Currently syncing (maybe with an animation?)
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.
If you want, I can provide some visual mockups for what I have in mind!
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.
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.
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 ).
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:
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.
