Add button images to walkthrough text (closes #2404)

data/core.yaml

@@ -692,37 +692,36 @@ en:
       drag: "The main map area shows OpenStreetMap data on top of a background. You can navigate by dragging and scrolling, just like any web map. **Drag the map!**"
       select: "Map features are represented three ways: using points, lines or areas. All features can be selected by clicking on them. **Click on the point to select it.**"
       header: "The header shows us the feature type."
-      pane: "When a feature is selected, the feature editor is displayed. The header shows us the feature type and the main pane shows the feature's attributes, such as its name and address. **Close the feature editor with the close button in the top right.**"
+      pane: "When a feature is selected, the feature editor is displayed. The header shows us the feature type and the main pane shows the feature's attributes, such as its name and address. **Close the feature editor by pressing the {button} button in the top right.**"
     points:
       title: "Points"
-      add: "Points can be used to represent features such as shops, restaurants and monuments. They mark a specific location, and describe what's there. **Click the Point button to add a new point.**"
-      place: "Click to place the point on the map. The point we are adding is a Cafe. **Place the point at the corner of This Street and That Street**"
-      place: "The point can be placed by clicking on the map. **Place the point on top of the building.**"
+      add: "Points can be used to represent features such as shops, restaurants, and monuments. They mark a specific location, and describe what's there. **Click the {button} Point button to add a new point.**"
+      place: "The point can be placed by clicking on the map. **Click the map to place the new point on top of the building.**"
       search: "There are many different features that can be represented by points. The point you just added is a Cafe. **Search for '{name}'**"
       choose: "**Choose Cafe from the list.**"
       describe: "The point is now marked as a cafe. Using the feature editor, we can add more information about the feature. **Add a name**"
-      close: "The feature editor can be closed by clicking on the close button. **Close the feature editor**"
-      reselect: "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Select the point you just created.**"
-      fixname: "**Change the name and close the feature editor.**"
-      reselect_delete: "All features on the map can be deleted. **Click on the point you created.**"
-      delete: "The menu around the point contains operations that can be performed on it, including delete. **Delete the point.**"
+      close: "The feature editor will remember all of your changes automatically.  When you change a feature, the close button will change to a checkmark. **Click the {button} button to close the feature editor**"
+      reselect: "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Click to select the point you just created.**"
+      fixname: "**Change the name, then click the {button} button to close the feature editor.**"
+      reselect_delete: "All features on the map can be deleted. **Click to select the point you created.**"
+      delete: "The menu around the point contains operations that can be performed on it, including delete. **Click on the {button} button to delete the point.**"
     areas:
       title: "Areas"
-      add: "Areas are used to show the boundaries of features like lakes, buildings, and residential areas. They can be also be used for more detailed mapping of many features you might normally map as points. **Click the Area button to add a new area.**"
-      corner: "Areas are drawn by placing nodes that mark the boundary of the area. **Place the starting node on one of the corners of the playground.**"
+      add: "Areas are used to show the boundaries of features like lakes, buildings, and residential areas. They can be also be used for more detailed mapping of many features you might normally map as points. **Click the {button} Area button to add a new area.**"
+      corner: "Areas are drawn by placing nodes that mark the boundary of the area. **Click to place a starting node on one of the corners of the playground.**"
       place: "Draw the area by placing more nodes. Finish the area by clicking on the starting node. **Draw an area for the playground.**"
       search: "**Search for '{name}'.**"
       choose: "**Choose Playground from the list.**"
-      describe: "**Add a name, and close the feature editor**"
+      describe: "**Add a name, then click the {button} button to close the feature editor**"
     lines:
       title: "Lines"
-      add: "Lines are used to represent features such as roads, railroads and rivers. **Click the Line button to add a new line.**"
+      add: "Lines are used to represent features such as roads, railroads, and rivers. **Click the {button} Line button to add a new line.**"
       start: "**Start the line by clicking on the end of the road.**"
       intersect: "Click to add more nodes to the line. You can drag the map while drawing if necessary. Roads, and many other types of lines, are part of a larger network. It is important for these lines to be connected properly in order for routing applications to work. **Click on Flower Street, to create an intersection connecting the two lines.**"
       finish: "Lines can be finished by clicking on the last node again. **Finish drawing the road.**"
       road: "**Select Road from the list**"
       residential: "There are different types of roads, the most common of which is Residential. **Choose the Residential road type**"
-      describe: "**Name the road and close the feature editor.**"
+      describe: "**Name the road, then click the {button} button to close the feature editor.**"
       restart: "The road needs to intersect Flower Street."
       "wrong_preset": "You didn't select the Residential road type. **Click here to choose again**"
     startediting:

dist/locales/en.json

@@ -516,39 +516,39 @@
             "drag": "The main map area shows OpenStreetMap data on top of a background. You can navigate by dragging and scrolling, just like any web map. **Drag the map!**",
             "select": "Map features are represented three ways: using points, lines or areas. All features can be selected by clicking on them. **Click on the point to select it.**",
             "header": "The header shows us the feature type.",
-            "pane": "When a feature is selected, the feature editor is displayed. The header shows us the feature type and the main pane shows the feature's attributes, such as its name and address. **Close the feature editor with the close button in the top right.**"
+            "pane": "When a feature is selected, the feature editor is displayed. The header shows us the feature type and the main pane shows the feature's attributes, such as its name and address. **Close the feature editor by pressing the {button} button in the top right.**"
         },
         "points": {
             "title": "Points",
-            "add": "Points can be used to represent features such as shops, restaurants and monuments. They mark a specific location, and describe what's there. **Click the Point button to add a new point.**",
-            "place": "The point can be placed by clicking on the map. **Place the point on top of the building.**",
+            "add": "Points can be used to represent features such as shops, restaurants, and monuments. They mark a specific location, and describe what's there. **Click the {button} Point button to add a new point.**",
+            "place": "The point can be placed by clicking on the map. **Click the map to place the new point on top of the building.**",
             "search": "There are many different features that can be represented by points. The point you just added is a Cafe. **Search for '{name}'**",
             "choose": "**Choose Cafe from the list.**",
             "describe": "The point is now marked as a cafe. Using the feature editor, we can add more information about the feature. **Add a name**",
-            "close": "The feature editor can be closed by clicking on the close button. **Close the feature editor**",
-            "reselect": "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Select the point you just created.**",
-            "fixname": "**Change the name and close the feature editor.**",
-            "reselect_delete": "All features on the map can be deleted. **Click on the point you created.**",
-            "delete": "The menu around the point contains operations that can be performed on it, including delete. **Delete the point.**"
+            "close": "The feature editor will remember all of your changes automatically.  When you change a feature, the close button will change to a checkmark. **Click the {button} button to close the feature editor**",
+            "reselect": "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Click to select the point you just created.**",
+            "fixname": "**Change the name, then click the {button} button to close the feature editor.**",
+            "reselect_delete": "All features on the map can be deleted. **Click to select the point you created.**",
+            "delete": "The menu around the point contains operations that can be performed on it, including delete. **Click on the {button} button to delete the point.**"
         },
         "areas": {
             "title": "Areas",
-            "add": "Areas are used to show the boundaries of features like lakes, buildings, and residential areas. They can be also be used for more detailed mapping of many features you might normally map as points. **Click the Area button to add a new area.**",
-            "corner": "Areas are drawn by placing nodes that mark the boundary of the area. **Place the starting node on one of the corners of the playground.**",
+            "add": "Areas are used to show the boundaries of features like lakes, buildings, and residential areas. They can be also be used for more detailed mapping of many features you might normally map as points. **Click the {button} Area button to add a new area.**",
+            "corner": "Areas are drawn by placing nodes that mark the boundary of the area. **Click to place a starting node on one of the corners of the playground.**",
             "place": "Draw the area by placing more nodes. Finish the area by clicking on the starting node. **Draw an area for the playground.**",
             "search": "**Search for '{name}'.**",
             "choose": "**Choose Playground from the list.**",
-            "describe": "**Add a name, and close the feature editor**"
+            "describe": "**Add a name, then click the {button} button to close the feature editor**"
         },
         "lines": {
             "title": "Lines",
-            "add": "Lines are used to represent features such as roads, railroads and rivers. **Click the Line button to add a new line.**",
+            "add": "Lines are used to represent features such as roads, railroads, and rivers. **Click the {button} Line button to add a new line.**",
             "start": "**Start the line by clicking on the end of the road.**",
             "intersect": "Click to add more nodes to the line. You can drag the map while drawing if necessary. Roads, and many other types of lines, are part of a larger network. It is important for these lines to be connected properly in order for routing applications to work. **Click on Flower Street, to create an intersection connecting the two lines.**",
             "finish": "Lines can be finished by clicking on the last node again. **Finish drawing the road.**",
             "road": "**Select Road from the list**",
             "residential": "There are different types of roads, the most common of which is Residential. **Choose the Residential road type**",
-            "describe": "**Name the road and close the feature editor.**",
+            "describe": "**Name the road, then click the {button} button to close the feature editor.**",
             "restart": "The road needs to intersect Flower Street.",
             "wrong_preset": "You didn't select the Residential road type. **Click here to choose again**"
         },

js/id/ui/intro.js

@@ -1,9 +1,7 @@
 iD.ui.intro = function(context) {
-
     var step;
 
     function intro(selection) {
-
         context.enter(iD.modes.Browse(context));
 
         // Save current map state
@@ -132,3 +130,8 @@ iD.ui.intro.pad = function(box, padding, context) {
         height: (box.width || 0) + 2 * padding
     };
 };
+
+iD.ui.intro.icon = function(name, svgklass) {
+    return '<svg class="icon ' + (svgklass || '') + '">' +
+        '<use xlink:href="' + name + '"></use></svg>';
+};

js/id/ui/intro/area.js

@@ -1,5 +1,4 @@
 iD.ui.intro.area = function(context, reveal) {
-
     var event = d3.dispatch('done'),
         timeout;
 
@@ -8,11 +7,12 @@ iD.ui.intro.area = function(context, reveal) {
     };
 
     step.enter = function() {
-
         var playground = [-85.63552, 41.94159],
             corner = [-85.63565411045074, 41.9417715536927];
         context.map().centerZoom(playground, 19);
-        reveal('button.add-area', t('intro.areas.add'), {tooltipClass: 'intro-areas-add'});
+        reveal('button.add-area',
+            t('intro.areas.add', { button: iD.ui.intro.icon('#icon-area', 'pre-text') }),
+            { tooltipClass: 'intro-areas-add' });
 
         context.on('enter.intro', addArea);
 
@@ -52,7 +52,9 @@ iD.ui.intro.area = function(context, reveal) {
             context.on('enter.intro', null);
 
             timeout = setTimeout(function() {
-                reveal('.preset-search-input', t('intro.areas.search', {name: context.presets().item('leisure/playground').name()}));
+                reveal('.preset-search-input',
+                    t('intro.areas.search',
+                    { name: context.presets().item('leisure/playground').name() }));
                 d3.select('.preset-search-input').on('keyup.intro', keySearch);
             }, 500);
         }
@@ -67,7 +69,8 @@ iD.ui.intro.area = function(context, reveal) {
         }
 
         function selectedPreset() {
-            reveal('.pane', t('intro.areas.describe'));
+            reveal('.pane',
+                t('intro.areas.describe', { button: iD.ui.intro.icon('#icon-apply', 'pre-text') }));
             context.on('exit.intro', event.done);
         }
     };

js/id/ui/intro/line.js

@@ -1,5 +1,4 @@
 iD.ui.intro.line = function(context, reveal) {
-
     var event = d3.dispatch('done'),
         timeouts = [];
 
@@ -12,14 +11,15 @@ iD.ui.intro.line = function(context, reveal) {
     }
 
     step.enter = function() {
-
         var centroid = [-85.62830, 41.95699];
         var midpoint = [-85.62975395449628, 41.95787501510204];
         var start = [-85.6297754121684, 41.95805253325314];
         var intersection = [-85.62974496187628, 41.95742515554585];
 
         context.map().centerZoom(start, 18);
-        reveal('button.add-line', t('intro.lines.add'), {tooltipClass: 'intro-lines-add'});
+        reveal('button.add-line',
+            t('intro.lines.add', { button: iD.ui.intro.icon('#icon-line', 'pre-text') }),
+            { tooltipClass: 'intro-lines-add' });
 
         context.on('enter.intro', addLine);
 
@@ -124,7 +124,8 @@ iD.ui.intro.line = function(context, reveal) {
         }
 
         function roadDetails() {
-            reveal('.pane', t('intro.lines.describe'));
+            reveal('.pane',
+                t('intro.lines.describe', { button: iD.ui.intro.icon('#icon-apply', 'pre-text') }));
             context.on('exit.intro', event.done);
         }
 

js/id/ui/intro/navigation.js

@@ -1,5 +1,4 @@
 iD.ui.intro.navigation = function(context, reveal) {
-
     var event = d3.dispatch('done'),
         timeouts = [];
 
@@ -22,7 +21,6 @@ iD.ui.intro.navigation = function(context, reveal) {
      */
 
     step.enter = function() {
-
         var rect = context.surfaceRect(),
             map = {
                 left: rect.left + 10,
@@ -64,11 +62,11 @@ iD.ui.intro.navigation = function(context, reveal) {
             context.on('enter.intro', null);
             context.map().on('move.intro', null);
             set(function() {
-                reveal('.entity-editor-pane', t('intro.navigation.pane'));
+                reveal('.entity-editor-pane',
+                    t('intro.navigation.pane', { button: iD.ui.intro.icon('#icon-close', 'pre-text') }));
                 context.on('exit.intro', event.done);
             }, 700);
         }
-
     };
 
     step.exit = function() {

js/id/ui/intro/point.js

@@ -1,5 +1,4 @@
 iD.ui.intro.point = function(context, reveal) {
-
     var event = d3.dispatch('done'),
         timeouts = [];
 
@@ -12,9 +11,10 @@ iD.ui.intro.point = function(context, reveal) {
     }
 
     step.enter = function() {
-
         context.map().centerZoom([-85.63279, 41.94394], 19);
-        reveal('button.add-point', t('intro.points.add'), {tooltipClass: 'intro-points-add'});
+        reveal('button.add-point',
+            t('intro.points.add', { button: iD.ui.intro.icon('#icon-point', 'pre-text') }),
+            { tooltipClass: 'intro-points-add' });
 
         var corner = [-85.632481,41.944094];
 
@@ -31,7 +31,6 @@ iD.ui.intro.point = function(context, reveal) {
                 pointBox = iD.ui.intro.pad(corner, 150, context);
                 reveal(pointBox, t('intro.points.place'), {duration: 0});
             });
-
         }
 
         function enterSelect(mode) {
@@ -70,7 +69,8 @@ iD.ui.intro.point = function(context, reveal) {
         function closeEditor() {
             d3.select('.preset-search-input').on('keydown.intro', null);
             context.history().on('change.intro', null);
-            reveal('.entity-editor-pane', t('intro.points.close'));
+            reveal('.entity-editor-pane',
+                t('intro.points.close', { button: iD.ui.intro.icon('#icon-apply', 'pre-text') }));
         }
 
         function selectPoint() {
@@ -93,7 +93,8 @@ iD.ui.intro.point = function(context, reveal) {
             context.on('enter.intro', null);
 
             setTimeout(function() {
-                reveal('.entity-editor-pane', t('intro.points.fixname'));
+                reveal('.entity-editor-pane',
+                    t('intro.points.fixname', { button: iD.ui.intro.icon('#icon-apply', 'pre-text') }));
                 context.on('exit.intro', deletePoint);
             }, 500);
         }
@@ -122,7 +123,8 @@ iD.ui.intro.point = function(context, reveal) {
             setTimeout(function() {
                 var node = d3.select('.radial-menu-item-delete').node();
                 var pointBox = iD.ui.intro.pad(node.getBoundingClientRect(), 50, context);
-                reveal(pointBox, t('intro.points.delete'));
+                reveal(pointBox,
+                    t('intro.points.delete', { button: iD.ui.intro.icon('#operation-delete', 'pre-text') }));
             }, 300);
         }
 

js/id/ui/intro/start_editing.js

@@ -1,5 +1,4 @@
 iD.ui.intro.startEditing = function(context, reveal) {
-
     var event = d3.dispatch('done', 'startEditing'),
         modal,
         timeouts = [];
@@ -13,7 +12,6 @@ iD.ui.intro.startEditing = function(context, reveal) {
     }
 
     step.enter = function() {
-
         reveal('.map-control.help-control', t('intro.startediting.help'));
 
         timeout(function() {
@@ -46,7 +44,6 @@ iD.ui.intro.startEditing = function(context, reveal) {
                     .text(t('intro.startediting.start'));
 
             event.startEditing();
-
         }, 7500);
     };