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

@@ -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
 ------------------------------------------------------- */

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:

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",

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]);

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);

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';

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')

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);
 

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);
 

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);
 

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')

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();
+    };
+}