Bottom Bar Layout RFC (Request for Comments) #98
Replies: 3 comments 7 replies
-
Thinking of real estate on mobile: Will the bottom bar still be visible when the keyboard appears? If so, will that impact the editor negatively on our smallest supported screen size? Could there be a toggle to hide it or show it somehow? |
Beta Was this translation helpful? Give feedback.
-
main thought right now with the given mocks and explanations is that im looking forward to this change for mobile, its gonna make the whole experience that much better even if there'll still be things to clean up after the fact |
Beta Was this translation helpful? Give feedback.
-
This has finally been implemented in BobaBoard/boba-frontend#104! |
Beta Was this translation helpful? Give feedback.
-
The problem
People have been clamoring for more indicators and actions on threads/boards, and we don't know where to put them, especially on mobile. An easy example is "some threads lose the star jumper" (gallery/timeline mode swap it for a "add top level contrib"), but there are other open issues like "I'd like to know if the thread is muted from within it" or "I can't see if I'm logged on on mobile".
The proposal
Change the mobile layout to have a bottom bar, and expand the functionality of the "floating action button" to be a "floating action bar".
Here are some low-fi mocks:
Board view
Thread view
Changes highlights
...
are because I don't exactly know what other actions might go there, and in theory I will want those to be configurable, especially if we ever get a plugin system). When you're in a thread, the floating action bar always gets a "add new top level contribution" button, regardless of view mode. To distinguish this from the "create new thread" button up top, we should consider changing the icon of the "new thread" action and make it different from "new contrib" so the difference is clear. On mobile, the "new thread" button is not available within thread (the central button is always "new top level contrib").Nest steps
Let me know what you think, and I'll make a more hi-fi mock in (likely) Figma. If you want, you can checkout the "bottom bar proposal" branch of boba-docs and edit the
docusaurus/docs/product/mockups/proposal.excalidraw
file to make changes to my mocks and play around with different things. You can use the VSCode Excalidraw extension to work on it directly from VSCode.Beta Was this translation helpful? Give feedback.
All reactions