Skip to content

Commit

Permalink
Fix the width of the add-tag and add-relation buttons
Browse files Browse the repository at this point in the history 
(closes #5729)
  • Loading branch information
@bhousel
bhousel committed Jan 18, 2019
1 parent 46beb31 commit 4e3def9
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 54 deletions.
65 changes: 34 additions & 31 deletions css/80_app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2128,7 +2128,7 @@ div.combobox {
}
.tag-row .key-wrap,
.tag-row .value-wrap {
flex: 1 1 auto;
flex: 1 1 50%;
}

.tag-row.readonly,
Expand Down Expand Up @@ -2225,22 +2225,6 @@ div.combobox {
border-right-width: 0;
}

/* Adding form fields to tag editor */
.raw-tag-editor .add-tag {
width: 40%;
height: 30px;
border-top: 0;
background: rgba(0,0,0,.5);
border-radius: 0 0 4px 4px;
}
.raw-tag-editor .add-tag:focus,
.raw-tag-editor .add-tag:hover {
background: rgba(0,0,0,.8);
}
.raw-tag-editor .add-tag .label {
display: none;
}

/* Tag reference */
.tag-reference-loading {
background-color: #f5f5f5;
Expand Down Expand Up @@ -2325,18 +2309,6 @@ div.combobox {
border: 0;
}

.add-relation {
width: 40%;
height: 30px;
background: rgba(0,0,0,.5);
border-radius: 4px;
margin-top: 10px;
}
.add-relation:focus,
.add-relation:hover {
background: rgba(0,0,0,.8);
}

/* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
.raw-membership-editor.inspector-inner {
margin-bottom: 150px;
Expand All @@ -2351,6 +2323,38 @@ input.key-trap {
}


/* add tag, add relation buttons */
.add-row {
display: flex;
width: 100%;
flex-flow: row nowrap;
}
.add-row .add-tag,
.add-row .add-relation,
.add-row .space-value {
flex: 1 1 50%;
}
.add-row .space-buttons {
flex: 0 0 62px;
}
.add-row button {
height: 30px;
background: rgba(0,0,0,.5);
}
.add-row button:focus,
.add-row button:hover {
background: rgba(0,0,0,.8);
}

.add-tag {
border-radius: 0 0 4px 4px;
}
.add-relation {
margin-top: 10px;
border-radius: 4px;
}


/* Inspector (hover styles)
------------------------------------------------------- */
.inspector-hover .form-field-input-wrap .label,
Expand Down Expand Up @@ -2395,8 +2399,7 @@ input.key-trap {
.inspector-hover .form-field-input-radio label,
.inspector-hover .form-field-input-radio label span,
.inspector-hover .form-field-input-radio label.remove .icon,
.inspector-hover .inspector-inner .add-tag,
.inspector-hover .inspector-inner .add-relation {
.inspector-hover .inspector-inner .add-row {
display: none;
}

Expand Down
48 changes: 32 additions & 16 deletions modules/ui/raw_membership_editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,12 +187,13 @@ export function uiRawMembershipEditor(context) {

itemsEnter.each(function(d){
// highlight the relation in the map while hovering on the list item
d3_select(this).on('mouseover', function() {
utilHighlightEntity(d.relation.id, true, context);
});
d3_select(this).on('mouseout', function() {
utilHighlightEntity(d.relation.id, false, context);
});
d3_select(this)
.on('mouseover', function() {
utilHighlightEntity(d.relation.id, true, context);
})
.on('mouseout', function() {
utilHighlightEntity(d.relation.id, false, context);
});
});

var labelEnter = itemsEnter
Expand Down Expand Up @@ -281,11 +282,11 @@ export function uiRawMembershipEditor(context) {
.append('button')
.attr('tabindex', -1)
.attr('class', 'remove form-field-button member-delete')
.call(svgIcon('#iD-operation-delete'))
.on('click', function() {
list.selectAll('.member-row-new')
.remove();
})
.call(svgIcon('#iD-operation-delete'));
});

// Update
newMembership = newMembership
Expand All @@ -301,18 +302,33 @@ export function uiRawMembershipEditor(context) {
);


var addrel = selection.selectAll('.add-relation')
// Container for the Add button
var addRow = selection.selectAll('.add-row')
.data([0]);

// Enter
var addrelEnter = addrel.enter()
// enter
var addRowEnter = addRow.enter()
.append('div')
.attr('class', 'add-row');

addRowEnter
.append('button')
.attr('class', 'add-relation');
.attr('class', 'add-relation')
.call(svgIcon('#iD-icon-plus', 'light'));

// Update
addrel
.merge(addrelEnter)
.call(svgIcon('#iD-icon-plus', 'light'))
addRowEnter
.append('div')
.attr('class', 'space-value'); // preserve space

addRowEnter
.append('div')
.attr('class', 'space-buttons'); // preserve space

// update
addRow = addRow
.merge(addRowEnter);

addRow.select('.add-relation')
.on('click', function() {
_showBlank = true;
content(selection);
Expand Down
28 changes: 21 additions & 7 deletions modules/ui/raw_tag_editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ export function uiRawTagEditor(context) {
_newRow = '';
}

// List of tags
var list = wrap.selectAll('.tag-list')
.data([0]);

Expand All @@ -75,25 +76,39 @@ export function uiRawTagEditor(context) {
.attr('class', 'tag-list')
.merge(list);

var newTag = wrap.selectAll('.add-tag')
.data([0]);

newTag.enter()
// Container for the Add button
var addRowEnter = wrap.selectAll('.add-row')
.data([0])
.enter()
.append('div')
.attr('class', 'add-row');

addRowEnter
.append('button')
.attr('class', 'add-tag')
.on('click', addTag)
.call(svgIcon('#iD-icon-plus', 'light'));
.call(svgIcon('#iD-icon-plus', 'light'))
.on('click', addTag);

addRowEnter
.append('div')
.attr('class', 'space-value'); // preserve space

addRowEnter
.append('div')
.attr('class', 'space-buttons'); // preserve space


// Tag list items
var items = list.selectAll('.tag-row')
.data(entries, function(d) { return d.key; });

items.exit()
.each(unbind)
.remove();

// Enter

// Enter
var enter = items.enter()
.append('li')
.attr('class', 'tag-row')
Expand Down Expand Up @@ -133,7 +148,6 @@ export function uiRawTagEditor(context) {


// Update

items = items
.merge(enter)
.sort(function(a, b) {
Expand Down

0 comments on commit 4e3def9

Please sign in to comment.