OpenLayers OpenLayers

Ticket #1400 (closed task: fixed)

Opened 2 years ago

Last modified 2 years ago

pan/zoom panels

Reported by: crschmidt Assigned to: euzuro
Priority: critical Milestone: 2.7 Release
Component: Control Version: 2.5
Keywords: Cc:
State: Complete

Description

Convert the pan/zoom controls to be panel based, and style them with CSS

Attachments

panels.patch (14.1 kB) - added by crschmidt on 02/28/08 02:14:18.
panels.2.patch (14.0 kB) - added by tschaub on 06/06/08 00:37:33.
more control
panels.3.patch (11.3 kB) - added by euzuro on 06/30/08 17:43:40.
4 updates as described in comment
panels.4.patch (14.1 kB) - added by euzuro on 06/30/08 19:14:12.
last few changes to proposed patch
panels.5.patch (12.0 kB) - added by fredj on 07/02/08 01:46:20.
Uses css sprites, only tested on FF3
pan-panel.png (1.3 kB) - added by fredj on 07/02/08 01:46:52.
pan images
zoom-panel.png (1.6 kB) - added by fredj on 07/02/08 01:47:07.
zoom images
panl.patch (11.9 kB) - added by tschaub on 07/02/08 04:16:47.
zoom and pan panls
panel.7.patch (11.3 kB) - added by euzuro on 07/02/08 13:01:50.
some small changes to ND for Pan file
pan-panel-8.png (0.6 kB) - added by tschaub on 07/02/08 13:13:16.
no alpha channel
zoom-panel-8.png (1.1 kB) - added by tschaub on 07/02/08 13:13:39.
no alpha channel

Change History

02/28/08 02:14:18 changed by crschmidt

  • attachment panels.patch added.

04/15/08 20:40:24 changed by crschmidt

  • state set to Review.

06/06/08 00:37:33 changed by tschaub

  • attachment panels.2.patch added.

more control

06/06/08 00:44:30 changed by tschaub

  • state changed from Review to Commit.

This is a nice enhancement Chris. Thanks for the work. The updated patch works against r7312. (I assume you'll also add the relevant theme/default/img/*.png.)

My only other comment is that I like the names OpenLayers.Control.ZoomIn etc better than the ZoomInButton equivalents - since someone could just as well be triggering these controls with an anchor or an image or any other element or some random event. (Though I make an exception for the *Panel classes.) With or without that change, I think this is a great addition.

Please commit.

06/30/08 17:42:48 changed by euzuro

some things i notice about this patch:

1) @requires OpenLayers/Control/Control.js

(should be OpenLayers/Control.js, no?)

2) Engrish: "The type of OpenLayers.Control -- When are added to a Control.Panel the panel uses this to determine how to handle our events"

3) Constants

OpenLayers.Control.PanButton.NORTH = "NORTH";  
OpenLayers.Control.PanButton.SOUTH = "SOUTH";  
OpenLayers.Control.PanButton.EAST = "EAST";  
OpenLayers.Control.PanButton.WEST = "WEST";  

... what if you set them instead as this:

OpenLayers.Control.PanButton.NORTH = "North";  
OpenLayers.Control.PanButton.SOUTH = "South";  
OpenLayers.Control.PanButton.EAST = "East";  
OpenLayers.Control.PanButton.WEST = "West";  

then this:

     switch(this.direction){  
             case OpenLayers.Control.PanButton.NORTH:  
                 this.CLASS_NAME += "North";  
                 break;  
             case OpenLayers.Control.PanButton.SOUTH:  
                 this.CLASS_NAME += "South";  
                 break;  
             case OpenLayers.Control.PanButton.EAST:  
                 this.CLASS_NAME += "East";  
                 break;  
             case OpenLayers.Control.PanButton.WEST:  
                 this.CLASS_NAME += "West";  
                 break;  
         }  

... could become this:

         this.CLASS_NAME += this.direction;  

4) tabs

... see forthcoming patch

06/30/08 17:43:40 changed by euzuro

  • attachment panels.3.patch added.

4 updates as described in comment

06/30/08 19:04:57 changed by euzuro

couple more things

1) no need to override draw() in ZoomPanel

2) this code doesn't seem to ever get called... is the idea that users can override the class name? i can't see why anyone would want to do that. for now i have pulled these lines out. there well may be something i'm blatantly overlooking, feel free to fill me in.

        if(options && options.displayClass){
			this.displayClass = options.displayClass;
        }

see forthcoming patch...

06/30/08 19:14:12 changed by euzuro

  • attachment panels.4.patch added.

last few changes to proposed patch

06/30/08 19:21:20 changed by euzuro

  • state changed from Commit to Review.

06/30/08 19:34:56 changed by euzuro

of note, these png's don't look good in ie6. sugerencias?

06/30/08 20:54:57 changed by euzuro

also of note, should we maybe consider doing the sprite trick like for the history navigation control?

07/02/08 01:46:20 changed by fredj

  • attachment panels.5.patch added.

Uses css sprites, only tested on FF3

07/02/08 01:46:52 changed by fredj

  • attachment pan-panel.png added.

pan images

07/02/08 01:47:07 changed by fredj

  • attachment zoom-panel.png added.

zoom images

07/02/08 04:16:14 changed by tschaub

Nice changes folks. I'm attaching one more patch. This one changes some doc comments, gives the example some style, and changes names like ZoomInButton to ZoomIn. I can talk more about why I think this is a better name if anybody is interested. If you don't like these names, please consider the other (minor) changes to the example and comments.

07/02/08 04:16:47 changed by tschaub

  • attachment panl.patch added.

zoom and pan panls

07/02/08 13:01:50 changed by euzuro

  • attachment panel.7.patch added.

some small changes to ND for Pan file

07/02/08 13:03:11 changed by euzuro

I've added yet a few more small mods to tschaub's patch, just some changes to the ND in for the Pan.js file's Pan Constructor.

I would say this is good to go, all but for the fact that I load it in ie6 and the alpha bits on the controls don't show up correctly.

Can anyone take a look at this?

07/02/08 13:13:16 changed by tschaub

  • attachment pan-panel-8.png added.

no alpha channel

07/02/08 13:13:39 changed by tschaub

  • attachment zoom-panel-8.png added.

no alpha channel

(follow-up: ↓ 18 ) 07/02/08 13:15:32 changed by tschaub

I can't look at it in IE, but there are some images w/o alpha transparency.

Now, how about a nice little CSS hack for IE6 so these ugly images only show up there?

<!--[if lte IE 6]>
    do something
<![endif]-->

07/02/08 13:18:08 changed by tschaub

and, in case it is not clear, "do something" above would be a link to an ie6 only stylesheet

07/03/08 23:52:54 changed by euzuro

  • owner set to euzuro.
  • status changed from new to assigned.

see #1607

07/28/08 14:12:51 changed by euzuro

  • owner changed from euzuro to tschaub.
  • status changed from assigned to new.

07/28/08 14:18:44 changed by euzuro

  • priority changed from minor to critical.

07/30/08 09:48:49 changed by euzuro

  • state changed from Review to Needs More Work.

09/03/08 17:05:06 changed by euzuro

  • owner changed from tschaub to euzuro.
  • status changed from new to assigned.

(in reply to: ↑ 11 ) 09/03/08 23:49:41 changed by euzuro

Replying to tschaub:

I can't look at it in IE, but there are some images w/o alpha transparency. Now, how about a nice little CSS hack for IE6 so these ugly images only show up there? {{{ <!--[if lte IE 6]> do something <![endif]--> }}}

as far as i unerstand, this hack only works in HTML files, not in .css stylesheets. :-(

09/03/08 23:57:23 changed by euzuro

aah... ok. so cr5 clarified this a bit to me.

the idea would be to add a new, special css file for only ie6.

then we instruct people that if they want to support ie6 users they have to add the [lte IE 6] trick to selectively add the new ie6-specific stylesheet.

09/04/08 00:00:42 changed by euzuro

upon further discussion with herr schmidt, we determined that actually... this whole thing is sort of a moot point.

the idea of a special ie6 style sheet is fine, but it shouldn't hold up the inclusion of this patch.

basically, the whole idea of this patch is to allow other people to put their own images in there for this control.

That, combined with the fact that this control is not replacing the default pan/zoom setup... we basically have nothing to lose. If people like this zoompanel thing and want to use it and also want ie6 to look pretty...

....well then they can implement their own ie6 specific css-ing. No problemo! Everyone wins!

09/04/08 00:05:18 changed by euzuro

  • state changed from Needs More Work to Review.

At this point, this patch has been added to and reviewed by nearly every member of the dev team. I think it's good to go. I'll give it another look over tomorrow morning and then put it in... unless someone has an objection.

Note that I've opened a ticket for looking into implementing some ie6-specific css here: #1717

09/04/08 14:21:59 changed by euzuro

  • status changed from assigned to closed.
  • state changed from Review to Complete.
  • resolution set to fixed.

(In [7950]) Add new ZoomPanel and PanPanel, a step towards a more easily customizable look for OpenLayers. Work on this ticket was done by a slew of contributors, and reviews as well. Thanks especially to tschaub for the ie6 trick and concomittant non-alpha images. (Closes #1400).

09/04/08 14:23:53 changed by euzuro

So in the end, I decided to make the special ie6-style.css file just for kicks. It is in there in the default theme zone. As you can see in the html example, you have to make special jones to include it in your html. As it should be.

again, thanks to everyone for their help with this patch.

bing.

09/04/08 17:05:58 changed by euzuro

r7956 was related to this