diff --git a/css/80_app.css b/css/80_app.css index 29afcaeca..4c8029f58 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -156,6 +156,12 @@ kbd { box-shadow: inset 0 -1px 0 #bbb; } +code { + font-family: monospace, monospace; + background: #eee; + padding: 1px 2px; +} + /* Forms ------------------------------------------------------- */ textarea { @@ -4708,9 +4714,13 @@ img.tile-debug { padding: 20px; border-bottom: 1px solid #ccc; } -.modal-section p:not(:last-of-type) { +.modal-section p:not(:last-of-type), +.modal-section ul { padding-bottom: 20px; } +.modal-section h4 { + padding-bottom: 0; +} .modal-section.header h3 { padding: 0; } @@ -4995,6 +5005,13 @@ svg.mouseclick use.right { .settings-custom-background .instructions-template { margin-bottom: 20px; } +.settings-custom-background .instructions-template p { + margin-bottom: 0; +} +.settings-custom-background .instructions-template ul li { + list-style-type: disc; + list-style-position: inside; +} .settings-custom-data .instructions-url { margin-bottom: 10px; diff --git a/data/core.yaml b/data/core.yaml index bc276b22f..1b3ce1fab 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -790,7 +790,24 @@ en: custom_background: tooltip: Edit custom background header: Custom Background Settings - instructions: "Enter a tile URL template below.\n\nSupported WMS tokens:\n `{proj}`: requested projection (`EPSG:3857` only)\n `{wkid}`: same as proj, but without the EPSG (`3857` only)\n `{width}`, `{height}`: requested image dimensions (`256` only)\n `{bbox}`: requested bounding box (e.g. `minX,minY,maxX,maxY`)\n\nSupported TMS tokens:\n `{zoom}` or `{z}, `{x}`, `{y}`: Z/X/Y tile coordinates\n `{-y}` or `{ty}`: flipped TMS-style Y coordinates\n `{switch:a,b,c}`: DNS server multiplexing\n `{u}`: quadtile (Bing) scheme\n\nExample:\n{example}" + instructions: + info: Enter a tile URL template below. + wms: + tokens_label: "Supported WMS tokens:" + tokens: + proj: "`{proj}`: requested projection (`EPSG:3857` only)" + wkid: "`{wkid}`: same as proj, but without the EPSG (`3857` only)" + dimensions: "`{width}`, `{height}`: requested image dimensions (`256` only)" + bbox: "`{bbox}`: requested bounding box (e.g. `minX,minY,maxX,maxY`)" + tms: + tokens_label: "Supported TMS tokens:" + tokens: + xyz: "`{zoom}` or `{z}`, `{x}`, `{y}`: Z/X/Y tile coordinates" + flipped_y: "`{-y}` or `{ty}`: flipped TMS-style Y coordinates" + switch: "`{switch:a,b,c}`: DNS server multiplexing" + quadtile: "`{u}`: quadtile (Bing) scheme" + scale_factor: "`{@2x}` or `{r}`: resolution scale factor" + example: "Example:" template: placeholder: Enter a url template custom_data: diff --git a/dist/locales/en.json b/dist/locales/en.json index 3983ec4cf..37c4cc531 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -998,7 +998,29 @@ "custom_background": { "tooltip": "Edit custom background", "header": "Custom Background Settings", - "instructions": "Enter a tile URL template below.\n\nSupported WMS tokens:\n `{proj}`: requested projection (`EPSG:3857` only)\n `{wkid}`: same as proj, but without the EPSG (`3857` only)\n `{width}`, `{height}`: requested image dimensions (`256` only)\n `{bbox}`: requested bounding box (e.g. `minX,minY,maxX,maxY`)\n\nSupported TMS tokens:\n `{zoom}` or `{z}, `{x}`, `{y}`: Z/X/Y tile coordinates\n `{-y}` or `{ty}`: flipped TMS-style Y coordinates\n `{switch:a,b,c}`: DNS server multiplexing\n `{u}`: quadtile (Bing) scheme\n\nExample:\n{example}", + "instructions": { + "info": "Enter a tile URL template below.", + "wms": { + "tokens_label": "Supported WMS tokens:", + "tokens": { + "proj": "`{proj}`: requested projection (`EPSG:3857` only)", + "wkid": "`{wkid}`: same as proj, but without the EPSG (`3857` only)", + "dimensions": "`{width}`, `{height}`: requested image dimensions (`256` only)", + "bbox": "`{bbox}`: requested bounding box (e.g. `minX,minY,maxX,maxY`)" + } + }, + "tms": { + "tokens_label": "Supported TMS tokens:", + "tokens": { + "xyz": "`{zoom}` or `{z}`, `{x}`, `{y}`: Z/X/Y tile coordinates", + "flipped_y": "`{-y}` or `{ty}`: flipped TMS-style Y coordinates", + "switch": "`{switch:a,b,c}`: DNS server multiplexing", + "quadtile": "`{u}`: quadtile (Bing) scheme", + "scale_factor": "`{@2x}` or `{r}`: resolution scale factor" + } + }, + "example": "Example:" + }, "template": { "placeholder": "Enter a url template" } diff --git a/modules/ui/settings/custom_background.js b/modules/ui/settings/custom_background.js index e3b998251..1c15ba197 100644 --- a/modules/ui/settings/custom_background.js +++ b/modules/ui/settings/custom_background.js @@ -1,4 +1,5 @@ import { dispatch as d3_dispatch } from 'd3-dispatch'; +import marked from 'marked'; import { prefs } from '../../core/preferences'; import { t } from '../../core/localizer'; @@ -31,10 +32,29 @@ export function uiSettingsCustomBackground() { var textSection = modal.select('.modal-section.message-text'); + var instructions = + `${t('settings.custom_background.instructions.info')}\n` + + `\n` + + `#### ${t('settings.custom_background.instructions.wms.tokens_label')}\n` + + `* ${t('settings.custom_background.instructions.wms.tokens.proj')}\n` + + `* ${t('settings.custom_background.instructions.wms.tokens.wkid')}\n` + + `* ${t('settings.custom_background.instructions.wms.tokens.dimensions')}\n` + + `* ${t('settings.custom_background.instructions.wms.tokens.bbox')}\n` + + `\n` + + `#### ${t('settings.custom_background.instructions.tms.tokens_label')}\n` + + `* ${t('settings.custom_background.instructions.tms.tokens.xyz')}\n` + + `* ${t('settings.custom_background.instructions.tms.tokens.flipped_y')}\n` + + `* ${t('settings.custom_background.instructions.tms.tokens.switch')}\n` + + `* ${t('settings.custom_background.instructions.tms.tokens.quadtile')}\n` + + `* ${t('settings.custom_background.instructions.tms.tokens.scale_factor')}\n` + + `\n` + + `#### ${t('settings.custom_background.instructions.example')}\n` + + `\`${example}\``; + textSection - .append('pre') + .append('div') .attr('class', 'instructions-template') - .text(t('settings.custom_background.instructions', { example: example })); + .html(marked(instructions)); textSection .append('textarea')