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

2026-03-06 11:21:33 +00:00 · 2019-03-11 17:49:10 -04:00
parent 1698be7bfa
commit fa3756d4b2
6 changed files with 69 additions and 21 deletions
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -659,7 +659,7 @@ button.add-note svg.icon {
    padding: 2px;
 }
 .search-add .list-item:not(:last-of-type),
-.search-add .subsection .list-item {
+.search-add .subsection > * {
    border-bottom: 1px solid #DCDCDC;
 }
 .search-add .list-item .label {
@@ -711,6 +711,10 @@ button.add-note svg.icon {
 .search-add .subsection .list-item button.choose {
    opacity: 0.85;
 }
+.search-add .subsection .tag-reference-body {
+    background: rgba(255, 255, 255, 0.85);
+    padding: 10px;
+}
 .search-add .list-item button.accessory {
    position: relative;
    flex: 0 0 auto;
@@ -722,13 +726,16 @@ button.add-note svg.icon {
 .search-add .list-item button.accessory:hover {
    color: #666;
 }
+.search-add .list-item button.tag-reference-open path {
+    fill: #000;
+}
 .search-add .subsection {
    background-color: #CBCBCB;
 }
-[dir='ltr'] .search-add .subsection {
+[dir='ltr'] .search-add .subitems {
    padding-left: 6px;
 }
-[dir='rtl'] .search-add .subsection {
+[dir='rtl'] .search-add .subitems {
    padding-right: 6px;
 }
 .search-add button.add-preset {
@@ -1339,17 +1346,6 @@ button.preset-favorite-button.active .icon {
    fill-opacity: inherit;
 }

-img.tag-reference-wiki-image {
-    float: right;
-    width: 33.3333%;
-    border-radius: 4px;
-    margin: 10px 5px 15px 10px;
-}
-[dir='rtl'] img.tag-reference-wiki-image {
-    float: left;
-    margin: 10px 10px 15px 5px;
-}
-

 .current .preset-list-button,
 .current .preset-list-button .label {
@@ -2479,17 +2475,31 @@ div.combobox {
    flex: 1 1 auto;
    width: 100%;
    overflow: hidden;
+    display: none;
+    padding-top: 10px;
 }
 .tag-reference-body.expanded {
    padding-bottom: 10px;
+    display: inline-block;
 }
 .tag-reference-description {
-    margin: 10px 5px;
+
 }
 .tag-reference-link {
    display: block;
 }

+img.tag-reference-wiki-image {
+    float: right;
+    width: 33.3333%;
+    border-radius: 4px;
+    margin: 0 0 0 5px;
+}
+[dir='rtl'] img.tag-reference-wiki-image {
+    float: left;
+    margin: 0 5px 0 0;
+}
+
 .preset-list .tag-reference-body {
    position: relative;
    width: 100%;
--- a/modules/ui/search_add.js
+++ b/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();
--- a/modules/ui/tag_reference.js
+++ b/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
--- a/modules/ui/top_toolbar.js
+++ b/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';
--- a/svg/iD-sprite/icons/icon-info-filled.svg
+++ b/svg/iD-sprite/icons/icon-info-filled.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g transform="translate(1.500000, 1.500000)" fill="currentColor">
+        <path d="M8.5,16.5 C4.081722,16.5 0.5,12.918278 0.5,8.5 C0.5,4.081722 4.081722,0.5 8.5,0.5 C12.918278,0.5 16.5,4.081722 16.5,8.5 C16.5,12.918278 12.918278,16.5 8.5,16.5 Z M10.5418959,12.0922852 C10.4699555,12.1261395 10.3535829,12.165283 10.1927748,12.2097168 C10.0319668,12.2541506 9.88808798,12.2763672 9.76113422,12.2763672 C9.49029953,12.2763672 9.29987175,12.231934 9.18984516,12.1430664 C9.07981857,12.0541988 9.0248061,11.8870455 9.0248061,11.6416016 C9.0248061,11.5442703 9.04173301,11.4003916 9.07558735,11.2099609 C9.10944168,11.0195303 9.14752724,10.8502612 9.18984516,10.7021484 L9.71035297,8.85498047 C9.76113448,8.68570879 9.79604624,8.49951273 9.8150893,8.29638672 C9.83413236,8.0932607 9.84365375,7.9514978 9.84365375,7.87109375 C9.84365375,7.48176889 9.70718051,7.16544718 9.43422993,6.92211914 C9.16127934,6.6787911 8.77301825,6.55712891 8.269435,6.55712891 C7.99013673,6.55712891 7.69391574,6.60685172 7.38076313,6.70629883 C7.06761052,6.80574594 6.73965156,6.92529227 6.39687641,7.06494141 L6.25722797,7.63623047 C6.35879098,7.59814434 6.48045317,7.55794292 6.62221821,7.515625 C6.76398324,7.47330708 6.90257235,7.45214844 7.03798969,7.45214844 C7.31305617,7.45214844 7.49925223,7.49869745 7.59658344,7.59179688 C7.69391466,7.6848963 7.74257953,7.84993371 7.74257953,8.08691406 C7.74257953,8.21809961 7.72671055,8.36303632 7.69497211,8.52172852 C7.66323367,8.68042072 7.62409018,8.84863192 7.57754047,9.02636719 L7.05703266,10.8798828 C7.01048295,11.0745452 6.97662912,11.249104 6.95547016,11.4035645 C6.9343112,11.5580249 6.92373188,11.7093092 6.92373188,11.8574219 C6.92373188,12.2382832 7.06443685,12.552489 7.34585102,12.8000488 C7.62726519,13.0476087 8.02187387,13.1713867 8.52968891,13.1713867 C8.85976869,13.1713867 9.14964209,13.1280115 9.39931782,13.0412598 C9.64899354,12.954508 9.9833001,12.8286141 10.4022475,12.6635742 L10.5418959,12.0922852 Z M10.6751967,4.34179688 C10.6751967,4.02018068 10.5535345,3.74511833 10.3102065,3.51660156 C10.0668784,3.28808479 9.77383125,3.17382812 9.4310561,3.17382812 C9.08828095,3.17382812 8.79417581,3.28808479 8.54873188,3.51660156 C8.30328794,3.74511833 8.18056782,4.02018068 8.18056782,4.34179688 C8.18056782,4.66341307 8.30328794,4.93741749 8.54873188,5.16381836 C8.79417581,5.39021923 9.08828095,5.50341797 9.4310561,5.50341797 C9.77383125,5.50341797 10.0668784,5.39021923 10.3102065,5.16381836 C10.5535345,4.93741749 10.6751967,4.66341307 10.6751967,4.34179688 Z"/>
+    </g>
+</svg>
--- a/svg/iD-sprite/icons/icon-info.svg
+++ b/svg/iD-sprite/icons/icon-info.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <circle stroke="currentColor" fill="transparent" cx="10" cy="10" r="7.5"/>
+    <path d="M12.0418959,13.5922852 L11.9022475,14.1635742 C11.4833001,14.3286141 11.1489935,14.454508 10.8993178,14.5412598 C10.6496421,14.6280115 10.3597687,14.6713867 10.0296889,14.6713867 C9.52187387,14.6713867 9.12726519,14.5476087 8.84585102,14.3000488 C8.56443685,14.052489 8.42373188,13.7382832 8.42373188,13.3574219 C8.42373188,13.2093092 8.4343112,13.0580249 8.45547016,12.9035645 C8.47662912,12.749104 8.51048295,12.5745452 8.55703266,12.3798828 L9.07754047,10.5263672 C9.12409018,10.3486319 9.16323367,10.1804207 9.19497211,10.0217285 C9.22671055,9.86303632 9.24257953,9.71809961 9.24257953,9.58691406 C9.24257953,9.34993371 9.19391466,9.1848963 9.09658344,9.09179688 C8.99925223,8.99869745 8.81305617,8.95214844 8.53798969,8.95214844 C8.40257235,8.95214844 8.26398324,8.97330708 8.12221821,9.015625 C7.98045317,9.05794292 7.85879098,9.09814434 7.75722797,9.13623047 L7.89687641,8.56494141 C8.23965156,8.42529227 8.56761052,8.30574594 8.88076313,8.20629883 C9.19391574,8.10685172 9.49013673,8.05712891 9.769435,8.05712891 C10.2730183,8.05712891 10.6612793,8.1787911 10.9342299,8.42211914 C11.2071805,8.66544718 11.3436538,8.98176889 11.3436538,9.37109375 C11.3436538,9.4514978 11.3341324,9.5932607 11.3150893,9.79638672 C11.2960462,9.99951273 11.2611345,10.1857088 11.210353,10.3549805 L10.6898452,12.2021484 C10.6475272,12.3502612 10.6094417,12.5195303 10.5755873,12.7099609 C10.541733,12.9003916 10.5248061,13.0442703 10.5248061,13.1416016 C10.5248061,13.3870455 10.5798186,13.5541988 10.6898452,13.6430664 C10.7998718,13.731934 10.9902995,13.7763672 11.2611342,13.7763672 C11.388088,13.7763672 11.5319668,13.7541506 11.6927748,13.7097168 C11.8535829,13.665283 11.9699555,13.6261395 12.0418959,13.5922852 Z M12.1751967,5.84179688 C12.1751967,6.16341307 12.0535345,6.43741749 11.8102065,6.66381836 C11.5668784,6.89021923 11.2738312,7.00341797 10.9310561,7.00341797 C10.5882809,7.00341797 10.2941758,6.89021923 10.0487319,6.66381836 C9.80328794,6.43741749 9.68056782,6.16341307 9.68056782,5.84179688 C9.68056782,5.52018068 9.80328794,5.24511833 10.0487319,5.01660156 C10.2941758,4.78808479 10.5882809,4.67382812 10.9310561,4.67382812 C11.2738312,4.67382812 11.5668784,4.78808479 11.8102065,5.01660156 C12.0535345,5.24511833 12.1751967,5.52018068 12.1751967,5.84179688 Z" fill="currentColor"/>
+</svg>