Responsive toolbar (#274)

[jacquetc]

Hello,

For fun, in relation to #274, here is a preliminary work on a toolbar with an overflow menu.

Left to do:

• Separators must become horizontal in the menu
• The menu must close after clicking on an item
• The Normal/Header widget doesn't display its drop-down menu. Same with color.
• The Normal/Header widget is a bit big, maybe insert instead an more little version of it in the menu instead ?
  

[jacquetc]

Let me know if the idea is sound for you before I put more work to fix the remaining issues.

[Aggie85]

This would be GREAT!

All the best,

Aggie85

[jacquetc]

I think too that it's a lacking feature. Yet, there are other possible ways to deal with an overflowing menu.

Also, my change feels dirty to me. I'm leveraging the FleatherToolbar.basic() factory. We can create instead a separate FleatherToolbar::overflowing() factory and dedicate a State build() for it, keeping a basic (and easily debug-able) Stateful builder clean for "basic" Toolbar. Bottom line: Adding functionalities, not touching things already running fine.

Trying to see what is possible since I'm learning Dart & Flutter on the go (C++ & Rust background here).

Waiting now for @amantoux or @Amir-P insights since they are active leading contributors. I don't want to break their vision of Fleather.

[jacquetc]

With horizontal dividers.

[amantoux]

I wonder if we should not propose a radically different layout for small displays.

[jacquetc]

A few ideas:

[Amir-P]

I'm more in favor of what quilljs is doing on their website. It wouldn't break what we have on big screens and makes interaction easier on smaller screens compared to an overflow menu. @jacquetc @amantoux

[jacquetc]

quilljs's style can eat a lot of vertical space on smartphones if there is too much widgets to display. I'm finding this one to be a good compromise, so it's eating the visual space on demand without breaking the original widgets.

[amantoux]

Google Docs has a dynamic layout for it toolbar on mobile (which I fail to understand the behvior :))
Word provides a minimal toolbar with the possibility to show an advanced version
The latter has my preference (screenshots below)

[jacquetc]

I am testing it on my phone. I didn't know that it was possible to put something at the bottom. It's quite nice and can be out of the way if there is no focus on the text zone. It would be a nice solution for Android and IOs, yet less for desktop where an always-visible toolbar (or advanced context menu like Office Word) would be preferred.

[amantoux]

I am testing it on my phone. I didn't know that it was possible to put something at the bottom. It's quite nice and can be out of the way if there is no focus on the text zone. It would be a nice solution for Android and IOs, yet less for desktop where an always-visible toolbar (or advanced context menu like Office Word) would be preferred.

Yes we would implement entirely different layouts (& behaviors) for desktop and mobile

[amantoux]

@jacquetc Are you planning to move forward on this? Otherwise we will close this PR

[jacquetc]

Hello,
Beside the little hack I already did, I am too busy with family life to explore further. You can close the PR. You can also merge what was done, which is better than no responsive toolbar at all (I think ?).
Regards,
Cyril