Joplin Mobile Tablet Layout

That makes sense. Thanks!

Oh, alright.

What is the purpose of this "View Note Button"?

It's a more convenient way of switching from edit mode to view mode in the note screen.

@laurent @personalizedrefriger

I checked react-native-paper. It has a Floating Action Button (FAB) component and an FAB group component and I think it's exactly what we need. It avoids the keyboard, you can change it's position and it uses react-native-vector-icons.

I don't think switching to it is much work since the app is only using the Action button in the notes screen and the note screen. I can create a pull request for this If I get the go-ahead.

Yes I guess it's good to switch to this lib

2 Likes

I've noticed a few issues with the latest release:

  • At first it doesn't show the note list. When clicking on a note, it shows the note list on the left, but it looks broken:

Some buttons are clickable even though the sidebar is not fully visible. It should be fully hidden when collapsed.

  • Clicking on the button on the right, open the sidebar, which is on the left. Button and sidebar should be on the same side.

  • Note property sidebar is broken:

The biggest issue is the inconsistency of the UI. We're trying to improve it but I feel this just makes it more confusing. The sidebar shows up when opening a note - why? Why not always like on desktop?

  • If I type something in the search bar, I need to press Enter to initiate the search. Instead it should search in real time, like on desktop

  • If I press enter in the search bar, focus is lost, which makes it even harder to search

  • There's no button to clear the search like on desktop

  • If I manually clear the search text and press Enter, the note list doesn't come back

1 Like

Thanks for the feedback, I'll work on this and post updates here as I go.

1 Like

Also, when I think about it, I wonder why the sidebar and note list was implemented that way. All we needed was to have the sidebar, note list and note editor on the same screen. There was no need to reimplement the note list with search (which duplicates the search button that's already there) and buttons to add notes (which duplicates the action button functionality).

Additionally, what was the rational for hiding the note list all the time except when editing a note? If anything I would expect the opposite - I don't need the note list when I start editing a note, but when I'm browsing notes I do.

The desktop app is already quite different from the mobile app in terms of layout, so we can't implement the Notesbar like it is on the desktop app without a completely new tablet specific layout. However, the goal of my project was to build on top of the current mobile app layout, but take advantage of the extra screen space when it's available. This goal constrains how Notesbar can be implemented.

What do I mean?
The mobile app already has the notes screen, which does everything the Notesbar does, it has a list of notes, action buttons for creating notes and a search button. So it won't make sense for the Notesbar to show always like on the desktop, because it will be redundant in the notes screen.

That addresses this:

So how does the Notesbar make things better?
Imagine I'm editing a note on Joplin Desktop and I'm in a notebook without over 200 notes. If I wanted to search for a note and switch to that note, because the search input and note list stay visible while editing, it's a simple as typing a query into the input and selecting the note (it takes about 2 steps) the desktop app handles it really well.

But the mobile app on the other hand. If I'm currently editing a note, I would first have to press the back button to go to view mode, then press the back button again to go back to the notes screen, then type the query, and then choose the note I want. That takes about 4 steps, but just two in the desktop app. From editing a note to creating a new note in the same notebook takes about 3 steps as well, but 1 step in the desktop app.

With the Notesbar, I could go from editing a note to searching for a note and switching to it in 2 steps (just like the desktop app). Creating a new note takes 1 step (just like the desktop app).

If I have a lot of notes in the Notesbar, it would be difficult to scroll through in order to find the particular note I want to switch to. It's easier to just search and choose the note I want.

Also, If I'm editing a note in a notebook and I want to add a new note to the same notebook, before I'd have to press the back button to go to view mode, then press the back button to go to the notes screen, then click the action button, then choose whether to add a new todo or a new note (it takes 4 steps). With the Notesbar it takes 1 step, just click the add note button or add todo button on the Notesbar.

1 Like

I've been having issues replicating this. What device is this?

I think that's an iPhone 13 simulator (or an iPhone 11 Pro simulator). I'm not sure which...

1 Like

For now I have reverted this tablet layout change as the UX and quality issues would need to be resolved first. Reverted in https://github.com/laurent22/joplin/commit/44e60bdda935373cc91a41621a44e35ed83c283e

Alright. I'll work on that.

I tried to look into this, I discovered that this is broken only on mobile IOS emulators.

I'm thinking of trying another approach to the tablet layout, a tablet specific layout, that way I can make it similar to the desktop app.

1 Like

I'm new to the forum, so I apologize if this is not the place to make comment regarding it, let me know and I can adjust as necessary! I think the swipe gestures would be great, especially for those with only one hand because currently with larger phones it is not easy or comfortable to navigate with only one, at least on android, I have not used iPhone in many years so I can't comment towards that. Either way, I love the app and appreciate all of the work you all do!

1 Like

This feature sounds great and extremely helpful.
However, after reading through this thread I haven't found any hint what I need to do to make use of it. Is there a special Joplin Version / Beta / Addon / ...? I need to install on my iPad to use this feature.
If it's still in development, I'd be happy to do some testing on a beta.