diff --git a/css/80_app.css b/css/80_app.css index 757ff6369..7fda6878b 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -653,6 +653,10 @@ button.add-note svg.icon { line-height: 1.2em; width: 100%; } +.search-add .list-item.disabled .preset-icon-container, +.search-add .list-item.disabled .label { + opacity: 0.55; +} .search-add .list-item > *:not(button) { pointer-events: none; } @@ -664,6 +668,9 @@ button.add-note svg.icon { top: 0; left: 0; } +.search-add .list-item button.choose.disabled { + background-color: #ececec; +} .search-add .list-item button.accessory { position: relative; flex: 0 0 auto; @@ -4854,22 +4861,29 @@ svg.mouseclick use.right { } /* dark tooltips for sidebar / panels */ +.tooltip.dark.top .tooltip-arrow, .map-pane .tooltip.top .tooltip-arrow, #sidebar .tooltip.top .tooltip-arrow { border-top-color: #000; } +.tooltip.dark.bottom .tooltip-arrow, .map-pane .tooltip.bottom .tooltip-arrow, #sidebar .tooltip.bottom .tooltip-arrow { border-bottom-color: #000; } +.tooltip.dark.left .tooltip-arrow, .map-pane .tooltip.left .tooltip-arrow, #sidebar .tooltip.left .tooltip-arrow { border-left-color: #000; } +.tooltip.dark.right .tooltip-arrow, .map-pane .tooltip.right .tooltip-arrow, #sidebar .tooltip.right .tooltip-arrow { border-right-color: #000; } +.tooltip.dark .tooltip-inner, +.tooltip.dark .tooltip-heading, +.tooltip.dark .keyhint-wrap, .map-pane .tooltip-inner, .map-pane .tooltip-heading, .map-pane .keyhint-wrap, diff --git a/modules/ui/search_add.js b/modules/ui/search_add.js index 0aa29b022..f3f1b24f8 100644 --- a/modules/ui/search_add.js +++ b/modules/ui/search_add.js @@ -75,8 +75,16 @@ export function uiSearchAdd(context) { .append('div') .attr('class', 'list');// //.call(drawList, context.presets().defaults(geometry, 36)); + + context.features().on('change.search-add', updateForFeatureHiddenState); } + function isSingularItem(item) { + if (item.geometry.filter) { + return supportedGeometry(item).length === 1; + } + return false; + } function supportedGeometry(preset) { return preset.geometry.filter(function(geometry) { return ['point', 'line', 'area'].indexOf(geometry) !== -1; @@ -116,9 +124,11 @@ export function uiSearchAdd(context) { .append('div') .attr('class', function(item) { return 'list-item preset-' + item.id.replace('/', '-'); }); - var button = row.append('button') + row.append('button') .attr('class', 'choose') .on('click', function(d) { + if (d3_select(this).classed('disabled')) return; + var geom = defaultGeometry(d); var markerClass = 'add-preset add-' + geom + ' add-preset-' + d.name() .replace(/\s+/g, '_') @@ -169,7 +179,41 @@ export function uiSearchAdd(context) { } }); - //updateForFeatureHiddenState(); + updateForFeatureHiddenState(); + } + + function updateForFeatureHiddenState() { + + var listItem = d3_selectAll('.search-add .popover .list-item'); + + // remove existing tooltips + listItem.selectAll('button.choose').call(tooltip().destroyAny); + + listItem.each(function(item, index) { + if (!isSingularItem(item)) { + return; + } + var geometry = defaultGeometry(item); + + var hiddenPresetFeaturesId = context.features().isHiddenPreset(item, geometry); + var isHiddenPreset = !!hiddenPresetFeaturesId; + + var button = d3_select(this).selectAll('button.choose'); + + d3_select(this).classed('disabled', isHiddenPreset); + button.classed('disabled', isHiddenPreset); + + if (isHiddenPreset) { + var isAutoHidden = context.features().autoHidden(hiddenPresetFeaturesId); + var tooltipIdSuffix = isAutoHidden ? 'zoom' : 'manual'; + var tooltipObj = { features: t('feature.' + hiddenPresetFeaturesId + '.description') }; + button.call(tooltip('dark') + .html(true) + .title(t('inspector.hidden_preset.' + tooltipIdSuffix, tooltipObj)) + .placement(index < 2 ? 'bottom' : 'top') + ); + } + }); } return utilRebind(searchAdd, dispatch, 'on'); diff --git a/modules/util/tooltip.js b/modules/util/tooltip.js index 637229aee..bdb15b3a7 100644 --- a/modules/util/tooltip.js +++ b/modules/util/tooltip.js @@ -3,7 +3,7 @@ import { utilFunctor } from './index'; var _tooltipID = 0; -export function tooltip() { +export function tooltip(klass) { var _id = _tooltipID++; var tooltip = function(selection) { selection.each(setup); @@ -98,7 +98,7 @@ export function tooltip() { var enter = tip.enter() .append('div') - .attr('class', 'tooltip tooltip-' + _id); + .attr('class', 'tooltip tooltip-' + _id + ' ' + (klass ? klass : '')); enter .append('div')