diff --git a/css/app.css b/css/app.css index 426bad91e..e3f1442aa 100644 --- a/css/app.css +++ b/css/app.css @@ -658,6 +658,16 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} position: absolute; } +.grid-entry .preset-icon-fill.area { + position: absolute; + opacity: 0.4; + left: 0; right: 0; top: 0; bottom: 0; + border-radius: 4px; + margin: auto; + width: 40px; + height: 40px; +} + .grid-entry .icon { position: absolute; top: 20%;left: 0; right: 0; @@ -685,8 +695,30 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} height: 20px; } -/* Preset form */ +/* Preset icon colors */ + +.preset-icon-fill.tag-amenity, +.preset-icon-fill.tag-shop, +.preset-icon-fill.tag-building { + background-color: #e06e5f; +} + +.preset-icon-fill.tag-natural-water { + background-color: #77d3de; +} + +.preset-icon-fill.tag-landuse, +.preset-icon-fill.tag-natural-wood, +.preset-icon-fill.tag-natural-tree, +.preset-icon-fill.tag-natural-grassland, +.preset-icon-fill.tag-leisure-park { + background-color: #8cd05f; +} + +.preset-icon-fill.tag-amenity-parking { + background-color: #aaa; +} /* Map Controls */ diff --git a/js/id/modes/select.js b/js/id/modes/select.js index 43b110e03..715c499e6 100644 --- a/js/id/modes/select.js +++ b/js/id/modes/select.js @@ -125,6 +125,7 @@ iD.modes.Select = function(context, selection, initial) { if (!_.isEqual(entity.tags, newEntity.tags)) { inspector.tags(newEntity.tags); } + entity = newEntity; } }); diff --git a/js/id/ui/presetgrid.js b/js/id/ui/presetgrid.js index a78c6b7c8..57d03b249 100644 --- a/js/id/ui/presetgrid.js +++ b/js/id/ui/presetgrid.js @@ -53,8 +53,18 @@ iD.ui.PresetGrid = function() { event.choose(d); }); + entered.append('div') + .attr('class', function(d) { + var s = 'preset-icon-fill ' + entity.geometry(context.graph()); + for (var i in d.match.tags) { + s += ' tag-' + i + ' tag-' + i + '-' + d.match.tags[i]; + } + return s; + }); + entered.append('div') .attr('class', function(d) { return 'maki-' + d.icon + '-24 icon'; }); + entered.append('span').attr('class','label').text(name); entries.exit().remove(); diff --git a/js/id/ui/tageditor.js b/js/id/ui/tageditor.js index 000b6ab7e..8ad4ada7a 100644 --- a/js/id/ui/tageditor.js +++ b/js/id/ui/tageditor.js @@ -5,6 +5,7 @@ iD.ui.TagEditor = function() { inspectorbody, entity, tags, + name, presetMatch, presetUI, presetGrid, @@ -40,10 +41,6 @@ iD.ui.TagEditor = function() { event.choose(); }); - // typewrap.append('em') - // .attr('class', 'preset-geometry') - // .text(entity.geometry(context.graph())); - typelabel.append('div') .attr('class', 'icon icon-pre-text' + (presetMatch ? ' maki-' + presetMatch.icon + '-24' : '')); @@ -69,7 +66,7 @@ iD.ui.TagEditor = function() { .property('value', function() { return entity.tags.name || ''; }) - .on('keyup', function() { + .on('blur', function() { var tags = tageditor.tags(); tags.name = this.value; tageditor.tags(tags); @@ -134,6 +131,7 @@ iD.ui.TagEditor = function() { } else { tags = newtags; if (presetUI && tagList) { + name.property('value', tags.name || ''); presetUI.change(tags); tagList.tags(_.omit(tags, _.keys(presetUI.tags() || {}))); } diff --git a/presets/presets.json b/presets/presets.json index 04a046f50..0ca925de1 100644 --- a/presets/presets.json +++ b/presets/presets.json @@ -26,6 +26,30 @@ } ] }, + { + "title": "Park", + "name": "park", + "match": { + "type": ["node", "area"], + "tags": { + "leisure": "park" + } + }, + "icon": "park", + "form": [] + }, + { + "title": "Water", + "name": "water", + "match": { + "type": ["node", "area"], + "tags": { + "natural": "water" + } + }, + "icon": "", + "form": [] + }, { "title": "Supermarket", "name": "supermarket",