Move the delete membership button from the input to the label (re: #7753)

Add button to zoom to relation from the Relations section
This commit is contained in:
Quincy Morgan
2020-06-29 09:47:58 -04:00
parent 48cee14aeb
commit 02a08ca899
3 changed files with 36 additions and 29 deletions
-12
View File
@@ -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;
+7 -7
View File
@@ -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);
}
+29 -10
View File
@@ -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);
}