Theme LayerSwitcher with CSS

Not touched in 2.7, bumping.

Moves LayerSwitcher styles into style.css

Added a patch to do this. I just pulled this out of a current project (which needed the functionality this provides), so it may have some rough edges, but this will take you 95% of the way there.

Note that the patch I posted has compatibility issues with IE. I should have used .className = instead of setAttribute('class', 'class'). It also preserves javascript-created styles for the minimized and maximized states intead of attaching css classes. I've made those changes, but the layerswitcher I'm using has some other stuff (notably, a legend) that breaks continuity with the old one.

Anyway... what's the status of this ticket? Is this stuff hacked together at foss4g?

patch-1632-A0.diff makes use of OpenLayers.Element.addClass, keeps the rounded corners using Rico (with an option to disable it), and provides tests.

Tests pass in FF3, IE6, IE8 and Safari. The layer tree in the wms.html looks the same as before in these browsers.

I think this is ready for review.

Doesn't the most recent patch still have javascript setting the width of the maximized layerswitcher?

Replying to tmcw:

Doesn't the most recent patch still have javascript setting the width of the maximized layerswitcher?

are you referring to the maximizeControl and minimizeControl methods? Those two weren't modified in the former patch, were they?

minimize/maximizeControl now also with css

Hey Eric, your patch looks great! As suggested by tmcw, I also moved the minimize/MaximizeControl styles to css and modified the tests accordingly. Tests continue to pass. Please commit if you agree with my changes.

There are issues with the patch. The most prominent issue is a thick blue horizontal line across the map in IE. I will arrange time to work on it.

Hi,

I was wondering about having Rico here just for rounded corners… Is that IE cosmetic appearance so important (There's no functional problem)? The job could easily be done in other browser with a few css lines.

What do you guys think about it?

Replying to aabt:

Hi, I was wondering about having Rico here just for rounded corners… Is that IE cosmetic appearance so important (There's no functional problem)? The job could easily be done in other browser with a few css lines. What do you guys think about it?

Unfortunately I think people would complain with loosing the rounded corners in IE. Andreas, any opinion on this?

Replying to elemoine:

Unfortunately I think people would complain with loosing the rounded corners in IE. Andreas, any opinion on this?

I totally agree. We cannot just remove this, unfortunately.

patch-1632-A1.diff

• sets the width of the control in CSS through the .olControlLayerSwitcher accessor - I don't think we need new classes ("minimized" and "maximized") for that
• addresses the "thick horizontal line in IE" issue
• slighly modifies the layerswitcher.html example so it looks as before

with this patch, a class must be set in the div when the layer switcher is displayed outside the map, this can be seen as an API change, but this is the price to pay if we want flexibility and styling through CSS.

tests pass in FF3, IE6, IE8, Safari and Chromium. Examples spherical-mercator.html and layerswitcher.html checked in these browsers, they look as before (they even look better in IE, where the control div spanned the entire browser window horizontally).

I think this is good to go. Please review.

Eric: Great work! I uploaded an alternative patch that adds the olControlLayerSwitcher class if it is not already there. This would prevent us from having to change the API. Please commit the new one if you agree, otherwise I'm also fine with your patch.

(In [9767]) theme LayerSwitcher with CSS, r=ahocevar, p=tmcw,me (closes #1632)