diff --git a/css/80_app.css b/css/80_app.css index 1c0ee2dea..7cb24d993 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -2006,13 +2006,16 @@ div.combobox { .field-help-body { display: block; position: absolute; + border: 1px solid #ccc; + border-top: 0; + border-radius: 0 0 4px 4px; + margin-left: 5px; + margin-right: 5px; overflow: hidden; top: 0; - width: 100%; - height: 100%; z-index: 2; - padding: 0px; background: rgba(255,255,255,0.95); + box-shadow: 0 0 10px 0 rgba(0,0,0,.1); } .field-help-title h2 { @@ -2029,6 +2032,8 @@ div.combobox { .field-help-content { padding: 10px; + overflow-y: auto; + overflow-x: hidden; } .field-help-content h3 { @@ -2050,6 +2055,7 @@ div.combobox { height: 20px; } .field-help-content svg.shadow { + opacity: 0.7; width: 60px; height: 20px; } @@ -2066,6 +2072,19 @@ div.combobox { color: #68f; } +.field-help-nav { + position: relative; +} +.field-help-nav a { + float: left; + width: 50%; + text-align: center; +} +.field-help-nav-item { + display: inline-block; + list-style: none; +} + /* Raw Tag Editor */ @@ -2757,7 +2776,7 @@ div.full-screen > button:hover { } .help-wrap .toc li a:hover, -.help-wrap .nav a:hover { +.help-wrap .nav a:hover { background: #ececec; } diff --git a/data/core.yaml b/data/core.yaml index cb9b071d3..ed2dafbc1 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -747,17 +747,15 @@ en: title: Editing Turn Restrictions inspecting: title: Inspecting - about: "To inspect turn restrictions, hover over a starting segment." - shadow: "All paths starting from that segment will be drawn with a line shadow." - from: "{fromShadow} **Starting segment**" + about: "Hover over any starting segment. All possible **TO** destinations will be drawn with a shadow." + from: "{fromShadow} **FROM**" allow: "{allowShadow} **Allowed**" restrict: "{restrictShadow} **Restricted**" only: "{onlyShadow} **Only**" modifying: title: Modifying - about: "To modify turn restrictions, click on a starting segment." - indicators: "All of the possible TO destinations from that segment will appear as turn indicators." - indicators2: "Click on a turn indicator to toggle it between \"Allowed\", \"Restricted\", and \"Only\"." + about: "Click on any starting segment to select it. All possible **TO** destinations will appear as turn indicators." + indicators: "Click on a turn indicator to toggle it between \"Allowed\", \"Restricted\", and \"Only\"." allow: "{allowTurn} **Allowed**" restrict: "{restrictTurn} **Restricted**" only: "{onlyTurn} **Only**" diff --git a/dist/img/tr_inspect.gif b/dist/img/tr_inspect.gif new file mode 100644 index 000000000..57c889c12 Binary files /dev/null and b/dist/img/tr_inspect.gif differ diff --git a/dist/img/tr_modify.gif b/dist/img/tr_modify.gif new file mode 100644 index 000000000..5931416f7 Binary files /dev/null and b/dist/img/tr_modify.gif differ diff --git a/dist/locales/en.json b/dist/locales/en.json index 1b3fc1716..2a24b2caa 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -888,18 +888,16 @@ "title": "Editing Turn Restrictions", "inspecting": { "title": "Inspecting", - "about": "To inspect turn restrictions, hover over a starting segment.", - "shadow": "All paths starting from that segment will be drawn with a line shadow.", - "from": "{fromShadow} **Starting segment**", + "about": "Hover over any starting segment. All possible **TO** destinations will be drawn with a shadow.", + "from": "{fromShadow} **FROM**", "allow": "{allowShadow} **Allowed**", "restrict": "{restrictShadow} **Restricted**", "only": "{onlyShadow} **Only**" }, "modifying": { "title": "Modifying", - "about": "To modify turn restrictions, click on a starting segment.", - "indicators": "All of the possible TO destinations from that segment will appear as turn indicators.", - "indicators2": "Click on a turn indicator to toggle it between \"Allowed\", \"Restricted\", and \"Only\".", + "about": "Click on any starting segment to select it. All possible **TO** destinations will appear as turn indicators.", + "indicators": "Click on a turn indicator to toggle it between \"Allowed\", \"Restricted\", and \"Only\".", "allow": "{allowTurn} **Allowed**", "restrict": "{restrictTurn} **Restricted**", "only": "{onlyTurn} **Only**" diff --git a/modules/ui/field.js b/modules/ui/field.js index ef998340c..4936dd51a 100644 --- a/modules/ui/field.js +++ b/modules/ui/field.js @@ -148,7 +148,7 @@ export function uiField(context, presetField, entity, options) { // instantiate field help if (options.wrap && field.type === 'restrictions') { - help = uiFieldHelp('restrictions'); + help = uiFieldHelp(context, 'restrictions'); } // instantiate tag reference diff --git a/modules/ui/field_help.js b/modules/ui/field_help.js index 2f88a3629..333756d54 100644 --- a/modules/ui/field_help.js +++ b/modules/ui/field_help.js @@ -4,7 +4,7 @@ import { } from 'd3-selection'; import marked from 'marked'; -import { t, textDirection } from '../util/locale'; +import { t } from '../util/locale'; import { svgIcon } from '../svg'; import { icon } from 'intro/helper'; @@ -15,7 +15,6 @@ var fieldHelpKeys = { ['inspecting',[ 'title', 'about', - 'shadow', 'from', 'allow', 'restrict', @@ -25,7 +24,6 @@ var fieldHelpKeys = { 'title', 'about', 'indicators', - 'indicators2', 'allow', 'restrict', 'only' @@ -58,11 +56,11 @@ var replacements = { }; -export function uiFieldHelp(fieldName) { +export function uiFieldHelp(context, fieldName) { var fieldHelp = {}; + var _wrap = d3_select(null); var _body = d3_select(null); - // For each section, squash all the texts into a single markdown document var docs = fieldHelpKeys[fieldName].map(function(key) { var helpkey = 'help.field.' + fieldName + '.' + key[0]; @@ -74,6 +72,7 @@ export function uiFieldHelp(fieldName) { }, ''); return { + key: helpkey, title: t(helpkey + '.title'), html: marked(text.trim()) }; @@ -81,11 +80,14 @@ export function uiFieldHelp(fieldName) { function show() { + _wrap // allow help to spill outside the wrap + .style('overflow', 'visible'); + _body .classed('hide', false) .transition() .duration(200) - .style('height', '100%'); + .style('height', '600px'); } @@ -95,54 +97,32 @@ export function uiFieldHelp(fieldName) { .duration(200) .style('height', '0px') .on('end', function () { + _wrap.style('overflow', null); _body.classed('hide', true); }); } function clickHelp(d, i) { - var rtl = (textDirection === 'rtl'); + var content = _body.selectAll('.field-help-content') + .html(d.html); - _body.selectAll('.field-help-content').html(d.html); - var nav = _body.selectAll('.field-help-nav').html(''); - - if (rtl) { - nav.call(drawNext).call(drawPrevious); - } else { - nav.call(drawPrevious).call(drawNext); + // add an image for some help sections + var img; + switch (d.key) { + case 'help.field.restrictions.inspecting': + img = 'tr_inspect.gif'; + break; + case 'help.field.restrictions.modifying': + img = 'tr_modify.gif'; + break; } - function drawNext(selection) { - if (i < docs.length - 1) { - var nextLink = selection - .append('a') - .attr('class', 'next') - .on('click', function() { - clickHelp(docs[i + 1], i + 1); - }); - - nextLink - .append('span') - .text(docs[i + 1].title) - .call(svgIcon((rtl ? '#icon-backward' : '#icon-forward'), 'inline')); - } - } - - - function drawPrevious(selection) { - if (i > 0) { - var prevLink = selection - .append('a') - .attr('class', 'previous') - .on('click', function() { - clickHelp(docs[i - 1], i - 1); - }); - - prevLink - .call(svgIcon((rtl ? '#icon-forward' : '#icon-backward'), 'inline')) - .append('span') - .text(docs[i - 1].title); - } + if (img) { + content + .append('img') + .attr('class', 'field-help-image') + .attr('src', context.imagePath(img)); } } @@ -172,10 +152,10 @@ export function uiFieldHelp(fieldName) { fieldHelp.body = function(selection) { // this control expects the field to have a preset-input-wrap div - var wrap = selection.selectAll('.preset-input-wrap'); - if (wrap.empty()) return; + _wrap = selection.selectAll('.preset-input-wrap'); + if (_wrap.empty()) return; - _body = wrap.selectAll('.field-help-body') + _body = _wrap.selectAll('.field-help-body') .data([0]); var enter = _body.enter() @@ -202,13 +182,28 @@ export function uiFieldHelp(fieldName) { }) .call(svgIcon('#icon-close')); - enter - .append('div') - .attr('class', 'field-help-content'); + var navEnter = enter + .append('ul') + .attr('class', 'field-help-nav'); + + var titles = docs.map(function(d) { return d.title; }); + navEnter.selectAll('.field-help-nav-item') + .data(titles) + .enter() + .append('li') + .attr('class', 'field-help-nav-item') + .append('a') + .attr('class', 'next') + .text(function(d) { return d; }) + .on('click', function(d, i) { + d3_event.stopPropagation(); + d3_event.preventDefault(); + clickHelp(docs[i], i); + }); enter .append('div') - .attr('class', 'field-help-nav'); + .attr('class', 'field-help-content'); _body = _body .merge(enter);