Clean up styles, move minimap toggle below background imagery list

css/80_app.css

@@ -2319,20 +2319,38 @@ div.full-screen > button:hover {
     text-overflow: ellipsis;
 }
 
-.minimap-toggle {
-    display: block;
-    padding: 5px 10px;
-    cursor: pointer;
-    color: #7092ff;
-    border-top: 1px solid #ccc;
+
+/* Background Display Options */
+
+.display-options-container {
+    padding: 10px;
 }
 
-.minimap-toggle.active {
-    background: #e8ebff;
+.display-control h5 {
+    padding-bottom: 0;
+    padding-top: 10px;
 }
 
-.minimap-toggle:hover {
-    background-color: #ececec;
+.display-control h5 span {
+    margin: 5px;
+}
+
+.display-control .display-option-input {
+    height: 20px;
+    width: 160px;
+}
+
+.display-control button {
+    height: 30px;
+    width: 30px;
+    margin-left: 5px;
+    margin-right: 0px;
+    vertical-align: text-bottom;
+    border-radius: 4px;
+}
+[dir='rtl'] .display-control button {
+    margin-left: 0px;
+    margin-right: 5px;
 }
 
 
@@ -2463,13 +2481,6 @@ div.full-screen > button:hover {
     border-top: 5px solid #222;
 }
 
-.display-options-container {
-    padding: 10px;
-}
-
-.display-options-container h5 span {
-    margin: 5px;
-}
 
 .map-data-control .layer-list button,
 .background-control .layer-list button {

modules/ui/background.js

@@ -20,6 +20,7 @@ import { uiCmd } from './cmd';
 import { uiDisclosure } from './disclosure';
 import { uiHelp } from './help';
 import { uiMapData } from './map_data';
+import { uiMapInMap } from './map_in_map';
 import { uiTooltipHtml } from './tooltipHtml';
 import { utilCallWhenIdle } from '../util';
 import { tooltip } from '../util/tooltip';
@@ -43,11 +44,11 @@ export function uiBackground(context) {
 
     function setTooltips(selection) {
         selection.each(function(d, i, nodes) {
-            var item = d3_select(this).select('label'),
-                span = item.select('span'),
-                placement = (i < nodes.length / 2) ? 'bottom' : 'top',
-                description = d.description(),
-                isOverflowing = (span.property('clientWidth') !== span.property('scrollWidth'));
+            var item = d3_select(this).select('label');
+            var span = item.select('span');
+            var placement = (i < nodes.length / 2) ? 'bottom' : 'top';
+            var description = d.description();
+            var isOverflowing = (span.property('clientWidth') !== span.property('scrollWidth'));
 
             if (d === _previousBackground) {
                 item.call(tooltip()
@@ -194,11 +195,42 @@ export function uiBackground(context) {
         var container = selection.selectAll('layer-background-list')
             .data([0]);
 
+        // the background list
         _backgroundList = container.enter()
             .append('ul')
             .attr('class', 'layer-list layer-background-list')
             .attr('dir', 'auto')
             .merge(container);
+
+
+        // add minimap toggle below list
+        var minimapEnter = selection.selectAll('minimap-toggle-list')
+            .data([0])
+            .enter()
+            .append('ul')
+            .attr('class', 'layer-list minimap-toggle-list')
+            .append('li')
+            .attr('class', 'layer minimap-toggle-item');
+
+        var minimapLabelEnter = minimapEnter
+            .append('label')
+            .call(tooltip()
+                .html(true)
+                .title(uiTooltipHtml(t('background.minimap.tooltip'), t('background.minimap.key')))
+                .placement('top')
+            );
+
+        minimapLabelEnter
+            .append('input')
+            .attr('type', 'checkbox')
+            .on('change', function() {
+                d3_event.preventDefault();
+                uiMapInMap.toggle();
+            });
+
+        minimapLabelEnter
+            .append('span')
+            .text(t('background.minimap.description'));
     }
 
 

modules/ui/background_display_options.js

@@ -7,18 +7,15 @@ import {
 import { t, textDirection } from '../util/locale';
 import { svgIcon } from '../svg';
 import { uiDisclosure } from './disclosure';
-import { uiMapInMap } from './map_in_map';
-import { uiTooltipHtml } from './tooltipHtml';
-import { tooltip } from '../util/tooltip';
 
 
 export function uiBackgroundDisplayOptions(context) {
     var _selection = d3_select(null);
     var sliders = ['brightness', 'contrast', 'saturation', 'sharpness'];
+    var storedOpacity = context.storage('background-opacity');
 
     var _options = {
-        brightness: (context.storage('background-opacity') !== null) ?
-            (+context.storage('background-opacity')) : 1.0,
+        brightness: (storedOpacity !== null ? (+storedOpacity) : 1),
         contrast: 1,
         saturation: 1,
         sharpness: 1
@@ -93,33 +90,6 @@ export function uiBackgroundDisplayOptions(context) {
             .call(svgIcon('#icon-' + (textDirection === 'rtl' ? 'redo' : 'undo')));
 
 
-        // add minimap toggle
-        var minimapEnter = containerEnter
-            .append('div')
-            .attr('class', 'minimap-toggle-wrap');
-
-        var minimapLabelEnter = minimapEnter
-            .append('label')
-            .call(tooltip()
-                .html(true)
-                .title(uiTooltipHtml(t('background.minimap.tooltip'), t('background.minimap.key')))
-                .placement('top')
-            );
-
-        minimapLabelEnter
-            .classed('minimap-toggle', true)
-            .append('input')
-            .attr('type', 'checkbox')
-            .on('change', function() {
-                uiMapInMap.toggle();
-                d3_event.preventDefault();
-            });
-
-        minimapLabelEnter
-            .append('span')
-            .text(t('background.minimap.description'));
-
-
         // update
         container = containerEnter
             .merge(container);
@@ -132,6 +102,11 @@ export function uiBackgroundDisplayOptions(context) {
 
         container.selectAll('.display-option-reset')
             .classed('disabled', function(d) { return _options[d] === 1; });
+
+        // first time only, set brightness if needed
+        if (containerEnter.size() && _options.brightness !== 1) {
+            context.background().brightness(_options.brightness);
+        }
     }
 
 
@@ -145,8 +120,6 @@ export function uiBackgroundDisplayOptions(context) {
             );
     }
 
-    // setDisplayOption('brightness', _options.brightness);
-
 
     return backgroundDisplayOptions;
 }

modules/ui/map_in_map.js

@@ -285,9 +285,10 @@ export function uiMapInMap(context) {
 
             isHidden = !isHidden;
 
-            var label = d3_select('.minimap-toggle');
-            label.classed('active', !isHidden)
-                .select('input').property('checked', !isHidden);
+            d3_select('.minimap-toggle-item')
+                .classed('active', !isHidden)
+                .select('input')
+                .property('checked', !isHidden);
 
             if (isHidden) {
                 wrap