diff --git a/css/app.css b/css/app.css index c3ab06fda..511df7c30 100644 --- a/css/app.css +++ b/css/app.css @@ -552,13 +552,9 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} margin: 0; } -.inspector-inner .info { - color: white; - border-radius: 3px; - text-align: center; - width: 20px; - height: 20px; - float: right; +.inspector-inner .name-help, +.inspector-inner .type-help { + float: right; } .inspector-inner.head { diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js index 481564a76..b5033d7f2 100644 --- a/js/id/ui/preset.js +++ b/js/id/ui/preset.js @@ -76,10 +76,18 @@ iD.ui.preset = function() { }); break; case 'select': + this.append('select') + .selectAll('options') + .data([''].concat(d.options.slice())) + .enter().append('option') + .attr('value', function(d) { return d; }) + .attr('label', function(d) { return d; }); + break; + case 'combo': var w = this.append('span').attr('class', 'input-wrap-position'); i = w.append('input'); w.call(d3.combobox() - .data([''].concat(d.option.slice()).map(function(o) { + .data([''].map(function(o) { return { value: o, title: o }; }))); break; @@ -104,7 +112,7 @@ iD.ui.preset = function() { .attr('class', 'col4 preset-label') .append('label') .attr('for', 'input-' + d.key) - .text(d.key); + .text(d.title || d.key); input.call(wrap.append('div') .attr('class', 'col8 preset-input'), d); }); diff --git a/js/id/ui/presetgrid.js b/js/id/ui/presetgrid.js index 2d71ffbed..ebb59d971 100644 --- a/js/id/ui/presetgrid.js +++ b/js/id/ui/presetgrid.js @@ -22,6 +22,7 @@ iD.ui.PresetGrid = function() { var search = searchwrap.append('input') .attr('class', 'preset-grid-search') + .attr('type', 'search') .on('keyup', function() { var value = search.property('value'), presets = filter(value); diff --git a/js/id/ui/tageditor.js b/js/id/ui/tageditor.js index d41b90967..36acee88a 100644 --- a/js/id/ui/tageditor.js +++ b/js/id/ui/tageditor.js @@ -53,25 +53,18 @@ iD.ui.TagEditor = function() { typewrap.append('button') .attr('tabindex', -1) - .attr('class', 'minor preset-help') + .attr('class', 'minor type-help') .append('span') .attr('class', 'icon inspect'); var namewrap = editorwrap.append('div') .attr('class', 'head inspector-inner fillL'), namelabel = namewrap.append('h4') - .text('Name'), - h2 = namewrap.append('h2'); + .text('Name'); - namewrap.append('button') - .attr('tabindex', -1) - .attr('class', 'minor name-help') - .append('span') - .attr('class', 'icon inspect'); - - - var name = h2.append('input') + var name = namewrap.append('input') .attr('placeholder', 'name') + .attr('type', 'text') .property('value', function() { return entity.tags.name || ''; }) @@ -82,6 +75,12 @@ iD.ui.TagEditor = function() { event.change(); }); + namewrap.append('button') + .attr('tabindex', -1) + .attr('class', 'minor name-help') + .append('span') + .attr('class', 'icon inspect'); + event.on('change.name', function() { var tags = tageditor.tags(); name.property('value', tags.name); @@ -109,7 +108,7 @@ iD.ui.TagEditor = function() { event.message('Edit ' + (presetMatch && presetMatch.name || '')); - var taglistwrap = editorwrap.append('div').call(tagList); + var taglistwrap = editorwrap.append('div').call(tagList, !tagview); tageditor.tags(tags); } diff --git a/js/id/ui/taglist.js b/js/id/ui/taglist.js index 862871cec..15041d1db 100644 --- a/js/id/ui/taglist.js +++ b/js/id/ui/taglist.js @@ -5,15 +5,22 @@ iD.ui.Taglist = function() { list, context; - function taglist(selection) { + function taglist(selection, collapsed) { - //selection.append('h4') - //.text(t('inspector.edit_tags')); + if (collapsed) { + selection.append('h4') + .text('Additional tags') + .on('click', function() { + wrap.call(iD.ui.Toggle(wrap.classed('hide'))); + }); + } - list = selection.append('ul') + var wrap = selection.append('div'); + + list = wrap.append('ul') .attr('class', 'tag-list'); - var newTag = selection.append('button') + var newTag = wrap.append('button') .attr('class', 'add-tag'); newTag.on('click', function() { @@ -28,6 +35,8 @@ iD.ui.Taglist = function() { .attr('class', 'label') .text(t('inspector.new_tag')); + if (collapsed) wrap.classed('hide', true); + } function drawTags(tags) {