Default skin needs polish

[JohnMcLear]

I love the new default skin but it needs polish, especially around when the browser width is < 400px as you lose formatting buttons etc. Afaik this was all handled before so should be handled with any new versions with a copy/paste :)

[muxator]

For Colibris skin CCing @seballot

Edit: it should have been:
ccing @seballot who developed Colibris together with @mrflos, proposed it to the project, and donated his time for achieving the integration. Thanks Seballot!

:)

[seballot]

Hello !
Yes Indeed some formatting buttons disappears because I didn't want the toolbar to be too large and hide the text. I think before it was like this (or maybe this etherpad is not up to date)

But we might find an in between solution, like a "+" button in the toolbar to display the hidden formatting buttons? It's just a bit more work.

I'm not a mobile user, so please help me to understand the need !

[muxator]

There was an attempt to fix this issue with #3703, but I guess we need to do another try.

I would be ok with putting a "+" button when the screen gets too narrow (to leave as much space as possible to the text), but other solutions could be ok, as well.

One thing that we might want to ensure is that the solution works with both the legacy skin and Colibris.

[seballot]

ok, trying to fix right now

[seballot]

I found an easier solution: allow horizontal scroll on the toolbar for small screen? WDYT?
It's not perfect (people need to know that they can scroll), but I think formatting a pad on a mobile screen is not so used, so would say that is enough...

[pkrasicki]

This is a clever solution, but having to use a scrollbar to access buttons won't be convenient for users. You should instead break the bar into two rows, when it doesn't fit on screen.

[seballot]

The problem with going with 2 rows, is that if your etherpad install have a lot of fonctionalities, it will goes with 3 rows, maybe 4, and at the end you do not get the text, which the more important thing. That why I think the multi rows toolbar is not a solution

If you guys think scrolling is not a good solution either, then we need to add this "+" button to display all the buttons.

re your PR @pkrasicki, it's breaking the white background on colibris skin, and also some paddings. Also I made a fix to remove the left margin when the gutter is hidden

Seems like we are working both on the same thing. if it's fine by you, could I handle this issue?

[pkrasicki]

Sure, go ahead.

Edit:
One more thing, though. It's ok, because this task needs more work than I originally though, but it seems that I solved this problem for nothing and my time ended up being wasted. In the future please don't create a PR after someone to solve the exact same problem that they are working on.

[muxator]

Quick test of #3709 with my Firefox 74. Some questions follow.

This is the effect on Colibris:

This is the effect on the legacy skin:

@seballot, I did not have the time to test what happens with more icons. How do the toolbars get split? Do they arrange in multiple rows? Also, the commit message needs to describe what changed (referencing a Github issue is ok for quick work, but cannot end up as-is in the history). I can take care of it of it's easier for you.

@pkrasicki: thanks for your proposal. Even if it did not get merged, your effort was useful to bring up the discussion and reach a better solution overall. Probably we would not have had anything wasn't for your initiative. Thanks again.

[seballot]

Hi @muxator ! ok for the commit message, sorry :)

When more icons, see my screencast on #3697 (comment)
In stay with one row, but you can horizontally scroll to find the other icons.

As @pkrasicki mentioned that the scrolling toolbar is not good enough, I will do another try with a "+" button to display the hidden icons

[JohnMcLear]

@seballot any chance you can get this work done within 24 hours? I am rolling out a site for corona and it's going to be publicly facing and I want to use the new UI :)

[seballot]

Hi @JohnMcLear!
Sorry cannot guarantee, currently quite busy ! but new UI is used in production in a lot of place since a while, so I guess you can use it even without this mobile toolbar ;)

[muxator]

I am going to accept the changes at #3709, since it fixes a problem, is good enough, is compatible with both skins and has a consistent behaviour when there are many toolbar buttons.

However, I would prefer if in the next release we could land the "+" sign instead of the scrolling, as I think it is more explicit, and - thus - discoverable. A future PR would be welcome, thanks. :)

n.b.: actually, I had to reject the PR and directly commit on top of develop because I was not able to force push there. Just a technical detail, though. The reasoning for wanting the "+" button stands.

[muxator]

We have a new proposal for the toolbar (#3726). If we accept it, #3709 (right toolbar going on the bottom on both skins) will be reverted. The legacy skin will retain its original behaviour (the incons will get smaller) and Colibris will gain a "+" icon when overflowing.

I still did not try it. Discussion in the PR.