diff --git a/css/80_app.css b/css/80_app.css index fb49f255c..6be83c1a5 100644 --- a/css/80_app.css +++ b/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 { diff --git a/data/core.yaml b/data/core.yaml index dc0d97aa9..cb9b071d3 100644 --- a/data/core.yaml +++ b/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." diff --git a/dist/locales/en.json b/dist/locales/en.json index b367ceeca..1b3fc1716 100644 --- a/dist/locales/en.json +++ b/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", diff --git a/modules/ui/field_help.js b/modules/ui/field_help.js index 0530f7571..a304a576e 100644 --- a/modules/ui/field_help.js +++ b/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) { diff --git a/svg/iD-sprite.json b/svg/iD-sprite.json index 601522a96..58bc82e0a 100644 --- a/svg/iD-sprite.json +++ b/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" }, diff --git a/svg/iD-sprite.src.idraw b/svg/iD-sprite.src.idraw index fbd4f988d..bb831b58e 100644 Binary files a/svg/iD-sprite.src.idraw and b/svg/iD-sprite.src.idraw differ diff --git a/svg/iD-sprite.src.svg b/svg/iD-sprite.src.svg index c71269ebe..dc4bfe7af 100644 --- a/svg/iD-sprite.src.svg +++ b/svg/iD-sprite.src.svg @@ -280,6 +280,15 @@ + + + + + + + + +