diff --git a/data/core.yaml b/data/core.yaml index c5435603d..1e25b11dc 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -886,6 +886,15 @@ en: title: Issues description: Issues key: I + options: + title: Options + feature_applicability: + edited: + description: Edited features only + tooltip: Only issues for features you change will be flagged + all: + description: All features + tooltip: Issues for all loaded features will be flagged intro: done: done ok: OK diff --git a/dist/locales/en.json b/dist/locales/en.json index 064f48da2..4f27dd7a3 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -1051,7 +1051,20 @@ "issues": { "title": "Issues", "description": "Issues", - "key": "I" + "key": "I", + "options": { + "title": "Options" + }, + "feature_applicability": { + "edited": { + "description": "Edited features only", + "tooltip": "Only issues for features you change will be flagged" + }, + "all": { + "description": "All features", + "tooltip": "Issues for all loaded features will be flagged" + } + } }, "intro": { "done": "done", diff --git a/modules/ui/issues.js b/modules/ui/issues.js index bcf2d0834..694a5272c 100644 --- a/modules/ui/issues.js +++ b/modules/ui/issues.js @@ -7,7 +7,9 @@ import { svgIcon } from '../svg'; import { t, textDirection } from '../util/locale'; import { tooltip } from '../util/tooltip'; import { geoExtent } from '../geo'; -import { modeBrowse } from '../modes'; +import { modeBrowse, + modeSelect +} from '../modes'; import { uiBackground } from './background'; import { uiDisclosure } from './disclosure'; import { uiHelp } from './help'; @@ -18,10 +20,171 @@ import { uiTooltipHtml } from './tooltipHtml'; export function uiIssues(context) { var key = t('issues.key'); + var featureApplicability = ['edited', 'all']; + var _issuesOptionsContainer = d3_select(null); + var _featureApplicabilityList = d3_select(null); + var _issuesList = d3_select(null); var _shown = false; + var _selectedFeatureApplicability = context.storage('issue-features') || 'edited'; + + function renderIssuesOptions(selection) { + var container = selection.selectAll('.issues-options-container') + .data([0]); + + _issuesOptionsContainer = container.enter() + .append('div') + .attr('class', 'issues-options-container') + .merge(container); + + _featureApplicabilityList = container.selectAll('.feature-applicability-list') + .data([0]); + + _featureApplicabilityList = container.enter() + .append('ul') + .attr('class', 'layer-list feature-applicability-list') + .merge(_featureApplicabilityList); + } + + function renderIssuesList(selection) { + _issuesList = selection.selectAll('.issues-list') + .data([0]); + + _issuesList = _issuesList.enter() + .append('ul') + .attr('class', 'layer-list issues-list') + .merge(_issuesList); + } + + function drawListItems(selection, data, type, name, change, active) { + var items = selection.selectAll('li') + .data(data); + + // Exit + items.exit() + .remove(); + + // Enter + var enter = items.enter() + .append('li') + .attr('class', 'layer') + .call(tooltip() + .html(true) + .title(function(d) { + var tip = t('issues.' + name + '.' + d + '.tooltip'); + return uiTooltipHtml(tip); + }) + .placement('bottom') + ); + + var label = enter + .append('label'); + + label + .append('input') + .attr('type', type) + .attr('name', name) + .on('change', change); + + label + .append('span') + .text(function(d) { return t('issues.' + name + '.' + d + '.description'); }); + + // Update + items = items + .merge(enter); + + items + .classed('active', active) + .selectAll('input') + .property('checked', active) + .property('indeterminate', function(d) { + return (name === 'feature' && autoHiddenFeature(d)); + }); + } + + function drawIssuesList(selection) { + + var name = 'issues_list'; + + var changes = context.history().changes(); + var validations = context.history().validate(changes); + + /*validations = _reduce(validations, function(validations, val) { + var severity = val.severity; + if (validations.hasOwnProperty(severity)) { + validations[severity].push(val); + } else { + validations[severity] = [val]; + } + return validations; + }, {});*/ + + var items = selection.selectAll('li') + .data(validations); + + // Exit + items.exit() + .remove(); + + // Enter + var enter = items.enter() + .append('li') + .attr('class', 'layer') + .call(tooltip() + .html(true) + .title(function(d) { + var tip = d.tooltip; + return uiTooltipHtml(tip); + }) + .placement('bottom') + ) + .on('click', function(d) { + context.enter(modeSelect(context, [d.entity.id])); + }); + + var label = enter + .append('label'); + + /*label + .append('input') + .attr('type', type) + .attr('name', name) + .on('change', change); +*/ + label + .append('span') + .text(function(d) { return d.message; }); + + // Update + items = items + .merge(enter); + + /* items + .classed('active', active) + .selectAll('input') + .property('checked', active) + .property('indeterminate', function(d) { + return (name === 'feature' && autoHiddenFeature(d)); + });*/ + } + + function showsFeatureApplicability(d) { + return _selectedFeatureApplicability === d; + } + + + function _setFeatureApplicability(d) { + _selectedFeatureApplicability = d; + context.storage('issue-features', d); + update(); + } function update() { + _featureApplicabilityList + .call(drawListItems, featureApplicability, 'radio', 'feature_applicability', _setFeatureApplicability, showsFeatureApplicability); + _issuesList + .call(drawIssuesList); } function issues(selection) { @@ -45,7 +208,7 @@ export function uiIssues(context) { uiHelp.hidePane(); uiMapData.hidePane(); update(); - + pane .style('display', 'block') .style('right', '-300px') @@ -96,6 +259,28 @@ export function uiIssues(context) { .on('click', function() { uiIssues.hidePane(); }) .call(svgIcon('#iD-icon-close')); + var content = pane + .append('div') + .attr('class', 'pane-content'); + + // issues + content + .append('div') + .attr('class', 'issues-issues') + .call(uiDisclosure(context, 'issues_issues', true) + .title(t('issues.title')) + .content(renderIssuesList) + ); + + // options + content + .append('div') + .attr('class', 'issues-options') + .call(uiDisclosure(context, 'issues_options', true) + .title(t('issues.options.title')) + .content(renderIssuesOptions) + ); + update(); context.keybinding()