From 6c8bb657e3ffa5d4a78b7401feffca58f0c22cb6 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Fri, 29 Mar 2013 15:37:00 -0700
Subject: [PATCH] Use disabled operation icons (fixes #1203)

---
 css/app.css             | 22 +++++++++++-----------
 js/id/ui/radial_menu.js |  2 +-
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/css/app.css b/css/app.css
index e2450ad92..7b2c4c437 100644
--- a/css/app.css
+++ b/css/app.css
@@ -528,17 +528,17 @@ button[disabled] .icon.nearby     { background-position: -340px -40px;}
 .icon-operation-rotate        { background-position: -180px -140px;}
 .icon-operation-simplify      { background-position: -200px -140px;}
 
-.disabled.icon-operation-delete        { background-position: 0 -160px;}
-.disabled.icon-operation-circularize   { background-position: -20px -160px;}
-.disabled.icon-operation-straighten    { background-position: -40px -160px;}
-.disabled.icon-operation-split         { background-position: -60px -160px;}
-.disabled.icon-operation-disconnect    { background-position: -80px -160px;}
-.disabled.icon-operation-reverse       { background-position: -100px -160px;}
-.disabled.icon-operation-move          { background-position: -120px -160px;}
-.disabled.icon-operation-merge         { background-position: -140px -160px;}
-.disabled.icon-operation-orthogonalize { background-position: -160px -160px;}
-.disabled.icon-operation-rotate        { background-position: -180px -160px;}
-.disabled.icon-operation-simplify      { background-position: -200px -160px;}
+.icon-operation-disabled-delete        { background-position: 0 -160px;}
+.icon-operation-disabled-circularize   { background-position: -20px -160px;}
+.icon-operation-disabled-straighten    { background-position: -40px -160px;}
+.icon-operation-disabled-split         { background-position: -60px -160px;}
+.icon-operation-disabled-disconnect    { background-position: -80px -160px;}
+.icon-operation-disabled-reverse       { background-position: -100px -160px;}
+.icon-operation-disabled-move          { background-position: -120px -160px;}
+.icon-operation-disabled-merge         { background-position: -140px -160px;}
+.icon-operation-disabled-orthogonalize { background-position: -160px -160px;}
+.icon-operation-disabled-rotate        { background-position: -180px -160px;}
+.icon-operation-disabled-simplify      { background-position: -200px -160px;}
 
 /* Universal preset icons */
 
diff --git a/js/id/ui/radial_menu.js b/js/id/ui/radial_menu.js
index 9468ca343..6fcb51e38 100644
--- a/js/id/ui/radial_menu.js
+++ b/js/id/ui/radial_menu.js
@@ -59,7 +59,7 @@ iD.ui.RadialMenu = function(operations) {
         button.append('use')
             .attr('transform', 'translate(-10, -10)')
             .attr('clip-path', 'url(#clip-square-20)')
-            .attr('xlink:href', function(d) { return '#icon-operation-' + d.id; });
+            .attr('xlink:href', function(d) { return '#icon-operation-' + (d.disabled() ? 'disabled-' : '') + d.id; });
 
         tooltip = d3.select(document.body)
             .append('div')