From 31eb8375960f8b5987b8e81ec00b00bc6c689bcb Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Fri, 15 Feb 2019 13:40:45 -0500 Subject: [PATCH] Fix issue where fixes would not expand when clicking an issue Rename issue label class to messages Remove fix list animation --- css/80_app.css | 32 ++++++++++++++++------------ modules/behavior/draw_way.js | 2 -- modules/ui/entity_issues.js | 41 ++++++++++++++++++------------------ modules/ui/issues.js | 18 ++++++++-------- 4 files changed, 47 insertions(+), 46 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 71291baa4..8baacd462 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -3103,9 +3103,8 @@ div.full-screen > button:hover { .entity-issues .issue:not(:last-of-type) { margin-bottom: 10px; } -.issue.expanded button.label { - cursor: pointer; - pointer-events: none; +.issue.expanded button.message { + cursor: auto; padding-bottom: 0px; } ul.issue-fix-list button { @@ -3118,25 +3117,30 @@ ul.issue-fix-list button { padding-bottom:7px; } .issue-fix-item:not(.actionable) button { - cursor: pointer; - pointer-events: none; + cursor: auto; + } .issue-fix-item:not(.actionable) .fix-icon { color: #555; fill: #555; } + .issue:not(.expanded) ul.issue-fix-list { - height: 0px; - transition: height 75ms linear; - -moz-transition: height 75ms linear; - -webkit-transition: height 75ms linear; + display: none; +} +/* don't animate right now +.issue ul.issue-fix-list { + max-height: 0; + transition: max-height 200ms linear; + -moz-transition: max-height 200ms linear; + -webkit-transition: max-height 200ms linear; } .issue.expanded ul.issue-fix-list { - height: 100%; - transition: height 75ms linear; - -moz-transition: height 75ms linear; - -webkit-transition: height 75ms linear; -} + max-height: 180px; + transition: max-height 200ms linear; + -moz-transition: max-height 200ms linear; + -webkit-transition: max-height 200ms linear; +}*/ /* Background - Display Options Sliders diff --git a/modules/behavior/draw_way.js b/modules/behavior/draw_way.js index 6ca5fc82f..d95ac8480 100644 --- a/modules/behavior/draw_way.js +++ b/modules/behavior/draw_way.js @@ -1,5 +1,3 @@ -import _isEmpty from 'lodash-es/isEmpty'; - import { event as d3_event, select as d3_select diff --git a/modules/ui/entity_issues.js b/modules/ui/entity_issues.js index 83e5c5fa5..ef53ea2e9 100644 --- a/modules/ui/entity_issues.js +++ b/modules/ui/entity_issues.js @@ -10,7 +10,7 @@ import { utilHighlightEntities } from '../util'; export function uiEntityIssues(context) { var _selection = d3_select(null); - var _expanded = 0; + var _expandedIssueID; var _entityID; // Listen for validation reload even though the entity editor is reloaded on @@ -25,11 +25,6 @@ export function uiEntityIssues(context) { }); - function clamp(num, min, max) { - return Math.max(min, Math.min(num, max)); - } - - function entityIssues(selection) { _selection = selection; @@ -55,7 +50,7 @@ export function uiEntityIssues(context) { function render(selection) { var issues = context.validator().getIssuesForEntityWithID(_entityID); - _expanded = clamp(_expanded, 0, issues.length); + _expandedIssueID = issues.length > 0 ? issues[0].id() : null; var items = selection.selectAll('.issue') .data(issues, function(d) { return d.id(); }); @@ -74,17 +69,25 @@ export function uiEntityIssues(context) { .placement('top') ) .on('mouseover.highlight', function(d) { - var ids = d.entities.map(function(e) { return e.id; }); + // don't hover-highlight the selected entity + var ids = d.entities.filter(function(e) { return e.id !== _entityID; }) + .map(function(e) { return e.id; }); utilHighlightEntities(ids, true, context); }) .on('mouseout.highlight', function(d) { - var ids = d.entities.map(function(e) { return e.id; }); + var ids = d.entities.filter(function(e) { return e.id !== _entityID; }) + .map(function(e) { return e.id; }); utilHighlightEntities(ids, false, context); - }) - .on('click', function(d, i) { - _expanded = i; // expand only the clicked item + }); + + var messagesEnter = itemsEnter + .append('button') + .attr('class', 'message') + .on('click', function(d) { + + _expandedIssueID = d.id(); // expand only the clicked item selection.selectAll('.issue') - .classed('expanded', function(d, i) { return i === _expanded; }); + .classed('expanded', function(d) { return d.id() === _expandedIssueID; }); var extent = d.extent(context.graph()); if (extent) { @@ -96,16 +99,12 @@ export function uiEntityIssues(context) { } }); - var labelsEnter = itemsEnter - .append('button') - .attr('class', 'label'); - - labelsEnter + messagesEnter .append('span') .attr('class', 'issue-icon') .call(svgIcon('', 'pre-text')); - labelsEnter + messagesEnter .append('strong') .attr('class', 'issue-text'); @@ -117,7 +116,7 @@ export function uiEntityIssues(context) { // Update items = items .merge(itemsEnter) - .classed('expanded', function(d, i) { return i === _expanded; }); + .classed('expanded', function(d) { return d.id() === _expandedIssueID; }); items.select('.issue-icon svg use') // propagate bound data .attr('href', function(d) { @@ -171,7 +170,7 @@ export function uiEntityIssues(context) { if (!arguments.length) return _entityID; if (_entityID !== val) { _entityID = val; - _expanded = 0; + _expandedIssueID = null; } return entityIssues; }; diff --git a/modules/ui/issues.js b/modules/ui/issues.js index d3fbe8fed..0bc430f9a 100644 --- a/modules/ui/issues.js +++ b/modules/ui/issues.js @@ -131,23 +131,23 @@ export function uiIssues(context) { }); - var labelsEnter = itemsEnter + var messagesEnter = itemsEnter .append('button') - .attr('class', 'label'); + .attr('class', 'message'); - labelsEnter + messagesEnter .call(tooltip() .html(true) .title(function(d) { return uiTooltipHtml(d.tooltip); }) .placement('top') ); - labelsEnter + messagesEnter .append('span') .attr('class', 'issue-icon') .call(svgIcon('', 'pre-text')); - labelsEnter + messagesEnter .append('span') .attr('class', 'issue-text'); @@ -171,17 +171,17 @@ export function uiIssues(context) { .append('div') .call(svgIcon('#iD-icon-apply', 'pre-text')); - var noIssuesLabel = selection + var noIssuesMessage = selection .append('span'); - noIssuesLabel + noIssuesMessage .append('strong') .text(t('issues.no_issues.message')); - noIssuesLabel + noIssuesMessage .append('br'); - noIssuesLabel + noIssuesMessage .append('span') .text(t('issues.no_issues.info')); }