diff --git a/css/80_app.css b/css/80_app.css index 3af905565..f7c0e2235 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -2583,21 +2583,9 @@ img.tag-reference-wiki-image { } .form-field-input-member > input.member-role { - border-radius: 0 0 0 4px; -} -.ideditor[dir='rtl'] .form-field-input-member > input.member-role { - border-radius: 0 0 4px 0; -} - -.member-incomplete .form-field-input-member > input.member-role, -.ideditor[dir='rtl'] .member-incomplete .form-field-input-member > input.member-role { border-radius: 0 0 4px 4px; } -.member-incomplete .member-delete { - display: none; -} - .member-row-new .member-entity-input { flex: 1 1 100%; border-radius: 4px 4px 0 0; diff --git a/modules/ui/sections/raw_member_editor.js b/modules/ui/sections/raw_member_editor.js index f99f01438..5e263a87d 100644 --- a/modules/ui/sections/raw_member_editor.js +++ b/modules/ui/sections/raw_member_editor.js @@ -189,6 +189,13 @@ export function uiSectionRawMemberEditor(context) { .attr('class', 'member-entity-name') .text(function(d) { return utilDisplayName(d.member); }); + label + .append('button') + .attr('tabindex', -1) + .attr('title', t('icons.remove')) + .attr('class', 'remove member-delete') + .call(svgIcon('#iD-operation-delete')); + label .append('button') .attr('class', 'member-zoom') @@ -235,13 +242,6 @@ export function uiSectionRawMemberEditor(context) { .attr('placeholder', t('inspector.role')) .call(utilNoAuto); - wrapEnter - .append('button') - .attr('tabindex', -1) - .attr('title', t('icons.remove')) - .attr('class', 'remove form-field-button member-delete') - .call(svgIcon('#iD-operation-delete')); - if (taginfo) { wrapEnter.each(bindTypeahead); } diff --git a/modules/ui/sections/raw_membership_editor.js b/modules/ui/sections/raw_membership_editor.js index 476603c01..3d3da9fb7 100644 --- a/modules/ui/sections/raw_membership_editor.js +++ b/modules/ui/sections/raw_membership_editor.js @@ -61,6 +61,16 @@ export function uiSectionRawMembershipEditor(context) { context.enter(modeSelect(context, [d.relation.id])); } + function zoomToRelation(d) { + d3_event.preventDefault(); + + var entity = context.entity(d.relation.id); + context.map().zoomToEase(entity); + + // highlight the relation in case it wasn't previously on-screen + utilHighlightEntities([d.relation.id], true, context); + } + function changeRole(d) { if (d === 0) return; // called on newrow (shoudn't happen) @@ -236,14 +246,16 @@ export function uiSectionRawMembershipEditor(context) { .attr('class', 'field-label') .attr('for', function(d) { return d.domId; - }) + }); + + var labelLink = labelEnter .append('span') .attr('class', 'label-text') .append('a') .attr('href', '#') .on('click', selectRelation); - labelEnter + labelLink .append('span') .attr('class', 'member-entity-type') .text(function(d) { @@ -251,11 +263,25 @@ export function uiSectionRawMembershipEditor(context) { return (matched && matched.name()) || t('inspector.relation'); }); - labelEnter + labelLink .append('span') .attr('class', 'member-entity-name') .text(function(d) { return utilDisplayName(d.relation); }); + labelEnter + .append('button') + .attr('tabindex', -1) + .attr('class', 'remove member-delete') + .call(svgIcon('#iD-operation-delete')) + .on('click', deleteMembership); + + labelEnter + .append('button') + .attr('class', 'member-zoom') + .attr('title', t('icons.zoom_to')) + .call(svgIcon('#iD-icon-framed-dot', 'monochrome')) + .on('click', zoomToRelation); + var wrapEnter = itemsEnter .append('div') .attr('class', 'form-field-input-wrap form-field-input-member'); @@ -273,13 +299,6 @@ export function uiSectionRawMembershipEditor(context) { .on('blur', changeRole) .on('change', changeRole); - wrapEnter - .append('button') - .attr('tabindex', -1) - .attr('class', 'remove form-field-button member-delete') - .call(svgIcon('#iD-operation-delete')) - .on('click', deleteMembership); - if (taginfo) { wrapEnter.each(bindTypeahead); }