diff --git a/css/65_data.css b/css/65_data.css index 7dbed1a38aa..d672fccff59 100644 --- a/css/65_data.css +++ b/css/65_data.css @@ -40,6 +40,19 @@ top: 18px; } +.note-header-icon .note-icon-annotation { + position: absolute; + top: 21px; + left: 21px; + margin: auto; +} + +.note-header-icon .note-icon-annotation .icon { + width: 18px; + height: 18px; +} + + /* OSM Note UI */ .note-header { background-color: #f6f6f6; diff --git a/modules/svg/notes.js b/modules/svg/notes.js index a8bf1a806a8..b416e8ee4ac 100644 --- a/modules/svg/notes.js +++ b/modules/svg/notes.js @@ -101,7 +101,7 @@ export function svgNotes(projection, context, dispatch) { .attr('xlink:href', '#iD-icon-note'); // add dots if there's a comment thread - notesEnter.selectAll('.thread') + notesEnter.selectAll('.note-annotation') .data(function(d) { return d.comments.length > 1 ? [0] : []; }) .enter() .append('use') diff --git a/modules/ui/note_editor.js b/modules/ui/note_editor.js index 80e6ac4c708..4a15e3adc20 100644 --- a/modules/ui/note_editor.js +++ b/modules/ui/note_editor.js @@ -176,7 +176,7 @@ export function uiNoteEditor(context) { buttonSection.select('.comment-button') // select and propagate data .attr('disabled', function(d) { - return d.newComment ? null : true; + return (d.status === 'open' && d.newComment) ? null : true; }) .on('click.save', function(d) { this.blur(); // avoid keeping focus on the button - #4641 diff --git a/modules/ui/note_header.js b/modules/ui/note_header.js index 38525a3db3c..59850966c65 100644 --- a/modules/ui/note_header.js +++ b/modules/ui/note_header.js @@ -8,7 +8,10 @@ export function uiNoteHeader() { function noteHeader(selection) { var header = selection.selectAll('.note-header') - .data([_note], function(d) { return d.status + d.id; }); + .data( + (_note ? [_note] : []), + function(d) { return d.status + d.id; } + ); header.exit() .remove(); @@ -26,6 +29,15 @@ export function uiNoteHeader() { .attr('class', 'preset-icon-28') .call(svgIcon('#iD-icon-note', 'note-fill')); + iconEnter.each(function(d) { + if (d.comments.length > 1) { + iconEnter + .append('div') + .attr('class', 'note-icon-annotation') + .call(svgIcon('#iD-icon-more', 'note-annotation')); + } + }) + headerEnter .append('div') .attr('class', 'note-header-label')