From b4119ae1ad771eb94547208d73813f37e865decc Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Mon, 5 Nov 2018 17:16:50 -0500
Subject: [PATCH] Class toolbars with `narrow` if we detect overflow happening
 Also add css rules to drop labels from toolbar buttons if needed

---
 css/80_app.css      | 15 +++++++++++++--
 modules/ui/init.js  | 34 +++++++++++++++++++++++++++++-----
 modules/ui/modes.js |  5 +++++
 3 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index a6776bd76..16579b926 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -16,7 +16,6 @@ body {
         sans-serif;
     margin: 0;
     padding: 0;
-    min-width: 768px;
     color: #333;
     overflow: hidden;
     -ms-user-select: none;
@@ -32,7 +31,6 @@ body {
 .id-container {
     height: 100%;
     width: 100%;
-    min-width: 768px;
 }
 
 #content {
@@ -609,6 +607,19 @@ button.add-note svg.icon {
 }
 
 
+#bar.narrow .tool-group {
+    width: unset;
+}
+#bar.narrow .spinner,
+#bar.narrow button .label {
+    display: none;
+}
+#bar.narrow button .count {
+    border-left-width: 0;
+    border-right-width: 0;
+}
+
+
 /* Header for modals / panes
 ------------------------------------------------------- */
 .header {
diff --git a/modules/ui/init.js b/modules/ui/init.js
index 023ea7208..447b7d4ce 100644
--- a/modules/ui/init.js
+++ b/modules/ui/init.js
@@ -45,13 +45,9 @@ import { uiCmd } from './cmd';
 
 
 export function uiInit(context) {
-    // Selectors for elements that can be collapsed if they overflow
-    // (can't use a media query for this because it depends on sidebar width, not screen width)
-    var headerCollapsable = 'button > span.label';
-    var footerCollapsable = '';
-
     var _initCounter = 0;
     var _initCallback;
+    var _needWidth = {};
 
 
     function render(container) {
@@ -400,7 +396,35 @@ export function uiInit(context) {
         map.dimensions(mapDimensions);
 
         ui.photoviewer.onMapResize();
+
+        // check if header or footer have overflowed
+        ui.checkOverflow('#bar');
+        ui.checkOverflow('#footer');
     };
 
+
+    // Call checkOverflow when resizing or whenever the contents change.
+    ui.checkOverflow = function(selector, reset) {
+        if (reset) {
+            delete _needWidth[selector];
+        }
+
+        var element = d3_select(selector);
+        var scrollWidth = element.property('scrollWidth');
+        var clientWidth = element.property('clientWidth');
+        var needed = _needWidth[selector] || scrollWidth;
+
+        if (scrollWidth > clientWidth) {    // overflow happening
+            element.classed('narrow', true);
+            if (!_needWidth[selector]) {
+                _needWidth[selector] = scrollWidth;
+            }
+
+        } else if (scrollWidth >= needed) {
+            element.classed('narrow', false);
+        }
+    };
+
+
     return ui;
 }
diff --git a/modules/ui/modes.js b/modules/ui/modes.js
index 56e501445..4aa4f369a 100644
--- a/modules/ui/modes.js
+++ b/modules/ui/modes.js
@@ -133,6 +133,11 @@ export function uiModes(context) {
                 .attr('class', 'label')
                 .text(function(mode) { return mode.title; });
 
+            // if we are adding/removing the buttons, check if toolbar has overflowed
+            if (buttons.enter().size() || buttons.exit().size()) {
+                context.ui().checkOverflow('#bar', true);
+            }
+
             // update
             buttons = buttons
                 .merge(buttonsEnter)