From fe7086f75311f41d506fc646b75184b90ca694c8 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Thu, 12 Jul 2018 02:51:49 -0400
Subject: [PATCH] Add header close 'X' button, add grey hover styling

---
 css/80_app.css            |  5 ++++-
 modules/ui/note_editor.js | 15 ++++++++++++---
 modules/ui/sidebar.js     |  8 ++++++--
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index f6ca2de6b..e878f3af1 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -689,6 +689,7 @@ button.save.has-count .count::before {
 }
 
 .field-help-title button.close,
+.sidebar-component .header button.note-editor-close,
 .entity-editor-pane .header button.preset-close,
 .preset-list-pane .header button.preset-choose {
     position: absolute;
@@ -696,6 +697,7 @@ button.save.has-count .count::before {
     top: 0;
 }
 [dir='rtl'] .field-help-title button.close,
+[dir='rtl'] .sidebar-component .header button.note-editor-close,
 [dir='rtl'] .entity-editor-pane .header button.preset-close,
 [dir='rtl'] .preset-list-pane .header button.preset-choose {
     left: 0;
@@ -1290,6 +1292,7 @@ a.hide-toggle {
 .inspector-hover .preset-input-wrap .label,
 .inspector-hover .form-field-multicombo,
 .inspector-hover .structure-extras-wrap,
+.inspector-hover .comments-container .comment,
 .inspector-hover input,
 .inspector-hover textarea,
 .inspector-hover label {
@@ -1329,7 +1332,7 @@ a.hide-toggle {
 /* hide but preserve in layout */
 .inspector-hover .entity-editor-pane button.minor,
 .inspector-hover .combobox-caret,
-.inspector-hover .entity-editor-pane .header button,
+.inspector-hover .header button,
 .inspector-hover .spin-control,
 .inspector-hover .form-field-multicombo .chips .remove,
 .inspector-hover .hide-toggle:before,
diff --git a/modules/ui/note_editor.js b/modules/ui/note_editor.js
index 992a2cbe8..774755478 100644
--- a/modules/ui/note_editor.js
+++ b/modules/ui/note_editor.js
@@ -4,9 +4,10 @@ import { select as d3_select } from 'd3-selection';
 import { t } from '../util/locale';
 import { services } from '../services';
 
+import { modeBrowse } from '../modes';
+import { svgIcon } from '../svg';
 import { uiNoteComments } from './note_comments';
 import { uiNoteHeader } from './note_header';
-
 import {
     utilNoAuto,
     utilRebind
@@ -24,9 +25,17 @@ export function uiNoteEditor(context) {
         var header = selection.selectAll('.header')
             .data([0]);
 
-        header.enter()
+        var enter = header.enter()
             .append('div')
-            .attr('class', 'header fillL')
+            .attr('class', 'header fillL');
+
+        enter
+            .append('button')
+            .attr('class', 'fr note-editor-close')
+            .on('click', function() { context.enter(modeBrowse(context)); })
+            .call(svgIcon('#iD-icon-close'));
+
+        enter
             .append('h3')
             .text(t('note.title'));
 
diff --git a/modules/ui/sidebar.js b/modules/ui/sidebar.js
index 509d2c1c6..256c775f8 100644
--- a/modules/ui/sidebar.js
+++ b/modules/ui/sidebar.js
@@ -34,7 +34,11 @@ export function uiSidebar(context) {
                 var notes = d3_selectAll('.note');
                 notes
                     .classed('hovered', function(d) { return d === what; });
-                context.ui().sidebar.show(noteEditor.note(what));
+
+                sidebar.show(noteEditor.note(what));
+
+                selection.selectAll('.sidebar-component')
+                    .classed('inspector-hover', true);
 
             } else if (!_current && context.hasEntity(what)) {
                 featureListWrap
@@ -65,7 +69,7 @@ export function uiSidebar(context) {
                 _wasNote = false;
                 d3_selectAll('.note')
                     .classed('hovered', false);
-                context.ui().sidebar.hide();
+                sidebar.hide();
             }
         }