diff --git a/css/app.css b/css/app.css
index db2eed63c..c19af4367 100644
--- a/css/app.css
+++ b/css/app.css
@@ -113,6 +113,22 @@ a.selected {
color:#222;
}
+/* Mode-specific styles
+------------------------------------------------------- */
+
+#map:hover,
+#map.browse:hover {
+ cursor:url(../img/cursor-grab.png) 9 9, auto;
+}
+
+#map.add-line:hover,
+#map.add-area:hover {
+ cursor:url(../img/cursor-draw.png) 9 9, auto;
+}
+
+#map.add-place:hover {
+ cursor:url(../img/cursor-draw-marker.png) 18 18, auto;
+}
/* Utility Classes
------------------------------------------------------- */
@@ -136,9 +152,8 @@ form.hide {
button {
line-height:20px;
- cursor:pointer;
border:1px solid #aaa;
- box-shadow: inset 0 0 0 1px #fff;
+ box-shadow: inset 0 0 0px 1px #fff;
color:#222;
background: white;
font-weight:bold;
@@ -150,11 +165,17 @@ button {
button:hover {
background-color: #ececec;
+ cursor:url(../img/cursor-pointer.png), auto;
+}
+
+button:active {
+ cursor:url(../img/cursor-pointing.png), auto;
+ box-shadow: inset 0 0 0px 1px #fff, inset 0 0 6px 1px rgba(0,0,0,.35);
}
button.active:not([disabled]) {
- background-color:#aaaaaa;
- color:#fff;
+ background-color: #ececec;
+ box-shadow: inset 0 0 0px 1px #fff, inset 0 0 6px 1px rgba(0,0,0,.25);
}
button.wide,
@@ -218,25 +239,26 @@ button[disabled]:hover {
background: white;
}
button.action {
- background: #7092ff;
+ background-color: #7092ff;
}
button.action:hover {
- background: #6282ee;
+ background-color: #6282ee;
}
button.delete {
- background: #ff7070;
+ background-color: #ff7070;
}
button.delete:hover {
- background: #ef5454;
+ background-color: #ef5454;
}
button.save {
- background:#6bc641;
+ background-color: #6bc641;
}
button.save:hover {
- background: #59ac33;
+ color: #59ac33;
+ background-color: #6bc641;
}
button.close {
@@ -247,11 +269,6 @@ button.close {
button .label {
margin-right: 3px;
- text-shadow: 0 1px 0 white;
-}
-
-.active .label {
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
button.action .label {
@@ -294,7 +311,7 @@ button.action .label {
.icon.geocode { background-position: -280px 0px;}
.icon.layers { background-position: -300px 0px;}
-.active .icon.browse { background-position: 0px -20px;}
+/*.active .icon.browse { background-position: 0px -20px;}
.active .icon.add-place { background-position: -20px -20px;}
.active .icon.add-line { background-position: -40px -20px;}
.active .icon.add-area { background-position: -60px -20px;}
@@ -309,7 +326,7 @@ button.action .label {
.active .icon.zoom-in { background-position: -240px -20px;}
.active .icon.zoom-out { background-position: -260px -20px;}
.active .icon.geocode { background-position: -280px -20px;}
-.active .icon.layers { background-position: -300px -20px;}
+.active .icon.layers { background-position: -300px -20px;}*/
button[disabled] .icon.browse { background-position: 0px -40px;}
button[disabled] .icon.add-place { background-position: -20px -40px;}
diff --git a/css/map.css b/css/map.css
index 61da24c14..4a6550ad0 100644
--- a/css/map.css
+++ b/css/map.css
@@ -4,7 +4,11 @@ image.tile {
/* base styles */
path, image.marker {
fill: none;
- cursor: pointer;
+ cursor: url(../img/cursor-select-way.png), pointer;
+}
+
+g.marker {
+ cursor: url(../img/cursor-select-marker.png), pointer;
}
g.marker circle {
@@ -20,7 +24,7 @@ g.marker.active circle {
/* interactive elements */
circle.handle {
- cursor: move;
+ cursor: url(../img/cursor-select-node.png), pointer;
fill:white;
stroke:#333;
fill-opacity:1;
@@ -36,6 +40,7 @@ circle.handle.active {
}
circle.accuracy-handle {
+ cursor: url(../img/cursor-select-split.png), pointer;
fill:#aaa;
stroke:#333;
fill-opacity:1;
@@ -90,6 +95,7 @@ path.area {
stroke:red;
fill:#fff;
fill-opacity:0.3;
+ cursor: url(../img/cursor-select-area.png), pointer;
}
path.area.active {
diff --git a/img/cursor-draw-marker.png b/img/cursor-draw-marker.png
new file mode 100644
index 000000000..fc1448d0c
Binary files /dev/null and b/img/cursor-draw-marker.png differ
diff --git a/img/cursor-pointing.png b/img/cursor-pointing.png
new file mode 100644
index 000000000..61cc68097
Binary files /dev/null and b/img/cursor-pointing.png differ
diff --git a/img/cursor-select-acting.png b/img/cursor-select-acting.png
new file mode 100644
index 000000000..28645a113
Binary files /dev/null and b/img/cursor-select-acting.png differ
diff --git a/img/cursor-select-area.png b/img/cursor-select-area.png
new file mode 100644
index 000000000..4baa9e5cc
Binary files /dev/null and b/img/cursor-select-area.png differ
diff --git a/img/cursor-select-marker.png b/img/cursor-select-marker.png
new file mode 100644
index 000000000..79567175a
Binary files /dev/null and b/img/cursor-select-marker.png differ
diff --git a/img/cursor-select-node.png b/img/cursor-select-node.png
index b2e202eb3..3d98722fe 100644
Binary files a/img/cursor-select-node.png and b/img/cursor-select-node.png differ
diff --git a/img/cursor-select-place.png b/img/cursor-select-place.png
new file mode 100644
index 000000000..79567175a
Binary files /dev/null and b/img/cursor-select-place.png differ
diff --git a/img/source/cursors.svg b/img/source/cursors.svg
index b4884034e..ebfc81c75 100644
--- a/img/source/cursors.svg
+++ b/img/source/cursors.svg
@@ -25,20 +25,21 @@
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
- inkscape:zoom="11.313708"
- inkscape:cx="-82.346584"
- inkscape:cy="994.56292"
+ inkscape:zoom="8"
+ inkscape:cx="-75.07298"
+ inkscape:cy="930.80226"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
inkscape:window-width="1337"
inkscape:window-height="840"
- inkscape:window-x="233"
- inkscape:window-y="34"
+ inkscape:window-x="337"
+ inkscape:window-y="105"
inkscape:window-maximized="0"
inkscape:snap-bbox="true"
- showguides="true"
- inkscape:guide-bbox="true">
+ showguides="false"
+ inkscape:guide-bbox="true"
+ inkscape:snap-nodes="true">
@@ -59,15 +60,59 @@
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
-
+
+
+
+
+
+
+
+
+
+
+
+ id="g58315"
+ inkscape:export-filename="/Users/saman/work_repos/iD/img/cursor-grab.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90">
+ id="g58324"
+ inkscape:export-filename="/Users/saman/work_repos/iD/img/cursor-grabbing.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90">
+ id="g58300"
+ inkscape:export-filename="/Users/saman/work_repos/iD/img/cursor-pointer.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90">
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ id="g58289"
+ inkscape:export-filename="/Users/saman/work_repos/iD/img/cursor-select-node.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90">
-
+ d="m -80,54.862183 a 2.5,2.5 0 1 1 -5,0 2.5,2.5 0 1 1 5,0 z"
+ transform="matrix(0.7999998,0,0,0.7999998,-16.000016,11.472446)" />
-
-
+ id="g58331"
+ inkscape:export-filename="/Users/saman/work_repos/iD/img/cursor-draw-connect.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90">
+ id="g58368"
+ inkscape:export-filename="/Users/saman/work_repos/iD/img/cursor-draw.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90">
+ id="g58348"
+ inkscape:export-filename="/Users/saman/work_repos/iD/img/cursor-draw-close.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90">
+ id="g58278"
+ inkscape:export-filename="/Users/saman/work_repos/iD/img/cursor-select-split.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90">
+ style="color:#000000;fill:none;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter8013-4);enable-background:accumulate" />
@@ -1075,7 +844,7 @@
@@ -1128,5 +897,416 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/img/source/sprite.svg b/img/source/sprite.svg
index aee5014f2..33df88a75 100644
--- a/img/source/sprite.svg
+++ b/img/source/sprite.svg
@@ -27,12 +27,12 @@
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
- inkscape:zoom="11.313708"
- inkscape:cx="291.89171"
- inkscape:cy="165.02789"
+ inkscape:zoom="5.6568542"
+ inkscape:cx="83.810568"
+ inkscape:cy="168.67908"
inkscape:document-units="px"
inkscape:current-layer="layer1"
- showgrid="false"
+ showgrid="true"
inkscape:window-width="1560"
inkscape:window-height="922"
inkscape:window-x="227"
@@ -42,7 +42,7 @@
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
- showguides="false"
+ showguides="true"
inkscape:guide-bbox="true"
inkscape:snap-bbox="true"
inkscape:snap-nodes="false">
@@ -150,7 +150,7 @@
image/svg+xml
-
+
@@ -159,7 +159,7 @@
inkscape:groupmode="layer"
id="layer1"
transform="translate(-25,-62.362183)"
- style="display:inline">
+ style="display:none">
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
diff --git a/img/sprite.png b/img/sprite.png
index 105533bc6..19d4ef5e9 100644
Binary files a/img/sprite.png and b/img/sprite.png differ
diff --git a/js/id/modes/add_area.js b/js/id/modes/add_area.js
index ae19f193d..d604e0072 100644
--- a/js/id/modes/add_area.js
+++ b/js/id/modes/add_area.js
@@ -7,6 +7,8 @@ iD.modes.AddArea = function() {
};
mode.enter = function() {
+ d3.select('#map').attr('class', function() { return mode.id});
+
var map = mode.map,
history = mode.history,
controller = mode.controller;
@@ -52,6 +54,7 @@ iD.modes.AddArea = function() {
mode.map.hint(false);
mode.map.surface.on('click.addarea', null);
mode.map.keybinding().on('⎋.addarea', null);
+ d3.select('#map').attr('class', null);
};
return mode;
diff --git a/js/id/modes/add_line.js b/js/id/modes/add_line.js
index baa4364bc..f975bd1de 100644
--- a/js/id/modes/add_line.js
+++ b/js/id/modes/add_line.js
@@ -7,6 +7,8 @@ iD.modes.AddLine = function() {
};
mode.enter = function() {
+ d3.select('#map').attr('class', function() { return mode.id});
+
var map = mode.map,
node,
history = mode.history,
@@ -72,6 +74,7 @@ iD.modes.AddLine = function() {
mode.map.hint(false);
mode.map.surface.on('click.addline', null);
mode.map.keybinding().on('⎋.addline', null);
+ d3.select('#map').attr('class', null);
};
return mode;
diff --git a/js/id/modes/add_place.js b/js/id/modes/add_place.js
index fe16ac20c..153369ad7 100644
--- a/js/id/modes/add_place.js
+++ b/js/id/modes/add_place.js
@@ -6,6 +6,8 @@ iD.modes.AddPlace = function() {
};
mode.enter = function() {
+ d3.select('#map').attr('class', function() { return mode.id});
+
var map = mode.map,
history = mode.history,
controller = mode.controller;
@@ -31,6 +33,7 @@ iD.modes.AddPlace = function() {
mode.map.hint(false);
mode.map.surface.on('click.addplace', null);
mode.map.keybinding().on('⎋.addplace', null);
+ d3.select('#map').attr('class', null);
};
return mode;
diff --git a/js/id/modes/browse.js b/js/id/modes/browse.js
index a94511d7a..394fa1833 100644
--- a/js/id/modes/browse.js
+++ b/js/id/modes/browse.js
@@ -7,6 +7,8 @@ iD.modes.Browse = function() {
};
mode.enter = function() {
+ d3.select('#map').attr('class', function() { return mode.id});
+
iD.modes._dragFeatures(mode);
mode.map.surface.on('click.browse', function () {
var datum = d3.select(d3.event.target).datum();
@@ -19,6 +21,7 @@ iD.modes.Browse = function() {
mode.exit = function() {
mode.map.surface.on('mousedown.latedrag', null);
mode.map.surface.on('click.browse', null);
+ d3.select('#map').attr('class', null);
};
return mode;