Add initial search bar UI element

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
 ------------------------------------------------------- */

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."

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.",

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);
 

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');
+}