Add disabled message to tooltip when Zoom To Selection button is disabled

This commit is contained in:
Quincy Morgan
2020-06-12 13:55:05 -04:00
parent 4874ee2c62
commit 70aaa0fa3a
4 changed files with 33 additions and 19 deletions

View File

@@ -599,6 +599,7 @@ en:
zoom_to:
key: Z
title: Zoom To Selection
no_selection: Nothing to zoom to.
show_more: Show More
view_on_osm: View on openstreetmap.org
view_on_osmose: View on osmose.openstreetmap.fr

View File

@@ -759,7 +759,8 @@
"inspector": {
"zoom_to": {
"key": "Z",
"title": "Zoom To Selection"
"title": "Zoom To Selection",
"no_selection": "Nothing to zoom to."
},
"show_more": "Show More",
"view_on_osm": "View on openstreetmap.org",

View File

@@ -72,7 +72,7 @@ export function uiZoom(context) {
.append('button')
.attr('class', function(d) { return d.id; })
.on('click.editor', function(d) {
if (!d3_select(this).classed('disabled')) {
if (!d.disabled()) {
d.action();
}
})

View File

@@ -1,4 +1,4 @@
import { select as d3_select } from 'd3-selection';
import { event as d3_event } from 'd3-selection';
import { t, localizer } from '../core/localizer';
import { uiTooltip } from './tooltip';
@@ -6,10 +6,15 @@ import { svgIcon } from '../svg/icon';
export function uiZoomToSelection(context) {
var _button = d3_select(null);
function isDisabled() {
var mode = context.mode();
return !mode || !mode.zoomToSelected;
}
function click() {
if (d3_select(this).classed('disabled')) return;
d3_event.preventDefault();
if (isDisabled()) return;
var mode = context.mode();
if (mode && mode.zoomToSelected) {
@@ -17,25 +22,32 @@ export function uiZoomToSelection(context) {
}
}
function setEnabledState() {
var mode = context.mode();
var isEnabled = mode && !!mode.zoomToSelected;
_button.classed('disabled', !isEnabled);
}
context.on('enter.uiZoomToSelection', setEnabledState);
return function(selection) {
_button = selection
var tooltipBehavior = uiTooltip()
.placement((localizer.textDirection() === 'rtl') ? 'right' : 'left')
.title(function() {
if (isDisabled()) {
return t('inspector.zoom_to.no_selection');
}
return t('inspector.zoom_to.title');
})
.keys([t('inspector.zoom_to.key')]);
var button = selection
.append('button')
.on('click', click)
.call(svgIcon('#iD-icon-framed-dot', 'light'))
.call(uiTooltip()
.placement((localizer.textDirection() === 'rtl') ? 'right' : 'left')
.title(t('inspector.zoom_to.title'))
.keys([t('inspector.zoom_to.key')])
);
.call(tooltipBehavior);
function setEnabledState() {
button.classed('disabled', isDisabled());
if (!button.select('.tooltip.in').empty()) {
button.call(tooltipBehavior.updateContent);
}
}
context.on('enter.uiZoomToSelection', setEnabledState);
setEnabledState();
};