From b2727c88f2e1012a61651deb284640e4be0a2d04 Mon Sep 17 00:00:00 2001 From: Antoine Abt Date: Tue, 6 Mar 2012 21:04:01 +0100 Subject: [PATCH 1/8] make Zoom default instead of PanZoom --- lib/OpenLayers/Map.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/OpenLayers/Map.js b/lib/OpenLayers/Map.js index 02507ad00f..bbe03fe911 100644 --- a/lib/OpenLayers/Map.js +++ b/lib/OpenLayers/Map.js @@ -195,7 +195,7 @@ OpenLayers.Map = OpenLayers.Class({ * If not provided in the map options at construction, the map will * by default be given the following controls if present in the build: * - or - * - + * - * - * - */ @@ -622,8 +622,8 @@ OpenLayers.Map = OpenLayers.Class({ } else if (OpenLayers.Control.TouchNavigation) { this.controls.push(new OpenLayers.Control.TouchNavigation()); } - if (OpenLayers.Control.PanZoom) { - this.controls.push(new OpenLayers.Control.PanZoom()); + if (OpenLayers.Control.Zoom) { + this.controls.push(new OpenLayers.Control.Zoom()); } if (OpenLayers.Control.ArgParser) { this.controls.push(new OpenLayers.Control.ArgParser()); From 23b0971c2fe6645e71d062001de376a214b0e119 Mon Sep 17 00:00:00 2001 From: Antoine Abt Date: Tue, 6 Mar 2012 21:23:52 +0100 Subject: [PATCH 2/8] update mobile example to use Zoom control. update build config file --- build/light.cfg | 2 +- build/mobile.cfg | 2 +- examples/mobile.html | 30 ---------------------- examples/mobile.js | 2 +- examples/style.mobile.css | 52 ++++++++++++++++++++------------------- 5 files changed, 30 insertions(+), 58 deletions(-) diff --git a/build/light.cfg b/build/light.cfg index f2f7a649a4..b5d7392963 100644 --- a/build/light.cfg +++ b/build/light.cfg @@ -13,7 +13,7 @@ OpenLayers/Layer/WMS.js OpenLayers/Layer/Google/v3.js OpenLayers/Popup/FramedCloud.js OpenLayers/Control/Navigation.js -OpenLayers/Control/ZoomPanel.js +OpenLayers/Control/Zoom.js OpenLayers/Control/Attribution.js OpenLayers/Control/SelectFeature.js OpenLayers/Control/Panel.js diff --git a/build/mobile.cfg b/build/mobile.cfg index 7bba251270..bfe4543412 100644 --- a/build/mobile.cfg +++ b/build/mobile.cfg @@ -11,7 +11,7 @@ OpenLayers/Layer/Bing.js OpenLayers/Layer/WMS.js OpenLayers/Control/TouchNavigation.js OpenLayers/Control/Geolocate.js -OpenLayers/Control/ZoomPanel.js +OpenLayers/Control/Zoom.js OpenLayers/Control/Attribution.js OpenLayers/Control/SelectFeature.js OpenLayers/Control/DrawFeature.js diff --git a/examples/mobile.html b/examples/mobile.html index 708eb8b68b..671f522b0a 100644 --- a/examples/mobile.html +++ b/examples/mobile.html @@ -35,36 +35,6 @@ padding : 2px 4px; border-radius : 5px 0 0 0; } - div.olControlZoomPanel .olControlZoomInItemInactive, - div.olControlZoomPanel .olControlZoomOutItemInactive { - background: rgba(0,0,0,0.2); - position: absolute; - } - div.olControlZoomPanel .olControlZoomInItemInactive { - border-radius: 5px 5px 0 0; - } - div.olControlZoomPanel .olControlZoomOutItemInactive { - border-radius: 0 0 5px 5px ; - top: 37px; - } - div.olControlZoomPanel .olControlZoomOutItemInactive:after , - div.olControlZoomPanel .olControlZoomInItemInactive:after{ - font-weight: bold; - content : '+'; - font-size : 36px; - padding: 7px; - z-index: 2000; - color : #fff; - line-height: 1em; - } - div.olControlZoomPanel .olControlZoomOutItemInactive:after{ - content: '–'; - line-height: 0.9em; - padding: 0 8px; - } - div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive { - display: none; - } #title, #tags, #shortdesc { display: none; } diff --git a/examples/mobile.js b/examples/mobile.js index 094647a69e..9bbcb9125a 100644 --- a/examples/mobile.js +++ b/examples/mobile.js @@ -26,7 +26,7 @@ var init = function () { enableKinetic: true } }), - new OpenLayers.Control.ZoomPanel() + new OpenLayers.Control.Zoom() ], layers: [ new OpenLayers.Layer.OSM("OpenStreetMap", null, { diff --git a/examples/style.mobile.css b/examples/style.mobile.css index 58dee4586b..946c10b7eb 100644 --- a/examples/style.mobile.css +++ b/examples/style.mobile.css @@ -1,31 +1,33 @@ -div.olControlZoomPanel { - height: 108px; - width: 36px; +div.olControlZoom { position: absolute; - top: 20px; - left: 20px; + top: 8px; + left: 8px; } -div.olControlZoomPanel div { - width: 36px; - height: 36px; - background-image: url(img/mobile-zoombar.png); - left: 0; +div.olControlZoom a { + display: block; + margin: 1px; + padding: 0; + color: white; + font-size: 26px; + font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif; + font-weight: bold; + text-decoration: none; + text-align: center; + height: 32px; + width:32px; + line-height: 24px; + background: #666666; /* fallback for IE - IE6 requires background shorthand*/ + background: rgba(0, 0, 0, 0.3); + filter: alpha(opacity=60); } -div.olControlZoomPanel .olControlZoomInItemInactive { - top: 0; - background-position: 0 0; +div.olControlZoom a:hover { + background: #444444; /* fallback for IE */ + background: rgba(0, 0, 0, 0.5); + filter: alpha(opacity=80); } -div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive { - top: 36px; - background-position: 0 -36px; +a.olControlZoomIn { + border-radius: 4px 4px 0 0; } -div.olControlZoomPanel .olControlZoomOutItemInactive { - top: 72px; - background-position: 0 -72px; -} -.olTileImage { - -webkit-transition: opacity 0.2s linear; - -moz-transition: opacity 0.2s linear; - -o-transition: opacity 0.2s linear; - transition: opacity 0.2s linear; +a.olControlZoomOut { + border-radius: 0 0 4px 4px; } From ee7efdeb0879aa8ef1f28ce4912dd88066c778fa Mon Sep 17 00:00:00 2001 From: Antoine Abt Date: Tue, 6 Mar 2012 21:24:51 +0100 Subject: [PATCH 3/8] trailing spaces --- examples/style.mobile.css | 2 +- theme/default/style.css | 38 +++++++++++++++++++------------------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/examples/style.mobile.css b/examples/style.mobile.css index 946c10b7eb..23270bb570 100644 --- a/examples/style.mobile.css +++ b/examples/style.mobile.css @@ -9,7 +9,7 @@ div.olControlZoom a { padding: 0; color: white; font-size: 26px; - font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif; + font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; text-align: center; diff --git a/theme/default/style.css b/theme/default/style.css index f18e3209d5..f98ac210ce 100644 --- a/theme/default/style.css +++ b/theme/default/style.css @@ -23,16 +23,16 @@ div.olLayerDiv { } .olLayerGooglePoweredBy { left: 2px; - bottom: 15px; + bottom: 15px; } .olLayerGoogleV3.olLayerGooglePoweredBy { bottom: 15px !important; } .olControlAttribution { - font-size: smaller; - right: 3px; - bottom: 4.5em; - position: absolute; + font-size: smaller; + right: 3px; + bottom: 4.5em; + position: absolute; display: block; } .olControlScale { @@ -67,7 +67,7 @@ div.olLayerDiv { display: block; position: absolute; font-size: smaller; -} +} div.olControlMousePosition { bottom: 0em; @@ -133,7 +133,7 @@ div.olControlMousePosition { .olPopupContent { padding:5px; overflow: auto; -} +} .olControlNavigationHistory { background-image: url("img/navigation_history.png"); @@ -142,25 +142,25 @@ div.olControlMousePosition { height: 24px; } -.olControlNavigationHistoryPreviousItemActive { +.olControlNavigationHistoryPreviousItemActive { background-position: 0 0; } -.olControlNavigationHistoryPreviousItemInactive { +.olControlNavigationHistoryPreviousItemInactive { background-position: 0 -24px; } -.olControlNavigationHistoryNextItemActive { +.olControlNavigationHistoryNextItemActive { background-position: -24px 0; } -.olControlNavigationHistoryNextItemInactive { +.olControlNavigationHistoryNextItemInactive { background-position: -24px -24px; } -div.olControlSaveFeaturesItemActive { +div.olControlSaveFeaturesItemActive { background-image: url(img/save_features_on.png); background-repeat: no-repeat; background-position: 0 1px; } -div.olControlSaveFeaturesItemInactive { +div.olControlSaveFeaturesItemInactive { background-image: url(img/save_features_off.png); background-repeat: no-repeat; background-position: 0 1px; @@ -181,12 +181,12 @@ div.olControlSaveFeaturesItemInactive { opacity: 0.50; font-size: 1px; filter: alpha(opacity=50); -} +} .olControlPanPanel { top: 10px; left: 5px; -} +} .olControlPanPanel div { background-image: url(img/pan-panel.png); @@ -221,7 +221,7 @@ div.olControlSaveFeaturesItemInactive { .olControlZoomPanel { top: 71px; left: 14px; -} +} .olControlZoomPanel div { background-image: url(img/zoom-panel.png); @@ -249,9 +249,9 @@ div.olControlSaveFeaturesItemInactive { background-position: 0 18px; } -/* +/* * When a potential text is bigger than the image it move the image - * with some headers (closes #3154) + * with some headers (closes #3154) */ .olControlPanZoomBar div { font-size: 1px; @@ -440,7 +440,7 @@ div.olControlZoom a { padding: 0; color: white; font-size: 18px; - font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif; + font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; text-align: center; From a96c2da6c2ab0b1fb647df44a2896b496aa14fb2 Mon Sep 17 00:00:00 2001 From: Antoine Abt Date: Wed, 14 Mar 2012 22:31:47 +0100 Subject: [PATCH 4/8] =?UTF-8?q?add=20PanZoom=20control=20if=20Zoom=20isn?= =?UTF-8?q?=E2=80=99t=20in=20build?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/OpenLayers/Map.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/OpenLayers/Map.js b/lib/OpenLayers/Map.js index bbe03fe911..fe47d18652 100644 --- a/lib/OpenLayers/Map.js +++ b/lib/OpenLayers/Map.js @@ -624,7 +624,10 @@ OpenLayers.Map = OpenLayers.Class({ } if (OpenLayers.Control.Zoom) { this.controls.push(new OpenLayers.Control.Zoom()); + } else if (OpenLayers.Control.PanZoom) { + this.controls.push(new OpenLayers.Control.PanZoom()); } + if (OpenLayers.Control.ArgParser) { this.controls.push(new OpenLayers.Control.ArgParser()); } From e50c44b63c6dca1402fdd48f067c907664b356f9 Mon Sep 17 00:00:00 2001 From: Antoine Abt Date: Thu, 15 Mar 2012 10:12:38 +0100 Subject: [PATCH 5/8] update doc for control fallback --- lib/OpenLayers/Map.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/OpenLayers/Map.js b/lib/OpenLayers/Map.js index fe47d18652..8cd996b46e 100644 --- a/lib/OpenLayers/Map.js +++ b/lib/OpenLayers/Map.js @@ -195,7 +195,7 @@ OpenLayers.Map = OpenLayers.Class({ * If not provided in the map options at construction, the map will * by default be given the following controls if present in the build: * - or - * - + * - or * - * - */ From fb631ac0bae7efc34547ad3fd9056b1c81ce73a7 Mon Sep 17 00:00:00 2001 From: tschaub Date: Thu, 15 Mar 2012 17:59:16 -0600 Subject: [PATCH 6/8] Updating zoom style for mobile examples. Sticking with sans-serif gives a more uniform experience on desktop Webkit, Safari on iOS, and the default Android browser. Using `-webkit-tap-highlight-color` gets rid of the blue highlight when clicking on the map tiles or zoom control. --- examples/style.mobile.css | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/examples/style.mobile.css b/examples/style.mobile.css index 23270bb570..8ee1a63f78 100644 --- a/examples/style.mobile.css +++ b/examples/style.mobile.css @@ -3,28 +3,26 @@ div.olControlZoom { top: 8px; left: 8px; } +* { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} div.olControlZoom a { display: block; margin: 1px; padding: 0; color: white; - font-size: 26px; - font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif; + font-size: 28px; + font-family: sans-serif; font-weight: bold; text-decoration: none; text-align: center; height: 32px; - width:32px; - line-height: 24px; + width: 32px; + line-height: 28px; background: #666666; /* fallback for IE - IE6 requires background shorthand*/ background: rgba(0, 0, 0, 0.3); filter: alpha(opacity=60); } -div.olControlZoom a:hover { - background: #444444; /* fallback for IE */ - background: rgba(0, 0, 0, 0.5); - filter: alpha(opacity=80); -} a.olControlZoomIn { border-radius: 4px 4px 0 0; } From 457f0285b5ac41bfa3cb9924305e07adb3699793 Mon Sep 17 00:00:00 2001 From: Antoine Abt Date: Sun, 18 Mar 2012 20:42:25 +0100 Subject: [PATCH 7/8] better readability of button with text-shadow --- examples/style.mobile.css | 1 + theme/default/style.css | 1 + 2 files changed, 2 insertions(+) diff --git a/examples/style.mobile.css b/examples/style.mobile.css index 8ee1a63f78..d8e1c915e6 100644 --- a/examples/style.mobile.css +++ b/examples/style.mobile.css @@ -19,6 +19,7 @@ div.olControlZoom a { height: 32px; width: 32px; line-height: 28px; + text-shadow: 0 0 3px rgba(0,0,0,0.8); background: #666666; /* fallback for IE - IE6 requires background shorthand*/ background: rgba(0, 0, 0, 0.3); filter: alpha(opacity=60); diff --git a/theme/default/style.css b/theme/default/style.css index f98ac210ce..f63f4acf8e 100644 --- a/theme/default/style.css +++ b/theme/default/style.css @@ -447,6 +447,7 @@ div.olControlZoom a { height: 22px; width:22px; line-height: 19px; + text-shadow: 0 0 3px rgba(0,0,0,0.8); background: #666666; /* fallback for IE - IE6 requires background shorthand*/ background: rgba(0, 0, 0, 0.3); filter: alpha(opacity=60); From b10e6707e686ee2a2f6afb4162beaccc6ea24318 Mon Sep 17 00:00:00 2001 From: Antoine Abt Date: Sun, 18 Mar 2012 20:43:33 +0100 Subject: [PATCH 8/8] =?UTF-8?q?fixes=20button=20stay=20=C2=ABactive=C2=BB?= =?UTF-8?q?=20on=20mobile,=20in=20default=20theme,=20and=20mobile=20exampl?= =?UTF-8?q?e=20stylesheet?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/style.mobile.css | 10 ++++++++++ theme/default/style.css | 5 +++++ 2 files changed, 15 insertions(+) diff --git a/examples/style.mobile.css b/examples/style.mobile.css index d8e1c915e6..d0775bd464 100644 --- a/examples/style.mobile.css +++ b/examples/style.mobile.css @@ -30,3 +30,13 @@ a.olControlZoomIn { a.olControlZoomOut { border-radius: 0 0 4px 4px; } +div.olControlZoom a:hover { + background: #444444; /* fallback for IE */ + background: rgba(0, 0, 0, 0.5); + filter: alpha(opacity=80); +} +@media only screen and (max-width: 600px) { + div.olControlZoom a:hover { + background: rgba(0, 0, 0, 0.3); + } +} diff --git a/theme/default/style.css b/theme/default/style.css index f63f4acf8e..0912ffebec 100644 --- a/theme/default/style.css +++ b/theme/default/style.css @@ -457,6 +457,11 @@ div.olControlZoom a:hover { background: rgba(0, 0, 0, 0.5); filter: alpha(opacity=80); } +@media only screen and (max-width: 600px) { + div.olControlZoom a:hover { + background: rgba(0, 0, 0, 0.3); + } +} a.olControlZoomIn { border-radius: 4px 4px 0 0; }