Rename Fill Areas section to Style Options

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

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