Add basic title + description UI

modules/ui/improveOSM_details.js

@@ -0,0 +1,127 @@
+import {
+    event as d3_event,
+    select as d3_select
+} from 'd3-selection';
+
+import { dataEn } from '../../data';
+import { modeSelect } from '../modes';
+import { t } from '../util/locale';
+import { utilDisplayName, utilEntityOrMemberSelector, utilEntityRoot } from '../util';
+
+
+export function uiImproveOsmDetails(context) {
+    var _error;
+
+
+    function errorDetail(d) {
+        var unknown = t('inspector.unknown');
+
+        if (!d) return unknown;
+        var errorType = d.parent_error_type;
+        var et = dataEn.QA.improveOSM.error_types[errorType];
+
+        var detail;
+        if (et && et.description) {
+            detail = t('QA.improveOSM.error_types.' + errorType + '.description');
+        } else {
+            detail = unknown;
+        }
+
+        return detail;
+    }
+
+
+    function improveOsmDetails(selection) {
+        var details = selection.selectAll('.kr_error-details')
+            .data(
+                (_error ? [_error] : []),
+                function(d) { return d.id + '-' + (d.status || 0); }
+            );
+
+        details.exit()
+            .remove();
+
+        var detailsEnter = details.enter()
+            .append('div')
+            .attr('class', 'kr_error-details kr_error-details-container');
+
+
+        // description
+        var descriptionEnter = detailsEnter
+            .append('div')
+            .attr('class', 'kr_error-details-description');
+
+        descriptionEnter
+            .append('h4')
+            .text(function() { return t('QA.keepRight.detail_description'); });
+
+        descriptionEnter
+            .append('div')
+            .attr('class', 'kr_error-details-description-text')
+            .html(errorDetail);
+
+        // If there are entity links in the error message..
+        descriptionEnter.selectAll('.kr_error_entity_link, .kr_error_object_link')
+            .each(function() {
+                var link = d3_select(this);
+                var isObjectLink = link.classed('kr_error_object_link');
+                var entityID = isObjectLink ?
+                    (utilEntityRoot(_error.object_type) + _error.object_id)
+                    : this.textContent;
+                var entity = context.hasEntity(entityID);
+
+                // Add click handler
+                link
+                    .on('mouseover', function() {
+                        context.surface().selectAll(utilEntityOrMemberSelector([entityID], context.graph()))
+                            .classed('hover', true);
+                    })
+                    .on('mouseout', function() {
+                        context.surface().selectAll('.hover')
+                            .classed('hover', false);
+                    })
+                    .on('click', function() {
+                        d3_event.preventDefault();
+                        var osmlayer = context.layers().layer('osm');
+                        if (!osmlayer.enabled()) {
+                            osmlayer.enabled(true);
+                        }
+
+                        context.map().centerZoom(_error.loc, 20);
+
+                        if (entity) {
+                            context.enter(modeSelect(context, [entityID]));
+                        } else {
+                            context.loadEntity(entityID, function() {
+                                context.enter(modeSelect(context, [entityID]));
+                            });
+                        }
+                    });
+
+                // Replace with friendly name if possible
+                // (The entity may not yet be loaded into the graph)
+                if (entity) {
+                    var name = utilDisplayName(entity);  // try to use common name
+
+                    if (!name && !isObjectLink) {
+                        var preset = context.presets().match(entity, context.graph());
+                        name = preset && !preset.isFallback() && preset.name();  // fallback to preset name
+                    }
+
+                    if (name) {
+                        this.innerText = name;
+                    }
+                }
+            });
+    }
+
+
+    improveOsmDetails.error = function(val) {
+        if (!arguments.length) return _error;
+        _error = val;
+        return improveOsmDetails;
+    };
+
+
+    return improveOsmDetails;
+}

modules/ui/improveOSM_editor.js

@@ -0,0 +1,90 @@
+import { dispatch as d3_dispatch } from 'd3-dispatch';
+import { select as d3_select } from 'd3-selection';
+
+import { t } from '../util/locale';
+import { services } from '../services';
+import { modeBrowse } from '../modes';
+import { svgIcon } from '../svg';
+
+import {
+    uiImproveOsmDetails,
+    uiImproveOsmHeader,
+    uiQuickLinks,
+    uiTooltipHtml
+} from './index';
+
+import { utilNoAuto, utilRebind } from '../util';
+
+
+export function uiImproveOsmEditor(context) {
+    var dispatch = d3_dispatch('change');
+    var errorDetails = uiImproveOsmDetails(context);
+    var errorHeader = uiImproveOsmHeader(context);
+    var quickLinks = uiQuickLinks();
+
+    var _error;
+
+
+    function improveOsmEditor(selection) {
+        // quick links
+        var choices = [{
+            id: 'zoom_to',
+            label: 'inspector.zoom_to.title',
+            tooltip: function() {
+                return uiTooltipHtml(t('inspector.zoom_to.tooltip_issue'), t('inspector.zoom_to.key'));
+            },
+            click: function zoomTo() {
+                context.mode().zoomToSelected();
+            }
+        }];
+
+
+        var header = selection.selectAll('.header')
+            .data([0]);
+
+        var headerEnter = header.enter()
+            .append('div')
+            .attr('class', 'header fillL');
+
+        headerEnter
+            .append('button')
+            .attr('class', 'fr keepRight-editor-close')
+            .on('click', function() {
+                context.enter(modeBrowse(context));
+            })
+            .call(svgIcon('#iD-icon-close'));
+
+        headerEnter
+            .append('h3')
+            .text(t('QA.improveOSM.title'));
+
+
+        var body = selection.selectAll('.body')
+            .data([0]);
+
+        body = body.enter()
+            .append('div')
+            .attr('class', 'body')
+            .merge(body);
+
+        var editor = body.selectAll('.keepRight-editor')
+            .data([0]);
+
+        editor.enter()
+            .append('div')
+            .attr('class', 'modal-section keepRight-editor')
+            .merge(editor)
+            .call(errorHeader.error(_error))
+            .call(quickLinks.choices(choices))
+            .call(errorDetails.error(_error));
+    }
+
+    improveOsmEditor.error = function(val) {
+        if (!arguments.length) return _error;
+        _error = val;
+        return improveOsmEditor;
+    };
+
+
+    return utilRebind(improveOsmEditor, dispatch, 'on');
+}

modules/ui/improveOSM_header.js

@@ -0,0 +1,66 @@
+import { dataEn } from '../../data';
+import { svgIcon } from '../svg';
+import { t } from '../util/locale';
+
+
+export function uiImproveOsmHeader() {
+    var _error;
+
+
+    function errorTitle(d) {
+        var unknown = t('inspector.unknown');
+
+        if (!d) return unknown;
+        var errorType = d.parent_error_type;
+        var et = dataEn.QA.improveOSM.error_types[errorType];
+
+        if (et && et.title) {
+            return t('QA.improveOSM.error_types.' + errorType + '.title');
+        } else {
+            return unknown;
+        }
+    }
+
+
+    function improveOsmHeader(selection) {
+        var header = selection.selectAll('.kr_error-header')
+            .data(
+                (_error ? [_error] : []),
+                function(d) { return d.id + '-' + (d.status || 0); }
+            );
+
+        header.exit()
+            .remove();
+
+        var headerEnter = header.enter()
+            .append('div')
+            .attr('class', 'kr_error-header');
+
+        var iconEnter = headerEnter
+            .append('div')
+            .attr('class', 'kr_error-header-icon')
+            .classed('new', function(d) { return d.id < 0; });
+
+        iconEnter
+            .append('div')
+            .attr('class', function(d) {
+                return 'preset-icon-28 iOSM_error iOSM_error-' + d.id + ' iOSM_error_type_' + d.parent_error_type;
+            })
+            .call(svgIcon('#iD-icon-bolt', 'iOSM_error-fill'));
+
+        headerEnter
+            .append('div')
+            .attr('class', 'kr_error-header-label')
+            .text(errorTitle);
+    }
+
+
+    improveOsmHeader.error = function(val) {
+        if (!arguments.length) return _error;
+        _error = val;
+        return improveOsmHeader;
+    };
+
+
+    return improveOsmHeader;
+}

modules/ui/index.js

@@ -28,6 +28,9 @@ export { uiFormFields } from './form_fields';
 export { uiFullScreen } from './full_screen';
 export { uiGeolocate } from './geolocate';
 export { uiHelp } from './help';
+export { uiImproveOsmDetails } from './improveOSM_details';
+export { uiImproveOsmEditor } from './improveOSM_editor';
+export { uiImproveOsmHeader } from './improveOSM_header';
 export { uiInfo } from './info';
 export { uiInspector } from './inspector';
 export { uiKeepRightDetails } from './keepRight_details';