Add icons and improve css styles for restriction field help

css/80_app.css

@@ -1920,6 +1920,42 @@ input[type=number] {
     color: #78f;
 }
 
+.field-help-body h2 {
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+.field-help-body h3 {
+    font-size: 12px;
+    margin-bottom: 5px;
+}
+.field-help-body p {
+    margin-bottom: 5px;
+}
+.field-help-body ul li {
+    list-style: inside;
+    margin-bottom: 5px;
+}
+.field-help-content svg.turn {
+    width: 40px;
+    height: 20px;
+}
+.field-help-content svg.shadow {
+    width: 60px;
+    height: 20px;
+}
+.field-help-content svg.from {
+    color: #777;
+}
+.field-help-content svg.allow {
+    color: #5b3;
+}
+.field-help-content svg.restrict {
+    color: #d53;
+}
+.field-help-content svg.only {
+    color: #68f;
+}
+
 /* Changeset editor while comment text is empty */
 
 .form-field-comment:not(.present) #preset-input-comment {

data/core.yaml

@@ -749,18 +749,18 @@ en:
           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: "{from} Starting segment"
-          allow: "{allowed} Allowed"
-          restrict: "{restricted} Restricted"
-          only: "{only} Only"
+          from: "{fromShadow} **Starting segment**"
+          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\"."
-          allow: "{allowed} Allowed"
-          restrict: "{restricted} Restricted"
-          only: "{only} Only"
+          allow: "{allowTurn} **Allowed**"
+          restrict: "{restrictTurn} **Restricted**"
+          only: "{onlyTurn} **Only**"
         tips:
           title: Tips
           tip1: "* Prefer simple restrictions over complex ones."

dist/locales/en.json

@@ -890,19 +890,19 @@
                         "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": "{from} Starting segment",
-                        "allow": "{allowed} Allowed",
-                        "restrict": "{restricted} Restricted",
-                        "only": "{only} Only"
+                        "from": "{fromShadow} **Starting segment**",
+                        "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\".",
-                        "allow": "{allowed} Allowed",
-                        "restrict": "{restricted} Restricted",
-                        "only": "{only} Only"
+                        "allow": "{allowTurn} **Allowed**",
+                        "restrict": "{restrictTurn} **Restricted**",
+                        "only": "{onlyTurn} **Only**"
                     },
                     "tips": {
                         "title": "Tips",

modules/ui/field_help.js

@@ -6,6 +6,7 @@ import {
 import marked from 'marked';
 import { t, textDirection } from '../util/locale';
 import { svgIcon } from '../svg';
+import { icon } from 'intro/helper';
 
 
 // This currently only works with the 'restrictions' field
@@ -46,7 +47,15 @@ var fieldHelpHeadings = {
     'help.field.restrictions.tips.title': 3
 };
 
-var replacements = {};
+var replacements = {
+    fromShadow: icon('#turn-shadow', 'pre-text shadow from'),
+    allowShadow: icon('#turn-shadow', 'pre-text shadow allow'),
+    restrictShadow: icon('#turn-shadow', 'pre-text shadow restrict'),
+    onlyShadow: icon('#turn-shadow', 'pre-text shadow only'),
+    allowTurn: icon('#turn-yes', 'pre-text turn'),
+    restrictTurn: icon('#turn-no', 'pre-text turn'),
+    onlyTurn: icon('#turn-only', 'pre-text turn')
+};
 
 
 export function uiFieldHelp(fieldName) {

svg/iD-sprite.json

@@ -375,6 +375,9 @@
     "turn-yes-u":               { "viewBox": "200 344 32 32" },
     "turn-no-u":                { "viewBox": "232 344 32 32" },
     "turn-only-u":              { "viewBox": "264 344 32 32" },
+    "turn-shadow":              { "viewBox": "296 344 37 11" },
+
+    "turn-shadow-shape":        { "fill": "currentColor" },
 
     "preset-icon-frame":        { "viewBox": "340 320 45 45" },
 

svg/iD-sprite.src.svg

@@ -280,6 +280,15 @@
     </g>
   </g>
   <g id="turns">
+    <g id="turn-shadow">
+      <path d="M327.5,344 C330.538,344 333,346.463 333,349.5 C333,352.538 330.538,355 327.5,355 L301.5,355 C298.462,355 296,352.538 296,349.5 C296,346.463 298.462,344 301.5,344 L327.5,344 z" fill="#000000" id="turn-shadow-shape"/>
+      <path d="M301.5,349.5 L327.5,349.5" fill-opacity="0" stroke="#000000" stroke-width="3" stroke-linecap="round"/>
+      <path d="M301.5,349.5 L327.5,349.5" fill-opacity="0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>
+      <path d="M303.5,349.5 C303.5,350.605 302.605,351.5 301.5,351.5 C300.395,351.5 299.5,350.605 299.5,349.5 C299.5,348.396 300.395,347.5 301.5,347.5 C302.605,347.5 303.5,348.396 303.5,349.5 z" fill="#000000"/>
+      <path d="M303,349.5 C303,350.329 302.328,351 301.5,351 C300.672,351 300,350.329 300,349.5 C300,348.672 300.672,348 301.5,348 C302.328,348 303,348.672 303,349.5 z" fill="#BBBBBB"/>
+      <path d="M329.5,349.5 C329.5,350.605 328.605,351.5 327.5,351.5 C326.395,351.5 325.5,350.605 325.5,349.5 C325.5,348.396 326.395,347.5 327.5,347.5 C328.605,347.5 329.5,348.396 329.5,349.5 z" fill="#000000"/>
+      <path d="M329,349.5 C329,350.329 328.328,351 327.5,351 C326.672,351 326,350.329 326,349.5 C326,348.672 326.672,348 327.5,348 C328.328,348 329,348.672 329,349.5 z" fill="#BBBBBB"/>
+    </g>
     <g id="turn-only-u">
       <path d="M280,344 C271.211,344 264,351.211 264,360 C264,368.789 271.211,376 280,376 C288.789,376 296,368.789 296,360 C296,351.211 288.789,344 280,344 z" fill="#000000" id="turn-only-u-shape1" opacity="0.5"/>
       <path d="M268,360 C268,353.373 273.373,348 280,348 C286.627,348 292,353.373 292,360 C292,366.627 286.627,372 280,372 C273.373,372 268,366.627 268,360 z" fill="#7092FF" id="turn-only-u-shape2"/>