Add lists and counts

css/app.css

@@ -227,3 +227,29 @@ button small {
     position:fixed;
     left:0px; right:0px; top:0px; bottom:0px;
 }
+
+.commit-pane h2 {
+    font: bold 24px/40px 'Helvetica';
+}
+
+.commit-pane h3 small.count {
+    font: normal 12px/40px 'Helvetica';
+    border-radius:20px;
+    padding:5px;
+    background:#555;
+    margin-left:10px;
+    color:#fff;
+}
+
+.commit-pane h3 {
+    font: bold 18px/30px 'Helvetica';
+}
+
+.commit-pane ul {
+    border-bottom:1px solid #ccc;
+}
+
+.commit-pane li {
+    border-top:1px solid #ccc;
+    padding:2px;
+}

js/iD/id.js

@@ -72,7 +72,7 @@ var iD = function(container) {
                 var shaded = d3.select(document.body)
                     .append('div').attr('class', 'shaded');
                 var modal = shaded.append('div')
-                    .attr('class', 'modal')
+                    .attr('class', 'modal commit-pane')
                     .datum(map.history.changes());
                 modal.call(iD.Commit());
                 // map.commit();

js/iD/ui/commit.js

@@ -12,17 +12,24 @@ iD.Commit = function() {
             .data(['modify', 'delete', 'create'])
             .enter()
             .append('div').attr('class', 'section');
-        section.append('h3').text(String);
-        section.append('ul')
+
+        section.append('h3').text(String)
+            .append('small')
+            .attr('class', 'count')
+            .text(function(d) { return changes[d].length; });
+
+        var li = section.append('ul')
             .selectAll('li')
-            .data(function(d) {
-                return changes[d];
-            })
+            .data(function(d) { return changes[d]; })
             .enter()
-            .append('li')
-            .text(function(d) {
-                return d.type + iD.Util.friendlyName(d);
-            });
+            .append('li');
+
+        li.append('strong').text(function(d) {
+            return d.type + ' ';
+        });
+        li.append('span').text(function(d) {
+             return iD.Util.friendlyName(d);
+        });
 
         body.append('button').text('Save');
         body.append('button').text('Cancel');