From de1fdaa21fe6198f15000c0b0e6cb4de1e1be83f Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Mon, 26 Feb 2018 13:58:50 -0500
Subject: [PATCH] Add close button, remove _showing state variable

---
 css/80_app.css           | 92 ++++++++++++++++++++++++----------------
 modules/ui/field.js      |  3 --
 modules/ui/field_help.js | 41 +++++++++---------
 3 files changed, 75 insertions(+), 61 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 6be83c1a5..1c0ee2dea 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -681,12 +681,14 @@ button.save.has-count .count::before {
     height: 100%;
 }
 
+.field-help-title button.close,
 .entity-editor-pane .header button.preset-close,
 .preset-list-pane .header button.preset-choose {
     position: absolute;
     right: 0;
     top: 0;
 }
+[dir='rtl'] .field-help-title button.close,
 [dir='rtl'] .entity-editor-pane .header button.preset-close,
 [dir='rtl'] .preset-list-pane .header button.preset-choose {
     left: 0;
@@ -1920,42 +1922,6 @@ input[type=number] {
     color: #78f;
 }
 
-.field-help-body h2 {
-    font-size: 16px;
-    margin-bottom: 10px;
-}
-.field-help-body h3 {
-    font-size: 12px;
-    margin-bottom: 5px;
-}
-.field-help-body p {
-    margin-bottom: 5px;
-}
-.field-help-body ul li {
-    list-style: inside;
-    margin-bottom: 5px;
-}
-.field-help-content svg.turn {
-    width: 40px;
-    height: 20px;
-}
-.field-help-content svg.shadow {
-    width: 60px;
-    height: 20px;
-}
-.field-help-content svg.from {
-    color: #777;
-}
-.field-help-content svg.allow {
-    color: #5b3;
-}
-.field-help-content svg.restrict {
-    color: #d53;
-}
-.field-help-content svg.only {
-    color: #68f;
-}
-
 /* Changeset editor while comment text is empty */
 
 .form-field-comment:not(.present) #preset-input-comment {
@@ -2045,10 +2011,62 @@ div.combobox {
     width: 100%;
     height: 100%;
     z-index: 2;
-    padding: 10px;
+    padding: 0px;
     background: rgba(255,255,255,0.95);
 }
 
+.field-help-title h2 {
+    padding: 10px;
+    margin-bottom: 0px;
+    font-size: 16px;
+}
+
+.field-help-title button {
+    width: 32px;
+    height: 40px;
+    border-radius: 0;
+}
+
+.field-help-content {
+    padding: 10px;
+}
+
+.field-help-content h3 {
+    font-size: 12px;
+    margin-bottom: 5px;
+}
+
+.field-help-content p {
+    margin-bottom: 5px;
+}
+
+.field-help-content ul li {
+    list-style: inside;
+    margin-bottom: 5px;
+}
+
+.field-help-content svg.turn {
+    width: 40px;
+    height: 20px;
+}
+.field-help-content svg.shadow {
+    width: 60px;
+    height: 20px;
+}
+.field-help-content svg.from {
+    color: #777;
+}
+.field-help-content svg.allow {
+    color: #5b3;
+}
+.field-help-content svg.restrict {
+    color: #d53;
+}
+.field-help-content svg.only {
+    color: #68f;
+}
+
+
 /* Raw Tag Editor */
 
 .tag-list {
diff --git a/modules/ui/field.js b/modules/ui/field.js
index eee682068..ef998340c 100644
--- a/modules/ui/field.js
+++ b/modules/ui/field.js
@@ -149,9 +149,6 @@ export function uiField(context, presetField, entity, options) {
                 // instantiate field help
                 if (options.wrap && field.type === 'restrictions') {
                     help = uiFieldHelp('restrictions');
-                    if (_state === 'hover') {
-                        help.showing(false);
-                    }
                 }
 
                 // instantiate tag reference
diff --git a/modules/ui/field_help.js b/modules/ui/field_help.js
index a304a576e..2f88a3629 100644
--- a/modules/ui/field_help.js
+++ b/modules/ui/field_help.js
@@ -61,7 +61,6 @@ var replacements = {
 export function uiFieldHelp(fieldName) {
     var fieldHelp = {};
     var _body = d3_select(null);
-    var _showing;
 
 
     // For each section, squash all the texts into a single markdown document
@@ -87,8 +86,6 @@ export function uiFieldHelp(fieldName) {
             .transition()
             .duration(200)
             .style('height', '100%');
-
-        _showing = true;
     }
 
 
@@ -100,8 +97,6 @@ export function uiFieldHelp(fieldName) {
             .on('end', function () {
                 _body.classed('hide', true);
             });
-
-        _showing = false;
     }
 
 
@@ -166,10 +161,10 @@ export function uiFieldHelp(fieldName) {
             .on('click', function () {
                 d3_event.stopPropagation();
                 d3_event.preventDefault();
-                if (_showing) {
-                    hide();
-                } else {
+                if (_body.classed('hide')) {
                     show();
+                } else {
+                    hide();
                 }
             });
     };
@@ -185,13 +180,28 @@ export function uiFieldHelp(fieldName) {
 
         var enter = _body.enter()
             .append('div')
-            .attr('class', 'field-help-body cf hide')
+            .attr('class', 'field-help-body cf hide')   // initially hidden
             .style('height', '0px');
 
-        enter
+        var titleEnter = enter
+            .append('div')
+            .attr('class', 'field-help-title cf');
+
+        titleEnter
             .append('h2')
+            .attr('class', 'fl')
             .text(t('help.field.' + fieldName + '.title'));
 
+        titleEnter
+            .append('button')
+            .attr('class', 'fr close')
+            .on('click', function() {
+                d3_event.stopPropagation();
+                d3_event.preventDefault();
+                hide();
+            })
+            .call(svgIcon('#icon-close'));
+
         enter
             .append('div')
             .attr('class', 'field-help-content');
@@ -204,17 +214,6 @@ export function uiFieldHelp(fieldName) {
             .merge(enter);
 
         clickHelp(docs[0], 0);
-
-        if (_showing === false) {
-            hide();
-        }
-    };
-
-
-    fieldHelp.showing = function(_) {
-        if (!arguments.length) return _showing;
-        _showing = _;
-        return fieldHelp;
     };