OpenLayers OpenLayers

Changeset 1094

Show
Ignore:
Timestamp:
08/08/06 14:09:17 (2 years ago)
Author:
euzuro
Message:

add rico rounded corners, make it work in IE, various other visual adjustments

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • sandbox/euzuro/layerswitcher/lib/OpenLayers/Control/LayerSwitcher.js

    r1069 r1094  
    115115            var labelSpan = document.createElement("span"); 
    116116            labelSpan.innerHTML = layer.name; 
     117            labelSpan.style.verticalAlign = (baseLayer) ? "bottom" : "auto"; 
    117118            Event.observe(labelSpan,  
    118119                          "click",  
    …… 
    177178        } 
    178179 
    179         // set the correct visibilities for the data layers 
     180        // set the correct visibilities for the overlays 
    180181        for(var i=0; i < this.dataLayerInputs.length; i++) { 
    181182            var input = this.dataLayerInputs[i];    
    …… 
    191192    maximizeControl: function(e) { 
    192193 
    193         this.div.style.width = ""; 
     194        //HACK HACK HACK - find a way to auto-size this layerswitcher 
     195        this.div.style.width = "20em"; 
    194196        this.div.style.height = ""; 
    195197 
    196         this.div.style.backgroundColor = this.activeColor; 
    197198        this.showControls(false); 
    198199 
    …… 
    209210    minimizeControl: function(e) { 
    210211 
    211         this.div.style.width = "20px"; 
    212         this.div.style.height = "20px"; 
    213  
    214         this.div.style.backgroundColor = "transparent"; 
     212        this.div.style.width = "0px"; 
     213        this.div.style.height = "0px"; 
     214 
     215//        this.div.style.backgroundColor = "transparent"; 
    215216 
    216217        this.showControls(true); 
    …… 
    251252        this.div.style.marginLeft = "3px"; 
    252253        this.div.style.marginBottom = "3px"; 
    253         this.div.style.fontSize="smaller";    
     254        this.div.style.fontSize = "smaller";    
     255        this.div.style.color = "white";    
     256        this.div.style.backgroundColor = "transparent"; 
    254257     
    255258        Event.observe(this.div, "mouseup",  
    256                       this.mouseUp.bindAsEventListener(this)) 
     259                      this.mouseUp.bindAsEventListener(this)); 
    257260        Event.observe(this.div, "mousedown", 
    258                       this.mouseDown.bindAsEventListener(this)) 
    259         Event.observe(this.div, "dblclick", this.ignoreEvent) 
     261                      this.mouseDown.bindAsEventListener(this)); 
     262        Event.observe(this.div, "dblclick", this.ignoreEvent); 
    260263 
    261264 
    …… 
    263266        this.layersDiv = document.createElement("div"); 
    264267        this.layersDiv.id = "layersDiv"; 
    265         this.layersDiv.style.marginTop = "5px"; 
    266         this.layersDiv.style.marginLeft = "5px"; 
    267         this.layersDiv.style.marginBottom = "5px"; 
     268        this.layersDiv.style.paddingTop = "5px"; 
     269        this.layersDiv.style.paddingLeft = "10px"; 
     270        this.layersDiv.style.paddingBottom = "5px"; 
    268271        this.layersDiv.style.paddingRight = "75px"; 
    269         this.layersDiv.style.backgroundColor = "lightblue"; 
    270          
     272        this.layersDiv.style.backgroundColor = this.activeColor;         
     273 
     274        // had to set width/height to get transparency in IE to work. 
     275        // thanks -- http://jszen.blogspot.com/2005/04/ie6-opacity-filter-caveat.html 
     276        // 
     277        this.layersDiv.style.width = "100%"; 
     278        this.layersDiv.style.height = "100%"; 
     279 
    271280 
    272281        var baseLbl = document.createElement("div"); 
    273         baseLbl.innerHTML = "Base Layer:"; 
     282        baseLbl.innerHTML = "<u>Base Layer</u>"; 
    274283        baseLbl.style.marginTop = "3px"; 
    275284        baseLbl.style.marginLeft = "3px"; 
    …… 
    285294 
    286295        var dataLbl = document.createElement("div"); 
    287         dataLbl.innerHTML = "Data Layers:"; 
     296        dataLbl.innerHTML = "<u>Overlays</u>"; 
    288297        dataLbl.style.marginTop = "3px"; 
    289298        dataLbl.style.marginLeft = "3px"; 
    …… 
    299308        this.div.appendChild(this.layersDiv); 
    300309 
     310        Rico.Corner.round(this.div, {corners: "tl bl", 
     311                                      bgColor: "transparent", 
     312                                      color: this.activeColor, 
     313                                      blend: false}); 
     314 
     315        Rico.Corner.changeOpacity(this.layersDiv, 0.75); 
    301316 
    302317        var imgLocation = OpenLayers.Util.getImagesLocation(); 
    303         var sz = new OpenLayers.Size(20,20);         
     318        var sz = new OpenLayers.Size(18,18);         
    304319 
    305320        // maximize button div 
    …… 
    323338        // minimize button div 
    324339        var img = imgLocation + 'layer-switcher-minimize.png'; 
    325         var sz = new OpenLayers.Size(20,20);         
     340        var sz = new OpenLayers.Size(18,18);         
    326341        this.minimizeDiv = OpenLayers.Util.createAlphaImageDiv( 
    327342                                    "OpenLayers_Control_ResizeDiv",