From bcc16697162ba737caeb3224a06c53f01751c7cf Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Sat, 30 Jun 2018 10:05:11 -0400 Subject: [PATCH 1/3] Move note css from the photos.css into a new css file data.css --- css/60_photos.css | 40 ---------------------------------------- css/65_data.css | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+), 40 deletions(-) create mode 100644 css/65_data.css diff --git a/css/60_photos.css b/css/60_photos.css index 7213ee728..63173726d 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -113,46 +113,6 @@ stroke-opacity: 1; } -/* Notes Layer */ -.layer-notes { - pointer-events: none; -} -.layer-notes * { - pointer-events: visible; - cursor: pointer; -} -.layer-notes .note-shadow { - color: #000; -} -.layer-notes .note-fill { - color: #ee3; -} - - -/* TODO: possibly move this note detail .css to another file */ - -.comment-first { - background-color:#ddd; - border-radius: 5px; - padding: 5px; - margin: 5px auto; -} - -.comment { - background-color:#fff; - border-radius: 5px; - padding: 5px; - margin: 5px auto; -} - -.commentCreator { - color: #666; -} - -.commentText { - margin: 20px auto; -} - /* Streetside Image Layer */ .layer-streetside-images { diff --git a/css/65_data.css b/css/65_data.css new file mode 100644 index 000000000..e8c1b22a5 --- /dev/null +++ b/css/65_data.css @@ -0,0 +1,35 @@ + +/* OSM Notes Layer */ +.layer-notes { + pointer-events: none; +} +.layer-notes * { + pointer-events: visible; + cursor: pointer; +} +.layer-notes .note-shadow { + color: #000; +} +.layer-notes .note-fill { + color: #ee3; +} + +/* OSM Note UI */ +.comment-first { + background-color:#ddd; + border-radius: 5px; + padding: 5px; + margin: 5px auto; +} +.comment { + background-color:#fff; + border-radius: 5px; + padding: 5px; + margin: 5px auto; +} +.commentCreator { + color: #666; +} +.commentText { + margin: 20px auto; +} From f3d31f30759fb803d1ec04fa37249c71040d591f Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Sat, 30 Jun 2018 10:44:28 -0400 Subject: [PATCH 2/3] Update css styles for notes - open notes are red (default) - resolved notes are green - orange on hover - yellow on select (also added centerEase to note location) --- css/65_data.css | 20 +++++++++++++++----- modules/svg/notes.js | 37 ++++++++++++++++++++++++++++--------- 2 files changed, 43 insertions(+), 14 deletions(-) diff --git a/css/65_data.css b/css/65_data.css index e8c1b22a5..b66b48c11 100644 --- a/css/65_data.css +++ b/css/65_data.css @@ -7,22 +7,32 @@ pointer-events: visible; cursor: pointer; } -.layer-notes .note-shadow { + +.layer-notes .note .note-shadow { color: #000; } -.layer-notes .note-fill { - color: #ee3; +.layer-notes .note .note-fill { + color: #ff3300; +} +.layer-notes .note.closed .note-fill { + color: #00bb33; +} +.layer-notes .note.hovered .note-fill { + color: #eebb00; +} +.layer-notes .note.selected .note-fill { + color: #ffee00; } /* OSM Note UI */ .comment-first { - background-color:#ddd; + background-color: #ddd; border-radius: 5px; padding: 5px; margin: 5px auto; } .comment { - background-color:#fff; + background-color: #fff; border-radius: 5px; padding: 5px; margin: 5px auto; diff --git a/modules/svg/notes.js b/modules/svg/notes.js index ce869ddab..f0f77dcee 100644 --- a/modules/svg/notes.js +++ b/modules/svg/notes.js @@ -62,21 +62,36 @@ export function svgNotes(projection, context, dispatch) { .on('end', editOff); } - function click(d) { - _selected = d; - context.ui().sidebar.show(noteEditor, d); + + function click(which) { + _selected = which; + context.map().centerEase(which.loc); + + layer.selectAll('.note') + .classed('selected', function(d) { return d === _selected; }); + + context.ui().sidebar.show(noteEditor, which); } - function mouseover(d) { - context.ui().sidebar.show(noteEditor, d); + + function mouseover(which) { + layer.selectAll('.note') + .classed('hovered', function(d) { return d === which; }); + + context.ui().sidebar.show(noteEditor, which); } - function mouseout(d) { + + function mouseout() { + layer.selectAll('.note') + .classed('hovered', false); + // TODO: check if the item was clicked. If so, it should remain on the sidebar. // TODO: handle multi-clicks. Otherwise, utilize behavior/select.js context.ui().sidebar.hide(); } + function update() { var service = getService(); var data = (service ? service.notes(projection) : []); @@ -88,9 +103,10 @@ export function svgNotes(projection, context, dispatch) { notes.exit() .remove(); + // enter var notesEnter = notes.enter() .append('g') - .attr('class', function(d) { return 'note note-' + d.id; }) + .attr('class', function(d) { return 'note note-' + d.id + ' ' + d.status; }) .on('click', click) .on('mouseover', mouseover) .on('mouseout', mouseout); @@ -102,7 +118,7 @@ export function svgNotes(projection, context, dispatch) { .attr('height', '24px') .attr('x', '-12px') .attr('y', '-24px') - .attr('xlink:href', '#fas-comment-alt') + .attr('xlink:href', '#fas-comment-alt'); notesEnter .append('use') @@ -111,8 +127,9 @@ export function svgNotes(projection, context, dispatch) { .attr('height', '20px') .attr('x', '-10px') .attr('y', '-22px') - .attr('xlink:href', '#fas-comment-alt') + .attr('xlink:href', '#fas-comment-alt'); + // update notes .merge(notesEnter) .sort(function(a, b) { @@ -120,9 +137,11 @@ export function svgNotes(projection, context, dispatch) { : (b === _selected) ? -1 : b.loc[1] - a.loc[1]; // sort Y }) + .classed('selected', function(d) { return d === _selected; }) .attr('transform', transform); } + function drawNotes(selection) { var enabled = svgNotes.enabled; var service = getService(); From 487ec9d8370f2467696ce6c5a84876c67cdc71d5 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Sun, 1 Jul 2018 12:48:51 -0400 Subject: [PATCH 3/3] Better spinner event management re: https://github.com/openstreetmap/iD/pull/5107#issuecomment-401617938 --- modules/services/osm.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/modules/services/osm.js b/modules/services/osm.js index 87af1beb5..037d23003 100644 --- a/modules/services/osm.js +++ b/modules/services/osm.js @@ -665,7 +665,7 @@ export default { s / 2 - projection.translate()[1] ]; - // what tiles cover the view + // what tiles cover the view? var tiler = d3_geoTile() .scaleExtent([tilezoom, tilezoom]) .scale(s) @@ -685,6 +685,8 @@ export default { }; }); + // remove inflight requests that no longer cover the view.. + var hadRequests = !_isEmpty(cache.inflight); _filter(cache.inflight, function(v, i) { var wanted = _find(tiles, function(tile) { return i === tile.id; }); if (!wanted) { @@ -693,12 +695,16 @@ export default { return !wanted; }).map(abortRequest); + if (hadRequests && !loadingNotes && _isEmpty(cache.inflight)) { + dispatch.call('loaded'); // stop the spinner + } + // issue new requests.. tiles.forEach(function(tile) { var id = tile.id; if (cache.loaded[id] || cache.inflight[id]) return; if (!loadingNotes && _isEmpty(cache.inflight)) { - dispatch.call('loading'); // start the spinner + dispatch.call('loading'); // start the spinner } cache.inflight[id] = that.loadFromAPI( @@ -717,7 +723,7 @@ export default { callback(err, _extend({ data: parsed }, tile)); } if (_isEmpty(cache.inflight)) { - dispatch.call('loaded'); // stop the spinner + dispatch.call('loaded'); // stop the spinner } }