diff --git a/css/app.css b/css/app.css
index f69ba9a07..1da04f481 100644
--- a/css/app.css
+++ b/css/app.css
@@ -470,15 +470,15 @@ button[disabled] .icon.nearby { background-position: -340px -40px;}
.icon.big-inspect { background-position: -160px -80px;}
.icon.big-relation { background-position: -200px -80px;}
-.icon.operation.delete { background-position: 0px -140px;}
-.icon.operation.circularize { background-position: -20px -140px;}
-.icon.operation.straighten { background-position: -40px -140px;}
-.icon.operation.split { background-position: -60px -140px;}
-.icon.operation.unjoin { background-position: -80px -140px;}
-.icon.operation.reverse { background-position: -100px -140px;}
-.icon.operation.move { background-position: -120px -140px;}
-.icon.operation.merge { background-position: -140px -140px;}
-.icon.operation.orthogonalize { background-position: -160px -140px;}
+.icon-operation-delete { background-position: 0px -140px;}
+.icon-operation-circularize { background-position: -20px -140px;}
+.icon-operation-straighten { background-position: -40px -140px;}
+.icon-operation-split { background-position: -60px -140px;}
+.icon-operation-unjoin { background-position: -80px -140px;}
+.icon-operation-reverse { background-position: -100px -140px;}
+.icon-operation-move { background-position: -120px -140px;}
+.icon-operation-merge { background-position: -140px -140px;}
+.icon-operation-orthogonalize { background-position: -160px -140px;}
/* Toggle icon is special */
@@ -1195,7 +1195,7 @@ a.success-action {
fill: rgba(255,255,255,.5);
}
-.radial-menu image {
+.radial-menu .icon {
pointer-events: none;
}
diff --git a/index.html b/index.html
index 4b12084e5..fae1fc940 100644
--- a/index.html
+++ b/index.html
@@ -81,7 +81,7 @@
-
+
@@ -107,7 +107,7 @@
-
+
diff --git a/js/id/actions/circular.js b/js/id/actions/circularize.js
similarity index 97%
rename from js/id/actions/circular.js
rename to js/id/actions/circularize.js
index da7965c79..edbd0d8b3 100644
--- a/js/id/actions/circular.js
+++ b/js/id/actions/circularize.js
@@ -1,4 +1,4 @@
-iD.actions.Circular = function(wayId, map) {
+iD.actions.Circularize = function(wayId, map) {
var action = function(graph) {
var way = graph.entity(wayId),
diff --git a/js/id/operations/circular.js b/js/id/operations/circularize.js
similarity index 83%
rename from js/id/operations/circular.js
rename to js/id/operations/circularize.js
index eb94150fc..49956430e 100644
--- a/js/id/operations/circular.js
+++ b/js/id/operations/circularize.js
@@ -1,6 +1,6 @@
-iD.operations.Circular = function(entityId, mode) {
+iD.operations.Circularize = function(entityId, mode) {
var history = mode.map.history(),
- action = iD.actions.Circular(entityId, mode.map);
+ action = iD.actions.Circularize(entityId, mode.map);
var operation = function() {
var graph = history.graph(),
@@ -30,9 +30,9 @@ iD.operations.Circular = function(entityId, mode) {
return action.enabled(graph);
};
- operation.id = "circular";
+ operation.id = "circularize";
operation.key = "O";
- operation.title = "Circular";
+ operation.title = "Circularize";
operation.description = "Make this round";
return operation;
diff --git a/js/id/ui/radial_menu.js b/js/id/ui/radial_menu.js
index f06fa362e..fe0d7ee86 100644
--- a/js/id/ui/radial_menu.js
+++ b/js/id/ui/radial_menu.js
@@ -50,11 +50,15 @@ iD.ui.RadialMenu = function(operations) {
.on('mouseover', mouseover)
.on('mouseout', mouseout);
- button.append('image')
- .attr('width', 16)
- .attr('height', 16)
- .attr('transform', 'translate(-8, -8)')
- .attr('xlink:href', 'icons/helipad.png');
+ var image = button.append('foreignObject')
+ .style('pointer-events', 'none')
+ .attr('width', 20)
+ .attr('height', 20)
+ .attr('x', -10)
+ .attr('y', -10);
+
+ image.append('xhtml:span')
+ .attr('class', function (d) { return 'icon icon-operation icon-operation-' + d.id; });
var tooltip = menu.append('foreignObject')
.style('display', 'none')
diff --git a/test/index.html b/test/index.html
index b682f2cdd..4bdd4b5ba 100644
--- a/test/index.html
+++ b/test/index.html
@@ -72,7 +72,7 @@
-
+
@@ -102,7 +102,7 @@
-
+