From 137aefb4403d60e310fb58ff84b51712f73ffa52 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Wed, 6 Mar 2019 13:31:16 -0500
Subject: [PATCH] Add tooltip to search field Make search shortcut translatable

---
 css/80_app.css           |  3 +++
 data/core.yaml           |  2 ++
 dist/locales/en.json     |  4 +++-
 modules/ui/search_add.js | 14 ++++++++++++--
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 86f375afd..d769d858b 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -609,6 +609,9 @@ button.add-note svg.icon {
     border-radius: 20px 0 0 20px;
     background: #fff;
 }
+.search-add .search-wrap.focused .tooltip {
+    display: none;
+}
 .search-add .search-wrap:nth-last-child(2) {
     border-radius: 20px;
     border: none;
diff --git a/data/core.yaml b/data/core.yaml
index e2f925081..236f002c0 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -11,6 +11,8 @@ en:
   modes:
     add_feature:
       title: Add a feature
+      description: "Search for features to add to the map."
+      key: Tab
     add_area:
       title: Area
       description: "Add parks, buildings, lakes or other areas to the map."
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 731472aec..21bd47a37 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -12,7 +12,9 @@
         },
         "modes": {
             "add_feature": {
-                "title": "Add a feature"
+                "title": "Add a feature",
+                "description": "Search for features to add to the map.",
+                "key": "Tab"
             },
             "add_area": {
                 "title": "Area",
diff --git a/modules/ui/search_add.js b/modules/ui/search_add.js
index ae2de60a0..4ed356420 100644
--- a/modules/ui/search_add.js
+++ b/modules/ui/search_add.js
@@ -15,6 +15,7 @@ import {
 import { t, textDirection } from '../util/locale';
 import { svgIcon } from '../svg/index';
 import { tooltip } from '../util/tooltip';
+import { uiTooltipHtml } from './tooltipHtml';
 import { uiPresetFavorite } from './preset_favorite';
 import { uiPresetIcon } from './preset_icon';
 import { utilKeybinding, utilNoAuto, utilRebind } from '../util';
@@ -31,9 +32,16 @@ export function uiSearchAdd(context) {
 
         presets = context.presets().matchAnyGeometry(shownGeometry);
 
+        var key = t('modes.add_feature.key');
+
         var searchWrap = selection
             .append('div')
-            .attr('class', 'search-wrap');
+            .attr('class', 'search-wrap')
+            .call(tooltip()
+                .placement('bottom')
+                .html(true)
+                .title(function(d) { return uiTooltipHtml(t('modes.add_feature.description'), key); })
+            );
 
         search = searchWrap
             .append('input')
@@ -48,6 +56,7 @@ export function uiSearchAdd(context) {
                 search.attr('clicking', null);
             })
             .on('focus', function() {
+                searchWrap.classed('focused', true);
                 if (search.attr('clicking')) {
                     search.attr('focusing', true);
                     search.attr('clicking', null);
@@ -57,6 +66,7 @@ export function uiSearchAdd(context) {
                 popover.classed('hide', false);
             })
             .on('blur', function() {
+                searchWrap.classed('focused', false);
                 popover.classed('hide', true);
             })
             .on('click', function() {
@@ -88,7 +98,7 @@ export function uiSearchAdd(context) {
 
         context.features().on('change.search-add', updateForFeatureHiddenState);
 
-        context.keybinding().on('tab', function() {
+        context.keybinding().on(key, function() {
             search.node().focus();
             d3_event.preventDefault();
             d3_event.stopPropagation();