From 9a7ad8a5cb0568eeab201bb6c960a060941dfa45 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Mon, 4 Mar 2019 12:11:31 -0500
Subject: [PATCH] Add disclosure arrow to expandable search results

---
 css/80_app.css           |  8 +++++---
 modules/ui/search_add.js | 31 ++++++++++++++++++++++++-------
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index a699a8479..0ac12ee94 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -659,9 +659,11 @@ button.add-note svg.icon {
 .search-add .list-item.disabled .label {
     opacity: 0.55;
 }
-.search-add .subsection .list-item .label {
-    /*font-weight: normal;
-    letter-spacing: 0.1;*/
+[dir='ltr'] .search-add .list-item .label .icon.inline {
+    margin-left: 0;
+}
+[dir='rtl'] .search-add .list-item .label .icon.inline {
+    margin-right: 0;
 }
 .search-add .list-item > *:not(button) {
     pointer-events: none;
diff --git a/modules/ui/search_add.js b/modules/ui/search_add.js
index 708df885f..ec258fd96 100644
--- a/modules/ui/search_add.js
+++ b/modules/ui/search_add.js
@@ -54,12 +54,13 @@ export function uiSearchAdd(context) {
             .on('keydown', function(){
                 // up/down arrow key navigation
 
+                var nextFocus,
+                    priorFocus;
                 if (d3_event.keyCode === utilKeybinding.keyCodes['↓']) {
                     d3_event.preventDefault();
                     d3_event.stopPropagation();
 
-                    var nextFocus,
-                        priorFocus = popover.selectAll('.list .list-item.focused');
+                    priorFocus = popover.selectAll('.list .list-item.focused');
                     if (priorFocus.empty()) {
                         nextFocus = popover.selectAll('.list > .list-item:first-child');
                     } else {
@@ -78,9 +79,9 @@ export function uiSearchAdd(context) {
                     d3_event.preventDefault();
                     d3_event.stopPropagation();
 
-                    var priorFocus = popover.selectAll('.list .list-item.focused');
+                    priorFocus = popover.selectAll('.list .list-item.focused');
                     if (!priorFocus.empty()) {
-                        var nextFocus = d3_select(priorFocus.nodes()[0].previousElementSibling);
+                        nextFocus = d3_select(priorFocus.nodes()[0].previousElementSibling);
                         if (!nextFocus.empty() && !nextFocus.classed('list-item')) {
                             nextFocus = nextFocus.selectAll('.list-item:last-child');
                         }
@@ -240,8 +241,17 @@ export function uiSearchAdd(context) {
                     .sizeClass('small')
             );
         });
-        row.append('div')
-            .attr('class', 'label')
+        var label = row.append('div')
+            .attr('class', 'label');
+
+        label.each(function(d) {
+            if (!d.geometry) {
+                d3_select(this)
+                    .call(svgIcon((textDirection === 'rtl' ? '#iD-icon-backward' : '#iD-icon-forward'), 'inline'));
+            }
+        });
+
+        label.append('span')
             .text(function(d) {
                 if (d.isSubitem) {
                     return t('modes.add_' + d.geometry + '.title');
@@ -307,15 +317,22 @@ export function uiSearchAdd(context) {
             var selection = d3_select(this);
             if (selection.classed('disabled')) return;
 
+            var listItemNode = selection.node().closest('.list-item');
+
             var shouldExpand = !selection.classed('expanded');
 
             selection.classed('expanded', shouldExpand);
 
+            var iconName = shouldExpand ?
+                '#iD-icon-down' : (textDirection === 'rtl' ? '#iD-icon-backward' : '#iD-icon-forward');
+            d3_select(listItemNode).selectAll('.label svg.icon use')
+                .attr('href', iconName);
+
             if (shouldExpand) {
                 var subitems = geometries.map(function(geometry) {
                     return AddablePresetItem(preset, geometry, true);
                 });
-                var selector = '#' + selection.node().closest('.list-item').id + ' + *';
+                var selector = '#' + listItemNode.id + ' + *';
                 subsection = d3_selectAll('.search-add .popover .list').insert('div', selector)
                     .attr('class', 'subsection');
                 var subitemsEnter = subsection.selectAll('.list-item')