From 373353f40d8bc29e1d89ec68a1344cd4b01c1e50 Mon Sep 17 00:00:00 2001
From: Thomas Hervey <thomasahervey@gmail.com>
Date: Sat, 21 Jul 2018 15:54:47 -0400
Subject: [PATCH] added breathe behavior & cleaned hover/select styling on
 notes

---
 css/20_map.css               | 21 +++++++++++++++++++--
 css/65_data.css              |  8 --------
 modules/modes/select_note.js |  4 +++-
 modules/svg/notes.js         | 24 +++++++++++++++++++++---
 modules/ui/sidebar.js        |  4 ++--
 5 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/css/20_map.css b/css/20_map.css
index 3e3dab771..0e7137b74 100644
--- a/css/20_map.css
+++ b/css/20_map.css
@@ -65,7 +65,13 @@
 }
 
 
-/* points */
+/* points & notes */
+
+g.note .stroke {
+    stroke: #444;
+    stroke-width: 1;
+    fill: #444;
+}
 
 g.point .stroke {
     stroke: #444;
@@ -73,6 +79,13 @@ g.point .stroke {
     fill: #fff;
 }
 
+g.note .shadow {
+    fill: none;
+    stroke: #f6634f;
+    stroke-width: 8;
+    stroke-opacity: 0;
+}
+
 g.point .shadow {
     fill: none;
     stroke: #f6634f;
@@ -80,19 +93,23 @@ g.point .shadow {
     stroke-opacity: 0;
 }
 
+g.note.related:not(.selected) .shadow,
+g.note.hover:not(.selected) .shadow,
 g.point.related:not(.selected) .shadow,
 g.point.hover:not(.selected) .shadow {
     stroke-opacity: 0.5;
 }
 
+g.note.selected .shadow,
 g.point.selected .shadow {
     stroke-opacity: 0.7;
 }
 
+g.note ellipse.stroke,
 g.point ellipse.stroke {
     display: none;
 }
-
+.mode-drag-note g.note.active ellipse.stroke,
 .mode-drag-node g.point.active ellipse.stroke {
     display: block;
 }
diff --git a/css/65_data.css b/css/65_data.css
index 07146df57..7deaba72a 100644
--- a/css/65_data.css
+++ b/css/65_data.css
@@ -31,14 +31,6 @@
     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 {
diff --git a/modules/modes/select_note.js b/modules/modes/select_note.js
index 3692d4c13..7fe0c6e7d 100644
--- a/modules/modes/select_note.js
+++ b/modules/modes/select_note.js
@@ -6,6 +6,7 @@ import {
 import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
 
 import {
+    behaviorBreathe,
     behaviorHover,
     behaviorLasso,
     behaviorSelect
@@ -36,6 +37,7 @@ export function modeSelectNote(context, selectedNoteID) {
         });
 
     var behaviors = [
+        behaviorBreathe(context),
         behaviorHover(context),
         behaviorSelect(context),
         behaviorLasso(context),
@@ -120,7 +122,7 @@ export function modeSelectNote(context, selectedNoteID) {
 
         context.surface()
             .selectAll('.note.selected')
-            .classed('selected hovered', false);
+            .classed('selected hover', false);
 
         context.map()
             .on('drawn.select', null);
diff --git a/modules/svg/notes.js b/modules/svg/notes.js
index e5f7d88c3..29c05194b 100644
--- a/modules/svg/notes.js
+++ b/modules/svg/notes.js
@@ -14,6 +14,12 @@ export function svgNotes(projection, context, dispatch) {
     var layer = d3_select(null);
     var _notes;
 
+    function markerPath(selection, klass) {
+        selection
+            .attr('class', klass)
+            .attr('transform', 'translate(-8, -22)')
+            .attr('d', 'm17.49424,0l-14.99506,0c-1.37845,0 -2.49918,1.12072 -2.49918,2.49918l0,11.24629c0,1.37845 1.12072,2.49918 2.49918,2.49918l3.74876,0l0,3.28017c0,0.38269 0.43736,0.60527 0.74585,0.37878l4.8773,-3.65895l5.62315,0c1.37845,0 2.49918,-1.12072 2.49918,-2.49918l0,-11.24629c0,-1.37845 -1.12072,-2.49918 -2.49918,-2.49918z');
+    }
 
     function init() {
         if (svgNotes.initialized) return;  // run once
@@ -95,12 +101,24 @@ export function svgNotes(projection, context, dispatch) {
             .attr('class', function(d) { return 'note note-' + d.id + ' ' + d.status; })
             .classed('new', function(d){ return d.id < 0; });
 
+        notesEnter
+            .append('path')
+            .call(markerPath, 'shadow');
+
+        notesEnter
+            .append('ellipse')
+            .attr('cx', 0.5)
+            .attr('cy', 1)
+            .attr('rx', 6.5)
+            .attr('ry', 3)
+            .attr('class', 'stroke');
+
         notesEnter
             .append('use')
             .attr('class', 'note-fill')
             .attr('width', '20px')
             .attr('height', '20px')
-            .attr('x', '-10px')
+            .attr('x', '-8px')
             .attr('y', '-22px')
             .attr('xlink:href', '#iD-icon-note');
 
@@ -112,7 +130,7 @@ export function svgNotes(projection, context, dispatch) {
             .attr('class', 'note-annotation thread')
             .attr('width', '14px')
             .attr('height', '14px')
-            .attr('x', '-7px')
+            .attr('x', '-5px')
             .attr('y', '-20px')
             .attr('xlink:href', '#iD-icon-more');
 
@@ -124,7 +142,7 @@ export function svgNotes(projection, context, dispatch) {
             .attr('class', 'note-annotation thread')
             .attr('width', '14px')
             .attr('height', '14px')
-            .attr('x', '-7px')
+            .attr('x', '-5px')
             .attr('y', '-20px')
             .attr('xlink:href', '#iD-icon-plus');
 
diff --git a/modules/ui/sidebar.js b/modules/ui/sidebar.js
index 256c775f8..879d91757 100644
--- a/modules/ui/sidebar.js
+++ b/modules/ui/sidebar.js
@@ -33,7 +33,7 @@ export function uiSidebar(context) {
                 _wasNote = true;
                 var notes = d3_selectAll('.note');
                 notes
-                    .classed('hovered', function(d) { return d === what; });
+                    .classed('hover', function(d) { return d === what; });
 
                 sidebar.show(noteEditor.note(what));
 
@@ -68,7 +68,7 @@ export function uiSidebar(context) {
             } else if (_wasNote) {
                 _wasNote = false;
                 d3_selectAll('.note')
-                    .classed('hovered', false);
+                    .classed('hover', false);
                 sidebar.hide();
             }
         }