Adjust styles, don't redraw measurement info if infobox is hidden

css/80_app.css

@@ -2645,6 +2645,7 @@ img.tile-removing {
 /* Info Box
 ------------------------------------------------------- */
 .infobox {
+    display: block;
     position: absolute;
     z-index: 1;
     right: 0;
@@ -2655,18 +2656,22 @@ img.tile-removing {
     -ms-user-select: element;
 }
 
-.infobox .infobox-heading {
+.widget-title {
+    padding: 5px 10px;
+}
+
+.widget-content-measurement .measurement-heading {
     display: block;
     border-radius: 4px 0 0 0;
     padding: 5px 10px;
     height: 30px;
 }
 
-.infobox ul {
+.widget-content-measurement ul {
     padding: 5px 10px;
 }
 
-.infobox .button {
+.widget-content-measurement .button {
     position: absolute;
     background: #7092ff;
     border-radius: 2px;

modules/ui/info.js

@@ -28,7 +28,7 @@ export function uiInfo(context) {
             var widget = widgets[current];
 
             var content = selection.selectAll('.widget-content-' + current);
-            content.call(widget.redraw);
+            content.call(widget);
         }
 
 
@@ -42,40 +42,40 @@ export function uiInfo(context) {
             isHidden = !isHidden;
 
             if (isHidden) {
-                wrap
-                    .style('display', 'block')
+                infobox
+                    .classed('hide', false)
                     .style('opacity', 1)
                     .transition()
                     .duration(200)
                     .style('opacity', 0)
                     .on('end', function() {
-                        d3.select(this).style('display', 'none');
+                        d3.select(this).classed('hide', true);
                     });
             } else {
-                wrap
-                    .style('display', 'block')
-                    .style('opacity', 0)
+                infobox
+                    .classed('hide', false)
+                    .style('opacity', 0);
+
+                redraw();
+
+                infobox
                     .transition()
                     .duration(200)
-                    .style('opacity', 1)
-                    .on('end', function() {
-                        redraw();
-                    });
+                    .style('opacity', 1);
             }
         }
 
 
-        var wrap = selection.selectAll('.infobox')
+        var infobox = selection.selectAll('.infobox')
             .data([0]);
 
-        wrap = wrap.enter()
+        infobox = infobox.enter()
             .append('div')
-            .attr('class', 'infobox fillD2')
-            .style('display', (isHidden ? 'none' : 'block'))
-            .merge(wrap);
+            .attr('class', 'infobox fillD2' + (isHidden ? ' hide' : ''))
+            .merge(infobox);
 
 
-        var containers = wrap.selectAll('.widget-container')
+        var containers = infobox.selectAll('.widget-container')
             .data(ids);
 
         containers.exit()
@@ -86,8 +86,9 @@ export function uiInfo(context) {
             .attr('class', function(d) { return 'widget-container widget-container-' + d; });
 
         enter
-            .append('h4')
-            .attr('class', 'title')
+            .append('div')
+            .attr('class', 'widget-title fillD2')
+            .append('h3')
             .text(function(d) { return widgets[d].title; });
 
         enter

modules/ui/info/measurement.js

@@ -109,8 +109,7 @@ export function uiInfoMeasurement(context) {
 
 
     function redraw(selection) {
-
-        // check if visible
+        if (d3.selectAll('.infobox.hide').size()) return;   // infobox is hidden
 
         var resolver = context.graph(),
             selected = _.filter(context.selectedIDs(), function(e) { return context.hasEntity(e); }),
@@ -122,7 +121,7 @@ export function uiInfoMeasurement(context) {
 
         selection
             .append('h4')
-            .attr('class', 'infobox-heading fillD')
+            .attr('class', 'measurement-heading')
             .text(singular || t('infobox.measurement.selected', { n: selected.length }));
 
         if (!selected.length) return;
@@ -188,7 +187,7 @@ export function uiInfoMeasurement(context) {
                 .on('click', function() {
                     d3.event.preventDefault();
                     isImperial = !isImperial;
-                    redraw();
+                    selection.call(redraw);
                 });
 
         } else {
@@ -206,13 +205,7 @@ export function uiInfoMeasurement(context) {
 
 
 
-    var widget = {};
-
-    widget.id = 'measurement';
-    widget.title = t('infobox.measurement.title');
-    widget.key = t('infobox.measurement.key');
-
-    widget.redraw = function(selection) {
+    var widget = function(selection) {
         selection.call(redraw);
 
         context.map()
@@ -221,5 +214,15 @@ export function uiInfoMeasurement(context) {
             });
     };
 
+    widget.off = function() {
+        context.map()
+            .on('drawn.info-measurement', null);
+    };
+
+    widget.id = 'measurement';
+    widget.title = t('infobox.measurement.title');
+    widget.key = t('infobox.measurement.key');
+
+
     return widget;
 }