CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-15 21:48:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix the width of the add-tag and add-relation buttons

Browse Source 
(closes #5729)
This commit is contained in:
Bryan Housel
2019-01-18 13:48:17 -05:00
parent 46beb31e74
commit 4e3def9ce8
3 changed files with 88 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/80_app.css
+34 -31
View File
@@ -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,
@@ -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;
@@ -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;
@@ -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,
@@ -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;
}
modules/ui/raw_membership_editor.js
+33 -17
View File
@@ -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
@@ -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
@@ -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()
.append('button')
.attr('class', 'add-relation');
// enter
var addRowEnter = addRow.enter()
.append('div')
.attr('class', 'add-row');
// Update
addrel
.merge(addrelEnter)
.call(svgIcon('#iD-icon-plus', 'light'))
addRowEnter
.append('button')
.attr('class', 'add-relation')
.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);
modules/ui/raw_tag_editor.js
+21 -7
View File
@@ -67,6 +67,7 @@ export function uiRawTagEditor(context) {
_newRow = '';
}
// List of tags
var list = wrap.selectAll('.tag-list')
.data([0]);
@@ -75,16 +76,30 @@ 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; });
@@ -92,8 +107,8 @@ export function uiRawTagEditor(context) {
.each(unbind)
.remove();
// Enter
// Enter
var enter = items.enter()
.append('li')
.attr('class', 'tag-row')
@@ -133,7 +148,6 @@ export function uiRawTagEditor(context) {
// Update
items = items
.merge(enter)
.sort(function(a, b) {