Rename Fill Areas section to Style Options

Add Highlight Changes button to the Style Options section for toggling visual diffs (re: #6843)

data/core.yaml

@@ -611,12 +611,16 @@ en:
         tooltip: "Drag and drop a data file onto the page, or click the button to setup"
         title: Custom Map Data
         zoom: Zoom to data
-    fill_area: Fill Areas
+    style_options: Style Options
     highlight_edits:
       key: G
     map_features: Map Features
     autohidden: "These features have been automatically hidden because too many would be shown on the screen.  You can zoom in to edit them."
     osmhidden: "These features have been automatically hidden because the OpenStreetMap layer is hidden."
+  visual_diff:
+    highlight_edits:
+      description: Highlight Changes
+      tooltip: Outline edited features
   photo_overlays:
     title: Photo Overlays
     traffic_signs:

dist/locales/en.json

@@ -757,7 +757,7 @@
                     "zoom": "Zoom to data"
                 }
             },
-            "fill_area": "Fill Areas",
+            "style_options": "Style Options",
             "highlight_edits": {
                 "key": "G"
             },
@@ -765,6 +765,12 @@
             "autohidden": "These features have been automatically hidden because too many would be shown on the screen.  You can zoom in to edit them.",
             "osmhidden": "These features have been automatically hidden because the OpenStreetMap layer is hidden."
         },
+        "visual_diff": {
+            "highlight_edits": {
+                "description": "Highlight Changes",
+                "tooltip": "Outline edited features"
+            }
+        },
         "photo_overlays": {
             "title": "Photo Overlays",
             "traffic_signs": {

modules/ui/map_data.js

@@ -31,6 +31,7 @@ export function uiMapData(context) {
     var _photoOverlayContainer = d3_select(null);
     var _fillList = d3_select(null);
     var _featureList = d3_select(null);
+    var _visualDiffList = d3_select(null);
     var _QAList = d3_select(null);
 
 
@@ -90,6 +91,7 @@ export function uiMapData(context) {
         d3_event.preventDefault();
         var surface = context.surface();
         surface.classed('highlight-edited', !surface.classed('highlight-edited'));
+        updateVisualDiffList();
     }
 
 
@@ -609,6 +611,8 @@ export function uiMapData(context) {
                 .title(function(d) {
                     var tip = t(name + '.' + d + '.tooltip');
                     var key = (d === 'wireframe' ? t('area_fill.wireframe.key') : null);
+                    if (d === 'highlight_edits') key = t('map_data.highlight_edits.key');
+
                     if ((name === 'feature' || name === 'keepRight') && autoHiddenFeature(d)) {
                         var msg = showsLayer('osm') ? t('map_data.autohidden') : t('map_data.osmhidden');
                         tip += '<div>' + msg + '</div>';
@@ -670,7 +674,7 @@ export function uiMapData(context) {
     }
 
 
-    function renderFillList(selection) {
+    function renderStyleOptions(selection) {
         var container = selection.selectAll('.layer-fill-list')
             .data([0]);
 
@@ -680,6 +684,16 @@ export function uiMapData(context) {
             .merge(container);
 
         updateFillList();
+
+        var container2 = selection.selectAll('.layer-visual-diff-list')
+            .data([0]);
+
+        _visualDiffList = container2.enter()
+            .append('ul')
+            .attr('class', 'layer-list layer-visual-diff-list')
+            .merge(container2);
+
+        updateVisualDiffList();
     }
 
 
@@ -745,6 +759,13 @@ export function uiMapData(context) {
             .call(drawListItems, fills, 'radio', 'area_fill', setFill, showsFill);
     }
 
+    function updateVisualDiffList() {
+        _visualDiffList
+            .call(drawListItems, ['highlight_edits'], 'checkbox', 'visual_diff', toggleHighlightEdited, function() {
+                return context.surface().classed('highlight-edited');
+            });
+    }
+
     function updateFeatureList() {
         _featureList
             .call(drawListItems, features, 'checkbox', 'feature', clickFeature, showsFeature);
@@ -860,8 +881,8 @@ export function uiMapData(context) {
             .append('div')
             .attr('class', 'map-data-area-fills')
             .call(uiDisclosure(context, 'fill_area', false)
-                .title(t('map_data.fill_area'))
-                .content(renderFillList)
+                .title(t('map_data.style_options'))
+                .content(renderStyleOptions)
             );
 
         // feature filters