controlbar.js: 3 issues with nested control bars

[dmcritchie]

Bonjour Jean-Marc,

Thanks for the new example in map.control.bar.html. Much appreciated.

In further exploring the the nesting of control bars, I came across some unexpected results:

1. In a nested control bar, the background color of a control button within it does not change when the control is activated. This makes it hard to know at a glance which control in the nested control bar is active. Is there a way to fix this? Or am I using it wrong?

2. I discovered a couple of interesting things about a 3rd-level control bar (i.e., a control bar nested below a nested control bar):
   a) When the top-level parent control is activated, both the 2nd-level and 3rd-level control bars are made visible at the same time. I had expected that only the 2nd-level control bar would be visible until the appropriate parent control in the 2nd-level control bar was activated.
   b) A consequence of the above is that it is possible for a control within a 3rd-level control bar to be activated even though its 2nd-level parent control is not active, which is counter-intuitive and may not be a practical use-case.

I am not currently using a 3rd-level control bar other than for testing purposes, but is this something that can be fixed so that only the 2nd-level control bar is made visible until an appropriate 2nd-level control is activated?

Merci beaucoup.

Dennis

[Viglino]

Hello Dennis,

Formerly I was using the nested control bars only to show options for the upper control (mainly for use on a mobile to add a cancel or finish button when drawing lines, as the double click is not easy on touch devices).
I didn't figured out that it could be used to nest more controls...
...but it's an interesting issue.
I think it's mainly a problem of css: when a control is active, all sub controls buttons are displayed, but just changing, in the css:

.ol-control.ol-bar .ol-active .ol-option-bar

with:

.ol-control.ol-bar .ol-active > .ol-option-bar

would fix it.
And the same thing with buttons in an active control:

.ol-control.ol-bar .ol-toggle.ol-active > button

instead of:

.ol-control.ol-bar .ol-toggle.ol-active button

I'll try to make it enabled in the next commit.

@+

[dmcritchie]

Thanks Jean-Marc. I was pretty sure it was a CSS problem, but I'm more adept with the JS than with the CSS, so I wasn't sure how to tackle the CSS.

I edited my copy of controlbar.css to have the changes you suggest above, but unfortunately, neither behavior changed: the 2nd and 3rd level control bars still appear at the same time when the top-level control bar's parent control is enabled; and the background for the 2nd and 3rd level control bars still does not change when they are activated.

Any thoughts as to why this might not be working?

Thanks,
Dennis