diff --git a/css/app.css b/css/app.css index 93a71094d..eaf04c838 100644 --- a/css/app.css +++ b/css/app.css @@ -486,10 +486,21 @@ button.save.has-count .count::before { height: 20px; } +.icon-out-link { + vertical-align: text-top; + width: 14px; + height: 14px; + margin: 0px 3px; +} + .icon-pre-text { margin-right: 3px; } +.icon-light { + color: #fff; +} + .user-icon { max-height: 20px; max-width: 20px; @@ -499,77 +510,24 @@ button.save.has-count .count::before { } /* Definitions for every icon */ -.icon.alert { background-position: 0 0;} .icon.point, .icon.add-point { background-position: -20px 0;} .icon.line, .icon.add-line { background-position: -40px 0;} .icon.area, .icon.add-area { background-position: -60px 0;} -.icon.undo { background-position: -80px 0;} -.icon.redo { background-position: -100px 0;} .icon.apply { background-position: -120px 0;} .icon.save { background-position: -140px 0;} .icon.close { background-position: -160px 0;} -.icon.out-link { background-position: -200px 0;} .icon.inspect { background-position: -220px 0;} .icon.zoom-in, .icon.plus { background-position: -240px 0;} .icon.zoom-out, .icon.minus { background-position: -260px 0;} -.icon.search, -.icon.geocode { background-position: -280px 0;} -.icon.layers { background-position: -300px 0;} -.icon.avatar { background-position: -320px 0;} -.icon.nearby { background-position: -340px 0;} -.icon.geolocate { background-position: -360px 0;} - -.icon.bug { background-position: -400px 0;} -.icon.translate { background-position: -420px 0;} - -.icon.help { background-position: -460px 0;} -.icon.data { background-position: -480px 0;} -.icon.full-screen { background-position: -500px 0;} -.active .icon.full-screen { background-position: -520px 0;} - .icon.delete { background-position: 0 -140px; } - -.icon.zoom-in-invert { background-position: -240px 0; } - -/*.icon.inspect.light { background-position: -220px -20px;} -.icon.plus.light { background-position: -240px -20px;} -.icon.zoom-in { background-position: -240px -20px;} -.icon.zoom-out { background-position: -260px -20px;} -.icon.geocode.light { background-position: -280px -20px;} -.icon.layers.light { background-position: -300px -20px;} -.icon.avatar.light { background-position: -320px -20px;} -.icon.nearby.light { background-position: -340px -20px;} -.icon.geolocate.light { background-position: -360px -20px;} -.icon.bug.light { background-position: -400px -20px;} -.icon.help.light { background-position: -460px -20px;} -.icon.data.light { background-position: -600px -20px;} - -button[disabled] .icon.alert { background-position: 0 -40px;} -button[disabled] .icon.add-point { background-position: -20px -40px;} -button[disabled] .icon.add-line { background-position: -40px -40px;} -button[disabled] .icon.add-area { background-position: -60px -40px;} -button.disabled .icon.undo { background-position: -80px -40px;} -button.disabled .icon.redo { background-position: -100px -40px;} -button[disabled] .apply.icon { background-position: -120px -40px;} -button[disabled] .close.icon { background-position: -160px -40px;} -button[disabled] .delete.icon { background-position: -180px -40px;} -button[disabled] .icon.remove { background-position: -200px -40px;} -button[disabled] .icon.inspect { background-position: -220px -40px;} -button[disabled] .icon.zoom-in { background-position: -240px -40px;} -button[disabled] .icon.zoom-out { background-position: -260px -40px;} -button[disabled] .icon.geocode { background-position: -280px -40px;} -button[disabled] .icon.layers { background-position: -300px -40px;} -button[disabled] .icon.avatar { background-position: -320px -40px;} -button[disabled] .icon.nearby { background-position: -340px -40px;} -button[disabled] .icon.data { background-position: -600px -40px;} - +/* .icon.point.deleted { background-position: -480px -80px;} .icon.line.deleted { background-position: -500px -80px;} .icon.area.deleted { background-position: -520px -80px;} @@ -579,11 +537,7 @@ button[disabled] .icon.data { background-position: -600px -40px;} .icon.area.created { background-position: -520px -100px;} .icon.point.modified { background-position: -22px 0; } -*/ .icon.modified { opacity: .5; } - -/*.icon.out-link { height: 14px; width: 14px; background-position: -500px 0;} -a:hover .icon.out-link { background-position: -500px -14px;} */ /* ToolBar / Persistent UI Elements @@ -637,6 +591,12 @@ a:hover .icon.out-link { background-position: -500px -14px;} top: 0; } +.preset-choose { + font-size: 16px; + line-height: 1.25; + font-weight: bold; +} + .modal > button { position: absolute; right: 0; @@ -925,6 +885,10 @@ a:hover .icon.out-link { background-position: -500px -14px;} background: #fafafa; } +.preset-list-item button.tag-reference-button:hover { + background: #f1f1f1; +} + .preset-list-item button.tag-reference-button .icon { opacity: .5; } @@ -1049,7 +1013,10 @@ a:hover .icon.out-link { background-position: -500px -14px;} width: 10%; height: 100%; border-radius: 0; - background: #fafafa; + background: #f6f6f6; +} +.form-label button:hover { + background: #f1f1f1; } .form-label .modified-icon, diff --git a/dist/img/iD-sprite.svg b/dist/img/iD-sprite.svg index de3f2f4b3..cc9aaeb6d 100644 --- a/dist/img/iD-sprite.svg +++ b/dist/img/iD-sprite.svg @@ -1265,10 +1265,10 @@ - + - + diff --git a/js/id/renderer/mapillary_layer.js b/js/id/renderer/mapillary_layer.js index 179e588bf..3eb1952f6 100644 --- a/js/id/renderer/mapillary_layer.js +++ b/js/id/renderer/mapillary_layer.js @@ -70,18 +70,16 @@ iD.MapillaryLayer = function (context) { enter.append('button') .on('click', hide) .append('div') - .attr('class', 'icon close'); + .call(iD.svg.Icon('#icon-close')); enter.append('img'); - var link = enter.append('a') + enter + .append('a') .attr('class', 'link') - .attr('target', '_blank'); - - link.append('span') - .attr('class', 'icon icon-pre-text out-link'); - - link.append('span') + .attr('target', '_blank') + .call(iD.svg.Icon('#icon-out-link', null, 'icon-out-link')) + .append('span') .text(t('mapillary.view_on_mapillary')); if (!enable) { diff --git a/js/id/svg/icon.js b/js/id/svg/icon.js index 7195e8136..d169b411f 100644 --- a/js/id/svg/icon.js +++ b/js/id/svg/icon.js @@ -1,11 +1,12 @@ -iD.svg.Icon = function(name) { +iD.svg.Icon = function(name, useklass, svgklass) { return function (selection) { - selection.selectAll('icon') + selection.selectAll('svg') .data([0]) .enter() .append('svg') - .attr('class','icon') + .attr('class', (svgklass || 'icon')) .append('use') - .attr('xlink:href', name); + .attr('xlink:href', name) + .attr('class', useklass); }; }; diff --git a/js/id/ui.js b/js/id/ui.js index f7ff340ad..7c73c920f 100644 --- a/js/id/ui.js +++ b/js/id/ui.js @@ -132,7 +132,7 @@ iD.ui = function(context) { .attr('target', '_blank') .attr('tabindex', -1) .attr('href', 'https://github.com/openstreetmap/iD/issues') - .call(iD.svg.Icon('#icon-bug')) + .call(iD.svg.Icon('#icon-bug', 'icon-light')) .call(bootstrap.tooltip() .title(t('report_a_bug')) .placement('top') @@ -142,7 +142,7 @@ iD.ui = function(context) { .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(iD.svg.Icon('#icon-translate', 'icon-light')) .call(bootstrap.tooltip() .title(t('help_translate')) .placement('top') diff --git a/js/id/ui/account.js b/js/id/ui/account.js index a7360561c..bac3956ce 100644 --- a/js/id/ui/account.js +++ b/js/id/ui/account.js @@ -31,8 +31,8 @@ iD.ui.Account = function(context) { .attr('class', 'icon icon-pre-text user-icon') .attr('src', details.image_url); } else { - userLink.append('span') - .attr('class', 'icon avatar light icon-pre-text'); + userLink + .call(iD.svg.Icon('#icon-avatar', 'icon-light icon-pre-text')); } // Add user name diff --git a/js/id/ui/background.js b/js/id/ui/background.js index b1e8436d6..0749ba5f5 100644 --- a/js/id/ui/background.js +++ b/js/id/ui/background.js @@ -186,13 +186,10 @@ iD.ui.Background = function(context) { button = selection.append('button') .attr('tabindex', -1) .on('click', toggle) + .call(iD.svg.Icon('#icon-layers', 'icon-light')) .call(tooltip), shown = false; - button.append('span') - .attr('class', 'icon layers light'); - - var opa = content.append('div') .attr('class', 'opacity-options-wrapper'); @@ -230,8 +227,7 @@ iD.ui.Background = function(context) { .title(t('background.custom_button')) .placement('left')) .on('click', editCustom) - .append('span') - .attr('class', 'icon geocode'); + .call(iD.svg.Icon('#icon-search')); var label = custom.append('label'); @@ -299,15 +295,14 @@ iD.ui.Background = function(context) { .attr('class', function(d) { return d[0] + ' nudge'; }) .on('mousedown', clickNudge); - var resetButton = nudgeContainer.append('button') + var resetButton = nudgeContainer + .append('button') .attr('class', 'reset disabled') .on('click', function () { context.background().offset([0, 0]); resetButton.classed('disabled', true); - }); - - resetButton.append('div') - .attr('class', 'icon undo'); + }) + .call(iD.svg.Icon('#icon-undo')); context.map() .on('move.background-update', _.debounce(update, 1000)); diff --git a/js/id/ui/commit.js b/js/id/ui/commit.js index 8c7121dc2..620da5b50 100644 --- a/js/id/ui/commit.js +++ b/js/id/ui/commit.js @@ -72,12 +72,13 @@ iD.ui.Commit = function(context) { .on('mouseout', mouseout) .on('click', warningClick); - warningLi.append('span') - .attr('class', 'alert icon icon-pre-text'); + warningLi + .call(iD.svg.Icon('#icon-alert', 'icon-pre-text')); - warningLi.append('strong').text(function(d) { - return d.message; - }); + warningLi + .append('strong').text(function(d) { + return d.message; + }); warningLi.filter(function(d) { return d.tooltip; }) .call(bootstrap.tooltip() diff --git a/js/id/ui/contributors.js b/js/id/ui/contributors.js index ce2cb518b..03ba78d07 100644 --- a/js/id/ui/contributors.js +++ b/js/id/ui/contributors.js @@ -12,8 +12,7 @@ iD.ui.Contributors = function(context) { subset = u.slice(0, u.length > limit ? limit - 1 : limit); selection.html('') - .append('span') - .attr('class', 'icon nearby light icon-pre-text'); + .call(iD.svg.Icon('#icon-nearby', 'icon-light icon-pre-text')); var userList = d3.select(document.createElement('span')); diff --git a/js/id/ui/feature_list.js b/js/id/ui/feature_list.js index 2d29f9540..134505022 100644 --- a/js/id/ui/feature_list.js +++ b/js/id/ui/feature_list.js @@ -30,8 +30,8 @@ iD.ui.FeatureList = function(context) { .on('keypress', keypress) .on('input', inputevent); - searchWrap.append('span') - .attr('class', 'icon search'); + searchWrap + .call(iD.svg.Icon('#icon-search', 'icon-pre-text')); var listWrap = selection.append('div') .attr('class', 'inspector-body'); @@ -138,10 +138,8 @@ iD.ui.FeatureList = function(context) { .data([0]) .enter().append('button') .property('disabled', true) - .attr('class', 'no-results-item'); - - resultsIndicator.append('span') - .attr('class', 'icon alert'); + .attr('class', 'no-results-item') + .call(iD.svg.Icon('#icon-alert', 'icon-pre-text')); resultsIndicator.append('span') .attr('class', 'entity-name'); diff --git a/js/id/ui/geolocate.js b/js/id/ui/geolocate.js index 5e1c15a14..3cc7c1cf1 100644 --- a/js/id/ui/geolocate.js +++ b/js/id/ui/geolocate.js @@ -16,14 +16,12 @@ iD.ui.Geolocate = function(map) { return function(selection) { if (!navigator.geolocation) return; - var button = selection.append('button') + selection.append('button') .attr('tabindex', -1) .attr('title', t('geolocate.title')) .on('click', click) + .call(iD.svg.Icon('#icon-geolocate', 'icon-light')) .call(bootstrap.tooltip() .placement('left')); - - button.append('span') - .attr('class', 'icon geolocate light'); }; }; diff --git a/js/id/ui/help.js b/js/id/ui/help.js index 287123fb8..758f1a33c 100644 --- a/js/id/ui/help.js +++ b/js/id/ui/help.js @@ -104,12 +104,10 @@ iD.ui.Help = function(context) { button = selection.append('button') .attr('tabindex', -1) .on('click', toggle) + .call(iD.svg.Icon('#icon-help', 'icon-light')) .call(tooltip), shown = false; - button.append('span') - .attr('class', 'icon help light'); - var toc = pane.append('ul') .attr('class', 'toc'); diff --git a/js/id/ui/map_data.js b/js/id/ui/map_data.js index b7b157b88..56eef78fb 100644 --- a/js/id/ui/map_data.js +++ b/js/id/ui/map_data.js @@ -168,12 +168,10 @@ iD.ui.MapData = function(context) { button = selection.append('button') .attr('tabindex', -1) .on('click', togglePanel) + .call(iD.svg.Icon('#icon-data', 'icon-light')) .call(tooltip), shown = false; - button.append('span') - .attr('class', 'icon data light'); - content.append('h4') .text(t('map_data.title')); @@ -229,8 +227,7 @@ iD.ui.MapData = function(context) { d3.event.stopPropagation(); context.background().zoomToGpxLayer(); }) - .append('span') - .attr('class', 'icon geolocate'); + .call(iD.svg.Icon('#icon-search')); gpxLayerItem.append('button') .attr('class', 'layer-browse') @@ -245,8 +242,7 @@ iD.ui.MapData = function(context) { }) .node().click(); }) - .append('span') - .attr('class', 'icon geocode'); + .call(iD.svg.Icon('#icon-geolocate')); label = gpxLayerItem.append('label') .call(bootstrap.tooltip() diff --git a/js/id/ui/modes.js b/js/id/ui/modes.js index f7609108e..104b5d258 100644 --- a/js/id/ui/modes.js +++ b/js/id/ui/modes.js @@ -35,8 +35,10 @@ iD.ui.Modes = function(context) { context .on('enter.modes', update); - buttons.append('span') - .attr('class', function(mode) { return mode.id + ' icon icon-pre-text'; }); + buttons.each(function(d) { + d3.select(this) + .call(iD.svg.Icon('#icon-' + d.button, 'icon-pre-text')); + }); buttons.append('span') .attr('class', 'label') diff --git a/js/id/ui/notice.js b/js/id/ui/notice.js index 10205f783..d12b2005e 100644 --- a/js/id/ui/notice.js +++ b/js/id/ui/notice.js @@ -7,10 +7,9 @@ iD.ui.Notice = function(context) { .attr('class', 'zoom-to notice') .on('click', function() { context.map().zoom(context.minEditableZoom()); }); - button.append('span') - .attr('class', 'icon zoom-in-invert'); - - button.append('span') + button + .call(iD.svg.Icon('#icon-plus', 'icon-pre-text')) + .append('span') .attr('class', 'label') .text(t('zoom_in_edit')); diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js index f86dede37..0fe601421 100644 --- a/js/id/ui/preset.js +++ b/js/id/ui/preset.js @@ -113,13 +113,15 @@ iD.ui.preset = function(context) { wrap.append('button') .attr('class', 'remove-icon') - .append('span').attr('class', 'icon delete'); + .call(iD.svg.Icon('#operation-delete')) + .select('use') + .attr('x', 10) + .attr('y', 10); wrap.append('button') .attr('class', 'modified-icon') .attr('tabindex', -1) - .append('div') - .attr('class', 'icon undo'); + .call(iD.svg.Icon('#icon-undo')); // Update diff --git a/js/id/ui/preset/localized.js b/js/id/ui/preset/localized.js index f8d55e9ff..bebc0dfec 100644 --- a/js/id/ui/preset/localized.js +++ b/js/id/ui/preset/localized.js @@ -29,13 +29,13 @@ iD.ui.preset.localized = function(field, context) { var translateButton = selection.selectAll('.localized-add') .data([0]); - translateButton.enter().append('button') + translateButton.enter() + .append('button') .attr('class', 'button-input-action localized-add minor') + .call(iD.svg.Icon('#icon-plus')) .call(bootstrap.tooltip() .title(t('translate.translate')) - .placement('left')) - .append('span') - .attr('class', 'icon plus'); + .placement('left')); translateButton .on('click', addBlank); @@ -141,7 +141,10 @@ iD.ui.preset.localized = function(field, context) { .style('max-height','0px') .remove(); }) - .append('span').attr('class', 'icon delete'); + .call(iD.svg.Icon('#operation-delete')) + .select('use') + .attr('x', 10) + .attr('y', 10); wrap.append('input') .attr('class', 'localized-lang') diff --git a/js/id/ui/preset/wikipedia.js b/js/id/ui/preset/wikipedia.js index a9f433198..f421f0ce6 100644 --- a/js/id/ui/preset/wikipedia.js +++ b/js/id/ui/preset/wikipedia.js @@ -64,8 +64,7 @@ iD.ui.preset.wikipedia = function(field, context) { link.enter().append('a') .attr('class', 'wiki-link button-input-action minor') .attr('target', '_blank') - .append('span') - .attr('class', 'icon out-link'); + .call(iD.svg.Icon('#icon-out-link', null, 'icon-out-link')); } function language() { diff --git a/js/id/ui/preset_list.js b/js/id/ui/preset_list.js index 4ae2952da..2e3770147 100644 --- a/js/id/ui/preset_list.js +++ b/js/id/ui/preset_list.js @@ -21,15 +21,14 @@ iD.ui.PresetList = function(context) { .attr('class', 'preset-choose') .on('click', function() { event.choose(currentPreset); }) .append('span') - .attr('class', 'icon forward'); + .html('►'); } else { messagewrap.append('button') .attr('class', 'close') .on('click', function() { context.enter(iD.modes.Browse(context)); }) - .append('span') - .attr('class', 'icon close'); + .call(iD.svg.Icon('#icon-close')); } function keydown() { @@ -86,8 +85,8 @@ iD.ui.PresetList = function(context) { .on('keypress', keypress) .on('input', inputevent); - searchWrap.append('span') - .attr('class', 'icon search'); + searchWrap + .call(iD.svg.Icon('#icon-search', 'icon-pre-text')); if (autofocus) { search.node().focus(); diff --git a/js/id/ui/raw_member_editor.js b/js/id/ui/raw_member_editor.js index 20a0ca0b6..d0a660c80 100644 --- a/js/id/ui/raw_member_editor.js +++ b/js/id/ui/raw_member_editor.js @@ -101,8 +101,10 @@ iD.ui.RawMemberEditor = function(context) { .attr('tabindex', -1) .attr('class', 'remove button-input-action member-delete minor') .on('click', deleteMember) - .append('span') - .attr('class', 'icon delete'); + .call(iD.svg.Icon('#operation-delete')) + .select('use') + .attr('x', 10) + .attr('y', 10); $items.exit() .remove(); diff --git a/js/id/ui/raw_membership_editor.js b/js/id/ui/raw_membership_editor.js index 03a25f255..067c48f36 100644 --- a/js/id/ui/raw_membership_editor.js +++ b/js/id/ui/raw_membership_editor.js @@ -135,8 +135,10 @@ iD.ui.RawMembershipEditor = function(context) { .attr('tabindex', -1) .attr('class', 'remove button-input-action member-delete minor') .on('click', deleteMembership) - .append('span') - .attr('class', 'icon delete'); + .call(iD.svg.Icon('#operation-delete')) + .select('use') + .attr('x', 10) + .attr('y', 10); $items.exit() .remove(); @@ -171,8 +173,10 @@ iD.ui.RawMembershipEditor = function(context) { .attr('tabindex', -1) .attr('class', 'remove button-input-action member-delete minor') .on('click', deleteMembership) - .append('span') - .attr('class', 'icon delete'); + .call(iD.svg.Icon('#operation-delete')) + .select('use') + .attr('x', 10) + .attr('y', 10); } else { $list.selectAll('.member-row-new') @@ -182,10 +186,10 @@ iD.ui.RawMembershipEditor = function(context) { var $add = $wrap.selectAll('.add-relation') .data([0]); - $add.enter().append('button') + $add.enter() + .append('button') .attr('class', 'add-relation') - .append('span') - .attr('class', 'icon plus light'); + .call(iD.svg.Icon('#icon-plus', 'icon-light')); $wrap.selectAll('.add-relation') .on('click', function() { diff --git a/js/id/ui/raw_tag_editor.js b/js/id/ui/raw_tag_editor.js index 0b894e229..697ea53f6 100644 --- a/js/id/ui/raw_tag_editor.js +++ b/js/id/ui/raw_tag_editor.js @@ -40,11 +40,10 @@ iD.ui.RawTagEditor = function(context) { var $newTag = $wrap.selectAll('.add-tag') .data([0]); - var $enter = $newTag.enter().append('button') - .attr('class', 'add-tag'); - - $enter.append('span') - .attr('class', 'icon plus light'); + $newTag.enter() + .append('button') + .attr('class', 'add-tag') + .call(iD.svg.Icon('#icon-plus', 'icon-light')); $newTag.on('click', addTag); @@ -53,7 +52,7 @@ iD.ui.RawTagEditor = function(context) { // Enter - $enter = $items.enter().append('li') + var $enter = $items.enter().append('li') .attr('class', 'tag-row cf'); $enter.append('div') @@ -73,8 +72,10 @@ iD.ui.RawTagEditor = function(context) { $enter.append('button') .attr('tabindex', -1) .attr('class', 'remove minor') - .append('span') - .attr('class', 'icon delete'); + .call(iD.svg.Icon('#operation-delete')) + .select('use') + .attr('x', 10) + .attr('y', 10); if (context.taginfo()) { $enter.each(bindTypeahead); diff --git a/js/id/ui/tag_reference.js b/js/id/ui/tag_reference.js index 191f64413..780c4270d 100644 --- a/js/id/ui/tag_reference.js +++ b/js/id/ui/tag_reference.js @@ -63,15 +63,12 @@ iD.ui.TagReference = function(tag, context) { .append('p') .text(docs.description); - var wikiLink = body + body .append('a') .attr('target', '_blank') - .attr('href', 'http://wiki.openstreetmap.org/wiki/' + docs.title); - - wikiLink.append('span') - .attr('class','icon icon-pre-text out-link'); - - wikiLink.append('span') + .attr('href', 'http://wiki.openstreetmap.org/wiki/' + docs.title) + .call(iD.svg.Icon('#icon-out-link', null, 'icon-out-link')) + .append('span') .text(t('inspector.reference')); return true; @@ -105,12 +102,11 @@ iD.ui.TagReference = function(tag, context) { button = selection.selectAll('.tag-reference-button') .data([0]); - var enter = button.enter().append('button') + button.enter() + .append('button') + .attr('class', 'tag-reference-button') .attr('tabindex', -1) - .attr('class', 'tag-reference-button'); - - enter.append('span') - .attr('class', 'icon inspect'); + .call(iD.svg.Icon('#icon-inspect')); button.on('click', function () { d3.event.stopPropagation(); @@ -148,4 +144,4 @@ iD.ui.TagReference = function(tag, context) { }; return tagReference; -}; \ No newline at end of file +}; diff --git a/js/id/ui/undo_redo.js b/js/id/ui/undo_redo.js index a7917a97a..a5cfa7122 100644 --- a/js/id/ui/undo_redo.js +++ b/js/id/ui/undo_redo.js @@ -32,8 +32,10 @@ iD.ui.UndoRedo = function(context) { .on('click', function(d) { return d.action(); }) .call(tooltip); - buttons.append('span') - .attr('class', function(d) { return 'icon ' + d.id; }); + buttons.each(function(d) { + d3.select(this) + .call(iD.svg.Icon('#icon-' + d.id)); + }); var keybinding = d3.keybinding('undo') .on(commands[0].cmd, function() { d3.event.preventDefault(); commands[0].action(); }) diff --git a/js/id/ui/view_on_osm.js b/js/id/ui/view_on_osm.js index ce0c282f0..9e1f9558e 100644 --- a/js/id/ui/view_on_osm.js +++ b/js/id/ui/view_on_osm.js @@ -9,17 +9,16 @@ iD.ui.ViewOnOSM = function(context) { var $link = selection.selectAll('.view-on-osm') .data([0]); - var $enter = $link.enter().append('a') + $link.enter() + .append('a') .attr('class', 'view-on-osm') - .attr('target', '_blank'); - - $enter.append('span') - .attr('class', 'icon icon-pre-text out-link'); - - $enter.append('span') + .attr('target', '_blank') + .call(iD.svg.Icon('#icon-out-link', null, 'icon-out-link')) + .append('span') .text(t('inspector.view_on_osm')); - $link.attr('href', context.connection().entityURL(entity)); + $link + .attr('href', context.connection().entityURL(entity)); } viewOnOSM.entityID = function(_) { diff --git a/js/id/ui/zoom.js b/js/id/ui/zoom.js index 4420c5531..2d34c8fb5 100644 --- a/js/id/ui/zoom.js +++ b/js/id/ui/zoom.js @@ -1,11 +1,13 @@ iD.ui.Zoom = function(context) { var zooms = [{ id: 'zoom-in', + icon: 'plus', title: t('zoom.in'), action: context.zoomIn, key: '+' }, { id: 'zoom-out', + icon: 'minus', title: t('zoom.out'), action: context.zoomOut, key: '-' @@ -46,8 +48,10 @@ iD.ui.Zoom = function(context) { return iD.ui.tooltipHtml(d.title, d.key); })); - button.append('span') - .attr('class', function(d) { return d.id + ' icon'; }); + button.each(function(d) { + d3.select(this) + .call(iD.svg.Icon('#icon-' + d.icon, 'icon-light')); + }); var keybinding = d3.keybinding('zoom'); diff --git a/svg/iD-sprite.idraw b/svg/iD-sprite.idraw index 5313fa9e4..0dd55d158 100644 Binary files a/svg/iD-sprite.idraw and b/svg/iD-sprite.idraw differ diff --git a/svg/iD-sprite.svg b/svg/iD-sprite.svg index e0b423d85..c386118f5 100644 --- a/svg/iD-sprite.svg +++ b/svg/iD-sprite.svg @@ -1265,10 +1265,10 @@ - + - + diff --git a/test/spec/svg/icon.js b/test/spec/svg/icon.js index bd4c22713..c8cc9451a 100644 --- a/test/spec/svg/icon.js +++ b/test/spec/svg/icon.js @@ -5,9 +5,17 @@ describe("iD.svg.Icon", function () { selection = d3.select(document.createElement('div')); }); - it("creates an SVG icon", function () { + it("creates a generic SVG icon", function () { selection.call(iD.svg.Icon('#icon-bug')); expect(selection.select('svg')).to.be.classed('icon'); expect(selection.select('use').attr('xlink:href')).to.eql('#icon-bug'); }); + + it("creates a classed SVG icon", function () { + selection.call(iD.svg.Icon('#icon-bug', 'icon-light')); + expect(selection.select('svg')).to.be.classed('icon'); + expect(selection.select('use').attr('xlink:href')).to.eql('#icon-bug'); + expect(selection.select('use')).to.be.classed('icon-light'); + }); + });