diff --git a/css/80_app.css b/css/80_app.css index 5003cb59f2..94e9dff864 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -3547,6 +3547,9 @@ li.issue-fix-item button:not(.actionable) .fix-icon { .issue-container:not(.active) ul.issue-fix-list { display: none; } +.issue-container:not(.active) .issue-info { + display: none; +} .issue-info { flex: 1 1 auto; diff --git a/modules/ui/sections/entity_issues.js b/modules/ui/sections/entity_issues.js index 3a375c414f..e3e8ebac14 100644 --- a/modules/ui/sections/entity_issues.js +++ b/modules/ui/sections/entity_issues.js @@ -1,17 +1,24 @@ import { select as d3_select } from 'd3-selection'; +import { prefs } from '../../core/preferences'; import { svgIcon } from '../../svg/icon'; import { utilArrayIdentical } from '../../util/array'; import { t } from '../../core/localizer'; import { utilHighlightEntities } from '../../util'; import { uiSection } from '../section'; + export function uiSectionEntityIssues(context) { + // Does the user prefer to expand the active issue? Useful for viewing tag diff. + // Expand by default so first timers see it - #6408, #8143 + var preference = prefs('entity-issues.reference.expanded'); + var _expanded = preference === null ? true : (preference === 'true'); var _entityIDs = []; var _issues = []; var _activeIssueID; + var section = uiSection('entity-issues', context) .shouldDisplay(function() { return _issues.length > 0; @@ -122,6 +129,8 @@ export function uiSectionEntityIssues(context) { var container = d3_select(this.parentNode.parentNode.parentNode); var info = container.selectAll('.issue-info'); var isExpanded = info.classed('expanded'); + _expanded = !isExpanded; + prefs('entity-issues.reference.expanded', _expanded); // update preference if (isExpanded) { info @@ -151,9 +160,9 @@ export function uiSectionEntityIssues(context) { containersEnter .append('div') - .attr('class', 'issue-info') - .style('max-height', '0') - .style('opacity', '0') + .attr('class', 'issue-info' + (_expanded ? ' expanded' : '')) + .style('max-height', (_expanded ? null : '0')) + .style('opacity', (_expanded ? '1' : '0')) .each(function(d) { if (typeof d.reference === 'function') { d3_select(this)