From 70f87632c7b06ea17c045d16a7d5b0b7d140da14 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Mon, 16 Jul 2018 13:17:17 -0400 Subject: [PATCH] Cleaner note icon rendering Before: We drew 2 fontawesome comment icons, on on top of the other After: Moved icon into iD spritesheet and gave it an actual `stroke` property that can be styled --- build_data.js | 4 +--- css/65_data.css | 15 ++++++--------- dist/locales/en.json | 4 ++-- modules/svg/notes.js | 28 ++++++++++++++-------------- modules/ui/note_header.js | 7 +------ svg/fontawesome/fas-comment-alt.svg | 1 - svg/iD-sprite/icons/icon-note.svg | 5 +++++ 7 files changed, 29 insertions(+), 35 deletions(-) delete mode 100644 svg/fontawesome/fas-comment-alt.svg create mode 100644 svg/iD-sprite/icons/icon-note.svg diff --git a/build_data.js b/build_data.js index 5fc2c5dab..98278e527 100644 --- a/build_data.js +++ b/build_data.js @@ -61,9 +61,7 @@ module.exports = function buildData() { }; // Font Awesome icons used - var faIcons = { - 'fas-comment-alt': {} - }; + var faIcons = {}; // Start clean shell.rm('-f', [ diff --git a/css/65_data.css b/css/65_data.css index 651045e43..7dbed1a38 100644 --- a/css/65_data.css +++ b/css/65_data.css @@ -3,7 +3,7 @@ .layer-notes { pointer-events: none; } -.layer-notes .note .note-shadow { +.layer-notes .note * { pointer-events: none; } .layer-notes .note .note-fill { @@ -19,29 +19,26 @@ .note-header-icon .note-fill, .layer-notes .note .note-fill { color: #ff3300; + stroke: #333; } .note-header-icon.closed .note-fill, .layer-notes .note.closed .note-fill { color: #55dd00; + stroke: #333; } .layer-notes .note.hovered .note-fill { color: #eebb00; + stroke: #333; } .layer-notes .note.selected .note-fill { color: #ffee00; + stroke: #333; } /* slight adjustments to preset icon for note icons */ .note-header-icon .preset-icon-28 { top: 18px; } -.note-header-icon .preset-icon-24 { - top: 20px; -} -.note-header-icon .preset-icon-24 .icon.note-fill { - width: 25px; - height: 23px; -} /* OSM Note UI */ .note-header { @@ -149,4 +146,4 @@ .note-report { float: right; -} \ No newline at end of file +} diff --git a/dist/locales/en.json b/dist/locales/en.json index b8df4e7a5..045ad8022 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -6687,7 +6687,7 @@ "attribution": { "text": "Terms & Feedback" }, - "description": "Premium DigitalGlobe satellite imagery.", + "description": "DigitalGlobe-Premium is a mosaic composed of DigitalGlobe basemap with select regions filled with +Vivid or custom area of interest imagery, 50cm resolution or better, and refreshed more frequently with ongoing updates.", "name": "DigitalGlobe Premium Imagery" }, "DigitalGlobe-Premium-vintage": { @@ -6701,7 +6701,7 @@ "attribution": { "text": "Terms & Feedback" }, - "description": "Standard DigitalGlobe satellite imagery.", + "description": "DigitalGlobe-Standard is a curated set of imagery covering 86% of the earth’s landmass, with 30-60cm resolution where available, backfilled by Landsat. Average age is 2.31 years, with some areas updated 2x per year.", "name": "DigitalGlobe Standard Imagery" }, "DigitalGlobe-Standard-vintage": { diff --git a/modules/svg/notes.js b/modules/svg/notes.js index 4350f85b1..a8bf1a806 100644 --- a/modules/svg/notes.js +++ b/modules/svg/notes.js @@ -82,14 +82,14 @@ export function svgNotes(projection, context, dispatch) { .append('g') .attr('class', function(d) { return 'note note-' + d.id + ' ' + d.status; }); - notesEnter - .append('use') - .attr('class', 'note-shadow') - .attr('width', '24px') - .attr('height', '24px') - .attr('x', '-12px') - .attr('y', '-24px') - .attr('xlink:href', '#fas-comment-alt'); + // notesEnter + // .append('use') + // .attr('class', 'note-shadow') + // .attr('width', '24px') + // .attr('height', '24px') + // .attr('x', '-12px') + // .attr('y', '-24px') + // .attr('xlink:href', '#iD-icon-note'); notesEnter .append('use') @@ -98,18 +98,18 @@ export function svgNotes(projection, context, dispatch) { .attr('height', '20px') .attr('x', '-10px') .attr('y', '-22px') - .attr('xlink:href', '#fas-comment-alt'); + .attr('xlink:href', '#iD-icon-note'); // add dots if there's a comment thread notesEnter.selectAll('.thread') .data(function(d) { return d.comments.length > 1 ? [0] : []; }) .enter() .append('use') - .attr('class', 'note-shadow thread') - .attr('width', '18px') - .attr('height', '18px') - .attr('x', '-9px') - .attr('y', '-22px') + .attr('class', 'note-annotation thread') + .attr('width', '14px') + .attr('height', '14px') + .attr('x', '-7px') + .attr('y', '-20px') .attr('xlink:href', '#iD-icon-more'); // update diff --git a/modules/ui/note_header.js b/modules/ui/note_header.js index 0b5164164..38525a3db 100644 --- a/modules/ui/note_header.js +++ b/modules/ui/note_header.js @@ -24,12 +24,7 @@ export function uiNoteHeader() { iconEnter .append('div') .attr('class', 'preset-icon-28') - .call(svgIcon('#fas-comment-alt', 'note-shadow')); - - iconEnter - .append('div') - .attr('class', 'preset-icon-24') - .call(svgIcon('#fas-comment-alt', 'note-fill')); + .call(svgIcon('#iD-icon-note', 'note-fill')); headerEnter .append('div') diff --git a/svg/fontawesome/fas-comment-alt.svg b/svg/fontawesome/fas-comment-alt.svg deleted file mode 100644 index a54d95df0..000000000 --- a/svg/fontawesome/fas-comment-alt.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/svg/iD-sprite/icons/icon-note.svg b/svg/iD-sprite/icons/icon-note.svg new file mode 100644 index 000000000..11033f707 --- /dev/null +++ b/svg/iD-sprite/icons/icon-note.svg @@ -0,0 +1,5 @@ + + + + +