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

git-svn-id: http://svn.openlayers.org/trunk/openlayers@9767 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

examples/layerswitcher.html

@@ -44,7 +44,7 @@
         Demonstrates the use of the LayerSwitcher outside of the OpenLayers window.
     </p>
 
-    <div id="layerswitcher"></div>
+    <div id="layerswitcher" class="olControlLayerSwitcher"></div>
     <div id="map" class="smallmap"></div>
     <div id="docs">
       <p>This demonstrates use of the LayerSwitcher outside the map div. It also shows use

lib/OpenLayers/Control/LayerSwitcher.js

@@ -22,11 +22,19 @@
 OpenLayers.Control.LayerSwitcher = 
   OpenLayers.Class(OpenLayers.Control, {
 
-    /**  
+    /**
-     * Property: activeColor
+     * APIProperty: roundedCorner
-     * {String}
+     * {Boolean} If true the Rico library is used for rounding the corners
+     *     of the layer switcher div, defaults to true.
      */
-    activeColor: "darkblue",
+    roundedCorner: true,
+
+    /**  
+     * APIProperty: roundedCornerColor
+     * {String} The color of the rounded corners, only applies if roundedCorner
+     *     is true, defaults to "darkblue".
+     */
+    roundedCornerColor: "darkblue",
     
     /**  
      * Property: layerStates 
@@ -305,6 +313,7 @@ OpenLayers.Control.LayerSwitcher =
                 
                 // create span
                 var labelSpan = document.createElement("span");
+                OpenLayers.Element.addClass(labelSpan, "labelSpan")
                 if (!baseLayer && !layer.inRange) {
                     labelSpan.style.color = "gray";
                 }
@@ -419,8 +428,9 @@ OpenLayers.Control.LayerSwitcher =
      */
     maximizeControl: function(e) {
 
-        //HACK HACK HACK - find a way to auto-size this layerswitcher
+        // set the div's width and height to empty values, so
-        this.div.style.width = "20em";
+        // the div dimensions can be controlled by CSS
+        this.div.style.width = "";
         this.div.style.height = "";
 
         this.showControls(false);
@@ -440,6 +450,10 @@ OpenLayers.Control.LayerSwitcher =
      */
     minimizeControl: function(e) {
 
+        // to minimize the control we set its div's width
+        // and height to 0px, we cannot just set "display"
+        // to "none" because it would hide the maximize
+        // div
         this.div.style.width = "0px";
         this.div.style.height = "0px";
 
@@ -473,19 +487,7 @@ OpenLayers.Control.LayerSwitcher =
     loadContents: function() {
 
         //configure main div
-        this.div.style.position = "absolute";
+
-        this.div.style.top = "25px";
-        this.div.style.right = "0px";
-        this.div.style.left = "";
-        this.div.style.fontFamily = "sans-serif";
-        this.div.style.fontWeight = "bold";
-        this.div.style.marginTop = "3px";
-        this.div.style.marginLeft = "3px";
-        this.div.style.marginBottom = "3px";
-        this.div.style.fontSize = "smaller";   
-        this.div.style.color = "white";   
-        this.div.style.backgroundColor = "transparent";
-    
         OpenLayers.Event.observe(this.div, "mouseup", 
             OpenLayers.Function.bindAsEventListener(this.mouseUp, this));
         OpenLayers.Event.observe(this.div, "click",
@@ -494,44 +496,24 @@ OpenLayers.Control.LayerSwitcher =
             OpenLayers.Function.bindAsEventListener(this.mouseDown, this));
         OpenLayers.Event.observe(this.div, "dblclick", this.ignoreEvent);
 
-
         // layers list div        
         this.layersDiv = document.createElement("div");
         this.layersDiv.id = this.id + "_layersDiv";
-        this.layersDiv.style.paddingTop = "5px";
+        OpenLayers.Element.addClass(this.layersDiv, "layersDiv");
-        this.layersDiv.style.paddingLeft = "10px";
-        this.layersDiv.style.paddingBottom = "5px";
-        this.layersDiv.style.paddingRight = "75px";
-        this.layersDiv.style.backgroundColor = this.activeColor;        
-
-        // had to set width/height to get transparency in IE to work.
-        // thanks -- http://jszen.blogspot.com/2005/04/ie6-opacity-filter-caveat.html
-        //
-        this.layersDiv.style.width = "100%";
-        this.layersDiv.style.height = "100%";
-
 
         this.baseLbl = document.createElement("div");
         this.baseLbl.innerHTML = OpenLayers.i18n("baseLayer");
-        this.baseLbl.style.marginTop = "3px";
+        OpenLayers.Element.addClass(this.baseLbl, "baseLbl");
-        this.baseLbl.style.marginLeft = "3px";
-        this.baseLbl.style.marginBottom = "3px";
         
         this.baseLayersDiv = document.createElement("div");
-        this.baseLayersDiv.style.paddingLeft = "10px";
+        OpenLayers.Element.addClass(this.baseLayersDiv, "baseLayersDiv");
-        /*OpenLayers.Event.observe(this.baseLayersDiv, "click", 
-            OpenLayers.Function.bindAsEventListener(this.onLayerClick, this));
-        */
-                     
 
         this.dataLbl = document.createElement("div");
         this.dataLbl.innerHTML = OpenLayers.i18n("overlays");
-        this.dataLbl.style.marginTop = "3px";
+        OpenLayers.Element.addClass(this.baseLbl, "dataLbl");
-        this.dataLbl.style.marginLeft = "3px";
-        this.dataLbl.style.marginBottom = "3px";
         
         this.dataLayersDiv = document.createElement("div");
-        this.dataLayersDiv.style.paddingLeft = "10px";
+        OpenLayers.Element.addClass(this.dataLayersDiv, "dataLayersDiv");
 
         if (this.ascending) {
             this.layersDiv.appendChild(this.baseLbl);
@@ -547,12 +529,15 @@ OpenLayers.Control.LayerSwitcher =
  
         this.div.appendChild(this.layersDiv);
 
-        OpenLayers.Rico.Corner.round(this.div, {corners: "tl bl",
+        if(this.roundedCorner) {
-                                        bgColor: "transparent",
+            OpenLayers.Rico.Corner.round(this.div, {
-                                        color: this.activeColor,
+                corners: "tl bl",
-                                        blend: false});
+                bgColor: "transparent",
-
+                color: this.roundedCornerColor,
-        OpenLayers.Rico.Corner.changeOpacity(this.layersDiv, 0.75);
+                blend: false
+            });
+            OpenLayers.Rico.Corner.changeOpacity(this.layersDiv, 0.75);
+        }
 
         var imgLocation = OpenLayers.Util.getImagesLocation();
         var sz = new OpenLayers.Size(18,18);        
@@ -565,9 +550,7 @@ OpenLayers.Control.LayerSwitcher =
                                     sz, 
                                     img, 
                                     "absolute");
-        this.maximizeDiv.style.top = "5px";
+        OpenLayers.Element.addClass(this.maximizeDiv, "maximizeDiv");
-        this.maximizeDiv.style.right = "0px";
-        this.maximizeDiv.style.left = "";
         this.maximizeDiv.style.display = "none";
         OpenLayers.Event.observe(this.maximizeDiv, "click", 
             OpenLayers.Function.bindAsEventListener(this.maximizeControl, this)
@@ -584,9 +567,7 @@ OpenLayers.Control.LayerSwitcher =
                                     sz, 
                                     img, 
                                     "absolute");
-        this.minimizeDiv.style.top = "5px";
+        OpenLayers.Element.addClass(this.minimizeDiv, "minimizeDiv");
-        this.minimizeDiv.style.right = "0px";
-        this.minimizeDiv.style.left = "";
         this.minimizeDiv.style.display = "none";
         OpenLayers.Event.observe(this.minimizeDiv, "click", 
             OpenLayers.Function.bindAsEventListener(this.minimizeControl, this)

tests/Control/LayerSwitcher.html

@@ -32,12 +32,12 @@
         t.eq(control.div.style.width, "250px", "Div is not minimized when added."); 
         control = new OpenLayers.Control.LayerSwitcher();
         map.addControl(control);
-        t.eq(control.div.style.width, "0px", "Div is minimized when added."); 
+        t.eq(control.div.style.width, "0px", "Div is minimized when added.");
     }
  
     function test_Control_LayerSwitcher_loadContents(t) {
 
-        t.plan( 5 );
+        t.plan( 10 );
 
         map = new OpenLayers.Map('map');
         var layer = new OpenLayers.Layer.WMS("WMS", 
@@ -52,14 +52,20 @@
         map.addControl(control);
 
         t.ok(control.layersDiv != null, "correctly makes layers div");
+        t.ok(OpenLayers.Element.hasClass(control.layersDiv, "layersDiv"),
+             "layers div has class layersDiv");
         t.ok(control.baseLayersDiv != null, "correctly makes layers div");
+        t.ok(OpenLayers.Element.hasClass(control.baseLayersDiv, "baseLayersDiv"),
+             "base layers div has class baseLayersDiv");
         t.ok(control.dataLayersDiv != null, "correctly makes layers div");
-
+        t.ok(OpenLayers.Element.hasClass(control.dataLayersDiv, "dataLayersDiv"),
+             "data layers div has class dataLayersDiv");
         t.ok(control.maximizeDiv != null, "correctly makes resize div");
+        t.ok(OpenLayers.Element.hasClass(control.maximizeDiv, "maximizeDiv"),
+             "maximize div has class maximizeDiv");
         t.ok(control.minimizeDiv != null, "correctly makes resize div");
-
+        t.ok(OpenLayers.Element.hasClass(control.minimizeDiv, "minimizeDiv"),
-        
+             "minimize div has class minmizeDiv");
-
     }
 
 

theme/default/style.css

@@ -348,3 +348,49 @@ div.olControlSaveFeaturesItemInactive {
 .olControlDragFeatureActive.olControlDragFeatureOver.olDragDown {
     cursor: -moz-grabbing;
 }
+
+/**
+ * Layer switcher
+ */
+.olControlLayerSwitcher {
+    position: absolute;
+    top: 25px;
+    right: 0px;
+    width: 20em;
+    font-family: sans-serif;
+    font-weight: bold;
+    margin-top: 3px;
+    margin-left: 3px;
+    margin-bottom: 3px;
+    font-size: smaller;
+    color: white;
+    background-color: transparent;
+}
+
+.olControlLayerSwitcher .layersDiv {
+    padding-top: 5px;
+    padding-left: 10px;
+    padding-bottom: 5px;
+    padding-right: 75px;
+    background-color: darkblue;
+    width: 100%;
+    height: 100%;
+}
+
+.olControlLayerSwitcher .layersDiv .baseLbl,
+.olControlLayerSwitcher .layersDiv .dataLbl {
+    margin-top: 3px;
+    margin-left: 3px;
+    margin-bottom: 3px;
+}
+
+.olControlLayerSwitcher .layersDiv .baseLayersDiv,
+.olControlLayerSwitcher .layersDiv .dataLayersDiv {
+    padding-left: 10px;
+}
+
+.olControlLayerSwitcher .maximizeDiv,
+.olControlLayerSwitcher .minimizeDiv {
+    top: 5px;
+    right: 0px;
+}