From 365fa1bf0d2afd1a2d9d9b932a3b5c17d195c337 Mon Sep 17 00:00:00 2001 From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com> Date: Sat, 11 Jul 2020 19:27:50 -0400 Subject: [PATCH] Add tap and longpress icons to walkthrough --- data/core.yaml | 34 +++++++++--------- dist/locales/en.json | 36 +++++++++---------- modules/ui/intro/helper.js | 2 ++ .../graphics/walkthrough-longpress.svg | 5 +++ svg/iD-sprite/graphics/walkthrough-tap.svg | 5 +++ 5 files changed, 47 insertions(+), 35 deletions(-) create mode 100644 svg/iD-sprite/graphics/walkthrough-longpress.svg create mode 100644 svg/iD-sprite/graphics/walkthrough-tap.svg diff --git a/data/core.yaml b/data/core.yaml index 470a6d3e9..a9283d4f6 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -1933,14 +1933,14 @@ en: title: "Navigation" map_info: "The main map area shows OpenStreetMap data on top of a background." drag: "You can click-and-drag the map with the {leftclick} left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**" - drag_touch: "You can tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**" + drag_touch: "You can {longpress_icon} tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**" zoom: "You can zoom the map by scrolling with a mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons. **Zoom the map!**" zoom_touch: "You can zoom the map by pinching it with two fingers, double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**" features: "We use the word *features* to describe the things that appear on the map. Anything in the real world can be mapped as a feature on OpenStreetMap." points_lines_areas: "Map features are represented using *points, lines, or areas.*" nodes_ways: "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*." click_townhall: "All features on the map can be selected by clicking on them. **Click the point to select it.**" - tap_townhall: "All features on the map can be selected by tapping on them. **Tap the point to select it.**" + tap_townhall: "All features on the map can be selected by {tap_icon} tapping on them. **Tap the point to select it.**" selected_townhall: "Great! The point is now selected. Selected features are drawn with a pulsing glow." editor_townhall: "When a feature is selected, the *feature editor* is displayed alongside the map." preset_townhall: "The top part of the feature editor shows the feature's type. This point is a {preset}." @@ -1957,7 +1957,7 @@ en: points_info: "*Points* can be used to represent features such as shops, restaurants, and monuments." add_point: "They mark a specific location, and describe what's there. **Press the {point_icon} {point} button to add a new point.**" place_point: "To place the new point on the map, position your mouse cursor where the point should go, then {leftclick} left-click or press `{space}`. **Move the mouse pointer over this building, then left-click or press `{space}`.**" - place_point_touch: "To place the new point on the map, tap the location where it should go. **Tap the center of this building.**" + place_point_touch: "To place the new point on the map, {tap_icon} tap the location where it should go. **Tap the center of this building.**" search_cafe: "There are many different features that can be represented by points. The point you just added is a cafe. **Search for '{preset}'.**" choose_cafe: "**Choose {preset} from the list.**" feature_editor: "The point is now marked as a cafe. Using the feature editor, we can add more information about the cafe." @@ -1968,7 +1968,7 @@ en: update: "Let's fill in some more details for this cafe. You can change its name, add a cuisine, or add an address. **Change the cafe details.**" update_close: "**When you are finished updating the cafe, press `{esc}`, `{return}`, or the {button} button to close the feature editor.**" rightclick: "You can {rightclick} right-click on any feature to see the *edit menu*, which shows a list of editing operations that can be performed.{br}A right-click might be the same as a control-click or two-finger click. **Right-click to select the point you created and show the edit menu.**" - edit_menu_touch: "You can long-press on any feature to see the *edit menu*, which shows a list of editing operations that can be performed. **Press-and-hold the point you created to show the edit menu.**" + edit_menu_touch: "You can {longpress_icon} long-press on any feature to see the *edit menu*, which shows a list of editing operations that can be performed. **Press-and-hold the point you created to show the edit menu.**" delete: "It's OK to delete features that don't exist in the real world.{br}Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it. **Press the {delete_icon} {delete} button to remove the point.**" undo: "You can always undo any changes up until you save your edits to OpenStreetMap. **Press the {undo_icon} {undo} button to get the point back.**" play: "Now that you know how to create and edit points, try creating a few more points for practice! **When you are ready to continue to the next chapter, press '{next}'.**" @@ -1977,10 +1977,10 @@ en: add_playground: "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas.{br}They can also be used for more detailed mapping of many features you might normally map as points. **Press the {area_icon} {area} button to add a new area.**" start_playground: "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature." starting_node_click: "**Click or press `{space}` to place a starting node on one of the corners of the playground.**" - starting_node_tap: "**Tap to place a starting node on one of the corners of the playground.**" + starting_node_tap: "**{tap_icon} Tap to place a starting node on one of the corners of the playground.**" continue_playground: "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the `{alt}` key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**" finish_area_click: "Finish the area by pressing `{return}`, or clicking again on either the first or last node." - finish_area_tap: "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard." + finish_area_tap: "Finish the area by {tap_icon} tapping again on either the first or last node, or by pressing `{return}` on a keyboard." finish_playground: "**Finish drawing an area for the playground.**" search_playground: "**Search for '{preset}'.**" choose_playground: "**Choose {preset} from the list.**" @@ -1995,12 +1995,12 @@ en: missing_road: "Here is a road that is missing. Let's add it!" line_draw_info: "In OpenStreetMap, lines should be drawn down the center of the road. You can drag and zoom the map while drawing if necessary." start_line: "**Start a new line by clicking at the top end of this missing road.**" - start_line_tap: "**Start a new line by tapping at the top end of this missing road.**" + start_line_tap: "**Start a new line by {tap_icon} tapping at the top end of this missing road.**" intersect: "Continue drawing the line by placing more nodes along the road.{br}Roads, along with paths and ferry routes, must be properly connected to each other for navigation apps to work. **Place an intersection node on {name} to connect the two lines.**" retry_intersect: "The road needs to intersect {name}. Let's try again!" continue_line: "Continue drawing the line for the new road. Remember that you can drag and zoom the map if needed." finish_line_click: "When you're finished, click the last node again or press `{return}`." - finish_line_tap: "When you're finished, tap the last node again or press `{return}` on a keyboard." + finish_line_tap: "When you're finished, {tap_icon} tap the last node again or press `{return}` on a keyboard." finish_road: "**Finish drawing the road.**" choose_category_road: "**Select {category} from the list.**" choose_preset_residential: "There are many different types of roads, but this one is a residential road. **Choose the {preset} type.**" @@ -2009,9 +2009,9 @@ en: did_name_road: "Looks good! Next we will learn how to update the shape of a line." update_line: "Sometimes you will need to change the shape of an existing line. Here is a road that doesn't look quite right." add_node: "We can add some nodes to this line to improve its shape. One way to add a node is to double-click the line where you want to add a node. **Double-click on the line to create a new node.**" - add_node_touch: "We can add some nodes to this line to improve its shape. One way to add a node is to double-tap the line where you want to add a node. **Double-tap on the line to create a new node.**" + add_node_touch: "We can add some nodes to this line to improve its shape. One way to add a node is to {tap_icon} double-tap the line where you want to add a node. **Double-tap on the line to create a new node.**" start_drag_endpoint: "When a line is selected, you can adjust any of its nodes by clicking and holding down the {leftclick} left mouse button while you drag." - start_drag_endpoint_touch: "When a line is selected, you can tap-and-drag any of its nodes to adjust them." + start_drag_endpoint_touch: "When a line is selected, you can {longpress_icon} tap-and-drag any of its nodes to adjust them." drag_to_intersection: "**Drag the endpoint to the place where these roads should intersect.**" spot_looks_good: "This spot looks good." finish_drag_endpoint: "**Release the mouse button to finish dragging.**" @@ -2021,17 +2021,17 @@ en: delete_lines: "It's OK to delete lines for roads that don't exist in the real world.{br}Here's an example where the city planned a {street} but never built it. We can improve this part of the map by deleting the extra lines." split_street: "The last real street is {street1}, so we will *split* {street2} at this intersection and remove everything above it." rightclick_intersection: "**{rightclick} Right-click on the intersection node.**" - edit_menu_intersection_touch: "**Long-press on the intersection node.**" + edit_menu_intersection_touch: "**{longpress_icon} Long-press on the intersection node.**" split_intersection: "**Press the {split_icon} {split} button to divide {street}.**" retry_split: "You didn't press the {split_icon} {split} button. Try again." did_split_multi: "Good job! {street1} is now split into two pieces. The top part can be removed. **Select the top part of {street2}.**" did_split_single: "**Select the top part of {street2}.**" multi_select: "{selected} is now selected. Let's also select {other1}." add_to_selection_click: "You can hold `{shift}` while clicking to select multiple things. **Shift-click on {other2}.**" - add_to_selection_touch: "**Tap-and-hold {selected} and then tap {other2} to select both.**" + add_to_selection_touch: "**{longpress_icon} Tap-and-hold {selected} and then {tap_icon} tap {other2} with another finger to select both.**" multi_select_success: "Good! Both lines to delete are now selected." multi_rightclick: "**{rightclick} Right-click on one of the lines to show the edit menu.**" - multi_edit_menu_touch: "**Long-press on one of the lines to show the edit menu.**" + multi_edit_menu_touch: "**{longpress_icon} Long-press on one of the lines to show the edit menu.**" multi_delete: "**Press the {delete_icon} {delete} button to remove the extra lines.**" retry_delete: "You didn't press the {delete_icon} {delete} button. Try again." play: "Great! Use the skills that you've learned in this chapter to practice editing some more lines. **When you are ready to continue to the next chapter, press '{next}'.**" @@ -2040,7 +2040,7 @@ en: add_building: "OpenStreetMap is the world's largest database of buildings.{br}You can help improve this database by tracing buildings that aren't already mapped. **Press the {area_icon} {area} button to add a new area.**" start_building: "Let's add this house to the map by tracing its outline.{br}Buildings should be traced around their footprint as accurately as possible." building_corner_click: "**Click or press `{space}` to place a starting node on one of the corners of the building.**" - building_corner_tap: "**Tap one of the corners of the building to place a starting node.**" + building_corner_tap: "**{tap_icon} Tap one of the corners of the building to place a starting node.**" continue_building: "Continue placing nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details." finish_building: "**Finish tracing the building.**" retry_building: "It looks like you had some trouble placing the nodes at the building corners. Try again!" @@ -2048,20 +2048,20 @@ en: choose_preset_house: "There are many different types of buildings, but this one is clearly a house.{br}If you're not sure of the type, it's OK to just choose the generic Building type. **Choose the {preset} type.**" close: "**Press `{esc}` or the {apply} button to close the feature editor.**" rightclick_building: "**{rightclick} Right-click to select the building you created and show the edit menu.**" - edit_menu_building_touch: "**Long-press the building you created to show the edit menu.**" + edit_menu_building_touch: "**{longpress_icon} Long-press the building you created to show the edit menu.**" square_building: "The house that you just added will look even better with perfectly square corners. **Press the {orthogonalize_icon} {orthogonalize} button to tidy up the building's shape.**" retry_square: "You didn't press the {orthogonalize_icon} {orthogonalize} button. Try again." done_square: "See how the corners of the building moved into place? Let's learn another useful trick." add_tank: "Next we'll trace this circular storage tank. **Press the {area_icon} {area} button to add a new area.**" start_tank: "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge." tank_edge_click: "**Click or press `{space}` to place a starting node on the edge of the tank.**" - tank_edge_tap: "**Tap the edge of the tank to place a starting node.**" + tank_edge_tap: "**{tap_icon} Tap the edge of the tank to place a starting node.**" continue_tank: "Add a few more nodes around the edge. The circle will be created outside the nodes that you draw." finish_tank: "**Finish tracing the tank.**" search_tank: "**Search for '{preset}'.**" choose_tank: "**Choose {preset} from the list.**" rightclick_tank: "**{rightclick} Right-click to select the storage tank you created and show the edit menu.**" - edit_menu_tank_touch: "**Long-press the storage tank you created to show the edit menu.**" + edit_menu_tank_touch: "**{longpress_icon} Long-press the storage tank you created to show the edit menu.**" circle_tank: "**Press the {circularize_icon} {circularize} button to make the tank a circle.**" retry_circle: "You didn't press the {circularize_icon} {circularize} button. Try again." play: "Great Job! Practice tracing a few more buildings, and try some of the other commands on the edit menu. **When you are ready to continue to the next chapter, press '{next}'.**" diff --git a/dist/locales/en.json b/dist/locales/en.json index a8d859459..72f378532 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -1632,7 +1632,7 @@ "open_data_h": "Open Data", "open_data": "Edits that you make on this map will be visible to everyone who uses OpenStreetMap. Your edits can be based on personal knowledge, on-the-ground surveying, or imagery collected from aerial or street level photos. Copying from commercial sources, like Google Maps, [is strictly forbidden](https://www.openstreetmap.org/copyright).", "before_start_h": "Before you start", - "before_start": "You should be familiar with OpenStreetMap and this editor before you start editing. iD contains a walkthrough to teach you the basics of editing OpenStreetMap. Press the \"{start_the_walkthrough}\" button on this screen to take the tutorial—it takes only about 15 minutes.", + "before_start": "You should be familiar with OpenStreetMap and this editor before you start editing. iD contains a walkthrough to teach you the basics of editing OpenStreetMap. Press the \"{start_the_walkthrough}\" button on this screen to start the tutorial—it takes only about 15 minutes.", "open_source_h": "Open Source", "open_source": "The iD editor is a collaborative open source project, and you are using version {version} now. The source code is available [on GitHub](https://github.com/openstreetmap/iD).", "open_source_help": "You can help iD by [translating](https://github.com/openstreetmap/iD/blob/develop/CONTRIBUTING.md#translating) or [reporting bugs](https://github.com/openstreetmap/iD/issues)." @@ -2408,14 +2408,14 @@ "title": "Navigation", "map_info": "The main map area shows OpenStreetMap data on top of a background.", "drag": "You can click-and-drag the map with the {leftclick} left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**", - "drag_touch": "You can tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**", + "drag_touch": "You can {longpress_icon} tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**", "zoom": "You can zoom the map by scrolling with a mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons. **Zoom the map!**", "zoom_touch": "You can zoom the map by pinching it with two fingers, double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**", "features": "We use the word *features* to describe the things that appear on the map. Anything in the real world can be mapped as a feature on OpenStreetMap.", "points_lines_areas": "Map features are represented using *points, lines, or areas.*", "nodes_ways": "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*.", "click_townhall": "All features on the map can be selected by clicking on them. **Click the point to select it.**", - "tap_townhall": "All features on the map can be selected by tapping on them. **Tap the point to select it.**", + "tap_townhall": "All features on the map can be selected by {tap_icon} tapping on them. **Tap the point to select it.**", "selected_townhall": "Great! The point is now selected. Selected features are drawn with a pulsing glow.", "editor_townhall": "When a feature is selected, the *feature editor* is displayed alongside the map.", "preset_townhall": "The top part of the feature editor shows the feature's type. This point is a {preset}.", @@ -2433,7 +2433,7 @@ "points_info": "*Points* can be used to represent features such as shops, restaurants, and monuments.", "add_point": "They mark a specific location, and describe what's there. **Press the {point_icon} {point} button to add a new point.**", "place_point": "To place the new point on the map, position your mouse cursor where the point should go, then {leftclick} left-click or press `{space}`. **Move the mouse pointer over this building, then left-click or press `{space}`.**", - "place_point_touch": "To place the new point on the map, tap the location where it should go. **Tap the center of this building.**", + "place_point_touch": "To place the new point on the map, {tap_icon} tap the location where it should go. **Tap the center of this building.**", "search_cafe": "There are many different features that can be represented by points. The point you just added is a cafe. **Search for '{preset}'.**", "choose_cafe": "**Choose {preset} from the list.**", "feature_editor": "The point is now marked as a cafe. Using the feature editor, we can add more information about the cafe.", @@ -2444,7 +2444,7 @@ "update": "Let's fill in some more details for this cafe. You can change its name, add a cuisine, or add an address. **Change the cafe details.**", "update_close": "**When you are finished updating the cafe, press `{esc}`, `{return}`, or the {button} button to close the feature editor.**", "rightclick": "You can {rightclick} right-click on any feature to see the *edit menu*, which shows a list of editing operations that can be performed.{br}A right-click might be the same as a control-click or two-finger click. **Right-click to select the point you created and show the edit menu.**", - "edit_menu_touch": "You can long-press on any feature to see the *edit menu*, which shows a list of editing operations that can be performed. **Press-and-hold the point you created to show the edit menu.**", + "edit_menu_touch": "You can {longpress_icon} long-press on any feature to see the *edit menu*, which shows a list of editing operations that can be performed. **Press-and-hold the point you created to show the edit menu.**", "delete": "It's OK to delete features that don't exist in the real world.{br}Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it. **Press the {delete_icon} {delete} button to remove the point.**", "undo": "You can always undo any changes up until you save your edits to OpenStreetMap. **Press the {undo_icon} {undo} button to get the point back.**", "play": "Now that you know how to create and edit points, try creating a few more points for practice! **When you are ready to continue to the next chapter, press '{next}'.**" @@ -2454,10 +2454,10 @@ "add_playground": "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas.{br}They can also be used for more detailed mapping of many features you might normally map as points. **Press the {area_icon} {area} button to add a new area.**", "start_playground": "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature.", "starting_node_click": "**Click or press `{space}` to place a starting node on one of the corners of the playground.**", - "starting_node_tap": "**Tap to place a starting node on one of the corners of the playground.**", + "starting_node_tap": "**{tap_icon} Tap to place a starting node on one of the corners of the playground.**", "continue_playground": "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the `{alt}` key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**", "finish_area_click": "Finish the area by pressing `{return}`, or clicking again on either the first or last node.", - "finish_area_tap": "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard.", + "finish_area_tap": "Finish the area by {tap_icon} tapping again on either the first or last node, or by pressing `{return}` on a keyboard.", "finish_playground": "**Finish drawing an area for the playground.**", "search_playground": "**Search for '{preset}'.**", "choose_playground": "**Choose {preset} from the list.**", @@ -2473,12 +2473,12 @@ "missing_road": "Here is a road that is missing. Let's add it!", "line_draw_info": "In OpenStreetMap, lines should be drawn down the center of the road. You can drag and zoom the map while drawing if necessary.", "start_line": "**Start a new line by clicking at the top end of this missing road.**", - "start_line_tap": "**Start a new line by tapping at the top end of this missing road.**", + "start_line_tap": "**Start a new line by {tap_icon} tapping at the top end of this missing road.**", "intersect": "Continue drawing the line by placing more nodes along the road.{br}Roads, along with paths and ferry routes, must be properly connected to each other for navigation apps to work. **Place an intersection node on {name} to connect the two lines.**", "retry_intersect": "The road needs to intersect {name}. Let's try again!", "continue_line": "Continue drawing the line for the new road. Remember that you can drag and zoom the map if needed.", "finish_line_click": "When you're finished, click the last node again or press `{return}`.", - "finish_line_tap": "When you're finished, tap the last node again or press `{return}` on a keyboard.", + "finish_line_tap": "When you're finished, {tap_icon} tap the last node again or press `{return}` on a keyboard.", "finish_road": "**Finish drawing the road.**", "choose_category_road": "**Select {category} from the list.**", "choose_preset_residential": "There are many different types of roads, but this one is a residential road. **Choose the {preset} type.**", @@ -2487,9 +2487,9 @@ "did_name_road": "Looks good! Next we will learn how to update the shape of a line.", "update_line": "Sometimes you will need to change the shape of an existing line. Here is a road that doesn't look quite right.", "add_node": "We can add some nodes to this line to improve its shape. One way to add a node is to double-click the line where you want to add a node. **Double-click on the line to create a new node.**", - "add_node_touch": "We can add some nodes to this line to improve its shape. One way to add a node is to double-tap the line where you want to add a node. **Double-tap on the line to create a new node.**", + "add_node_touch": "We can add some nodes to this line to improve its shape. One way to add a node is to {tap_icon} double-tap the line where you want to add a node. **Double-tap on the line to create a new node.**", "start_drag_endpoint": "When a line is selected, you can adjust any of its nodes by clicking and holding down the {leftclick} left mouse button while you drag.", - "start_drag_endpoint_touch": "When a line is selected, you can tap-and-drag any of its nodes to adjust them.", + "start_drag_endpoint_touch": "When a line is selected, you can {longpress_icon} tap-and-drag any of its nodes to adjust them.", "drag_to_intersection": "**Drag the endpoint to the place where these roads should intersect.**", "spot_looks_good": "This spot looks good.", "finish_drag_endpoint": "**Release the mouse button to finish dragging.**", @@ -2499,17 +2499,17 @@ "delete_lines": "It's OK to delete lines for roads that don't exist in the real world.{br}Here's an example where the city planned a {street} but never built it. We can improve this part of the map by deleting the extra lines.", "split_street": "The last real street is {street1}, so we will *split* {street2} at this intersection and remove everything above it.", "rightclick_intersection": "**{rightclick} Right-click on the intersection node.**", - "edit_menu_intersection_touch": "**Long-press on the intersection node.**", + "edit_menu_intersection_touch": "**{longpress_icon} Long-press on the intersection node.**", "split_intersection": "**Press the {split_icon} {split} button to divide {street}.**", "retry_split": "You didn't press the {split_icon} {split} button. Try again.", "did_split_multi": "Good job! {street1} is now split into two pieces. The top part can be removed. **Select the top part of {street2}.**", "did_split_single": "**Select the top part of {street2}.**", "multi_select": "{selected} is now selected. Let's also select {other1}.", "add_to_selection_click": "You can hold `{shift}` while clicking to select multiple things. **Shift-click on {other2}.**", - "add_to_selection_touch": "**Tap-and-hold {selected} and then tap {other2} to select both.**", + "add_to_selection_touch": "**{longpress_icon} Tap-and-hold {selected} and then {tap_icon} tap {other2} with another finger to select both.**", "multi_select_success": "Good! Both lines to delete are now selected.", "multi_rightclick": "**{rightclick} Right-click on one of the lines to show the edit menu.**", - "multi_edit_menu_touch": "**Long-press on one of the lines to show the edit menu.**", + "multi_edit_menu_touch": "**{longpress_icon} Long-press on one of the lines to show the edit menu.**", "multi_delete": "**Press the {delete_icon} {delete} button to remove the extra lines.**", "retry_delete": "You didn't press the {delete_icon} {delete} button. Try again.", "play": "Great! Use the skills that you've learned in this chapter to practice editing some more lines. **When you are ready to continue to the next chapter, press '{next}'.**" @@ -2519,7 +2519,7 @@ "add_building": "OpenStreetMap is the world's largest database of buildings.{br}You can help improve this database by tracing buildings that aren't already mapped. **Press the {area_icon} {area} button to add a new area.**", "start_building": "Let's add this house to the map by tracing its outline.{br}Buildings should be traced around their footprint as accurately as possible.", "building_corner_click": "**Click or press `{space}` to place a starting node on one of the corners of the building.**", - "building_corner_tap": "**Tap one of the corners of the building to place a starting node.**", + "building_corner_tap": "**{tap_icon} Tap one of the corners of the building to place a starting node.**", "continue_building": "Continue placing nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details.", "finish_building": "**Finish tracing the building.**", "retry_building": "It looks like you had some trouble placing the nodes at the building corners. Try again!", @@ -2527,20 +2527,20 @@ "choose_preset_house": "There are many different types of buildings, but this one is clearly a house.{br}If you're not sure of the type, it's OK to just choose the generic Building type. **Choose the {preset} type.**", "close": "**Press `{esc}` or the {apply} button to close the feature editor.**", "rightclick_building": "**{rightclick} Right-click to select the building you created and show the edit menu.**", - "edit_menu_building_touch": "**Long-press the building you created to show the edit menu.**", + "edit_menu_building_touch": "**{longpress_icon} Long-press the building you created to show the edit menu.**", "square_building": "The house that you just added will look even better with perfectly square corners. **Press the {orthogonalize_icon} {orthogonalize} button to tidy up the building's shape.**", "retry_square": "You didn't press the {orthogonalize_icon} {orthogonalize} button. Try again.", "done_square": "See how the corners of the building moved into place? Let's learn another useful trick.", "add_tank": "Next we'll trace this circular storage tank. **Press the {area_icon} {area} button to add a new area.**", "start_tank": "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge.", "tank_edge_click": "**Click or press `{space}` to place a starting node on the edge of the tank.**", - "tank_edge_tap": "**Tap the edge of the tank to place a starting node.**", + "tank_edge_tap": "**{tap_icon} Tap the edge of the tank to place a starting node.**", "continue_tank": "Add a few more nodes around the edge. The circle will be created outside the nodes that you draw.", "finish_tank": "**Finish tracing the tank.**", "search_tank": "**Search for '{preset}'.**", "choose_tank": "**Choose {preset} from the list.**", "rightclick_tank": "**{rightclick} Right-click to select the storage tank you created and show the edit menu.**", - "edit_menu_tank_touch": "**Long-press the storage tank you created to show the edit menu.**", + "edit_menu_tank_touch": "**{longpress_icon} Long-press the storage tank you created to show the edit menu.**", "circle_tank": "**Press the {circularize_icon} {circularize} button to make the tank a circle.**", "retry_circle": "You didn't press the {circularize_icon} {circularize} button. Try again.", "play": "Great Job! Practice tracing a few more buildings, and try some of the other commands on the edit menu. **When you are ready to continue to the next chapter, press '{next}'.**" diff --git a/modules/ui/intro/helper.js b/modules/ui/intro/helper.js index 7e712e8c9..4b293e856 100644 --- a/modules/ui/intro/helper.js +++ b/modules/ui/intro/helper.js @@ -75,6 +75,8 @@ export function helpString(id, replacements) { save_icon: icon('#iD-icon-save', 'pre-text'), leftclick: icon('#iD-walkthrough-mouse-left', 'pre-text operation'), rightclick: icon('#iD-walkthrough-mouse-right', 'pre-text operation'), + tap_icon: icon('#iD-walkthrough-tap', 'pre-text operation'), + longpress_icon: icon('#iD-walkthrough-longpress', 'pre-text operation'), // insert keys; may be localized and platform-dependent shift: uiCmd.display('⇧'), diff --git a/svg/iD-sprite/graphics/walkthrough-longpress.svg b/svg/iD-sprite/graphics/walkthrough-longpress.svg new file mode 100644 index 000000000..64257248b --- /dev/null +++ b/svg/iD-sprite/graphics/walkthrough-longpress.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/svg/iD-sprite/graphics/walkthrough-tap.svg b/svg/iD-sprite/graphics/walkthrough-tap.svg new file mode 100644 index 000000000..0807f37b6 --- /dev/null +++ b/svg/iD-sprite/graphics/walkthrough-tap.svg @@ -0,0 +1,5 @@ + + + + +