Add issue count badges to the bottom info bar when validating Everything

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 {

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

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",

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'));
                 });
         }
 

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';

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')

modules/ui/issues.js

@@ -224,7 +224,7 @@ export function uiIssues(context) {
 
         _options[d] = val;
         context.storage('validate-' + d, val);
-        update();
+        context.validator().validate();
     }
 
 

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);
+        });
+    };
+}

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);
     };