Add tag documentation to presets in the ribbon search results (close #6023)

modules/ui/search_add.js

@@ -16,6 +16,7 @@ import {
 import { t, textDirection } from '../util/locale';
 import { svgIcon } from '../svg/index';
 import { tooltip } from '../util/tooltip';
+import { uiTagReference } from './tag_reference';
 import { uiTooltipHtml } from './tooltipHtml';
 import { uiPresetFavorite } from './preset_favorite';
 import { uiPresetIcon } from './preset_icon';
@@ -371,6 +372,21 @@ export function uiSearchAdd(context) {
                 d3_select(this).call(presetFavorite.button);
             }
         });
+        row.each(function(d) {
+            if ((d.geometry && !d.isSubitem) || d.geometries) {
+
+                var reference = uiTagReference(d.preset.reference(d.geometry || d.geometries[0]), context);
+
+                var thisRow = d3_select(this);
+                thisRow.call(reference.button, 'accessory', 'info');
+
+                var selector = '#' + thisRow.node().id + ' + *';
+                var subsection = d3_select(thisRow.node().parentElement)
+                    .insert('div', selector)
+                    .attr('class', 'subsection reference');
+                subsection.call(reference.body);
+            }
+        });
     }
 
     function updateForFeatureHiddenState() {
@@ -419,7 +435,7 @@ export function uiSearchAdd(context) {
             var subitems = item.subitems();
             var selector = '#' + itemSelection.node().id + ' + *';
             item.subsection = d3_select(itemSelection.node().parentElement).insert('div', selector)
-                .attr('class', 'subsection');
+                .attr('class', 'subsection subitems');
             var subitemsEnter = item.subsection.selectAll('.list-item')
                 .data(subitems)
                 .enter();

modules/ui/tag_reference.js

@@ -118,6 +118,12 @@ export function uiTagReference(what) {
             .style('opacity', '1');
 
         _showing = true;
+
+        _button.selectAll('svg.icon use').each(function(iconUse) {
+            if (iconUse.attr && iconUse.attr('href') === '#iD-icon-info') {
+                iconUse.attr('href', '#iD-icon-info-filled');
+            }
+        });
     }
 
 
@@ -132,19 +138,26 @@ export function uiTagReference(what) {
             });
 
         _showing = false;
+
+        _button.selectAll('svg.icon use').each(function(iconUse) {
+            if (iconUse.attr && iconUse.attr('href') === '#iD-icon-info-filled') {
+                iconUse.attr('href', '#iD-icon-info');
+            }
+        });
+
     }
 
 
-    tagReference.button = function(selection) {
+    tagReference.button = function(selection, klass, iconName) {
         _button = selection.selectAll('.tag-reference-button')
             .data([0]);
 
         _button = _button.enter()
             .append('button')
-            .attr('class', 'tag-reference-button')
+            .attr('class', 'tag-reference-button ' + klass)
             .attr('title', t('icons.information'))
             .attr('tabindex', -1)
-            .call(svgIcon('#iD-icon-inspect'))
+            .call(svgIcon('#iD-icon-' + (iconName || 'inspect')))
             .merge(_button);
 
         _button

modules/ui/top_toolbar.js

@@ -1,6 +1,4 @@
 
-import { select as d3_select, selectAll as d3_selectAll } from 'd3-selection';
-
 import { svgIcon } from '../svg';
 import { t, textDirection } from '../util/locale';
 import { tooltip } from '../util/tooltip';