CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-02-13 01:02:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add some restriction help images, adjust styles

Browse Source
This commit is contained in:
Bryan Housel
2018-02-26 16:31:00 -05:00
parent de1fdaa21f
commit 6c6b1378b2
7 changed files with 79 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
css/80_app.css
View File

@@ -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;
}

10
data/core.yaml
View File

@@ -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**"

BIN
dist/img/tr_inspect.gif vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
dist/img/tr_modify.gif vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

10
dist/locales/en.json vendored
View File

@@ -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**"

2
modules/ui/field.js
View File

@@ -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

99
modules/ui/field_help.js
View File

@@ -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);