Add doubletap and touch-and-drag icons to the walkthrough

Update tap and longpress icons
This commit is contained in:
Quincy Morgan
2020-07-11 21:04:07 -04:00
parent 365fa1bf0d
commit 1514648468
7 changed files with 24 additions and 12 deletions
+4 -4
View File
@@ -1933,9 +1933,9 @@ 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 {longpress_icon} 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 {touchdrag_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!**"
zoom_touch: "You can zoom the map by pinching it with two fingers, {doubletap_icon} 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*."
@@ -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 {tap_icon} 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 {doubletap_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 {longpress_icon} tap-and-drag any of its nodes to adjust them."
start_drag_endpoint_touch: "When a line is selected, you can {touchdrag_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.**"
+4 -4
View File
@@ -2408,9 +2408,9 @@
"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 {longpress_icon} 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 {touchdrag_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!**",
"zoom_touch": "You can zoom the map by pinching it with two fingers, {doubletap_icon} 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*.",
@@ -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 {tap_icon} 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 {doubletap_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 {longpress_icon} tap-and-drag any of its nodes to adjust them.",
"start_drag_endpoint_touch": "When a line is selected, you can {touchdrag_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.**",
+2
View File
@@ -76,7 +76,9 @@ export function helpString(id, replacements) {
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'),
doubletap_icon: icon('#iD-walkthrough-doubletap', 'pre-text operation'),
longpress_icon: icon('#iD-walkthrough-longpress', 'pre-text operation'),
touchdrag_icon: icon('#iD-walkthrough-touchdrag-right', 'pre-text operation'),
// insert keys; may be localized and platform-dependent
shift: uiCmd.display('⇧'),
@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M8.58147843,11.9851373 C5.27597836,11.7539942 2.7837196,8.8869785 3.01486268,5.58147843 C3.24600576,2.27597836 6.1130215,-0.216280402 9.41852157,0.0148626794 C12.7240216,0.246005761 15.2162804,3.1130215 14.9851373,6.41852157 C14.7539942,9.72402164 11.8869785,12.2162804 8.58147843,11.9851373 Z M8.65123202,10.9876144 C11.4058154,11.1802337 13.7949952,9.10335137 13.9876144,6.34876798 C14.1802337,3.59418459 12.1033514,1.2050048 9.34876798,1.01238557 C6.59418459,0.819766331 4.2050048,2.89664863 4.01238557,5.65123202 C3.81976633,8.40581541 5.89664863,10.7949952 8.65123202,10.9876144 Z M8.72098562,9.99009155 C6.51731891,9.83599616 4.85581307,7.92465233 5.00990845,5.72098562 C5.16400384,3.51731891 7.07534767,1.85581307 9.27901438,2.00990845 C11.4826811,2.16400384 13.1441869,4.07534767 12.9900915,6.27901438 C12.8359962,8.48268109 10.9246523,10.1441869 8.72098562,9.99009155 Z M8.86049281,7.99504577 C9.96232617,8.07209347 10.9179981,7.24134055 10.9950458,6.13950719 C11.0720935,5.03767383 10.2413405,4.08200192 9.13950719,4.00495423 C8.03767383,3.92790653 7.08200192,4.75865945 7.00495423,5.86049281 C6.92790653,6.96232617 7.75865945,7.91799808 8.86049281,7.99504577 Z" fill="currentColor"></path>
<path d="M8,6 C8,5.44771525 8.44771525,5 9,5 C9.55228475,5 10,5.44771525 10,6 L10,10 C10,9.44771525 10.4477153,9 11,9 C11.5522847,9 12,9.44771525 12,10 L12,11 C12,10.4477153 12.4477153,10 13,10 C13.5522847,10 14,10.4477153 14,11 L14,12 C14,11.4477153 14.4477153,11 15,11 C15.5522847,11 16,11.4477153 16,12 L16,16 C16,18.209134 14.209143,19.999991 12.000009,19.999991 C11.2659918,20 10.5993221,20 10,20 C8.25562789,20 6.75375111,18.7687556 6.41165159,17.058258 L5.19611614,11.9805807 C5.10732158,11.5366079 5.39525043,11.1047146 5.83922323,11.01592 C5.89216058,11.0053326 5.94601429,11 6,11 C6.59719029,11 7.12737961,11.3821388 7.31622777,11.9486833 L8,14 L8,6 Z" fill="inherit"></path>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M7.86048705,6.9951281 C8.96236588,7.07217897 9.91807723,6.24139177 9.9951281,5.13951295 C10.072179,4.03763412 9.24139177,3.08192277 8.13951295,3.0048719 C7.03763412,2.92782103 6.08192277,3.75860823 6.0048719,4.86048705 C5.92782103,5.96236588 6.75860823,6.91807723 7.86048705,6.9951281 Z M7.65121763,9.98782025 C4.89652057,9.79519307 2.81955257,7.40591469 3.01217975,4.65121763 C3.20480693,1.89652057 5.59408531,-0.180447435 8.34878237,0.0121797487 C11.1034794,0.204806932 13.1804474,2.59408531 12.9878203,5.34878237 C12.7951931,8.10347943 10.4059147,10.1804474 7.65121763,9.98782025 Z" fill="currentColor"/>
<path d="M7,13 L7,5 C7,4.44771525 7.44771525,4 8,4 C8.55228475,4 9,4.44771525 9,5 L9,9 C9,8.44771525 9.44771525,8 10,8 C10.5522847,8 11,8.44771525 11,9 L11,10 C11,9.44771525 11.4477153,9 12,9 C12.5522847,9 13,9.44771525 13,10 L13,11 C13,10.4477153 13.4477153,10 14,10 C14.5522847,10 15,10.4477153 15,11 L15,16 C15,18.209134 13.209143,19.999991 11.000009,19.999991 C10.2659918,20 9.59932211,20 9,20 C7.25562789,20 5.75375111,18.7687556 5.41165159,17.058258 L4.19611614,10.9805807 C4.10732158,10.5366079 4.39525043,10.1047146 4.83922323,10.01592 C4.89216058,10.0053326 4.94601429,10 5,10 C5.59719029,10 6.12737961,10.3821388 6.31622777,10.9486833 L7,13 L7,13 Z" fill="inherit"/>
<path d="M8.58147843,11.9851373 C5.27597836,11.7539942 2.7837196,8.8869785 3.01486268,5.58147843 C3.24600576,2.27597836 6.1130215,-0.216280402 9.41852157,0.0148626794 C12.7240216,0.246005761 15.2162804,3.1130215 14.9851373,6.41852157 C14.7539942,9.72402164 11.8869785,12.2162804 8.58147843,11.9851373 Z M8.86049281,7.99504577 C9.96232617,8.07209347 10.9179981,7.24134055 10.9950458,6.13950719 C11.0720935,5.03767383 10.2413405,4.08200192 9.13950719,4.00495423 C8.03767383,3.92790653 7.08200192,4.75865945 7.00495423,5.86049281 C6.92790653,6.96232617 7.75865945,7.91799808 8.86049281,7.99504577 Z" fill="currentColor"></path>
<path d="M8,6 C8,5.44771525 8.44771525,5 9,5 C9.55228475,5 10,5.44771525 10,6 L10,10 C10,9.44771525 10.4477153,9 11,9 C11.5522847,9 12,9.44771525 12,10 L12,11 C12,10.4477153 12.4477153,10 13,10 C13.5522847,10 14,10.4477153 14,11 L14,12 C14,11.4477153 14.4477153,11 15,11 C15.5522847,11 16,11.4477153 16,12 L16,16 C16,18.209134 14.209143,19.999991 12.000009,19.999991 C11.2659918,20 10.5993221,20 10,20 C8.25562789,20 6.75375111,18.7687556 6.41165159,17.058258 L5.19611614,11.9805807 C5.10732158,11.5366079 5.39525043,11.1047146 5.83922323,11.01592 C5.89216058,11.0053326 5.94601429,11 6,11 C6.59719029,11 7.12737961,11.3821388 7.31622777,11.9486833 L8,14 L8,6 Z" fill="inherit"></path>
</svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

+2 -2
View File
@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M6.72026326,3.43469021 C6.40040739,3.68491118 6.16597202,4.02281125 6.04366924,4.42284563 L3.17475497,3.54573052 C3.48596687,2.52780226 4.09255063,1.68141532 4.87180132,1.07181306 L6.72026326,3.43469021 Z M5.98452476,5.07962475 C6.00603199,5.4851562 6.14835692,5.87100592 6.40589591,6.20064079 L4.04186365,8.04762522 C3.38652944,7.20883569 3.041132,6.22648376 2.9887349,5.23850548 L5.98452476,5.07962475 Z M8.58467966,3.09706893 C8.19837594,2.97181818 7.78714949,2.96641377 7.38711511,3.08871656 L6.51,0.21980229 C7.52792826,-0.0914096107 8.56881216,-0.0618224581 9.5099468,0.243320388 L8.58467966,3.09706893 Z M9.89523551,4.40704449 C9.78988354,4.01484648 9.57044608,3.66701952 9.25,3.39813333 L11.1783628,1.1 C11.9937706,1.78420832 12.5358627,2.67328134 12.792527,3.62877596 L9.89523551,4.40704449 Z M6.95310719,6.67125583 C7.29383066,6.89222152 7.68964613,7.00387501 8.10770396,6.98927611 L8.21240245,9.98744859 C7.14861169,10.024597 6.15085276,9.72661741 5.3207633,9.18828849 L6.95310719,6.67125583 Z M9.5,6.30723366 C9.76084239,5.99597884 9.91990141,5.61672085 9.95635976,5.2 L12.9449439,5.46146723 C12.8521719,6.52185591 12.4348172,7.47586311 11.7993384,8.23415943 L9.5,6.30723366 Z" fill="currentColor"/>
<path d="M7,13 L7,5 C7,4.44771525 7.44771525,4 8,4 C8.55228475,4 9,4.44771525 9,5 L9,9 C9,8.44771525 9.44771525,8 10,8 C10.5522847,8 11,8.44771525 11,9 L11,10 C11,9.44771525 11.4477153,9 12,9 C12.5522847,9 13,9.44771525 13,10 L13,11 C13,10.4477153 13.4477153,10 14,10 C14.5522847,10 15,10.4477153 15,11 L15,16 C15,18.209134 13.209143,19.999991 11.000009,19.999991 C10.2659918,20 9.59932211,20 9,20 C7.25562789,20 5.75375111,18.7687556 5.41165159,17.058258 L4.19611614,10.9805807 C4.10732158,10.5366079 4.39525043,10.1047146 4.83922323,10.01592 C4.89216058,10.0053326 4.94601429,10 5,10 C5.59719029,10 6.12737961,10.3821388 6.31622777,10.9486833 L7,13 L7,13 Z" fill="inherit"/>
<path d="M8.72098562,8.99009155 C6.51731891,8.83599616 4.85581307,6.92465233 5.00990845,4.72098562 C5.16400384,2.51731891 7.07534767,0.855813065 9.27901438,1.00990845 C11.4826811,1.16400384 13.1441869,3.07534767 12.9900915,5.27901438 C12.8359962,7.48268109 10.9246523,9.14418693 8.72098562,8.99009155 Z M8.86049281,6.99504577 C9.96232617,7.07209347 10.9179981,6.24134055 10.9950458,5.13950719 C11.0720935,4.03767383 10.2413405,3.08200192 9.13950719,3.00495423 C8.03767383,2.92790653 7.08200192,3.75865945 7.00495423,4.86049281 C6.92790653,5.96232617 7.75865945,6.91799808 8.86049281,6.99504577 Z" fill="currentColor"></path>
<path d="M8,5 C8,4.44771525 8.44771525,4 9,4 C9.55228475,4 10,4.44771525 10,5 L10,9 C10,8.44771525 10.4477153,8 11,8 C11.5522847,8 12,8.44771525 12,9 L12,10 C12,9.44771525 12.4477153,9 13,9 C13.5522847,9 14,9.44771525 14,10 L14,11 C14,10.4477153 14.4477153,10 15,10 C15.5522847,10 16,10.4477153 16,11 L16,15 C16,17.209134 14.209143,18.999991 12.000009,18.999991 C11.2659918,19 10.5993221,19 10,19 C8.25562789,19 6.75375111,17.7687556 6.41165159,16.058258 L5.19611614,10.9805807 C5.10732158,10.5366079 5.39525043,10.1047146 5.83922323,10.01592 C5.89216058,10.0053326 5.94601429,10 6,10 C6.59719029,10 7.12737961,10.3821388 7.31622777,10.9486833 L8,13 L8,5 Z" fill="inherit"></path>
</svg>

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M10.873934,4 L14,4 L14,2 L15,1 L19,5 L15,9 L14,8 L14,6 L10.8735405,6 C10.4024659,7.83337491 8.67686556,9.12686 6.72098562,8.99009155 C4.51731891,8.83599616 2.85581307,6.92465233 3.00990845,4.72098562 C3.16400384,2.51731891 5.07534767,0.855813065 7.27901438,1.00990845 C9.04063914,1.13309326 10.4557959,2.37924807 10.873934,4 Z M6.86049281,6.99504577 C7.96232617,7.07209347 8.91799808,6.24134055 8.99504577,5.13950719 C9.07209347,4.03767383 8.24134055,3.08200192 7.13950719,3.00495423 C6.03767383,2.92790653 5.08200192,3.75865945 5.00495423,4.86049281 C4.92790653,5.96232617 5.75865945,6.91799808 6.86049281,6.99504577 Z" fill="currentColor"></path>
<path d="M6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 L8,9 C8,8.44771525 8.44771525,8 9,8 C9.55228475,8 10,8.44771525 10,9 L10,10 C10,9.44771525 10.4477153,9 11,9 C11.5522847,9 12,9.44771525 12,10 L12,11 C12,10.4477153 12.4477153,10 13,10 C13.5522847,10 14,10.4477153 14,11 L14,15 C14,17.209134 12.209143,18.999991 10.000009,18.999991 C9.26599179,19 8.59932211,19 8,19 C6.25562789,19 4.75375111,17.7687556 4.41165159,16.058258 L3.19611614,10.9805807 C3.10732158,10.5366079 3.39525043,10.1047146 3.83922323,10.01592 C3.89216058,10.0053326 3.94601429,10 4,10 C4.59719029,10 5.12737961,10.3821388 5.31622777,10.9486833 L6,13 L6,5 Z" fill="inherit"></path>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB