From 28dd2c45077c1c881dedf9b3eaa7afabb4312e7f Mon Sep 17 00:00:00 2001 From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com> Date: Fri, 18 Sep 2020 13:58:41 -0400 Subject: [PATCH] Make the errors, warnings, and changes lists in the commit sidebar keyboard-navigable (re: #8004) --- css/80_app.css | 69 ++++++++++++---------------------- modules/ui/commit_warnings.js | 45 +++++++++++----------- modules/ui/sections/changes.js | 24 +++++------- 3 files changed, 58 insertions(+), 80 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 8ca4c244c..7e9446a40 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -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; } diff --git a/modules/ui/commit_warnings.js b/modules/ui/commit_warnings.js index 2ed0e8912..d9eb362a4 100644 --- a/modules/ui/commit_warnings.js +++ b/modules/ui/commit_warnings.js @@ -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); + }); } } diff --git a/modules/ui/sections/changes.js b/modules/ui/sections/changes.js index c30bfce35..5d03cb1de 100644 --- a/modules/ui/sections/changes.js +++ b/modules/ui/sections/changes.js @@ -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 });