Ticket #1400 (closed task: fixed)

Opened 5 years ago

Last modified 5 years ago

pan/zoom panels

Reported by: crschmidt Owned by: 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 Download (14.1 KB) - added by crschmidt 5 years ago.
panels.2.patch Download (14.0 KB) - added by tschaub 5 years ago.
more control
panels.3.patch Download (11.3 KB) - added by euzuro 5 years ago.
4 updates as described in comment
panels.4.patch Download (14.1 KB) - added by euzuro 5 years ago.
last few changes to proposed patch
panels.5.patch Download (12.0 KB) - added by fredj 5 years ago.
Uses css sprites, only tested on FF3
pan-panel.png Download (1.3 KB) - added by fredj 5 years ago.
pan images
zoom-panel.png Download (1.6 KB) - added by fredj 5 years ago.
zoom images
panl.patch Download (11.9 KB) - added by tschaub 5 years ago.
zoom and pan panls
panel.7.patch Download (11.3 KB) - added by euzuro 5 years ago.
some small changes to ND for Pan file
pan-panel-8.png Download (0.6 KB) - added by tschaub 5 years ago.
no alpha channel
zoom-panel-8.png Download (1.1 KB) - added by tschaub 5 years ago.
no alpha channel

Change History

Changed 5 years ago by crschmidt

  Changed 5 years ago by crschmidt

  • state set to Review

Changed 5 years ago by tschaub

more control

  Changed 5 years ago 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.

  Changed 5 years ago 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

Changed 5 years ago by euzuro

4 updates as described in comment

  Changed 5 years ago 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...

Changed 5 years ago by euzuro

last few changes to proposed patch

  Changed 5 years ago by euzuro

  • state changed from Commit to Review

  Changed 5 years ago by euzuro

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

  Changed 5 years ago by euzuro

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

Changed 5 years ago by fredj

Uses css sprites, only tested on FF3

Changed 5 years ago by fredj

pan images

Changed 5 years ago by fredj

zoom images

  Changed 5 years ago 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.

Changed 5 years ago by tschaub

zoom and pan panls

Changed 5 years ago by euzuro

some small changes to ND for Pan file

  Changed 5 years ago 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?

Changed 5 years ago by tschaub

no alpha channel

Changed 5 years ago by tschaub

no alpha channel

follow-up: ↓ 18   Changed 5 years ago 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]-->

  Changed 5 years ago by tschaub

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

  Changed 5 years ago by euzuro

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

see #1607

  Changed 5 years ago by euzuro

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

  Changed 5 years ago by euzuro

  • priority changed from minor to critical

  Changed 5 years ago by euzuro

  • state changed from Review to Needs More Work

  Changed 5 years ago by euzuro

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

in reply to: ↑ 11   Changed 5 years ago 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. :-(

  Changed 5 years ago 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.

  Changed 5 years ago 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!

  Changed 5 years ago 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

  Changed 5 years ago 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).

  Changed 5 years ago 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.

  Changed 5 years ago by euzuro

r7956 was related to this

Note: See TracTickets for help on using tickets.