Fix/improve UI feedback on undo/redo buttons

css/app.css

@@ -84,11 +84,16 @@ input[type=text]:focus {
     padding:10px;
 }
 
-#bar button:hover {
+#bar button[disabled] {
+    color:#eee;
+    cursor:auto;
+}
+
+#bar button:hover:not([disabled]) {
     background:#eee;
 }
 
-#bar button.active {
+#bar button.active:not([disabled]) {
     background:#eee;
     color:#000;
 }

js/iD/graph/History.js

@@ -38,5 +38,21 @@ iD.History.prototype = {
             this.index++;
             if (this.stack[this.index].annotation) break;
         }
+    },
+
+    undoAnnotation: function() {
+        var index = this.index;
+        while (index >= 0) {
+            if (this.stack[index].annotation) return this.stack[index].annotation;
+            index--;
+        }
+    },
+
+    redoAnnotation: function() {
+        var index = this.index + 1;
+        while (index <= this.stack.length - 1) {
+            if (this.stack[index].annotation) return this.stack[index].annotation;
+            index++;
+        }
     }
 };

js/iD/id.js

@@ -38,13 +38,15 @@ var iD = function(container) {
     bar.append('button')
         .attr('id', 'undo')
         .attr('class', 'mini')
-        .html('&larr;<small>&nbsp;</small>')
+        .property('disabled', true)
+        .html('&larr;<small></small>')
         .on('click', map.undo);
 
     bar.append('button')
         .attr('id', 'redo')
         .attr('class', 'mini')
-        .html('&rarr;<small>&nbsp;</small>')
+        .property('disabled', true)
+        .html('&rarr;<small></small>')
         .on('click', map.redo);
 
     bar.append('input')
@@ -100,6 +102,21 @@ var iD = function(container) {
               "<a href='http://www.geowiki.com/docs'>docs</a>." +
               "Imagery <a href='http://opengeodata.org/microsoft-imagery-details'>&copy; 2012</a> Bing, GeoEye, Getmapping, Intermap, Microsoft.</p>");
 
+    map.on('update', function() {
+        var undo = map.history.undoAnnotation(),
+            redo = map.history.redoAnnotation();
+
+        bar.select('#undo')
+            .property('disabled', !undo)
+            .select('small')
+            .text(undo);
+
+        bar.select('#redo')
+            .property('disabled', !redo)
+            .select('small')
+            .text(redo);
+    });
+
     window.onresize = function() {
         map.setSize({
             width: m.node().offsetWidth,

js/iD/renderer/Map.js

@@ -39,7 +39,7 @@ iD.Map = function(elem, connection) {
                 only[entity.id] = true;
                 redraw(only);
             })
-            .on('dragend', map.update),
+            .on('dragend', update),
         nodeline = function(d) {
             return 'M' + d.nodes.map(ll2a).map(projection).map(roundCoords).join('L');
         },
@@ -446,26 +446,25 @@ iD.Map = function(elem, connection) {
 
     // UI elements
     // -----------
-    var undolabel = d3.select('button#undo small');
-    dispatch.on('update', function() {
-        undolabel.text(history.graph().annotation);
+    function update() {
+        map.update();
         redraw();
-    });
+    }
 
     function _do(operation) {
         history.operate(operation);
-        map.update();
+        update();
     }
 
     // Undo/redo
     function undo() {
         history.undo();
-        map.update();
+        update();
     }
 
     function redo() {
         history.redo();
-        map.update();
+        update();
     }
 
     // Getters & setters for map state