From aa91ff49f8553859bb57dcf4f814febeb4436913 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Fri, 30 Oct 2015 14:01:19 -0400 Subject: [PATCH] Icons for operations, turn restrictions, bug/translate (closes #2766) --- data/core.yaml | 3 ++- dist/img/iD-sprite.svg | 12 ++++++------ dist/locales/en.json | 3 ++- js/id/svg/defs.js | 5 ++--- js/id/svg/turns.js | 26 +++++++++++++------------- js/id/ui.js | 24 ++++++++++++++++-------- js/id/ui/radial_menu.js | 4 ++-- svg/iD-sprite.json | 12 ++++++------ 8 files changed, 49 insertions(+), 40 deletions(-) diff --git a/data/core.yaml b/data/core.yaml index fab61abb3..737891e13 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -181,7 +181,8 @@ en: zoom_in_edit: Zoom in to Edit logout: logout loading_auth: "Connecting to OpenStreetMap..." - report_a_bug: report a bug + report_a_bug: Report a bug + help_translate: Help translate feature_info: hidden_warning: "{count} hidden features" hidden_details: "These features are currently hidden: {details}" diff --git a/dist/img/iD-sprite.svg b/dist/img/iD-sprite.svg index e7a819ca8..b85e6763d 100644 --- a/dist/img/iD-sprite.svg +++ b/dist/img/iD-sprite.svg @@ -176,32 +176,32 @@ - + - + - + - + - + - + diff --git a/dist/locales/en.json b/dist/locales/en.json index 677cf6c4e..4d1bada0f 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -227,7 +227,8 @@ "zoom_in_edit": "Zoom in to Edit", "logout": "logout", "loading_auth": "Connecting to OpenStreetMap...", - "report_a_bug": "report a bug", + "report_a_bug": "Report a bug", + "help_translate": "Help translate", "feature_info": { "hidden_warning": "{count} hidden features", "hidden_details": "These features are currently hidden: {details}" diff --git a/js/id/svg/defs.js b/js/id/svg/defs.js index 2fe5b0fed..60e642dff 100644 --- a/js/id/svg/defs.js +++ b/js/id/svg/defs.js @@ -14,7 +14,7 @@ iD.svg.Defs = function(context) { }; } - function SVGSpriteDefinition(id, href, data) { + function SVGSpriteDefinition(id, href) { return function(defs) { d3.xml(href, 'image/svg+xml', function(err, svg) { if (err) return; @@ -133,8 +133,7 @@ iD.svg.Defs = function(context) { defs.call(SVGSpriteDefinition( 'iD-sprite', - context.imagePath('iD-sprite.svg'), - d3.entries(iD.data.operations))); + context.imagePath('iD-sprite.svg'))); defs.call(ImageSpriteDefinition( 'maki-sprite', diff --git a/js/id/svg/turns.js b/js/id/svg/turns.js index b9f22da40..e8f08ff71 100644 --- a/js/id/svg/turns.js +++ b/js/id/svg/turns.js @@ -7,9 +7,9 @@ iD.svg.Turns = function(projection) { function icon(turn) { var u = turn.u ? '-u' : ''; if (!turn.restriction) - return '#icon-restriction-yes' + u; + return '#turn-yes' + u; var restriction = graph.entity(turn.restriction).tags.restriction; - return '#icon-restriction-' + + return '#turn-' + (!turn.indirect_restriction && /^only_/.test(restriction) ? 'only' : 'no') + u; } @@ -17,20 +17,20 @@ iD.svg.Turns = function(projection) { .data(turns, key); // Enter - var enter = groups.enter().append('g') .attr('class', 'turn'); var nEnter = enter.filter(function (turn) { return !turn.u; }); nEnter.append('rect') - .attr('transform', 'translate(-12, -12)') - .attr('width', '45') - .attr('height', '25'); + .attr('transform', 'translate(-22, -12)') + .attr('width', '44') + .attr('height', '24'); nEnter.append('use') - .attr('transform', 'translate(-12, -12)') - .attr('clip-path', 'url(#clip-square-45)'); + .attr('width', '44') + .attr('height', '24'); + var uEnter = enter.filter(function (turn) { return turn.u; }); @@ -38,11 +38,11 @@ iD.svg.Turns = function(projection) { .attr('r', '16'); uEnter.append('use') - .attr('transform', 'translate(-16, -16)') - .attr('clip-path', 'url(#clip-square-32)'); + .attr('width', '32') + .attr('height', '32'); + // Update - groups .attr('transform', function (turn) { var v = graph.entity(turn.via.node), @@ -51,7 +51,7 @@ iD.svg.Turns = function(projection) { p = projection(v.loc), r = turn.u ? 0 : 60; - return 'translate(' + (r * Math.cos(a) + p[0]) + ',' + (r * Math.sin(a) + p[1]) + ')' + + return 'translate(' + (r * Math.cos(a) + p[0]) + ',' + (r * Math.sin(a) + p[1]) + ') ' + 'rotate(' + a * 180 / Math.PI + ')'; }); @@ -61,8 +61,8 @@ iD.svg.Turns = function(projection) { groups.select('rect'); groups.select('circle'); - // Exit + // Exit groups.exit() .remove(); diff --git a/js/id/ui.js b/js/id/ui.js index 1fb7d0a2a..f7ff340ad 100644 --- a/js/id/ui.js +++ b/js/id/ui.js @@ -126,20 +126,28 @@ iD.ui = function(context) { .attr('href', 'http://github.com/openstreetmap/iD') .text(iD.version); - var bugReport = aboutList.append('li') - .append('a') + var issueLinks = aboutList.append('li'); + + issueLinks.append('a') .attr('target', '_blank') .attr('tabindex', -1) - .attr('href', 'https://github.com/openstreetmap/iD/issues'); - - bugReport.append('span') - .attr('class','icon bug light'); - - bugReport.call(bootstrap.tooltip() + .attr('href', 'https://github.com/openstreetmap/iD/issues') + .call(iD.svg.Icon('#icon-bug')) + .call(bootstrap.tooltip() .title(t('report_a_bug')) .placement('top') ); + issueLinks.append('a') + .attr('target', '_blank') + .attr('tabindex', -1) + .attr('href', 'https://github.com/openstreetmap/iD/blob/master/CONTRIBUTING.md#translating') + .call(iD.svg.Icon('#icon-translate')) + .call(bootstrap.tooltip() + .title(t('help_translate')) + .placement('top') + ); + aboutList.append('li') .attr('class', 'feature-warning') .attr('tabindex', -1) diff --git a/js/id/ui/radial_menu.js b/js/id/ui/radial_menu.js index c945eb839..30d5cb080 100644 --- a/js/id/ui/radial_menu.js +++ b/js/id/ui/radial_menu.js @@ -60,8 +60,8 @@ iD.ui.RadialMenu = function(context, operations) { .on('mouseout', mouseout); button.append('use') - .attr('width', '20px') - .attr('height', '20px') + .attr('width', '20') + .attr('height', '20') .attr('xlink:href', function(d) { return '#operation-' + d.id; }); tooltip = d3.select(document.body) diff --git a/svg/iD-sprite.json b/svg/iD-sprite.json index f806b9be9..f0fc52d63 100644 --- a/svg/iD-sprite.json +++ b/svg/iD-sprite.json @@ -121,12 +121,12 @@ "restriction": { "viewBox": "480 260 60 60" }, "multipolygon": { "viewBox": "540 260 60 60" }, - "turn-yes": { "viewBox": "200 320 44 24" }, - "turn-no": { "viewBox": "244 320 44 24" }, - "turn-only": { "viewBox": "288 320 44 24" }, - "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-yes": { "viewBox": "200 320 44 24", "x": "-22", "y": "-12" }, + "turn-no": { "viewBox": "244 320 44 24", "x": "-22", "y": "-12" }, + "turn-only": { "viewBox": "288 320 44 24", "x": "-22", "y": "-12" }, + "turn-yes-u": { "viewBox": "200 344 32 32", "x": "-16", "y": "-16" }, + "turn-no-u": { "viewBox": "232 344 32 32", "x": "-16", "y": "-16" }, + "turn-only-u": { "viewBox": "264 344 32 32", "x": "-16", "y": "-16" }, "preset-icon-frame": { "viewBox": "340 320 45 45" },