From 5aab09845dd7162a28ace39fac126d4c20aabaa9 Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Wed, 26 Feb 2020 19:59:09 -0800 Subject: [PATCH] Move the "zoom to this" button from the inspector to the map next to the zoom in/out buttons (re: #6601) Use title case for the Zoom In and Zoom Out button labels --- css/80_app.css | 15 +++++++--- data/core.yaml | 10 ++----- dist/locales/en.json | 10 ++----- modules/ui/data_editor.js | 18 +----------- modules/ui/improveOSM_editor.js | 11 -------- modules/ui/index.js | 1 - modules/ui/init.js | 6 ++++ modules/ui/keepRight_editor.js | 11 -------- modules/ui/note_editor.js | 16 ----------- modules/ui/osmose_editor.js | 11 -------- modules/ui/sections/feature_type.js | 20 -------------- modules/ui/zoom_to_selection.js | 43 +++++++++++++++++++++++++++++ 12 files changed, 67 insertions(+), 105 deletions(-) create mode 100644 modules/ui/zoom_to_selection.js diff --git a/css/80_app.css b/css/80_app.css index 6a41048e8..c06206559 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -417,6 +417,7 @@ button[disabled].action:hover { .icon.light { color: #fff; + fill: currentColor; } .icon.created { color: #00ca07; @@ -2875,8 +2876,10 @@ div.full-screen > button:hover { } -/* Zoom Buttons +/* Map Controls ------------------------------------------------------- */ + +/* Zoom in/out buttons */ .zoombuttons > button.zoom-in { border-radius: 4px 0 0 0; } @@ -2884,9 +2887,7 @@ div.full-screen > button:hover { border-radius: 0 4px 0 0; } - -/* Geolocate Button -------------------------------------------------------- */ +/* Geolocate button */ .geolocate-control { margin-bottom: 10px; } @@ -2897,6 +2898,12 @@ div.full-screen > button:hover { border-radius: 0 0 4px 0; } +/* Zoom to selection button */ +.zoom-to-selection-control .icon { + width: 22px; + height: 22px; +} + /* Background / Map Data / Help Pane buttons ------------------------------------------------------- */ diff --git a/data/core.yaml b/data/core.yaml index 594287189..027a1b9df 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -540,11 +540,7 @@ en: inspector: zoom_to: key: Z - title: Zoom to this - tooltip_feature: "Center and zoom the map to focus on this feature." - tooltip_note: "Center and zoom the map to focus on this note." - tooltip_data: "Center and zoom the map to focus on this data." - tooltip_issue: "Center and zoom the map to focus on this issue." + title: Zoom To Selection show_more: Show More view_on_osm: View on openstreetmap.org view_on_osmose: View on osmose.openstreetmap.fr @@ -835,8 +831,8 @@ en: on_wiki: "{tag} on wiki.osm.org" used_with: "used with {type}" zoom: - in: Zoom in - out: Zoom out + in: Zoom In + out: Zoom Out cannot_zoom: "Cannot zoom out further in current mode." full_screen: Toggle Full Screen QA: diff --git a/dist/locales/en.json b/dist/locales/en.json index 33b405d47..9e24c177a 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -684,11 +684,7 @@ "inspector": { "zoom_to": { "key": "Z", - "title": "Zoom to this", - "tooltip_feature": "Center and zoom the map to focus on this feature.", - "tooltip_note": "Center and zoom the map to focus on this note.", - "tooltip_data": "Center and zoom the map to focus on this data.", - "tooltip_issue": "Center and zoom the map to focus on this issue." + "title": "Zoom To Selection" }, "show_more": "Show More", "view_on_osm": "View on openstreetmap.org", @@ -1044,8 +1040,8 @@ "used_with": "used with {type}" }, "zoom": { - "in": "Zoom in", - "out": "Zoom out" + "in": "Zoom In", + "out": "Zoom Out" }, "cannot_zoom": "Cannot zoom out further in current mode.", "full_screen": "Toggle Full Screen", diff --git a/modules/ui/data_editor.js b/modules/ui/data_editor.js index e78329f6b..bb770f4de 100644 --- a/modules/ui/data_editor.js +++ b/modules/ui/data_editor.js @@ -3,14 +3,11 @@ import { modeBrowse } from '../modes/browse'; import { svgIcon } from '../svg/icon'; import { uiDataHeader } from './data_header'; -import { uiQuickLinks } from './quick_links'; import { uiSectionRawTagEditor } from './sections/raw_tag_editor'; -import { uiTooltipHtml } from './tooltipHtml'; export function uiDataEditor(context) { var dataHeader = uiDataHeader(); - var quickLinks = uiQuickLinks(); var rawTagEditor = uiSectionRawTagEditor('custom-data-tag-editor', context) .expandedByDefault(true) .readOnlyTags([/./]); @@ -18,18 +15,6 @@ export function uiDataEditor(context) { function dataEditor(selection) { - // quick links - var choices = [{ - id: 'zoom_to', - label: 'inspector.zoom_to.title', - tooltip: function() { - return uiTooltipHtml(t('inspector.zoom_to.tooltip_data'), t('inspector.zoom_to.key')); - }, - click: function zoomTo() { - context.mode().zoomToSelected(); - } - }]; - var header = selection.selectAll('.header') .data([0]); @@ -67,8 +52,7 @@ export function uiDataEditor(context) { .append('div') .attr('class', 'modal-section data-editor') .merge(editor) - .call(dataHeader.datum(_datum)) - .call(quickLinks.choices(choices)); + .call(dataHeader.datum(_datum)); var rte = body.selectAll('.raw-tag-editor') .data([0]); diff --git a/modules/ui/improveOSM_editor.js b/modules/ui/improveOSM_editor.js index a09e86141..1dd9d993d 100644 --- a/modules/ui/improveOSM_editor.js +++ b/modules/ui/improveOSM_editor.js @@ -9,8 +9,6 @@ import { svgIcon } from '../svg/icon'; import { uiImproveOsmComments } from './improveOSM_comments'; import { uiImproveOsmDetails } from './improveOSM_details'; import { uiImproveOsmHeader } from './improveOSM_header'; -import { uiQuickLinks } from './quick_links'; -import { uiTooltipHtml } from './tooltipHtml'; import { utilNoAuto, utilRebind } from '../util'; @@ -19,18 +17,10 @@ export function uiImproveOsmEditor(context) { const qaDetails = uiImproveOsmDetails(context); const qaComments = uiImproveOsmComments(context); const qaHeader = uiImproveOsmHeader(context); - const quickLinks = uiQuickLinks(); let _qaItem; function improveOsmEditor(selection) { - // quick links - const choices = [{ - id: 'zoom_to', - label: 'inspector.zoom_to.title', - tooltip: () => uiTooltipHtml(t('inspector.zoom_to.tooltip_qaItem'), t('inspector.zoom_to.key')), - click: () => context.mode().zoomToSelected() - }]; const headerEnter = selection.selectAll('.header') .data([0]) @@ -64,7 +54,6 @@ export function uiImproveOsmEditor(context) { .attr('class', 'modal-section qa-editor') .merge(editor) .call(qaHeader.issue(_qaItem)) - .call(quickLinks.choices(choices)) .call(qaDetails.issue(_qaItem)) .call(qaComments.issue(_qaItem)) .call(improveOsmSaveSection); diff --git a/modules/ui/index.js b/modules/ui/index.js index 2ac852a93..4c335315f 100644 --- a/modules/ui/index.js +++ b/modules/ui/index.js @@ -44,7 +44,6 @@ export { uiNoteHeader } from './note_header'; export { uiNoteReport } from './note_report'; export { uiPresetIcon } from './preset_icon'; export { uiPresetList } from './preset_list'; -export { uiQuickLinks } from './quick_links'; export { uiRadialMenu } from './radial_menu'; export { uiRestore } from './restore'; export { uiScale } from './scale'; diff --git a/modules/ui/init.js b/modules/ui/init.js index 17f5d9f63..18a177b2d 100644 --- a/modules/ui/init.js +++ b/modules/ui/init.js @@ -37,6 +37,7 @@ import { uiStatus } from './status'; import { uiTopToolbar } from './top_toolbar'; import { uiVersion } from './version'; import { uiZoom } from './zoom'; +import { uiZoomToSelection } from './zoom_to_selection'; import { uiCmd } from './cmd'; import { uiPaneBackground } from './panes/background'; @@ -103,6 +104,11 @@ export function uiInit(context) { .attr('class', 'map-control zoombuttons') .call(uiZoom(context)); + controls + .append('div') + .attr('class', 'map-control zoom-to-selection-control') + .call(uiZoomToSelection(context)); + controls .append('div') .attr('class', 'map-control geolocate-control') diff --git a/modules/ui/keepRight_editor.js b/modules/ui/keepRight_editor.js index 18fb2306f..b106ec8ee 100644 --- a/modules/ui/keepRight_editor.js +++ b/modules/ui/keepRight_editor.js @@ -8,8 +8,6 @@ import { svgIcon } from '../svg/icon'; import { uiKeepRightDetails } from './keepRight_details'; import { uiKeepRightHeader } from './keepRight_header'; -import { uiQuickLinks } from './quick_links'; -import { uiTooltipHtml } from './tooltipHtml'; import { uiViewOnKeepRight } from './view_on_keepRight'; import { utilNoAuto, utilRebind } from '../util'; @@ -18,18 +16,10 @@ export function uiKeepRightEditor(context) { const dispatch = d3_dispatch('change'); const qaDetails = uiKeepRightDetails(context); const qaHeader = uiKeepRightHeader(context); - const quickLinks = uiQuickLinks(); let _qaItem; function keepRightEditor(selection) { - // quick links - const choices = [{ - id: 'zoom_to', - label: 'inspector.zoom_to.title', - tooltip: () => uiTooltipHtml(t('inspector.zoom_to.tooltip_qaItem'), t('inspector.zoom_to.key')), - click: () => context.mode().zoomToSelected() - }]; const headerEnter = selection.selectAll('.header') .data([0]) @@ -64,7 +54,6 @@ export function uiKeepRightEditor(context) { .attr('class', 'modal-section qa-editor') .merge(editor) .call(qaHeader.issue(_qaItem)) - .call(quickLinks.choices(choices)) .call(qaDetails.issue(_qaItem)) .call(keepRightSaveSection); diff --git a/modules/ui/note_editor.js b/modules/ui/note_editor.js index 06050cff9..c661810fe 100644 --- a/modules/ui/note_editor.js +++ b/modules/ui/note_editor.js @@ -15,8 +15,6 @@ import { svgIcon } from '../svg/icon'; import { uiNoteComments } from './note_comments'; import { uiNoteHeader } from './note_header'; import { uiNoteReport } from './note_report'; -import { uiQuickLinks } from './quick_links'; -import { uiTooltipHtml } from './tooltipHtml'; import { uiViewOnOSM } from './view_on_osm'; import { @@ -27,7 +25,6 @@ import { export function uiNoteEditor(context) { var dispatch = d3_dispatch('change'); - var quickLinks = uiQuickLinks(); var noteComments = uiNoteComments(context); var noteHeader = uiNoteHeader(); @@ -38,18 +35,6 @@ export function uiNoteEditor(context) { function noteEditor(selection) { - // quick links - var choices = [{ - id: 'zoom_to', - label: 'inspector.zoom_to.title', - tooltip: function() { - return uiTooltipHtml(t('inspector.zoom_to.tooltip_note'), t('inspector.zoom_to.key')); - }, - click: function zoomTo() { - context.mode().zoomToSelected(); - } - }]; - var header = selection.selectAll('.header') .data([0]); @@ -87,7 +72,6 @@ export function uiNoteEditor(context) { .attr('class', 'modal-section note-editor') .merge(editor) .call(noteHeader.note(_note)) - .call(quickLinks.choices(choices)) .call(noteComments.note(_note)) .call(noteSaveSection); diff --git a/modules/ui/osmose_editor.js b/modules/ui/osmose_editor.js index b570e1f14..e230d6a33 100644 --- a/modules/ui/osmose_editor.js +++ b/modules/ui/osmose_editor.js @@ -7,8 +7,6 @@ import { svgIcon } from '../svg/icon'; import { uiOsmoseDetails } from './osmose_details'; import { uiOsmoseHeader } from './osmose_header'; -import { uiQuickLinks } from './quick_links'; -import { uiTooltipHtml } from './tooltipHtml'; import { uiViewOnOsmose } from './view_on_osmose'; import { utilRebind } from '../util'; @@ -17,18 +15,10 @@ export function uiOsmoseEditor(context) { const dispatch = d3_dispatch('change'); const qaDetails = uiOsmoseDetails(context); const qaHeader = uiOsmoseHeader(context); - const quickLinks = uiQuickLinks(); let _qaItem; function osmoseEditor(selection) { - // quick links - const choices = [{ - id: 'zoom_to', - label: 'inspector.zoom_to.title', - tooltip: () => uiTooltipHtml(t('inspector.zoom_to.tooltip_qaItem'), t('inspector.zoom_to.key')), - click: () => context.mode().zoomToSelected() - }]; const header = selection.selectAll('.header') .data([0]); @@ -63,7 +53,6 @@ export function uiOsmoseEditor(context) { .attr('class', 'modal-section qa-editor') .merge(editor) .call(qaHeader.issue(_qaItem)) - .call(quickLinks.choices(choices)) .call(qaDetails.issue(_qaItem)) .call(osmoseSaveSection); diff --git a/modules/ui/sections/feature_type.js b/modules/ui/sections/feature_type.js index 962291478..c2934e838 100644 --- a/modules/ui/sections/feature_type.js +++ b/modules/ui/sections/feature_type.js @@ -8,10 +8,8 @@ import { t } from '../../util/locale'; import { tooltip } from '../../util/tooltip'; import { utilRebind } from '../../util'; import { uiPresetIcon } from '../preset_icon'; -import { uiQuickLinks } from '../quick_links'; import { uiSection } from '../section'; import { uiTagReference } from '../tag_reference'; -import { uiTooltipHtml } from '../tooltipHtml'; export function uiSectionFeatureType(context) { @@ -22,7 +20,6 @@ export function uiSectionFeatureType(context) { var _presets = []; var _tagReference; - var _quickLinks = uiQuickLinks(); var section = uiSection('feature-type', context) .title(t('inspector.feature_type')) @@ -70,23 +67,6 @@ export function uiSectionFeatureType(context) { .attr('class', 'tag-reference-body-wrap') .merge(tagReferenceBodyWrap); - selection - .selectAll('.preset-quick-links') - .data([0]) - .enter() - .append('div') - .attr('class', 'preset-quick-links') - .call(_quickLinks.choices([{ - id: 'zoom_to', - label: 'inspector.zoom_to.title', - tooltip: function() { - return uiTooltipHtml(t('inspector.zoom_to.tooltip_feature'), t('inspector.zoom_to.key')); - }, - click: function zoomTo() { - context.mode().zoomToSelected(); - } - }])); - // update header if (_tagReference) { selection.selectAll('.preset-list-button-wrap .accessory-buttons') diff --git a/modules/ui/zoom_to_selection.js b/modules/ui/zoom_to_selection.js new file mode 100644 index 000000000..098fa96b0 --- /dev/null +++ b/modules/ui/zoom_to_selection.js @@ -0,0 +1,43 @@ +import { select as d3_select } from 'd3-selection'; + +import { t, textDirection } from '../util/locale'; +import { tooltip } from '../util/tooltip'; +import { uiTooltipHtml } from './tooltipHtml'; +import { svgIcon } from '../svg/icon'; + +export function uiZoomToSelection(context) { + + var _button = d3_select(null); + + function click() { + if (d3_select(this).classed('disabled')) return; + + var mode = context.mode(); + if (mode && mode.zoomToSelected) { + mode.zoomToSelected(); + } + } + + 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 + .append('button') + .on('click', click) + .call(svgIcon('#iD-icon-framed-dot', 'light')) + .call(tooltip() + .placement((textDirection === 'rtl') ? 'right' : 'left') + .html(true) + .title(uiTooltipHtml(t('inspector.zoom_to.title'), t('inspector.zoom_to.key'))) + ); + + setEnabledState(); + }; +}