diff --git a/css/80_app.css b/css/80_app.css index 006652a12..e652cbecf 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -2034,18 +2034,17 @@ button.minor.tag-reference-loading { clear: both; } -.tag-reference-body p, -.tag-reference-body img { - margin-top: 20px; -} - -.tag-reference-body p:last-child { - padding-bottom: 10px; +.tag-reference-body .tag-reference-description { + margin: 10px 5px 0 5px; } .tag-reference-body a { display: block; - padding-bottom: 10px; +} + +.tag-reference-body .tag-reference-description:last-child, +.tag-reference-body a:last-child { + margin-bottom: 15px; } .preset-list .tag-reference-body { @@ -2053,41 +2052,35 @@ button.minor.tag-reference-loading { width: 100%; } -.preset-list .tag-reference-body a { - padding-bottom: 20px; -} - -.preset-list .tag-reference-body p, -.preset-list .tag-reference-body img { - margin-top: 10px; -} - .raw-tag-editor .tag-reference-body { - border-bottom: 1px solid #ccc; float: left; width: 100%; } -.raw-tag-editor .tag-reference-body p:last-child { - padding-bottom: 20px; +.raw-tag-editor .tag-row.readonly .tag-reference-body { + background: #f6f6f6; + color: #333; } -.raw-tag-editor .tag-reference-body a { - padding-bottom: 20px; +.raw-tag-editor .tag-row:not(:last-child) .tag-reference-body { + border-bottom: 1px solid #ccc; } -img.wiki-image { +.raw-tag-editor .tag-row.readonly .tag-reference-body.expanded { + border-top: 1px solid #ccc; +} + +img.tag-reference-wiki-image { float: right; width: 33.3333%; width: -webkit-calc(33.3333% - 10px); width: calc(33.3333% - 10px); - margin-left: 20px; - margin-right: 10px; border-radius: 4px; max-height: 200px; - margin-bottom: 20px; + margin: 10px 5px 15px 20px; } + /* Raw relation membership editor */ .raw-member-editor .member-list li:first-child, diff --git a/modules/ui/changeset_editor.js b/modules/ui/changeset_editor.js index fe43eef18..c05181e52 100644 --- a/modules/ui/changeset_editor.js +++ b/modules/ui/changeset_editor.js @@ -84,12 +84,14 @@ export function uiChangesetEditor(context) { } } + // Add comment warning var matches = tags.comment.match(/google/i); var commentWarning = selection.select('.form-field-comment').selectAll('.comment-warning') .data(matches ? [0] : []); commentWarning.exit() .transition() + .duration(200) .style('opacity', 0) .remove(); @@ -109,20 +111,8 @@ export function uiChangesetEditor(context) { commentEnter .transition() + .duration(200) .style('opacity', 1); - - - // var changeSetInfo = fieldSection.append('div') - // .attr('class', 'changeset-info'); - - // changeSetInfo.append('a') - // .attr('target', '_blank') - // .attr('tabindex', -1) - // .call(svgIcon('#icon-out-link', 'inline')) - // .attr('href', t('commit.about_changeset_comments_link')) - // .append('span') - // .text(t('commit.about_changeset_comments')); - } diff --git a/modules/ui/tag_reference.js b/modules/ui/tag_reference.js index 77531839f..b5e5e5ec8 100644 --- a/modules/ui/tag_reference.js +++ b/modules/ui/tag_reference.js @@ -9,8 +9,8 @@ import { svgIcon } from '../svg/index'; export function uiTagReference(tag) { var taginfo = services.taginfo, tagReference = {}, - button, - body, + button = d3.select(null), + body = d3.select(null), loaded, showing; @@ -46,7 +46,8 @@ export function uiTagReference(tag) { function load(param) { if (!taginfo) return; - button.classed('tag-reference-loading', true); + button + .classed('tag-reference-loading', true); taginfo.docs(param, function show(err, data) { var docs; @@ -56,22 +57,23 @@ export function uiTagReference(tag) { body.html(''); - if (!docs || !docs.title) { if (param.hasOwnProperty('value')) { load(_.omit(param, 'value')); // retry with key only } else { - body.append('p').text(t('inspector.no_documentation_key')); + body + .append('p') + .attr('class', 'tag-reference-description') + .text(t('inspector.no_documentation_key')); done(); } return; } - if (docs.image && docs.image.thumb_url_prefix) { body .append('img') - .attr('class', 'wiki-image') + .attr('class', 'tag-reference-wiki-image') .attr('src', docs.image.thumb_url_prefix + '100' + docs.image.thumb_url_suffix) .on('load', function() { done(); }) .on('error', function() { d3.select(this).remove(); done(); }); @@ -81,16 +83,31 @@ export function uiTagReference(tag) { body .append('p') + .attr('class', 'tag-reference-description') .text(docs.description || t('inspector.documentation_redirect')); body .append('a') + .attr('class', 'tag-reference-link') .attr('target', '_blank') .attr('tabindex', -1) .attr('href', 'https://wiki.openstreetmap.org/wiki/' + docs.title) .call(svgIcon('#icon-out-link', 'inline')) .append('span') .text(t('inspector.reference')); + + // Add link to info about "good changeset comments" - #2923 + if (param.key === 'comment') { + body + .append('a') + .attr('class', 'tag-reference-comment-link') + .attr('target', '_blank') + .attr('tabindex', -1) + .call(svgIcon('#icon-out-link', 'inline')) + .attr('href', t('commit.about_changeset_comments_link')) + .append('span') + .text(t('commit.about_changeset_comments')); + } }); } @@ -98,9 +115,12 @@ export function uiTagReference(tag) { function done() { loaded = true; - button.classed('tag-reference-loading', false); + button + .classed('tag-reference-loading', false); - body.transition() + body + .classed('expanded', true) + .transition() .duration(200) .style('max-height', '200px') .style('opacity', '1'); @@ -109,12 +129,15 @@ export function uiTagReference(tag) { } - function hide(selection) { - selection = selection || body.transition().duration(200); - - selection + function hide() { + body + .transition() + .duration(200) .style('max-height', '0px') - .style('opacity', '0'); + .style('opacity', '0') + .on('end', function () { + body.classed('expanded', false); + }); showing = false; } @@ -158,7 +181,7 @@ export function uiTagReference(tag) { .merge(body); if (showing === false) { - hide(body); + hide(); } };