From 949ec8afa0c810b8feba9de107fec82640f2a0d3 Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Mon, 14 Oct 2019 17:14:47 +0200 Subject: [PATCH] Add issue count badges to the bottom info bar when validating Everything --- css/80_app.css | 40 ++++++++++++--- data/core.yaml | 2 + dist/locales/en.json | 2 + modules/ui/feature_info.js | 9 ++-- modules/ui/index.js | 1 + modules/ui/init.js | 7 +++ modules/ui/issues.js | 2 +- modules/ui/issues_info.js | 100 ++++++++++++++++++++++++++++++++++++ modules/ui/source_switch.js | 5 +- 9 files changed, 156 insertions(+), 12 deletions(-) create mode 100644 modules/ui/issues_info.js diff --git a/css/80_app.css b/css/80_app.css index 27d8cf3b1..936a294b2 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -4528,6 +4528,9 @@ img.tile-debug { margin-right: 5px; padding: 5px 5px 5px 0; } +#about-list li:empty { + display: none; +} #about-list li:last-child { border-left: 0; @@ -4538,20 +4541,45 @@ img.tile-debug { border-right: none; } -.source-switch a { +#about-list a.chip { padding: 2px 4px 4px 4px; border-radius: 2px; + color: #eee; } -.source-switch a.live { +#about-list a.chip .icon { + width: 14px; + height: 14px; + margin-top: 3px; +} +[dir='ltr'] #about-list a.chip .icon, +[dir='ltr'] #about-list a.chip span { + margin-right: 3px; +} +[dir='rtl'] #about-list a.chip .icon, +[dir='rtl'] #about-list a.chip span { + margin-left: 3px; +} + +.source-switch a.chip.live { background: #d32232; color: #fff; } -.feature-warning a { +.feature-warning a.chip { background: #1e90ff; - padding: 2px 4px 4px 4px; - border-radius: 2px; - color: #eee; +} + +.issues-info a.chip.resolved-count { + background: #15911E; +} +.issues-info a.chip.warnings-count { + background: #DF8500; +} +[dir='ltr'] .issues-info a.chip:not(:last-child) { + margin-right: 5px; +} +[dir='rtl'] .issues-info a.chip:not(:last-child) { + margin-left: 5px; } .user-list a:not(:last-child):after { diff --git a/data/core.yaml b/data/core.yaml index c397fe94e..40611f78b 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -1319,6 +1319,8 @@ en: list_title: "Warnings ({count})" rules: title: Rules + user_resolved_issues: Issues resolved by your edits + warnings_and_errors: Warnings and errors no_issues: message: everything: Everything looks fine diff --git a/dist/locales/en.json b/dist/locales/en.json index e3051e907..bce36bff6 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -1621,6 +1621,8 @@ "rules": { "title": "Rules" }, + "user_resolved_issues": "Issues resolved by your edits", + "warnings_and_errors": "Warnings and errors", "no_issues": { "message": { "everything": "Everything looks fine", diff --git a/modules/ui/feature_info.js b/modules/ui/feature_info.js index db988d173..6696ca17f 100644 --- a/modules/ui/feature_info.js +++ b/modules/ui/feature_info.js @@ -1,4 +1,4 @@ -import { event as d3_event } from 'd3-selection'; +import { event as d3_event, select as d3_select } from 'd3-selection'; import { t } from '../util/locale'; import { uiTooltipHtml } from './tooltipHtml'; @@ -28,14 +28,17 @@ export function uiFeatureInfo(context) { }); var warning = selection.append('a') + .attr('class', 'chip') .attr('href', '#') .attr('tabindex', -1) .html(t('feature_info.hidden_warning', { count: count })) .call(tooltipBehavior) .on('click', function() { - tooltipBehavior.hide(warning); - // open map data panel? d3_event.preventDefault(); + + tooltipBehavior.hide(warning); + // open the Map Data pane + context.ui().togglePanes(d3_select('.map-panes .map-data-pane')); }); } diff --git a/modules/ui/index.js b/modules/ui/index.js index 137bae15e..2bb8a70c2 100644 --- a/modules/ui/index.js +++ b/modules/ui/index.js @@ -34,6 +34,7 @@ export { uiImproveOsmEditor } from './improveOSM_editor'; export { uiImproveOsmHeader } from './improveOSM_header'; export { uiInfo } from './info'; export { uiInspector } from './inspector'; +export { uiIssuesInfo } from './issues_info'; export { uiKeepRightDetails } from './keepRight_details'; export { uiKeepRightEditor } from './keepRight_editor'; export { uiKeepRightHeader } from './keepRight_header'; diff --git a/modules/ui/init.js b/modules/ui/init.js index 7d1e2dcde..5746d077a 100644 --- a/modules/ui/init.js +++ b/modules/ui/init.js @@ -23,6 +23,7 @@ import { uiHelp } from './help'; import { uiInfo } from './info'; import { uiIntro } from './intro'; import { uiIssues } from './issues'; +import { uiIssuesInfo } from './issues_info'; import { uiLoading } from './loading'; import { uiMapData } from './map_data'; import { uiMapInMap } from './map_in_map'; @@ -207,6 +208,12 @@ export function uiInit(context) { .attr('tabindex', -1) .call(uiFeatureInfo(context)); + aboutList + .append('li') + .attr('class', 'issues-info') + .attr('tabindex', -1) + .call(uiIssuesInfo(context)); + aboutList .append('li') .attr('class', 'user-list') diff --git a/modules/ui/issues.js b/modules/ui/issues.js index e78cea04e..77b58ca56 100644 --- a/modules/ui/issues.js +++ b/modules/ui/issues.js @@ -224,7 +224,7 @@ export function uiIssues(context) { _options[d] = val; context.storage('validate-' + d, val); - update(); + context.validator().validate(); } diff --git a/modules/ui/issues_info.js b/modules/ui/issues_info.js new file mode 100644 index 000000000..0874d4b06 --- /dev/null +++ b/modules/ui/issues_info.js @@ -0,0 +1,100 @@ +import { event as d3_event, select as d3_select } from 'd3-selection'; + +import { svgIcon } from '../svg/icon'; +import { t } from '../util/locale'; +import { tooltip } from '../util/tooltip'; + + +export function uiIssuesInfo(context) { + + var warningsItem = { + id: 'warnings', + count: 0, + iconID: 'iD-icon-alert', + descriptionID: 'issues.warnings_and_errors' + }; + + var resolvedItem = { + id: 'resolved', + count: 0, + iconID: 'iD-icon-apply', + descriptionID: 'issues.user_resolved_issues' + }; + + function update(selection) { + + var shownItems = []; + + if (context.storage('validate-what') === 'all') { + + var liveIssues = context.validator().getIssues({ + what: context.storage('validate-what') || 'edited', + where: context.storage('validate-where') || 'all' + }); + if (liveIssues.length) { + warningsItem.count = liveIssues.length; + shownItems.push(warningsItem); + } + + var resolvedIssues = context.validator().getResolvedIssues(); + if (resolvedIssues.length) { + resolvedItem.count = resolvedIssues.length; + shownItems.push(resolvedItem); + } + } + + var chips = selection.selectAll('.chip') + .data(shownItems, function(d) { + return d.id; + }); + + chips.exit().remove(); + + var enter = chips.enter() + .append('a') + .attr('class', function(d) { + return 'chip ' + d.id + '-count'; + }) + .attr('href', '#') + .attr('tabindex', -1) + .each(function(d) { + + var chipSelection = d3_select(this); + + var tooltipBehavior = tooltip() + .placement('top') + .title(t(d.descriptionID)); + + chipSelection + .call(tooltipBehavior) + .on('click', function() { + d3_event.preventDefault(); + + tooltipBehavior.hide(d3_select(this)); + // open the Issues pane + context.ui().togglePanes(d3_select('.map-panes .issues-pane')); + }); + + chipSelection.call(svgIcon('#' + d.iconID)); + + }); + + enter.append('span') + .attr('class', 'count'); + + enter.merge(chips) + .selectAll('span.count') + .text(function(d) { + return d.count.toString(); + }); + } + + + return function(selection) { + update(selection); + + context.validator().on('validated.infobox', function() { + update(selection); + }); + }; +} diff --git a/modules/ui/source_switch.js b/modules/ui/source_switch.js index 2af3e463e..e201b43cd 100644 --- a/modules/ui/source_switch.js +++ b/modules/ui/source_switch.js @@ -32,7 +32,8 @@ export function uiSourceSwitch(context) { d3_select(this) .text(isLive ? t('source_switch.live') : t('source_switch.dev')) - .classed('live', isLive); + .classed('live', isLive) + .classed('chip', isLive); osm.switch(isLive ? keys[0] : keys[1]); // switch connection (warning: dispatches 'change' event) } @@ -42,7 +43,7 @@ export function uiSourceSwitch(context) { .append('a') .attr('href', '#') .text(t('source_switch.live')) - .classed('live', true) + .attr('class', 'live chip') .on('click', click); };