diff --git a/css/80_app.css b/css/80_app.css index a8e255a0e..ab1b8e156 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -1253,7 +1253,6 @@ a.hide-toggle { top: 0; right: 0; height: 100%; - width: 100%; background: transparent; text-align: right; } diff --git a/data/core.yaml b/data/core.yaml index ff8df3ff6..55b846840 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -4,6 +4,7 @@ en: information: info remove: remove undo: undo + zoom_to: zoom to modes: add_area: title: Area diff --git a/dist/locales/en.json b/dist/locales/en.json index c3d5d4fd2..81e861d3c 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -4,7 +4,8 @@ "download": "download", "information": "info", "remove": "remove", - "undo": "undo" + "undo": "undo", + "zoom_to": "zoom to" }, "modes": { "add_area": { diff --git a/modules/ui/raw_member_editor.js b/modules/ui/raw_member_editor.js index 86224afc6..c510ec94d 100644 --- a/modules/ui/raw_member_editor.js +++ b/modules/ui/raw_member_editor.js @@ -30,6 +30,17 @@ export function uiRawMemberEditor(context) { context.loadEntity(d.id); } + function zoomToMember(d) { + d3_event.preventDefault(); + + var entity = context.entity(d.id); + context.map().zoomTo(entity); + + // highlight the feature in case it wasn't previously on-screen + var selectorPrefix = d.type === 'node' ? 'g.' : 'path.'; + context.surface().selectAll(selectorPrefix+d.id).classed('highlighted', true); + } + function selectMember(d) { d3_event.preventDefault(); @@ -133,22 +144,34 @@ export function uiRawMemberEditor(context) { }); var label = d3_select(this).append('label') - .attr('class', 'form-label') - .append('a') + .attr('class', 'form-label'); + + // add the button wrap beneath the label text + var buttonWrap = label.append('div') + .attr('class', 'form-label-button-wrap'); + + var labelLink = label.append('a') .attr('href', '#') .on('click', selectMember); - label.append('span') + labelLink.append('span') .attr('class', 'member-entity-type') .text(function(d) { var matched = context.presets().match(d.member, context.graph()); return (matched && matched.name()) || utilDisplayType(d.member.id); }); - label.append('span') + labelLink.append('span') .attr('class', 'member-entity-name') .text(function(d) { return utilDisplayName(d.member); }); + buttonWrap.append('button') + .attr('class', 'download-icon') + .attr('title', t('icons.zoom_to')) + .attr('tabindex', -1) + .call(svgIcon('#iD-icon-geolocate')) + .on('click', zoomToMember); + } else { var incompleteLabel = d3_select(this).append('label') .attr('class', 'form-label'); @@ -186,6 +209,7 @@ export function uiRawMemberEditor(context) { enter .append('button') .attr('tabindex', -1) + .attr('title', t('icons.remove')) .attr('class', 'remove button-input-action member-delete minor') .on('click', deleteMember) .call(svgIcon('#iD-operation-delete'));