diff --git a/css/app.css b/css/app.css index cdadef524..66f46429c 100644 --- a/css/app.css +++ b/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; +} diff --git a/js/iD/id.js b/js/iD/id.js index ed2d79d53..8eaf8e0d1 100644 --- a/js/iD/id.js +++ b/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(); diff --git a/js/iD/ui/commit.js b/js/iD/ui/commit.js index c7ce6a430..f95a3854b 100644 --- a/js/iD/ui/commit.js +++ b/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');