diff --git a/css/app.css b/css/app.css index 25c687939..42b956ac6 100644 --- a/css/app.css +++ b/css/app.css @@ -876,6 +876,15 @@ a:hover .icon.out-link { background-position: -500px -14px;} height: 100%; border: 1px solid #CCC; border-radius: 0 3px 3px 0; + position: absolute; + top: 0; + right: 0; + width: 10%; + background: #fafafa; +} + +.preset-list-item button.tag-reference-button .icon { + opacity: .5; } .current .preset-list-button, @@ -1006,22 +1015,52 @@ a:hover .icon.out-link { background-position: -500px -14px;} border-radius: 4px 4px 0 0; } +.form-label-button-wrap { + position: absolute; + top: 0; + right: 0; + height: 100%; + width: 100%; + background: transparent; + text-align: right; +} + +.form-label-button-wrap .icon { + opacity: .5; +} + .form-label button { border-left: 1px solid #CCC; + width: 10%; + height: 100%; + display: inline-block; + border-radius: 0; + background: #fafafa; } .form-label .modified-icon { border-right: 0; - opacity: 0; + display: none; z-index: -10; right: 10%; } .modified .form-label .modified-icon { + display: inline-block; opacity: 1; z-index: 1; } +.present .form-label .remove-icon { + display: inline-block; + z-index: 1; +} + +.form-field .remove-icon { + border-radius: 0 0 4px 0; + display: none; +} + .form-label button.tag-reference-button { border-top-right-radius: 3px; } @@ -1039,10 +1078,6 @@ a:hover .icon.out-link { background-position: -500px -14px;} height: 65px; } -.form-field button.remove { - border-radius: 0 0 4px 0; -} - .inspector-border { border-bottom: 1px solid #CCC } @@ -1087,6 +1122,8 @@ a:hover .icon.out-link { background-position: -500px -14px;} .inspector-hover .spin-control, .inspector-hover .hide-toggle:before, .inspector-hover .more-buttons, +.inspector-hover .form-label-button-wrap button, +.inspector-hover .tag-reference-button, .inspector-hover .view-on-osm { opacity: 0; } @@ -1653,6 +1690,10 @@ div.combobox { .tag-row .tag-reference-button { right: 0; + border-radius: 0; + width: 10%; + top: 0; + background: #fafafa; } /* Adding form fields to tag editor */ diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js index 6b05cdd2e..564731658 100644 --- a/js/id/ui/preset.js +++ b/js/id/ui/preset.js @@ -42,6 +42,20 @@ iD.ui.preset = function(context) { return t; }; + field.present = function() { + return _.any(field.keys, function(key) { + return tags[key]; + }); + }; + + field.remove = function() { + var t = {}; + field.keys.forEach(function(key) { + t[key] = undefined; + }); + return t; + }; + return field; } @@ -94,14 +108,24 @@ iD.ui.preset = function(context) { .attr('for', function(field) { return 'preset-input-' + field.id; }) .text(function(field) { return field.label(); }); - $label.append('button') - .attr('class', 'modified-icon minor') + var wrap = $label.append('div') + .attr('class', 'form-label-button-wrap'); + + wrap.append('button') + .attr('class', 'remove-icon') + .append('span').attr('class', 'icon delete'); + + wrap.append('button') + .attr('class', 'modified-icon') .attr('tabindex', -1) .append('div') .attr('class', 'icon undo'); // Update + $fields.select('.form-label-button-wrap .remove-icon') + .on('click', remove); + $fields.select('.modified-icon') .on('click', revert); @@ -110,6 +134,9 @@ iD.ui.preset = function(context) { .classed('modified', function(field) { return field.modified(); }) + .classed('present', function(field) { + return field.present(); + }) .each(function(field) { var reference = iD.ui.TagReference({key: field.key}); @@ -120,7 +147,7 @@ iD.ui.preset = function(context) { d3.select(this) .call(field.input) .call(reference.body) - .select('.form-label') + .select('.form-label-button-wrap') .call(reference.button); field.input.tags(tags); @@ -163,6 +190,12 @@ iD.ui.preset = function(context) { d3.event.preventDefault(); event.change(field.revert()); } + + function remove(field) { + d3.event.stopPropagation(); + d3.event.preventDefault(); + event.change(field.remove()); + } } presets.preset = function(_) { diff --git a/js/id/ui/tag_reference.js b/js/id/ui/tag_reference.js index a17152b56..58552af64 100644 --- a/js/id/ui/tag_reference.js +++ b/js/id/ui/tag_reference.js @@ -104,7 +104,7 @@ iD.ui.TagReference = function(tag) { var enter = button.enter().append('button') .attr('tabindex', -1) - .attr('class', 'tag-reference-button minor'); + .attr('class', 'tag-reference-button'); enter.append('span') .attr('class', 'icon inspect');