Make the errors, warnings, and changes lists in the commit sidebar keyboard-navigable (re: #8004)

This commit is contained in:
Quincy Morgan
2020-09-18 13:58:41 -04:00
parent 7157feba20
commit 28dd2c4507
3 changed files with 58 additions and 80 deletions

View File

@@ -3101,8 +3101,7 @@ div.full-screen > button:focus {
.layer-list li:not(:last-child) {
border-bottom: 1px solid #ccc;
}
.layer-list li:active,
.layer-list li:focus {
.layer-list li:active {
background-color: #ececec;
}
@media (hover: hover) {
@@ -3291,7 +3290,7 @@ button.autofix.action.active {
.warnings-list .issue.severity-warning .issue-label,
.issue.severity-warning .issue-fix-list,
.ideditor.mode-save .warning-section {
.warning-section {
background: #ffc;
}
@@ -3344,7 +3343,7 @@ button.autofix.action.active {
.errors-list .issue.severity-error .issue-label,
.issue.severity-error .issue-fix-list,
.ideditor.mode-save .error-section {
.error-section {
background: #ffd6d6;
}
@@ -5006,20 +5005,20 @@ img.tile-debug {
/* Save Mode
------------------------------------------------------- */
.ideditor.mode-save a.user-info {
a.user-info {
display: inline-block;
}
.ideditor.mode-save .commit-form {
.commit-form {
margin-bottom: 0;
}
.ideditor.mode-save .user-info img {
.user-info img {
float: left;
}
.note-save .field-warning,
.ideditor.mode-save .field-warning {
.field-warning {
background: #ffb;
border: 1px solid #ccc;
border-radius: 4px;
@@ -5027,63 +5026,45 @@ img.tile-debug {
}
.note-save .field-warning:empty,
.ideditor.mode-save .field-warning:empty {
.field-warning:empty {
display: none;
}
.ideditor.mode-save .field-warning,
.ideditor.mode-save .changeset-info,
.ideditor.mode-save .request-review,
.ideditor.mode-save .commit-info {
.field-warning,
.changeset-info,
.request-review,
.commit-info {
margin-bottom: 10px;
}
.ideditor.mode-save .request-review label {
.request-review label {
cursor: pointer;
}
.ideditor.mode-save .changeset-list {
.changeset-list {
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
margin-bottom: 10px;
overflow: hidden;
}
.ideditor.mode-save .warning-section .changeset-list button {
border-left: 1px solid #ccc;
}
.ideditor.mode-save .changeset-list li {
position: relative;
border-top: 1px solid #ccc;
.changeset-list li button {
padding: 5px 10px;
cursor: pointer;
width: 100%;
border-radius: 0;
text-align: initial;
}
.ideditor.mode-save .changeset-list li:focus,
.ideditor.mode-save .changeset-list li:active {
background-color: #ececec;
.changeset-list li {
border-top: 1px solid #ccc;
}
@media (hover: hover) {
.ideditor.mode-save .changeset-list li:hover {
background-color: #ececec;
}
.changeset-list li:first-child {
border-top: 0;
}
.ideditor.mode-save .changeset-list .alert {
.changeset-list .alert {
opacity: 0.5;
}
.changeset-list li span.count {
font-size: 10px;
color: #555;
}
.changeset-list li span.count:before { content: '('; }
.changeset-list li span.count:after { content: ')'; }
.changeset-list li:first-child { border-top: 0;}
/* Conflict resolution
------------------------------------------------------- */
@@ -5097,7 +5078,7 @@ img.tile-debug {
padding: 20px;
}
.ideditor.mode-save button.conflicts-button {
button.conflicts-button {
float: left;
}

View File

@@ -47,28 +47,8 @@ export function uiCommitWarnings(context) {
.append('li')
.attr('class', issueItem);
itemsEnter
.call(svgIcon('#iD-icon-alert', 'pre-text'));
itemsEnter
.append('strong')
.attr('class', 'issue-message');
itemsEnter.filter(function(d) { return d.tooltip; })
.call(uiTooltip()
.title(function(d) { return d.tooltip; })
.placement('top')
);
items = itemsEnter
.merge(items);
items.selectAll('.issue-message')
.text(function(d) {
return d.message(context);
});
items
var buttons = itemsEnter
.append('button')
.on('mouseover', function(d) {
if (d.entityIds) {
context.surface().selectAll(
@@ -86,6 +66,27 @@ export function uiCommitWarnings(context) {
.on('click', function(d) {
context.validator().focusIssue(d);
});
buttons
.call(svgIcon('#iD-icon-alert', 'pre-text'));
buttons
.append('strong')
.attr('class', 'issue-message');
buttons.filter(function(d) { return d.tooltip; })
.call(uiTooltip()
.title(function(d) { return d.tooltip; })
.placement('top')
);
items = itemsEnter
.merge(items);
items.selectAll('.issue-message')
.text(function(d) {
return d.message(context);
});
}
}

View File

@@ -59,18 +59,24 @@ export function uiSectionChanges(context) {
.append('li')
.attr('class', 'change-item');
itemsEnter
var buttons = itemsEnter
.append('button')
.on('mouseover', mouseover)
.on('mouseout', mouseout)
.on('click', click);
buttons
.each(function(d) {
d3_select(this)
.call(svgIcon('#iD-icon-' + d.entity.geometry(d.graph), 'pre-text ' + d.changeType));
});
itemsEnter
buttons
.append('span')
.attr('class', 'change-type')
.text(function(d) { return t('commit.' + d.changeType) + ' '; });
itemsEnter
buttons
.append('strong')
.attr('class', 'entity-type')
.text(function(d) {
@@ -78,7 +84,7 @@ export function uiSectionChanges(context) {
return (matched && matched.name()) || utilDisplayType(d.entity.id);
});
itemsEnter
buttons
.append('span')
.attr('class', 'entity-name')
.text(function(d) {
@@ -90,19 +96,9 @@ export function uiSectionChanges(context) {
return string += ' ' + name;
});
itemsEnter
.style('opacity', 0)
.transition()
.style('opacity', 1);
items = itemsEnter
.merge(items);
items
.on('mouseover', mouseover)
.on('mouseout', mouseout)
.on('click', click);
// Download changeset link
var changeset = new osmChangeset().update({ id: undefined });