Add help UI style, help.title translation

This commit is contained in:
Tom MacWright
2013-03-22 14:47:29 -04:00
parent 64bec11fb9
commit 4ab03064b0
8 changed files with 72 additions and 47 deletions
+1 -1
View File
@@ -55,7 +55,7 @@ function generateDocumentation() {
title = text.split('\n')[0]
.replace('#', '').trim();
docs.push({
html: marked(text),
html: marked(text.split('\n').slice(1).join('\n')),
title: title
});
});
+10 -1
View File
@@ -1544,11 +1544,20 @@ div.combobox {
padding-left:50px;
padding-top:20px;
padding-right:20px;
padding-bottom:60px;
padding-bottom:150px;
left: 0;
overflow-y: scroll;
}
.help-wrap .body p {
padding: 0 0 5px 0;
}
.help-wrap .body p code {
padding:2px 4px;
background:#eee;
}
/* Map
------------------------------------------------------- */
+2
View File
@@ -185,3 +185,5 @@ en:
gpx:
local_layer: "Local GPX file"
drag_drop: "Drag and drop a .gpx file on the page"
help:
title: "Help"
+2 -2
View File
@@ -1,10 +1,10 @@
[
{
"html": "<h1>Mapping Buildings</h1>\n<p>OpenStreetMap is the world&#39;s largest database of buildings. You can create\nand improve this database.</p>\n<h2>Selecting</h2>\n<p>You can select a building by clicking on its border. This will highlight the\nbuilding and open a small tools menu and a sidebar showing more information\nabout the building.</p>\n<h2>Modifying</h2>\n<p>Sometimes buildings are incorrectly placed or have incorrect tags.</p>\n<p>To move an entire building, select it, then click the &#39;Move&#39; tool. Move your\nmouse to shift the building, and click when it&#39;s correctly placed.</p>\n<p>To fix the specific shape of a building, click and drag the points that form\nits border into better places.</p>\n<h2>Creating</h2>\n<p>One of the main questions around adding buildings to the map is that\nOpenStreetMap records buildings both as shapes and points. The rule of thumb\nis to <em>map a building as a shape whenever possible</em>, and map companies, homes,\namenities, and other things that operate out of buildings as points placed\nwithin the building shape.</p>\n<p>Start drawing a building as a shape by clicking the &#39;Area&#39; button in the top\nleft of the interface, and end it either by pressing &#39;Return&#39; on your keyboard\nor clicking on the first point drawn to close the shape.</p>\n<h2>Deleting</h2>\n<p>If a building is entirely incorrect - you can see that it doesn&#39;t exist in satellite\nimagery and ideally have confirmed locally that it&#39;s not present - you can delete\nit, which removes it from the map. Be cautious when deleting features -\nlike any other edit, the results are seen by everyone and satellite imagery\nis often out of date, so the road could simply be newly built.</p>\n<p>You can delete a building by clicking on it to select it, then clicking the\ntrash can icon or pressing the &#39;Delete&#39; key.</p>\n",
"html": "<p>OpenStreetMap is the world&#39;s largest database of buildings. You can create\nand improve this database.</p>\n<h3>Selecting</h3>\n<p>You can select a building by clicking on its border. This will highlight the\nbuilding and open a small tools menu and a sidebar showing more information\nabout the building.</p>\n<h3>Modifying</h3>\n<p>Sometimes buildings are incorrectly placed or have incorrect tags.</p>\n<p>To move an entire building, select it, then click the &#39;Move&#39; tool. Move your\nmouse to shift the building, and click when it&#39;s correctly placed.</p>\n<p>To fix the specific shape of a building, click and drag the points that form\nits border into better places.</p>\n<h3>Creating</h3>\n<p>One of the main questions around adding buildings to the map is that\nOpenStreetMap records buildings both as shapes and points. The rule of thumb\nis to <em>map a building as a shape whenever possible</em>, and map companies, homes,\namenities, and other things that operate out of buildings as points placed\nwithin the building shape.</p>\n<p>Start drawing a building as a shape by clicking the &#39;Area&#39; button in the top\nleft of the interface, and end it either by pressing &#39;Return&#39; on your keyboard\nor clicking on the first point drawn to close the shape.</p>\n<h3>Deleting</h3>\n<p>If a building is entirely incorrect - you can see that it doesn&#39;t exist in satellite\nimagery and ideally have confirmed locally that it&#39;s not present - you can delete\nit, which removes it from the map. Be cautious when deleting features -\nlike any other edit, the results are seen by everyone and satellite imagery\nis often out of date, so the road could simply be newly built.</p>\n<p>You can delete a building by clicking on it to select it, then clicking the\ntrash can icon or pressing the &#39;Delete&#39; key.</p>\n",
"title": "Mapping Buildings"
},
{
"html": "<h1>Mapping Roads</h1>\n<p>You can create, fix, and delete roads with this editor. Roads can be all\nkinds: paths, highways, trails, cycleways, and more - any often-crossed\nsegment should be mappable.</p>\n<h2>Selecting</h2>\n<p>Click on a road to select it. An outline should become visible, along\nwith a small tools menu on the map and a sidebar showing more information\nabout the road.</p>\n<h3>Modifying</h3>\n<p>Often you&#39;ll see roads that aren&#39;t aligned to the imagery behind them\nor a GPS track.</p>\n<p>First click on the road you want to change. This will highlight it and show\n&#39;control points along it&#39; that you can drag to better locations. If\nyou want to add new control points for more detail, double-click a part\nof the road without a point, and one will be added.</p>\n<p>If the road connects to another road, but doesn&#39;t properly connect on\nthe map, you can drag one of its control points onto the other road in\norder to join them. Having roads connect is important for the map\nand essential for providing driving directions.</p>\n<p>You can also click the &#39;Move&#39; tool or type <code>M</code> to move the entire road at\none time, and then click again to save that movement.</p>\n<h2>Deleting</h2>\n<p>If a road is entirely incorrect - you can see that it doesn&#39;t exist in satellite\nimagery and ideally have confirmed locally that it&#39;s not present - you can delete\nit, which removes it from the map. Be cautious when deleting features -\nlike any other edit, the results are seen by everyone and satellite imagery\nis often out of date, so the road could simply be newly built.</p>\n<p>You can delete a road by clicking on it to select it, then clicking the\ntrash can icon or pressing the &#39;Delete&#39; key.</p>\n<h2>Creating</h2>\n<p>Found somewhere there should be a road but there isn&#39;t? Click the &#39;Line&#39;\nicon in the top-left of the editor or press the key &#39;2&#39; to start drawing\na line.</p>\n<p>Click on the start of the road on the map to start drawing. If the road\nconnects to another road, first, click on the place where they connect.</p>\n<p>Then click on points along the road so that it follows the right path, according\nto satellite imagery or GPS. When you&#39;re done drawing the road, double-click\nor press &#39;Return&#39; or &#39;Enter&#39; on your keyboard.</p>\n",
"html": "<p>You can create, fix, and delete roads with this editor. Roads can be all\nkinds: paths, highways, trails, cycleways, and more - any often-crossed\nsegment should be mappable.</p>\n<h3>Selecting</h3>\n<p>Click on a road to select it. An outline should become visible, along\nwith a small tools menu on the map and a sidebar showing more information\nabout the road.</p>\n<h3>Modifying</h3>\n<p>Often you&#39;ll see roads that aren&#39;t aligned to the imagery behind them\nor a GPS track.</p>\n<p>First click on the road you want to change. This will highlight it and show\n&#39;control points along it&#39; that you can drag to better locations. If\nyou want to add new control points for more detail, double-click a part\nof the road without a point, and one will be added.</p>\n<p>If the road connects to another road, but doesn&#39;t properly connect on\nthe map, you can drag one of its control points onto the other road in\norder to join them. Having roads connect is important for the map\nand essential for providing driving directions.</p>\n<p>You can also click the &#39;Move&#39; tool or type <code>M</code> to move the entire road at\none time, and then click again to save that movement.</p>\n<h3>Deleting</h3>\n<p>If a road is entirely incorrect - you can see that it doesn&#39;t exist in satellite\nimagery and ideally have confirmed locally that it&#39;s not present - you can delete\nit, which removes it from the map. Be cautious when deleting features -\nlike any other edit, the results are seen by everyone and satellite imagery\nis often out of date, so the road could simply be newly built.</p>\n<p>You can delete a road by clicking on it to select it, then clicking the\ntrash can icon or pressing the &#39;Delete&#39; key.</p>\n<h3>Creating</h3>\n<p>Found somewhere there should be a road but there isn&#39;t? Click the &#39;Line&#39;\nicon in the top-left of the editor or press the key &#39;2&#39; to start drawing\na line.</p>\n<p>Click on the start of the road on the map to start drawing. If the road\nconnects to another road, first, click on the place where they connect.</p>\n<p>Then click on points along the road so that it follows the right path, according\nto satellite imagery or GPS. When you&#39;re done drawing the road, double-click\nor press &#39;Return&#39; or &#39;Enter&#39; on your keyboard.</p>\n",
"title": "Mapping Roads"
}
]
+4 -4
View File
@@ -3,13 +3,13 @@
OpenStreetMap is the world's largest database of buildings. You can create
and improve this database.
## Selecting
### Selecting
You can select a building by clicking on its border. This will highlight the
building and open a small tools menu and a sidebar showing more information
about the building.
## Modifying
### Modifying
Sometimes buildings are incorrectly placed or have incorrect tags.
@@ -19,7 +19,7 @@ mouse to shift the building, and click when it's correctly placed.
To fix the specific shape of a building, click and drag the points that form
its border into better places.
## Creating
### Creating
One of the main questions around adding buildings to the map is that
OpenStreetMap records buildings both as shapes and points. The rule of thumb
@@ -31,7 +31,7 @@ Start drawing a building as a shape by clicking the 'Area' button in the top
left of the interface, and end it either by pressing 'Return' on your keyboard
or clicking on the first point drawn to close the shape.
## Deleting
### Deleting
If a building is entirely incorrect - you can see that it doesn't exist in satellite
imagery and ideally have confirmed locally that it's not present - you can delete
+3 -3
View File
@@ -4,7 +4,7 @@ You can create, fix, and delete roads with this editor. Roads can be all
kinds: paths, highways, trails, cycleways, and more - any often-crossed
segment should be mappable.
## Selecting
### Selecting
Click on a road to select it. An outline should become visible, along
with a small tools menu on the map and a sidebar showing more information
@@ -28,7 +28,7 @@ and essential for providing driving directions.
You can also click the 'Move' tool or type `M` to move the entire road at
one time, and then click again to save that movement.
## Deleting
### Deleting
If a road is entirely incorrect - you can see that it doesn't exist in satellite
imagery and ideally have confirmed locally that it's not present - you can delete
@@ -39,7 +39,7 @@ is often out of date, so the road could simply be newly built.
You can delete a road by clicking on it to select it, then clicking the
trash can icon or pressing the 'Delete' key.
## Creating
### Creating
Found somewhere there should be a road but there isn't? Click the 'Line'
icon in the top-left of the editor or press the key '2' to start drawing
+3
View File
@@ -232,6 +232,9 @@ locale.en = {
"local_layer": "Local GPX file",
"drag_drop": "Drag and drop a .gpx file on the page"
},
"help": {
"title": "Help"
},
"presets": {
"fields": {
"access": {
+47 -36
View File
@@ -16,51 +16,62 @@ iD.ui.Help = function(context) {
function setVisible(show) {
if (show !== shown) {
button.classed('active', show);
if (!show) return;
shown = show;
var pane = context.container().select('.help-wrap');
pane
.html('');
pane.style('display', 'block')
.style('left', '-500px')
.style('opacity', 1)
.transition()
.duration(200)
.style('left', '0px');
var pane = context.container()
.select('.help-wrap');
if (show) {
pane.append('h4').text(t('help.title'));
pane.style('display', 'block')
.style('left', '-500px')
.transition()
.duration(200)
.style('left', '0px')
.each('end', function() {
var toc = pane.append('div')
.attr('class', 'toc')
.append('ul');
pane.html('');
toc
.selectAll('li')
.data(iD.data.doc)
.enter()
.append('li')
.append('a')
.text(function(d) { return d.title; })
.on('click', function(d) {
doctitle.text(d.title);
console.log(d);
body.html(d.html);
var toc = pane.append('div')
.attr('class', 'toc')
.append('ul');
toc
.selectAll('li')
.data(iD.data.doc)
.enter()
.append('li')
.append('a')
.text(function(d) { return d.title; })
.on('click', function(d) {
doctitle.text(d.title);
body.html(d.html);
});
var doctitle = pane.append('h2')
.text(t('help.title')),
body = pane.append('div')
.attr('class', 'body');
pane.on('mousedown.help-inside', function() {
return d3.event.stopPropagation();
});
selection.on('mousedown.help-inside', function() {
return d3.event.stopPropagation();
});
});
var doctitle = pane.append('h3').text(t('help.title'));
var body = pane.append('div')
.attr('class', 'body');
selection.on('mousedown.help-inside', function() {
return d3.event.stopPropagation();
});
} else {
selection.on('mousedown.help-inside', null);
pane.style('left', '0px')
.transition()
.duration(200)
.style('left', '-500px')
.each('end', function() {
d3.select(this).style('display', 'none');
});
pane.on('mousedown.help-inside', null);
}
}
}