cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update zoom control styles, extract general toolbar classes, fix #1209

Browse Source
This commit is contained in:
Vladimir Agafonkin 2013-01-16 17:08:06 +02:00
parent 11e74ccab9
commit e3528c2d22
3 changed files with 57 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -13,6 +13,7 @@ Be sure to read through these changes to avoid any issues when upgrading from ol
* Removed default `LatLng` wrapping/clamping of coordinates (`-180, -90` to `180, 90`), wrapping moved to an explicit method (`LatLng` `wrap`).
* Disabled `Map` `worldCopyJump` option by default (jumping back to the original world copy when panning out of it). Enable it explicitly if you need it.
* Changed styles for the zoom control (you may need to update your custom styles for it).
### Improvements

57
dist/leaflet.css vendored
View File

@ -185,7 +185,47 @@
/* general typography */
.leaflet-container {
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
}
/* general toolbar styles */
.leaflet-bar {
box-shadow: 0 0 8px rgba(0,0,0,0.4);
border: 1px solid #888;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.leaflet-bar-part {
background-color: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid #aaa;
}
.leaflet-bar-part-top {
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.leaflet-bar-part-bottom {
-webkit-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
border-bottom: none;
}
.leaflet-touch .leaflet-bar {
-webkit-border-radius: 10px;
border-radius: 10px;
}
.leaflet-touch .leaflet-bar-part {
border-bottom: 4px solid rgba(0,0,0,0.3);
}
.leaflet-touch .leaflet-bar-part-top {
-webkit-border-radius: 7px 7px 0 0;
border-radius: 7px 7px 0 0;
}
.leaflet-touch .leaflet-bar-part-bottom {
-webkit-border-radius: 0 0 7px 7px;
border-radius: 0 0 7px 7px;
border-bottom: none;
}
/* zoom control */
@ -193,15 +233,10 @@
.leaflet-container .leaflet-control-zoom {
margin-left: 13px;
margin-top: 12px;
box-shadow: 0 0 8px rgba(0,0,0,0.4);
border: 1px solid #888;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.leaflet-control-zoom a {
width: 22px;
height: 22px;
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
text-decoration: none;
color: black;
@ -217,15 +252,10 @@
color: #777;
}
.leaflet-control-zoom-in {
border-bottom: 1px solid #aaa;
font: bold 18px/24px Arial, Helvetica, sans-serif;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.leaflet-control-zoom-out {
font: bold 23px/20px Tahoma, Verdana, sans-serif;
-webkit-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.leaflet-control-zoom a.leaflet-control-zoom-disabled {
cursor: default;
@ -233,9 +263,6 @@
color: #bbb;
}
.leaflet-touch .leaflet-control-zoom {
border-radius: 10px;
}
.leaflet-touch .leaflet-control-zoom a {
width: 30px;
height: 30px;
@ -243,8 +270,6 @@
.leaflet-touch .leaflet-control-zoom-in {
font-size: 24px;
line-height: 29px;
border-bottom: 4px solid rgba(0,0,0,0.3);
border-radius: 7px 7px 0 0;
}
.leaflet-touch .leaflet-control-zoom-out {
font-size: 28px;

21
src/control/Control.Zoom.js
View File

@ -8,15 +8,24 @@ L.Control.Zoom = L.Control.extend({
},
onAdd: function (map) {
var className = 'leaflet-control-zoom',
container = L.DomUtil.create('div', className);
var zoomName = 'leaflet-control-zoom',
barName = 'leaflet-bar',
partName = barName + '-part',
container = L.DomUtil.create('div', zoomName + ' ' + barName);
this._map = map;
this._zoomInButton = this._createButton(
'+', 'Zoom in', className + '-in', container, this._zoomIn, this);
this._zoomOutButton = this._createButton(
'-', 'Zoom out', className + '-out', container, this._zoomOut, this);
this._zoomInButton = this._createButton('+', 'Zoom in',
zoomName + '-in ' +
partName + ' ' +
partName + '-top',
container, this._zoomIn, this);
this._zoomOutButton = this._createButton('-', 'Zoom out',
zoomName + '-out ' +
partName + ' ' +
partName + '-bottom',
container, this._zoomOut, this);
map.on('zoomend', this._updateDisabled, this);