Much improved field help

- absolutely positioned attach to inspector,
- float slightly above field
- looks much better

css/80_app.css

@@ -2011,11 +2011,11 @@ div.combobox {
     border-radius: 0 0 4px 4px;
     margin-left: 5px;
     margin-right: 5px;
-    overflow: hidden;
     top: 0;
-    z-index: 2;
+    z-index: 20;
+    max-height: 550px;
     background: rgba(255,255,255,0.95);
-    box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
+    box-shadow: 0 0 10px 0 rgba(0,0,0,.3);
 }
 
 .field-help-title h2 {

modules/ui/field_help.js

@@ -58,6 +58,7 @@ var replacements = {
 
 export function uiFieldHelp(context, fieldName) {
     var fieldHelp = {};
+    var _inspector = d3_select(null);
     var _wrap = d3_select(null);
     var _body = d3_select(null);
 
@@ -80,24 +81,24 @@ export function uiFieldHelp(context, fieldName) {
 
 
     function show() {
-        _wrap    // allow help to spill outside the wrap
-            .style('overflow', 'visible');
+        updatePosition();
 
         _body
             .classed('hide', false)
+            .style('opacity', '0')
             .transition()
             .duration(200)
-            .style('height', '600px');
+            .style('opacity', '1');
     }
 
 
     function hide() {
         _body
+            .classed('hide', true)
             .transition()
             .duration(200)
-            .style('height', '0px')
+            .style('opacity', '0')
             .on('end', function () {
-                _wrap.style('overflow', null);
                 _body.classed('hide', true);
             });
     }
@@ -128,6 +129,8 @@ export function uiFieldHelp(context, fieldName) {
 
 
     fieldHelp.button = function(selection) {
+        if (_body.empty()) return;
+
         var button = selection.selectAll('.field-help-button')
             .data([0]);
 
@@ -150,18 +153,34 @@ export function uiFieldHelp(context, fieldName) {
     };
 
 
+    function updatePosition() {
+        var wrap = _wrap.node();
+        var inspector = _inspector.node();
+        var wRect = wrap.getBoundingClientRect();
+        var iRect = inspector.getBoundingClientRect();
+
+        _body
+            .style('left', wRect.left + 'px')
+            .style('width', wRect.width - 10 + 'px')
+            .style('top', wRect.top + inspector.scrollTop - iRect.top + 5 + 'px');
+    }
+
+
     fieldHelp.body = function(selection) {
         // this control expects the field to have a preset-input-wrap div
         _wrap = selection.selectAll('.preset-input-wrap');
         if (_wrap.empty()) return;
 
-        _body = _wrap.selectAll('.field-help-body')
+        _inspector = d3_select('#sidebar .entity-editor-pane .inspector-body');
+        if (_inspector.empty()) return;
+
+        _body = _inspector.selectAll('.field-help-body')
             .data([0]);
 
         var enter = _body.enter()
             .append('div')
-            .attr('class', 'field-help-body cf hide')   // initially hidden
-            .style('height', '0px');
+            .attr('class', 'field-help-body hide');   // initially hidden
+            // .style('height', '0px');
 
         var titleEnter = enter
             .append('div')

modules/ui/inspector.js

@@ -1,4 +1,5 @@
 import { interpolate as d3_interpolate } from 'd3-interpolate';
+import { selectAll as d3_selectAll } from 'd3-selection';
 
 import { uiEntityEditor } from './entity_editor';
 import { uiPresetList } from './preset_list';
@@ -6,22 +7,22 @@ import { uiViewOnOSM } from './view_on_osm';
 
 
 export function uiInspector(context) {
-    var presetList = uiPresetList(context),
-        entityEditor = uiEntityEditor(context),
-        state = 'select',
-        entityID,
-        newFeature = false;
+    var presetList = uiPresetList(context);
+    var entityEditor = uiEntityEditor(context);
+    var _state = 'select';
+    var _entityID;
+    var _newFeature = false;
 
 
     function inspector(selection) {
         presetList
-            .entityID(entityID)
-            .autofocus(newFeature)
+            .entityID(_entityID)
+            .autofocus(_newFeature)
             .on('choose', setPreset);
 
         entityEditor
-            .state(state)
-            .entityID(entityID)
+            .state(_state)
+            .entityID(_entityID)
             .on('choose', showList);
 
         var wrap = selection.selectAll('.panewrap')
@@ -44,8 +45,8 @@ export function uiInspector(context) {
         var editorPane = wrap.selectAll('.entity-editor-pane');
 
         var graph = context.graph(),
-            entity = context.entity(entityID),
-            showEditor = state === 'hover' ||
+            entity = context.entity(_entityID),
+            showEditor = _state === 'hover' ||
                 entity.isUsed(graph) ||
                 entity.isHighwayIntersection(graph);
 
@@ -66,7 +67,7 @@ export function uiInspector(context) {
             .merge(footer);
 
         footer
-            .call(uiViewOnOSM(context).entityID(entityID));
+            .call(uiViewOnOSM(context).entityID(_entityID));
 
 
         function showList(preset) {
@@ -89,23 +90,27 @@ export function uiInspector(context) {
 
 
     inspector.state = function(_) {
-        if (!arguments.length) return state;
-        state = _;
-        entityEditor.state(state);
+        if (!arguments.length) return _state;
+        _state = _;
+        entityEditor.state(_state);
+
+        // remove any old field help overlay that might have gotten attached to the inspector
+        d3_selectAll('.field-help-body').remove();
+
         return inspector;
     };
 
 
     inspector.entityID = function(_) {
-        if (!arguments.length) return entityID;
-        entityID = _;
+        if (!arguments.length) return _entityID;
+        _entityID = _;
         return inspector;
     };
 
 
     inspector.newFeature = function(_) {
-        if (!arguments.length) return newFeature;
-        newFeature = _;
+        if (!arguments.length) return _newFeature;
+        _newFeature = _;
         return inspector;
     };