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 @@ - +