Merge pull request #6839 from openstreetmap/background-panel-toggle

Add button to toggle the Background info panel

data/core.yaml

@@ -562,7 +562,7 @@ en:
     switch: Switch back to this background
     custom: Custom
     overlays: Overlays
-    imagery_source_faq: Imagery Info / Report a Problem
+    imagery_problem_faq: Report an Imagery Problem
     reset: reset
     reset_all: Reset All
     display_options: Display Options
@@ -574,6 +574,9 @@ en:
       description: Show Minimap
       tooltip: Show a zoomed out map to help locate the area currently displayed.
       key: '/'
+    panel:
+      description: Show Detail Panel
+      tooltip: Show advanced background information.
     fix_misalignment: Adjust imagery offset
     offset: "Drag anywhere in the gray area below to adjust the imagery offset, or enter the offset values in meters."
   map_data:

dist/locales/en.json

@@ -697,7 +697,7 @@
             "switch": "Switch back to this background",
             "custom": "Custom",
             "overlays": "Overlays",
-            "imagery_source_faq": "Imagery Info / Report a Problem",
+            "imagery_problem_faq": "Report an Imagery Problem",
             "reset": "reset",
             "reset_all": "Reset All",
             "display_options": "Display Options",
@@ -710,6 +710,10 @@
                 "tooltip": "Show a zoomed out map to help locate the area currently displayed.",
                 "key": "/"
             },
+            "panel": {
+                "description": "Show Detail Panel",
+                "tooltip": "Show advanced background information."
+            },
             "fix_misalignment": "Adjust imagery offset",
             "offset": "Drag anywhere in the gray area below to adjust the imagery offset, or enter the offset values in meters."
         },

modules/ui/background.js

@@ -198,15 +198,15 @@ export function uiBackground(context) {
 
 
         // add minimap toggle below list
-        var minimapEnter = selection.selectAll('.minimap-toggle-list')
+        var bgExtrasListEnter = selection.selectAll('.bg-extras-list')
             .data([0])
             .enter()
             .append('ul')
-            .attr('class', 'layer-list minimap-toggle-list')
-            .append('li')
-            .attr('class', 'minimap-toggle-item');
+            .attr('class', 'layer-list bg-extras-list');
 
-        var minimapLabelEnter = minimapEnter
+        var minimapLabelEnter = bgExtrasListEnter
+            .append('li')
+            .attr('class', 'minimap-toggle-item')
             .append('label')
             .call(tooltip()
                 .html(true)
@@ -227,6 +227,29 @@ export function uiBackground(context) {
             .text(t('background.minimap.description'));
 
 
+        var panelLabelEnter = bgExtrasListEnter
+            .append('li')
+            .attr('class', 'background-panel-toggle-item')
+            .append('label')
+            .call(tooltip()
+                .html(true)
+                .title(uiTooltipHtml(t('background.panel.tooltip'), uiCmd('⌘⇧' + t('info_panels.background.key'))))
+                .placement('top')
+            );
+
+        panelLabelEnter
+            .append('input')
+            .attr('type', 'checkbox')
+            .on('change', function() {
+                d3_event.preventDefault();
+                context.ui().info.toggle('background');
+            });
+
+        panelLabelEnter
+            .append('span')
+            .text(t('background.panel.description'));
+
+
         // "Info / Report a Problem" link
         selection.selectAll('.imagery-faq')
             .data([0])
@@ -238,7 +261,7 @@ export function uiBackground(context) {
             .call(svgIcon('#iD-icon-out-link', 'inline'))
             .attr('href', 'https://github.com/openstreetmap/iD/blob/master/FAQ.md#how-can-i-report-an-issue-with-background-imagery')
             .append('span')
-            .text(t('background.imagery_source_faq'));
+            .text(t('background.imagery_problem_faq'));
 
         updateBackgroundList();
     }

modules/ui/info.js

@@ -64,7 +64,7 @@ export function uiInfo(context) {
             title
                 .append('button')
                 .attr('class', 'close')
-                .on('click', function (d) { toggle(d); })
+                .on('click', function (d) { info.toggle(d); })
                 .call(svgIcon('#iD-icon-close'));
 
             enter
@@ -80,7 +80,7 @@ export function uiInfo(context) {
         }
 
 
-        function toggle(which) {
+        info.toggle = function(which) {
             if (d3_event) {
                 d3_event.stopImmediatePropagation();
                 d3_event.preventDefault();
@@ -93,6 +93,12 @@ export function uiInfo(context) {
                 if (activeids.length === 1 && activeids[0] === which) {  // none active anymore
                     wasActive = [which];
                 }
+
+                d3_select('.' + which + '-panel-toggle-item')
+                    .classed('active', active[which])
+                    .select('input')
+                    .property('checked', active[which]);
+
             } else {      // toggle all
                 if (activeids.length) {
                     wasActive = activeids;
@@ -103,7 +109,7 @@ export function uiInfo(context) {
             }
 
             redraw();
-        }
+        };
 
 
         var infoPanels = selection.selectAll('.info-panels')
@@ -117,13 +123,13 @@ export function uiInfo(context) {
         redraw();
 
         context.keybinding()
-            .on(uiCmd('⌘' + t('info_panels.key')), toggle);
+            .on(uiCmd('⌘' + t('info_panels.key')), info.toggle);
 
         ids.forEach(function(k) {
             var key = t('info_panels.' + k + '.key', { default: null });
             if (!key) return;
             context.keybinding()
-                .on(uiCmd('⌘⇧' + key), function() { toggle(k); });
+                .on(uiCmd('⌘⇧' + key), function() { info.toggle(k); });
         });
     }
 

modules/ui/init.js

@@ -242,11 +242,13 @@ export function uiInit(context) {
             .call(issues.renderPane)
             .call(help.renderPane);
 
+        ui.info = uiInfo(context);
+
         // Add absolutely-positioned elements that sit on top of the map
         // This should happen after the map is ready (center/zoom)
         overMap
             .call(uiMapInMap(context))
-            .call(uiInfo(context))
+            .call(ui.info)
             .call(uiNotice(context));
 
 
@@ -362,7 +364,6 @@ export function uiInit(context) {
         });
     };
 
-
     ui.sidebar = uiSidebar(context);
 
     ui.photoviewer = uiPhotoviewer(context);