# Joplin Mobile Tablet Layout

**URL:** <https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775>\
**Category:** Table Layout\
**Tags:** gsoc-2022\
**Created:** [25 May 2022 18:00 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775 "2022-05-25T18:00:39Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![ToluMals](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tolumals/32/13025_2.png) [@ToluMals](https://discourse.joplinapp.org/u/ToluMals)\
**Post date:** [12 September 2022 08:13 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775/24 "2022-09-12T08:13:02Z")

</div>

That makes sense. Thanks!

---

<div class="post-metadata">

**Author:** ![ToluMals](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tolumals/32/13025_2.png) [@ToluMals](https://discourse.joplinapp.org/u/ToluMals)\
**Post date:** [12 September 2022 08:14 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775/25 "2022-09-12T08:14:28Z")

</div>

Oh, alright.

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [12 September 2022 09:54 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775/26 "2022-09-12T09:54:00Z")

</div>

> [@ToluMals](#):
>
> View Note Button

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

---

<div class="post-metadata">

**Author:** ![ToluMals](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tolumals/32/13025_2.png) [@ToluMals](https://discourse.joplinapp.org/u/ToluMals)\
**Post date:** [12 September 2022 10:20 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775/27 "2022-09-12T10:20:51Z")

</div>

> [@laurent](#):
>
> 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.

---

<div class="post-metadata">

**Author:** ![ToluMals](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tolumals/32/13025_2.png) [@ToluMals](https://discourse.joplinapp.org/u/ToluMals)\
**Post date:** [12 September 2022 10:32 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775/28 "2022-09-12T10:32:25Z")

</div>

> [@\`react-native-action-button\` blocking upgrade to \`react-native\` 0.69.4](https://discourse.joplinapp.org/t/react-native-action-button-blocking-upgrade-to-react-native-0-69-4/26885/1):
>
> Switch to a different library:
> 
> - [`react-native-paper`](https://callstack.github.io/react-native-paper/fab-group.html)
> - Has good documentation, recent releases

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

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [12 September 2022 10:56 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775/29 "2022-09-12T10:56:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [12 September 2022 14:41 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775/30 "2022-09-12T14:41:16Z")

</div>

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:

 ![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/4/432b21f1c6e8a3d48b2761aa64a59b54dc6f3c14.png)

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:

 ![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/5/5e59524c57fc137b5951bc9148d7d9637d49f839.png)

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?

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [12 September 2022 14:47 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775/31 "2022-09-12T14:47:05Z")

</div>

- 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

---

<div class="post-metadata">

**Author:** ![ToluMals](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tolumals/32/13025_2.png) [@ToluMals](https://discourse.joplinapp.org/u/ToluMals)\
**Post date:** [12 September 2022 16:18 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775/32 "2022-09-12T16:18:39Z")

</div>

> [@laurent](#):
>
> I've noticed a few issues with the latest release:

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

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [14 September 2022 10:20 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775/33 "2022-09-14T10:20:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ToluMals](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tolumals/32/13025_2.png) [@ToluMals](https://discourse.joplinapp.org/u/ToluMals)\
**Post date:** [15 September 2022 11:06 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775/34 "2022-09-15T11:06:29Z")

</div>

> [@laurent](#):
>
> 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?

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:

> [@laurent](#):
>
> 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.

**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).

---

<div class="post-metadata">

**Author:** ![ToluMals](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tolumals/32/13025_2.png) [@ToluMals](https://discourse.joplinapp.org/u/ToluMals)\
**Post date:** [15 September 2022 11:15 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775/35 "2022-09-15T11:15:00Z")

</div>

> [@laurent](#):
>
> 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).

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

---

<div class="post-metadata">

**Author:** ![ToluMals](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tolumals/32/13025_2.png) [@ToluMals](https://discourse.joplinapp.org/u/ToluMals)\
**Post date:** [17 September 2022 12:11 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775/36 "2022-09-17T12:11:23Z")

</div>

> [@laurent](#):
>
> ![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/4/432b21f1c6e8a3d48b2761aa64a59b54dc6f3c14.png)
> 
> image1720×822 38.6 KB

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

---

<div class="post-metadata">

**Author:** ![personalizedrefriger](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/personalizedrefriger/32/13210_2.png) [@personalizedrefriger](https://discourse.joplinapp.org/u/personalizedrefriger)\
**Post date:** [20 September 2022 21:12 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775/37 "2022-09-20T21:12:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [30 September 2022 10:51 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775/38 "2022-09-30T10:51:35Z")

</div>

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](https://github.com/laurent22/joplin/commit/44e60bdda935373cc91a41621a44e35ed83c283e)

---

<div class="post-metadata">

**Author:** ![ToluMals](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tolumals/32/13025_2.png) [@ToluMals](https://discourse.joplinapp.org/u/ToluMals)\
**Post date:** [30 September 2022 12:47 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775/39 "2022-09-30T12:47:33Z")

</div>

Alright. I'll work on that.

---

<div class="post-metadata">

**Author:** ![ToluMals](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tolumals/32/13025_2.png) [@ToluMals](https://discourse.joplinapp.org/u/ToluMals)\
**Post date:** [1 November 2022 17:40 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775/40 "2022-11-01T17:40:53Z")

</div>

> [@laurent](#):
>
> Note property sidebar is broken:

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

---

<div class="post-metadata">

**Author:** ![ToluMals](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tolumals/32/13025_2.png) [@ToluMals](https://discourse.joplinapp.org/u/ToluMals)\
**Post date:** [1 November 2022 17:54 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775/41 "2022-11-01T17:54:16Z")

</div>

> [@laurent](#):
>
> 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?

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.

---

<div class="post-metadata">

**Author:** ![cerda45](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/cerda45/32/15994_2.png) [@cerda45](https://discourse.joplinapp.org/u/cerda45)\
**Post date:** [16 January 2023 18:10 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775/42 "2023-01-16T18:10:33Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Rowabi](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/rowabi/32/16084_2.png) [@Rowabi](https://discourse.joplinapp.org/u/Rowabi)\
**Post date:** [29 January 2023 09:20 UTC](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775/43 "2023-01-29T09:20:02Z")

</div>

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.

[Previous page](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775.md?page=1)

[Next page](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775.md?page=3)