diff --git a/css/80_app.css b/css/80_app.css index b39b66cf3..323b262d0 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -2734,18 +2734,19 @@ input.key-trap { padding-top: 20px; } -.error-details { - padding: 10px; -} .error-details-container { background: #ececec; padding: 10px; margin-top: 20px; border-radius: 4px; border: 1px solid #ccc; + display: flex; + flex-direction: column; } .error-details-description { margin-bottom: 10px; + display: flex; + flex-direction: column; } .error-details-description-text::first-letter { text-transform: capitalize; @@ -2755,7 +2756,7 @@ input.key-trap { } .error-details-subsection h4 { padding-top: 10px; - padding-bottom: 0px; + padding-bottom: 0; } .error-details code { padding: .2em .4em; @@ -2765,6 +2766,12 @@ input.key-trap { background-color: rgba(27,31,35,.05); border-radius: 3px; } +.error-details .translation-link { + margin-top: 5px; + display: flex; + flex-direction: row; + justify-content: flex-end; +} .note-save .new-comment-input, .error-save .new-comment-input { diff --git a/data/core.yaml b/data/core.yaml index e24586988..eb571850a 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -833,6 +833,7 @@ en: elems_title: Issue Elements fix_title: Fix Guidelines trap_title: Common Mistakes + translation: Translations supplied by Osmose improveOSM: title: ImproveOSM Detection geometry_types: diff --git a/dist/locales/en.json b/dist/locales/en.json index 907d91e51..15822daa3 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -1036,7 +1036,8 @@ "detail_title": "Issue Details", "elems_title": "Issue Elements", "fix_title": "Fix Guidelines", - "trap_title": "Common Mistakes" + "trap_title": "Common Mistakes", + "translation": "Translations supplied by Osmose" }, "improveOSM": { "title": "ImproveOSM Detection", diff --git a/modules/ui/osmose_details.js b/modules/ui/osmose_details.js index c91d51b08..7183810e5 100644 --- a/modules/ui/osmose_details.js +++ b/modules/ui/osmose_details.js @@ -40,7 +40,7 @@ export function uiOsmoseDetails(context) { var descriptionEnter = detailsEnter .append('div') - .attr('class', 'error-details-description'); + .attr('class', 'error-details-subsection'); // Description descriptionEnter @@ -53,22 +53,22 @@ export function uiOsmoseDetails(context) { .html(d => issueString(d, 'detail')); // Elements (populated later as data is requested) - const detailsDiv = descriptionEnter + const detailsDiv = detailsEnter .append('div') .attr('class', 'error-details-subsection'); - const elemsDiv = descriptionEnter + const elemsDiv = detailsEnter .append('div') .attr('class', 'error-details-subsection'); // Suggested Fix (musn't exist for every issue type) if (issueString(_error, 'fix') !== unknown) { - let div = descriptionEnter + let div = detailsEnter .append('div') - .attr('class', 'error-details-subsection') + .attr('class', 'error-details-subsection'); div.append('h4') - .text(() => t('QA.osmose.fix_title')) + .text(() => t('QA.osmose.fix_title')); div.append('p') .html(d => issueString(d, 'fix')); @@ -76,17 +76,30 @@ export function uiOsmoseDetails(context) { // Common Pitfalls (musn't exist for every issue type) if (issueString(_error, 'trap') !== unknown) { - let div = descriptionEnter + let div = detailsEnter .append('div') - .attr('class', 'error-details-subsection') + .attr('class', 'error-details-subsection'); div.append('h4') - .text(() => t('QA.osmose.trap_title')) + .text(() => t('QA.osmose.trap_title')); div.append('p') .html(d => issueString(d, 'trap')); } + detailsEnter + .append('div') + .attr('class', 'translation-link') + .append('a') + .attr('target', '_blank') + .attr('rel', 'noopener noreferrer') // security measure + .attr('href', 'https://www.transifex.com/openstreetmap-france/osmose') + .text(d => t('QA.osmose.translation')) + .append('svg') + .attr('class', 'icon inline') + .append('use') + .attr('href', '#iD-icon-out-link'); + services.osmose.loadErrorDetail(_error, (err, d) => { // No details to add if there are no associated issue elements if (!d.elems || d.elems.length === 0) return; @@ -96,7 +109,7 @@ export function uiOsmoseDetails(context) { detailsDiv .append('h4') .attr('class', 'error-details-subtitle') - .text(() => t('QA.osmose.detail_title')) + .text(() => t('QA.osmose.detail_title')); detailsDiv .append('p')