From 39e93b5f42b531231dbba46e3e69af0b4465020d Mon Sep 17 00:00:00 2001
From: Tom MacWright <tom@macwright.org>
Date: Fri, 4 Jan 2013 16:33:33 -0500
Subject: [PATCH] Style save button counter

---
 css/app.css | 19 +++++++++++++++++--
 js/id/id.js | 11 +++++++++--
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/css/app.css b/css/app.css
index 27ca56b71..9955a37ed 100644
--- a/css/app.css
+++ b/css/app.css
@@ -291,10 +291,25 @@ button.delete:hover {
 
 button.save {
     background-color: #6bc641;
+    width: 120px;
+    position: relative;
 }
 
-button.save[disabled] {
-    background-color: #92BB7F;
+button.save.has-count {
+    padding-right:10px;
+}
+
+button.save.has-count .count {
+    display: block;
+    position: absolute;
+    font-size:small;
+    top: 0;
+    right: 0;
+    background: #fff;
+    height: 37px;
+    border-radius: 0 3px 3px 0;
+    padding: 0 10px;
+    line-height: 40px;
 }
 
 button.save:hover {
diff --git a/js/id/id.js b/js/id/id.js
index 413b45e72..48c7f307d 100644
--- a/js/id/id.js
+++ b/js/id/id.js
@@ -158,15 +158,22 @@ window.iD = function(container) {
                 }
             });
 
-        save_button.append('span').attr('class', 'count');
+        save_button.append('span')
+            .attr('class', 'count');
 
         history.on('change.save-button', function() {
             var changes = history.changes(),
                 num_changes = d3.sum(d3.values(changes).map(function(c) {
                     return c.length;
                 }));
+
             save_button.property('disabled', num_changes === 0);
-            save_button.select('span.count').text(num_changes === 0 ? '' : num_changes);
+
+            save_button
+                .classed('has-count', num_changes > 0);
+
+            save_button.select('span.count')
+                .text(num_changes);
         });
 
         bar.append('div')