diff --git a/css/app.css b/css/app.css index 45a3c6d0a..1880bd17a 100644 --- a/css/app.css +++ b/css/app.css @@ -163,11 +163,13 @@ button small { .inspector-wrap { position:absolute; - top:90px; - right:20px; + top:40px; + right:00px; overflow:auto; - padding:5px; - background:#fff; + padding:10px; + background:#222222; + border-top:1px solid #000; + color:#fff; } .inspector-wrap h2 { @@ -196,8 +198,8 @@ button small { margin:0; padding:4px; border:0; + background:#fff; width:150px; - border:0; } .inspector input.tag-key { diff --git a/js/iD/renderer/Map.js b/js/iD/renderer/Map.js index 57950e3d4..ed1ed89ba 100755 --- a/js/iD/renderer/Map.js +++ b/js/iD/renderer/Map.js @@ -132,9 +132,9 @@ iD.Map = function(elem) { points = graph.pois(graph.head); var fills = fill_g.selectAll('path.area').data(areas, key), - casings = casing_g.selectAll('path.casing').data(ways, key), - strokes = stroke_g.selectAll('path.stroke').data(ways, key), - markers = hit_g.selectAll('image.marker').data(points, key); + casings = casing_g.selectAll('path.casing').data(ways, key), + strokes = stroke_g.selectAll('path.stroke').data(ways, key), + markers = hit_g.selectAll('image.marker').data(points, key); var selected_id = selection && selection[0]; diff --git a/js/iD/ui/Inspector.js b/js/iD/ui/Inspector.js index 8c1b9240e..889656a1b 100644 --- a/js/iD/ui/Inspector.js +++ b/js/iD/ui/Inspector.js @@ -51,26 +51,35 @@ iD.Inspector = function(graph) { var tbody = table.append('tbody'); - var row = tbody.selectAll('tr') - .data(d3.entries(d.tags)) - .enter() - .append('tr'); + function draw(data) { + var tr = tbody.selectAll('tr') + .data(data, function(d) { return d.key; }); - row.append('td').append('input') - .attr('class', 'tag-key') - .property('value', function(d) { return d.key; }) - .on('change', function(row) { - row.key = this.key; - event.update(d, newtags()); - }); + var row = tr.enter() + .append('tr'); + tr.exit().remove(); - row.append('td').append('input') - .attr('class', 'tag-value') - .property('value', function(d) { return d.value; }) - .on('change', function(row) { - row.value = this.value; - event.update(d, newtags()); - }); + row.append('td').append('input') + .attr('class', 'tag-key') + .property('value', function(d) { return d.key; }) + .on('change', function(row) { + row.key = this.value; + event.update(d, newtags()); + draw(formtags()); + }); + + row.append('td').append('input') + .attr('class', 'tag-value') + .property('value', function(d) { return d.value; }) + .on('change', function(row) { + row.value = this.value; + event.update(d, newtags()); + draw(formtags()); + }); + } + + var data = d3.entries(d.tags).concat([{ key: '', value: ''}]); + draw(data); // TODO: there must be a function for this function unentries(x) { @@ -81,6 +90,12 @@ iD.Inspector = function(graph) { return obj; } + function formtags() { + var t = newtags(); + if (Object.keys(t).indexOf('') === -1) t[''] = ''; + return d3.entries(t); + } + function newtags() { var inputs = table.selectAll('input.tag-value') .data();