From b6effd6ed0cdbb9216d9c95562688dbaddc99093 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Thu, 28 Feb 2019 11:19:40 -0500
Subject: [PATCH] Add initial search bar UI element

---
 css/80_app.css           | 23 +++++++++++++++++++++
 data/core.yaml           |  2 ++
 dist/locales/en.json     |  3 +++
 modules/ui/init.js       | 12 ++++++++---
 modules/ui/search_add.js | 43 ++++++++++++++++++++++++++++++++++++++++
 5 files changed, 80 insertions(+), 3 deletions(-)
 create mode 100644 modules/ui/search_add.js

diff --git a/css/80_app.css b/css/80_app.css
index 64246010c..73283418a 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -597,6 +597,29 @@ button.add-note svg.icon {
     border-right-width: 0;
 }
 
+.search-add .search-wrap {
+    position: relative;
+}
+.search-add input[type='search'] {
+    position: relative;
+    width: 100%;
+    height:100%;
+    border: none;
+    border-radius: 20px;
+    font-size: 14px;
+    min-width: 160px;
+    text-indent: 25px;
+    padding: 5px 10px
+}
+.search-add .search-icon {
+    color: #333;
+    display: block;
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    pointer-events: none;
+}
+
 
 /* Header for modals / panes
 ------------------------------------------------------- */
diff --git a/data/core.yaml b/data/core.yaml
index ca8a5340b..b16152a63 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -9,6 +9,8 @@ en:
     open_wikidata: open on wikidata.org
     favorite: favorite
   modes:
+    add_feature:
+      title: Add a feature
     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 b41a90abf..2b037d142 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -11,6 +11,9 @@
             "favorite": "favorite"
         },
         "modes": {
+            "add_feature": {
+                "title": "Add a feature"
+            },
             "add_area": {
                 "title": "Area",
                 "description": "Add parks, buildings, lakes or other areas to the map.",
diff --git a/modules/ui/init.js b/modules/ui/init.js
index d1d962658..472b0484e 100644
--- a/modules/ui/init.js
+++ b/modules/ui/init.js
@@ -36,6 +36,7 @@ import { uiSidebar } from './sidebar';
 import { uiSpinner } from './spinner';
 import { uiSplash } from './splash';
 import { uiStatus } from './status';
+import { uiSearchAdd } from './search_add';
 import { uiTooltipHtml } from './tooltipHtml';
 import { uiUndoRedo } from './undo_redo';
 import { uiVersion } from './version';
@@ -110,10 +111,15 @@ export function uiInit(context) {
 
 
         // Center area button group (Point/Line/Area/Note mode buttons)
-        bar
-            .append('div')
-            .attr('class', 'tool-group center-area')
+        var centerArea = bar
             .append('div')
+            .attr('class', 'tool-group center-area');
+
+        centerArea.append('div')
+            .attr('class', 'search-add')
+            .call(uiSearchAdd(context), bar);
+
+        centerArea.append('div')
             .attr('class', 'modes joined')
             .call(uiModes(context), bar);
 
diff --git a/modules/ui/search_add.js b/modules/ui/search_add.js
new file mode 100644
index 000000000..6b3b31522
--- /dev/null
+++ b/modules/ui/search_add.js
@@ -0,0 +1,43 @@
+import { dispatch as d3_dispatch } from 'd3-dispatch';
+
+import {
+    event as d3_event,
+    select as d3_select,
+    selectAll as d3_selectAll
+} from 'd3-selection';
+
+import { t, textDirection } from '../util/locale';
+import { actionChangePreset } from '../actions/index';
+import { operationDelete } from '../operations/index';
+import { svgIcon } from '../svg/index';
+import { tooltip } from '../util/tooltip';
+import { uiPresetIcon } from './preset_icon';
+import { uiTagReference } from './tag_reference';
+import { utilKeybinding, utilNoAuto, utilRebind } from '../util';
+
+
+export function uiSearchAdd(context) {
+    var dispatch = d3_dispatch('choose');
+
+    function searchAdd(selection) {
+
+        var searchWrap = selection
+            .append('div')
+            .attr('class', 'search-wrap');
+
+        var search = searchWrap
+            .append('input')
+            .attr('class', 'search-input')
+            .attr('placeholder', t('modes.add_feature.title'))
+            .attr('type', 'search')
+            .call(utilNoAuto);
+            //.on('keydown', initialKeydown)
+            //.on('keypress', keypress)
+            //.on('input', inputevent);
+
+        searchWrap
+            .call(svgIcon('#iD-icon-search', 'search-icon pre-text'));
+    }
+
+    return utilRebind(searchAdd, dispatch, 'on');
+}