From 6bdf6c512778ec7f17c90f55e827ea05b3ed4517 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Mon, 15 Apr 2019 11:50:54 -0700
Subject: [PATCH] Fix minimap position (close #6167) Flexbox panes and info
 panels to prevent overlap (close #4733)

---
 css/60_photos.css        |  2 +-
 css/80_app.css           | 71 +++++++++++++++++++++++++---------------
 modules/ui/background.js | 49 ++++-----------------------
 modules/ui/help.js       | 46 ++++----------------------
 modules/ui/init.js       | 58 +++++++++++++++++++++++++++++---
 modules/ui/issues.js     | 49 ++++-----------------------
 modules/ui/map_data.js   | 49 ++++-----------------------
 7 files changed, 127 insertions(+), 197 deletions(-)

diff --git a/css/60_photos.css b/css/60_photos.css
index d5e3e13db..89a0f26a4 100644
--- a/css/60_photos.css
+++ b/css/60_photos.css
@@ -1,7 +1,7 @@
 /* photo viewer div */
 #photoviewer {
     position: absolute;
-    bottom: 40px;
+    bottom: 10px;
     left: 10px;
     width: 330px;
     height: 250px;
diff --git a/css/80_app.css b/css/80_app.css
index 3373c2118..e71bbc628 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -3210,9 +3210,10 @@ div.full-screen > button:hover {
 .background-pane .layer-list button {
     float: right;
     height: 100%;
-    width: 10%;
     border-left: 1px solid #ccc;
     border-radius: 0;
+    padding-left: 4px;
+    padding-right: 4px;
 }
 [dir='rtl'] .map-data-pane .layer-list button,
 [dir='rtl'] .background-pane .layer-list button {
@@ -3569,21 +3570,21 @@ ul.issue-fix-list button {
 
 /* Side Panes - Background / Map Data / Help
 ------------------------------------------------------- */
+.map-panes {
+    flex: 0 1 auto;
+    position: relative;
+    height: 100%;
+}
 .map-pane {
-    position: absolute;
-    top: 71px;
-    bottom: 30px;
-    right: 0;
+    position: relative;
+    top: 0;
     width: 100%;
-    max-width: 400px;
-    min-width: 180px;
-    padding-bottom: 50px;
+    height: 100%;
+    padding-bottom: 60px;
     overflow: hidden;
     z-index: 10;
-}
-[dir='rtl'] .map-pane {
-    left: 0;
-    right: auto !important;
+    max-width: 400px;
+    min-width: 300px;
 }
 
 .map-pane.help-wrap {
@@ -3820,7 +3821,7 @@ img.tile-debug {
 .map-in-map {
     position: absolute;
     overflow: hidden;
-    top: 60px;
+    top: 10px;
     width: 200px;
     height: 150px;
     z-index: 5;
@@ -3828,6 +3829,12 @@ img.tile-debug {
     border: #aaa 1px solid;
     box-shadow: 0 0 2em black;
 }
+[dir='ltr'] .map-in-map {
+    left: 10px;
+}
+[dir='rtl'] .map-in-map {
+    right: 10px;
+}
 
 .map-in-map-tiles {
     transform-origin: 0 0;
@@ -3912,36 +3919,48 @@ img.tile-debug {
 }
 
 
+.over-map {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 71px;
+    bottom: 30px;
+    pointer-events: none;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: flex-end;
+}
+.over-map > * {
+    pointer-events: auto;
+}
+
 /* Information Panels
 ------------------------------------------------------- */
 .info-panels {
     display: flex;
     flex-flow: row-reverse wrap-reverse;
-    position: absolute;
     z-index: 1;
-    right: 0;
-    bottom: 30px;
     -ms-user-select: element;
 }
 
-.info-panels h1,
-.info-panels h2,
-.info-panels h3,
-.info-panels h4,
-.info-panels h5 {
+.panel-container h1,
+.panel-container h2,
+.panel-container h3,
+.panel-container h4,
+.panel-container h5 {
     display: inline-block;
     margin-bottom: 0;
 }
 
-.info-panels h1,
-.info-panels h2,
-.info-panels h3 {
+.panel-container h1,
+.panel-container h2,
+.panel-container h3 {
     color: #ff8;
 }
 
 .panel-container {
     flex: 0 0 auto;
-    margin: 2px 0 0 2px;
+    margin: 0 2px 2px 0;
     border-radius: 4px;
     border: 1px solid rgba(0, 0, 0, 0.75);
     padding-bottom: 10px;
@@ -4838,7 +4857,7 @@ svg.mouseclick use.right {
 ------------------------------------------------------- */
 .notice {
     position: absolute;
-    top: 45px;
+    top: 15px;
     left: 0;
     right: 0;
     text-align: center;
diff --git a/modules/ui/background.js b/modules/ui/background.js
index 8d793f226..7efead2f8 100644
--- a/modules/ui/background.js
+++ b/modules/ui/background.js
@@ -16,9 +16,6 @@ import { uiBackgroundDisplayOptions } from './background_display_options';
 import { uiBackgroundOffset } from './background_offset';
 import { uiCmd } from './cmd';
 import { uiDisclosure } from './disclosure';
-import { uiHelp } from './help';
-import { uiIssues } from './issues';
-import { uiMapData } from './map_data';
 import { uiMapInMap } from './map_in_map';
 import { uiSettingsCustomBackground } from './settings/custom_background';
 import { uiTooltipHtml } from './tooltipHtml';
@@ -33,7 +30,6 @@ export function uiBackground(context) {
 
     var _customSource = context.background().findSource('custom');
     var _previousBackground = context.background().findSource(context.storage('background-last-used-toggle'));
-    var _shown = false;
 
     var _backgroundList = d3_select(null);
     var _overlayList = d3_select(null);
@@ -318,44 +314,12 @@ export function uiBackground(context) {
     uiBackground.togglePane = function() {
         if (d3_event) d3_event.preventDefault();
         paneTooltip.hide(_toggleButton);
-        uiBackground.setVisible(!_toggleButton.classed('active'));
+        context.ui().togglePanes(!_pane.classed('shown') ? _pane : undefined);
     };
 
-    uiBackground.hidePane = function() {
-        uiBackground.setVisible(false);
-    };
-
-    uiBackground.setVisible = function(show) {
-        if (show !== _shown) {
-            _toggleButton.classed('active', show);
-            _shown = show;
-
-            if (show) {
-                uiHelp.hidePane();
-                uiIssues.hidePane();
-                uiMapData.hidePane();
-                update();
-
-                _pane
-                    .style('display', 'block')
-                    .style('right', '-300px')
-                    .transition()
-                    .duration(200)
-                    .style('right', '0px');
-
-            } else {
-                _pane
-                    .style('display', 'block')
-                    .style('right', '0px')
-                    .transition()
-                    .duration(200)
-                    .style('right', '-300px')
-                    .on('end', function() {
-                        d3_select(this).style('display', 'none');
-                    });
-            }
-        }
-    };
+    function hidePane() {
+        context.ui().togglePanes();
+    }
 
     uiBackground.renderToggleButton = function(selection) {
 
@@ -371,7 +335,8 @@ export function uiBackground(context) {
 
         _pane = selection
             .append('div')
-            .attr('class', 'fillL map-pane background-pane hide');
+            .attr('class', 'fillL map-pane background-pane hide')
+            .attr('pane', 'background');
 
 
         var heading = _pane
@@ -384,7 +349,7 @@ export function uiBackground(context) {
 
         heading
             .append('button')
-            .on('click', uiBackground.hidePane)
+            .on('click', hidePane)
             .call(svgIcon('#iD-icon-close'));
 
 
diff --git a/modules/ui/help.js b/modules/ui/help.js
index 371522a50..1a76431cb 100644
--- a/modules/ui/help.js
+++ b/modules/ui/help.js
@@ -6,10 +6,7 @@ import {
 import marked from 'marked';
 import { svgIcon } from '../svg';
 import { uiCmd } from './cmd';
-import { uiBackground } from './background';
 import { uiIntro } from './intro';
-import { uiMapData } from './map_data';
-import { uiIssues } from './issues';
 import { uiShortcuts } from './shortcuts';
 import { uiTooltipHtml } from './tooltipHtml';
 
@@ -22,8 +19,6 @@ export function uiHelp(context) {
 
     var _pane = d3_select(null), _toggleButton = d3_select(null);
 
-    var _shown = false;
-
     var docKeys = [
         ['help', [
             'welcome',
@@ -291,42 +286,14 @@ export function uiHelp(context) {
         .html(true)
         .title(uiTooltipHtml(t('help.title'), key));
 
-    uiHelp.hidePane = function() {
-        uiHelp.setVisible(false);
-    };
+    function hidePane() {
+        context.ui().togglePanes();
+    }
 
     uiHelp.togglePane = function() {
         if (d3_event) d3_event.preventDefault();
         paneTooltip.hide(_toggleButton);
-        uiHelp.setVisible(!_toggleButton.classed('active'));
-    };
-
-    uiHelp.setVisible = function(show) {
-        if (show !== _shown) {
-            _toggleButton.classed('active', show);
-            _shown = show;
-
-            if (show) {
-                uiBackground.hidePane();
-                uiIssues.hidePane();
-                uiMapData.hidePane();
-
-                _pane.style('display', 'block')
-                    .style('right', '-500px')
-                    .transition()
-                    .duration(200)
-                    .style('right', '0px');
-
-            } else {
-                _pane.style('right', '0px')
-                    .transition()
-                    .duration(200)
-                    .style('right', '-500px')
-                    .on('end', function() {
-                        d3_select(this).style('display', 'none');
-                    });
-            }
-        }
+        context.ui().togglePanes(!_pane.classed('shown') ? _pane : undefined);
     };
 
     uiHelp.renderToggleButton = function(selection) {
@@ -409,7 +376,8 @@ export function uiHelp(context) {
 
 
         _pane = selection.append('div')
-            .attr('class', 'help-wrap map-pane fillL hide');
+            .attr('class', 'help-wrap map-pane fillL hide')
+            .attr('pane', 'help');
 
         var heading = _pane
             .append('div')
@@ -421,7 +389,7 @@ export function uiHelp(context) {
 
         heading
             .append('button')
-            .on('click', uiHelp.hidePane)
+            .on('click', hidePane)
             .call(svgIcon('#iD-icon-close'));
 
 
diff --git a/modules/ui/init.js b/modules/ui/init.js
index 503493af0..bc36591aa 100644
--- a/modules/ui/init.js
+++ b/modules/ui/init.js
@@ -1,6 +1,7 @@
 import {
     event as d3_event,
-    select as d3_select
+    select as d3_select,
+    selectAll as d3_selectAll
 } from 'd3-selection';
 
 import { t, textDirection } from '../util/locale';
@@ -220,9 +221,13 @@ export function uiInit(context) {
         }
 
 
+        var overMap = content
+            .append('div')
+            .attr('class', 'over-map');
+
         // Add panes
         // This should happen after map is initialized, as some require surface()
-        var panes = content
+        var panes = overMap
             .append('div')
             .attr('class', 'map-panes');
 
@@ -232,15 +237,15 @@ export function uiInit(context) {
             .call(issues.renderPane)
             .call(help.renderPane);
 
-
         // Add absolutely-positioned elements that sit on top of the map
         // This should happen after the map is ready (center/zoom)
-        content
+        overMap
             .call(uiMapInMap(context))
             .call(uiInfo(context))
             .call(uiNotice(context));
 
-        content
+
+        overMap
             .append('div')
             .attr('id', 'photoviewer')
             .classed('al', true)       // 'al'=left,  'ar'=right
@@ -410,6 +415,49 @@ export function uiInit(context) {
         }
     };
 
+    ui.togglePanes = function(showPane) {
+        var shownPanes = d3_selectAll('.map-pane.shown');
+
+        shownPanes
+            .classed('shown', false);
+
+        d3_selectAll('.map-control button')
+            .classed('active', false);
+
+        if (showPane) {
+            shownPanes
+                .style('display', 'none')
+                .style('right', '-500px');
+
+            d3_selectAll('.' + showPane.attr('pane') + '-control button')
+                .classed('active', true);
+
+            showPane
+                .classed('shown', true)
+                .style('display', 'block');
+            if (shownPanes.empty()) {
+                showPane
+                    .style('display', 'block')
+                    .style('right', '-500px')
+                    .transition()
+                    .duration(200)
+                    .style('right', '0px');
+            } else {
+                showPane
+                    .style('right', '0px');
+            }
+        } else {
+            shownPanes
+                .style('display', 'block')
+                .style('right', '0px')
+                .transition()
+                .duration(200)
+                .style('right', '-500px')
+                .on('end', function() {
+                    d3_select(this).style('display', 'none');
+                });
+        }
+    };
 
     return ui;
 }
diff --git a/modules/ui/issues.js b/modules/ui/issues.js
index 283a2415f..da9d9edde 100644
--- a/modules/ui/issues.js
+++ b/modules/ui/issues.js
@@ -7,10 +7,7 @@ import { svgIcon } from '../svg';
 import { t, textDirection } from '../util/locale';
 import { tooltip } from '../util/tooltip';
 import { modeSelect } from '../modes';
-import { uiBackground } from './background';
 import { uiDisclosure } from './disclosure';
-import { uiHelp } from './help';
-import { uiMapData } from './map_data';
 import { uiTooltipHtml } from './tooltipHtml';
 import { utilHighlightEntities } from '../util';
 
@@ -22,7 +19,6 @@ export function uiIssues(context) {
     var _rulesList = d3_select(null);
     var _pane = d3_select(null);
     var _toggleButton = d3_select(null);
-    var _shown = false;
 
     context.validator().on('reload.issues_pane', update);
 
@@ -345,46 +341,14 @@ export function uiIssues(context) {
         .html(true)
         .title(uiTooltipHtml(t('issues.title'), key));
 
-    uiIssues.hidePane = function() {
-        uiIssues.setVisible(false);
-    };
+    function hidePane() {
+        context.ui().togglePanes();
+    }
 
     uiIssues.togglePane = function() {
         if (d3_event) d3_event.preventDefault();
         paneTooltip.hide(_toggleButton);
-        uiIssues.setVisible(!_toggleButton.classed('active'));
-    };
-
-    uiIssues.setVisible = function(show) {
-        if (show !== _shown) {
-            _toggleButton.classed('active', show);
-            _shown = show;
-
-            if (show) {
-                uiBackground.hidePane();
-                uiHelp.hidePane();
-                uiMapData.hidePane();
-                update();
-
-                _pane
-                    .style('display', 'block')
-                    .style('right', '-300px')
-                    .transition()
-                    .duration(200)
-                    .style('right', '0px');
-
-            } else {
-                _pane
-                    .style('display', 'block')
-                    .style('right', '0px')
-                    .transition()
-                    .duration(200)
-                    .style('right', '-300px')
-                    .on('end', function() {
-                        d3_select(this).style('display', 'none');
-                    });
-            }
-        }
+        context.ui().togglePanes(!_pane.classed('shown') ? _pane : undefined);
     };
 
     uiIssues.renderToggleButton = function(selection) {
@@ -403,7 +367,8 @@ export function uiIssues(context) {
 
         _pane = selection
             .append('div')
-            .attr('class', 'fillL map-pane issues-pane hide');
+            .attr('class', 'fillL map-pane issues-pane hide')
+            .attr('pane', 'map-issues');
 
         var heading = _pane
             .append('div')
@@ -415,7 +380,7 @@ export function uiIssues(context) {
 
         heading
             .append('button')
-            .on('click', uiIssues.hidePane)
+            .on('click', hidePane)
             .call(svgIcon('#iD-icon-close'));
 
         var content = _pane
diff --git a/modules/ui/map_data.js b/modules/ui/map_data.js
index ca8d8131a..60d87eef5 100644
--- a/modules/ui/map_data.js
+++ b/modules/ui/map_data.js
@@ -8,10 +8,7 @@ import { t, textDirection } from '../util/locale';
 import { tooltip } from '../util/tooltip';
 import { geoExtent } from '../geo';
 import { modeBrowse } from '../modes';
-import { uiBackground } from './background';
 import { uiDisclosure } from './disclosure';
-import { uiHelp } from './help';
-import { uiIssues } from './issues';
 import { uiSettingsCustomData } from './settings/custom_data';
 import { uiTooltipHtml } from './tooltipHtml';
 
@@ -28,7 +25,6 @@ export function uiMapData(context) {
     var _pane = d3_select(null), _toggleButton = d3_select(null);
 
     var _fillSelected = context.storage('area-fill') || 'partial';
-    var _shown = false;
     var _dataLayerContainer = d3_select(null);
     var _photoOverlayContainer = d3_select(null);
     var _fillList = d3_select(null);
@@ -731,46 +727,14 @@ export function uiMapData(context) {
         .html(true)
         .title(uiTooltipHtml(t('map_data.description'), key));
 
-    uiMapData.hidePane = function() {
-        uiMapData.setVisible(false);
-    };
+    function hidePane() {
+        context.ui().togglePanes();
+    }
 
     uiMapData.togglePane = function() {
         if (d3_event) d3_event.preventDefault();
         paneTooltip.hide(_toggleButton);
-        uiMapData.setVisible(!_toggleButton.classed('active'));
-    };
-
-    uiMapData.setVisible = function(show) {
-        if (show !== _shown) {
-            _toggleButton.classed('active', show);
-            _shown = show;
-
-            if (show) {
-                uiBackground.hidePane();
-                uiHelp.hidePane();
-                uiIssues.hidePane();
-                update();
-
-                _pane
-                    .style('display', 'block')
-                    .style('right', '-300px')
-                    .transition()
-                    .duration(200)
-                    .style('right', '0px');
-
-            } else {
-                _pane
-                    .style('display', 'block')
-                    .style('right', '0px')
-                    .transition()
-                    .duration(200)
-                    .style('right', '-300px')
-                    .on('end', function() {
-                        d3_select(this).style('display', 'none');
-                    });
-            }
-        }
+        context.ui().togglePanes(!_pane.classed('shown') ? _pane : undefined);
     };
 
     uiMapData.renderToggleButton = function(selection) {
@@ -788,7 +752,8 @@ export function uiMapData(context) {
 
         _pane = selection
             .append('div')
-            .attr('class', 'fillL map-pane map-data-pane hide');
+            .attr('class', 'fillL map-pane map-data-pane hide')
+            .attr('pane', 'map-data');
 
         var heading = _pane
             .append('div')
@@ -800,7 +765,7 @@ export function uiMapData(context) {
 
         heading
             .append('button')
-            .on('click', uiMapData.hidePane)
+            .on('click', hidePane)
             .call(svgIcon('#iD-icon-close'));