From a700d42e7df374bb6012548072d46d14b2a00ffd Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Mon, 26 Feb 2018 21:42:45 -0500 Subject: [PATCH] Much improved field help - absolutely positioned attach to inspector, - float slightly above field - looks much better --- css/80_app.css | 6 +++--- modules/ui/field_help.js | 35 ++++++++++++++++++++++++-------- modules/ui/inspector.js | 43 ++++++++++++++++++++++------------------ 3 files changed, 54 insertions(+), 30 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 7cb24d993..4cabf6b14 100644 --- a/css/80_app.css +++ b/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 { diff --git a/modules/ui/field_help.js b/modules/ui/field_help.js index 333756d54..df334a5fe 100644 --- a/modules/ui/field_help.js +++ b/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') diff --git a/modules/ui/inspector.js b/modules/ui/inspector.js index b2a398db2..89d1f28ed 100644 --- a/modules/ui/inspector.js +++ b/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; };