diff --git a/css/app.css b/css/app.css index eaf04c838..2b9d865b5 100644 --- a/css/app.css +++ b/css/app.css @@ -481,26 +481,38 @@ button.save.has-count .count::before { /* Icons */ .icon { - vertical-align: top; - width: 20px; - height: 20px; + vertical-align: top; + width: 20px; + height: 20px; } -.icon-out-link { - vertical-align: text-top; - width: 14px; - height: 14px; - margin: 0px 3px; +.icon.inline { + vertical-align: text-top; + width: 14px; + height: 14px; + margin: 0px 3px; } -.icon-pre-text { +.icon.pre-text { margin-right: 3px; } -.icon-light { +.icon.light { color: #fff; } +.icon.created { + color: #00ca07; +} + +.icon.modified { + color: #666; +} + +.icon.deleted { + color: #ea0000; +} + .user-icon { max-height: 20px; max-width: 20px; @@ -509,36 +521,6 @@ button.save.has-count .count::before { border-radius: 3px; } -/* Definitions for every icon */ -.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.apply { background-position: -120px 0;} -.icon.save { background-position: -140px 0;} -.icon.close { background-position: -160px 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.delete { background-position: 0 -140px; } - -/* -.icon.point.deleted { background-position: -480px -80px;} -.icon.line.deleted { background-position: -500px -80px;} -.icon.area.deleted { background-position: -520px -80px;} - -.icon.point.created { background-position: -480px -100px;} -.icon.line.created { background-position: -500px -100px;} -.icon.area.created { background-position: -520px -100px;} - -.icon.point.modified { background-position: -22px 0; } -.icon.modified { opacity: .5; } -*/ /* ToolBar / Persistent UI Elements ------------------------------------------------------- */ @@ -2427,7 +2409,7 @@ div.full-screen > button:hover { } .modal-actions button:before, -.save-success a.button:before, +.save-success a.button.osm:before, .walkthrough a:before { display: block; content: ''; @@ -2436,7 +2418,7 @@ div.full-screen > button:hover { max-width: 100px; margin: auto; margin-bottom: 10px; - background:transparent url(img/iD-sprite.svg) no-repeat 0 -220px; + background:transparent url(img/iD-sprite.svg) no-repeat -200px -460px; } .modal-actions :first-child { @@ -2451,11 +2433,11 @@ div.full-screen > button:hover { ------------------------------------------------------- */ .modal-actions .restore:before { - background-position: -600px -220px; + background-position: -500px -460px; } .modal-actions .reset:before { - background-position: -700px -220px; + background-position: -600px -460px; } /* Success Modal @@ -2469,28 +2451,18 @@ div.full-screen > button:hover { padding-top: 15px; } -.save-success .button.social { - height: 80px; +.save-success a.button.social { + height: auto; } -.save-success .button.social:before { - height: 50px; +.save-success .icon.social { + height: 80px; + width: 80px; + color: #7092FF; } .save-success .button.osm:before { - background-position: 0px -220px; -} - -.save-success .button.twitter:before { - background-position: -100px -245px; -} - -.save-success .button.facebook:before { - background-position: -200px -245px; -} - -.save-success .button.google:before { - background-position: -300px -245px; + background-position: -200px -460px; } /* Splash Modal @@ -2498,11 +2470,11 @@ div.full-screen > button:hover { .modal-actions .walkthrough:before, .walkthrough a:before { - background-position: -400px -220px; + background-position: -300px -460px; } .modal-actions .start:before { - background-position: -500px -220px; + background-position: -400px -460px; } /* Commit Modal @@ -2909,7 +2881,6 @@ div.full-screen > button:hover { ------------------------------------------------------- */ @media only screen and (max-width: 840px) { - #bar .icon.icon-pre-text { margin-right: 0;} /* override hide for save button */ #bar .save .label { display: block;} } @@ -3051,6 +3022,6 @@ div.full-screen > button:hover { .huge-modal-button .illustration { height: 100px; width: 100px; - background: rgba(0, 0, 0, 0) url(img/iD-sprite.svg) no-repeat -400px -220px; + background: rgba(0, 0, 0, 0) url(img/iD-sprite.svg) no-repeat -300px -460px; margin: auto; } diff --git a/dist/img/iD-sprite.svg b/dist/img/iD-sprite.svg index cc9aaeb6d..ac19b3296 100644 --- a/dist/img/iD-sprite.svg +++ b/dist/img/iD-sprite.svg @@ -29,7 +29,7 @@ - + @@ -67,8 +67,8 @@ - - + + @@ -87,8 +87,8 @@ - - + + @@ -100,25 +100,25 @@ - + - - - - - - - + + + + + + + - - - - - - - + + + + + + + @@ -130,9 +130,13 @@ - - - + + + + + + + @@ -1264,23 +1268,29 @@ - - + + - - + + - - + + - - + + - - + + - - + + + + + + + + diff --git a/js/id/renderer/mapillary_layer.js b/js/id/renderer/mapillary_layer.js index 3eb1952f6..463ec0988 100644 --- a/js/id/renderer/mapillary_layer.js +++ b/js/id/renderer/mapillary_layer.js @@ -78,7 +78,7 @@ iD.MapillaryLayer = function (context) { .append('a') .attr('class', 'link') .attr('target', '_blank') - .call(iD.svg.Icon('#icon-out-link', null, 'icon-out-link')) + .call(iD.svg.Icon('#icon-out-link', 'inline')) .append('span') .text(t('mapillary.view_on_mapillary')); diff --git a/js/id/svg/icon.js b/js/id/svg/icon.js index d169b411f..b394b25bb 100644 --- a/js/id/svg/icon.js +++ b/js/id/svg/icon.js @@ -1,10 +1,10 @@ -iD.svg.Icon = function(name, useklass, svgklass) { +iD.svg.Icon = function(name, svgklass, useklass) { return function (selection) { selection.selectAll('svg') .data([0]) .enter() .append('svg') - .attr('class', (svgklass || 'icon')) + .attr('class', 'icon ' + svgklass) .append('use') .attr('xlink:href', name) .attr('class', useklass); diff --git a/js/id/ui.js b/js/id/ui.js index 7c73c920f..069e100cb 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', 'icon-light')) + .call(iD.svg.Icon('#icon-bug', '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', 'icon-light')) + .call(iD.svg.Icon('#icon-translate', '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 bac3956ce..a3d9e4ab3 100644 --- a/js/id/ui/account.js +++ b/js/id/ui/account.js @@ -28,11 +28,11 @@ iD.ui.Account = function(context) { // Add thumbnail or dont if (details.image_url) { userLink.append('img') - .attr('class', 'icon icon-pre-text user-icon') + .attr('class', 'icon pre-text user-icon') .attr('src', details.image_url); } else { userLink - .call(iD.svg.Icon('#icon-avatar', 'icon-light icon-pre-text')); + .call(iD.svg.Icon('#icon-avatar', 'pre-text light')); } // Add user name diff --git a/js/id/ui/background.js b/js/id/ui/background.js index 0749ba5f5..7a4ef273b 100644 --- a/js/id/ui/background.js +++ b/js/id/ui/background.js @@ -186,7 +186,7 @@ iD.ui.Background = function(context) { button = selection.append('button') .attr('tabindex', -1) .on('click', toggle) - .call(iD.svg.Icon('#icon-layers', 'icon-light')) + .call(iD.svg.Icon('#icon-layers', 'light')) .call(tooltip), shown = false; diff --git a/js/id/ui/commit.js b/js/id/ui/commit.js index 620da5b50..54faceb8d 100644 --- a/js/id/ui/commit.js +++ b/js/id/ui/commit.js @@ -73,7 +73,7 @@ iD.ui.Commit = function(context) { .on('click', warningClick); warningLi - .call(iD.svg.Icon('#icon-alert', 'icon-pre-text')); + .call(iD.svg.Icon('#icon-alert', 'pre-text')); warningLi .append('strong').text(function(d) { @@ -103,7 +103,7 @@ iD.ui.Commit = function(context) { if (user.image_url) { userLink.append('img') .attr('src', user.image_url) - .attr('class', 'icon icon-pre-text user-icon'); + .attr('class', 'icon pre-text user-icon'); } userLink.append('a') @@ -166,10 +166,10 @@ iD.ui.Commit = function(context) { .on('mouseout', mouseout) .on('click', zoomToEntity); - li.append('span') - .attr('class', function(d) { - return d.entity.geometry(d.graph) + ' ' + d.changeType + ' icon icon-pre-text'; - }); + li.each(function(d) { + d3.select(this) + .call(iD.svg.Icon('#icon-' + d.entity.geometry(d.graph), 'pre-text ' + d.changeType)); + }); li.append('span') .attr('class', 'change-type') diff --git a/js/id/ui/conflicts.js b/js/id/ui/conflicts.js index 8bf1011fa..13e5e5368 100644 --- a/js/id/ui/conflicts.js +++ b/js/id/ui/conflicts.js @@ -11,8 +11,7 @@ iD.ui.Conflicts = function(context) { .append('button') .attr('class', 'fr') .on('click', function() { dispatch.cancel(); }) - .append('span') - .attr('class', 'icon close'); + .call(iD.svg.Icon('#icon-close')); header .append('h3') diff --git a/js/id/ui/contributors.js b/js/id/ui/contributors.js index 03ba78d07..86a38c067 100644 --- a/js/id/ui/contributors.js +++ b/js/id/ui/contributors.js @@ -12,7 +12,7 @@ iD.ui.Contributors = function(context) { subset = u.slice(0, u.length > limit ? limit - 1 : limit); selection.html('') - .call(iD.svg.Icon('#icon-nearby', 'icon-light icon-pre-text')); + .call(iD.svg.Icon('#icon-nearby', 'pre-text light')); var userList = d3.select(document.createElement('span')); diff --git a/js/id/ui/entity_editor.js b/js/id/ui/entity_editor.js index e7a784a32..ac9579054 100644 --- a/js/id/ui/entity_editor.js +++ b/js/id/ui/entity_editor.js @@ -24,8 +24,7 @@ iD.ui.EntityEditor = function(context) { $enter.append('button') .attr('class', 'fr preset-close') - .append('span') - .attr('class', 'icon close'); + .call(iD.svg.Icon('#icon-close')); $enter.append('h3'); diff --git a/js/id/ui/feature_list.js b/js/id/ui/feature_list.js index 134505022..be715e672 100644 --- a/js/id/ui/feature_list.js +++ b/js/id/ui/feature_list.js @@ -31,7 +31,7 @@ iD.ui.FeatureList = function(context) { .on('input', inputevent); searchWrap - .call(iD.svg.Icon('#icon-search', 'icon-pre-text')); + .call(iD.svg.Icon('#icon-search', 'pre-text')); var listWrap = selection.append('div') .attr('class', 'inspector-body'); @@ -139,7 +139,7 @@ iD.ui.FeatureList = function(context) { .enter().append('button') .property('disabled', true) .attr('class', 'no-results-item') - .call(iD.svg.Icon('#icon-alert', 'icon-pre-text')); + .call(iD.svg.Icon('#icon-alert', 'pre-text')); resultsIndicator.append('span') .attr('class', 'entity-name'); @@ -171,17 +171,21 @@ iD.ui.FeatureList = function(context) { var items = list.selectAll('.feature-list-item') .data(results, function(d) { return d.id; }); - var enter = items.enter().insert('button', '.geocode-item') + var enter = items.enter() + .insert('button', '.geocode-item') .attr('class', 'feature-list-item') .on('mouseover', mouseover) .on('mouseout', mouseout) .on('click', click); - var label = enter.append('div') + var label = enter + .append('div') .attr('class', 'label'); - label.append('span') - .attr('class', function(d) { return d.geometry + ' icon icon-pre-text'; }); + label.each(function(d) { + d3.select(this) + .call(iD.svg.Icon('#icon-' + d.geometry, 'pre-text')); + }); label.append('span') .attr('class', 'entity-type') diff --git a/js/id/ui/geolocate.js b/js/id/ui/geolocate.js index 3cc7c1cf1..3942af10a 100644 --- a/js/id/ui/geolocate.js +++ b/js/id/ui/geolocate.js @@ -20,7 +20,7 @@ iD.ui.Geolocate = function(map) { .attr('tabindex', -1) .attr('title', t('geolocate.title')) .on('click', click) - .call(iD.svg.Icon('#icon-geolocate', 'icon-light')) + .call(iD.svg.Icon('#icon-geolocate', 'light')) .call(bootstrap.tooltip() .placement('left')); }; diff --git a/js/id/ui/help.js b/js/id/ui/help.js index 758f1a33c..cf66ade47 100644 --- a/js/id/ui/help.js +++ b/js/id/ui/help.js @@ -104,7 +104,7 @@ iD.ui.Help = function(context) { button = selection.append('button') .attr('tabindex', -1) .on('click', toggle) - .call(iD.svg.Icon('#icon-help', 'icon-light')) + .call(iD.svg.Icon('#icon-help', 'light')) .call(tooltip), shown = false; diff --git a/js/id/ui/intro.js b/js/id/ui/intro.js index a0e3691c9..c3be4a17e 100644 --- a/js/id/ui/intro.js +++ b/js/id/ui/intro.js @@ -73,20 +73,24 @@ iD.ui.intro = function(context) { .attr('class', 'joined') .selectAll('button.step'); - var entered = buttonwrap.data(steps) - .enter().append('button') - .attr('class', 'step') - .on('click', enter); + var entered = buttonwrap + .data(steps) + .enter() + .append('button') + .attr('class', 'step') + .on('click', enter); + + entered + .call(iD.svg.Icon('#icon-apply', 'pre-text')); + + entered + .append('label') + .text(function(d) { return t(d.title); }); - entered.append('div').attr('class','icon icon-pre-text apply'); - entered.append('label').text(function(d) { return t(d.title); }); enter(steps[0]); function enter (newStep) { - - if (step) { - step.exit(); - } + if (step) { step.exit(); } context.enter(iD.modes.Browse(context)); diff --git a/js/id/ui/map_data.js b/js/id/ui/map_data.js index 56eef78fb..903860137 100644 --- a/js/id/ui/map_data.js +++ b/js/id/ui/map_data.js @@ -168,7 +168,7 @@ iD.ui.MapData = function(context) { button = selection.append('button') .attr('tabindex', -1) .on('click', togglePanel) - .call(iD.svg.Icon('#icon-data', 'icon-light')) + .call(iD.svg.Icon('#icon-data', 'light')) .call(tooltip), shown = false; diff --git a/js/id/ui/modes.js b/js/id/ui/modes.js index 104b5d258..3e568bbf8 100644 --- a/js/id/ui/modes.js +++ b/js/id/ui/modes.js @@ -37,7 +37,7 @@ iD.ui.Modes = function(context) { buttons.each(function(d) { d3.select(this) - .call(iD.svg.Icon('#icon-' + d.button, 'icon-pre-text')); + .call(iD.svg.Icon('#icon-' + d.button, 'pre-text')); }); buttons.append('span') diff --git a/js/id/ui/notice.js b/js/id/ui/notice.js index d12b2005e..e0668b7e7 100644 --- a/js/id/ui/notice.js +++ b/js/id/ui/notice.js @@ -8,7 +8,7 @@ iD.ui.Notice = function(context) { .on('click', function() { context.map().zoom(context.minEditableZoom()); }); button - .call(iD.svg.Icon('#icon-plus', 'icon-pre-text')) + .call(iD.svg.Icon('#icon-plus', 'pre-text')) .append('span') .attr('class', 'label') .text(t('zoom_in_edit')); diff --git a/js/id/ui/preset/wikipedia.js b/js/id/ui/preset/wikipedia.js index f421f0ce6..c7621c0fc 100644 --- a/js/id/ui/preset/wikipedia.js +++ b/js/id/ui/preset/wikipedia.js @@ -64,7 +64,7 @@ iD.ui.preset.wikipedia = function(field, context) { link.enter().append('a') .attr('class', 'wiki-link button-input-action minor') .attr('target', '_blank') - .call(iD.svg.Icon('#icon-out-link', null, 'icon-out-link')); + .call(iD.svg.Icon('#icon-out-link', 'inline')); } function language() { diff --git a/js/id/ui/preset_list.js b/js/id/ui/preset_list.js index 2e3770147..150248211 100644 --- a/js/id/ui/preset_list.js +++ b/js/id/ui/preset_list.js @@ -86,7 +86,7 @@ iD.ui.PresetList = function(context) { .on('input', inputevent); searchWrap - .call(iD.svg.Icon('#icon-search', 'icon-pre-text')); + .call(iD.svg.Icon('#icon-search', 'pre-text')); if (autofocus) { search.node().focus(); diff --git a/js/id/ui/raw_membership_editor.js b/js/id/ui/raw_membership_editor.js index 067c48f36..ecb715625 100644 --- a/js/id/ui/raw_membership_editor.js +++ b/js/id/ui/raw_membership_editor.js @@ -189,7 +189,7 @@ iD.ui.RawMembershipEditor = function(context) { $add.enter() .append('button') .attr('class', 'add-relation') - .call(iD.svg.Icon('#icon-plus', 'icon-light')); + .call(iD.svg.Icon('#icon-plus', '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 697ea53f6..725e983b3 100644 --- a/js/id/ui/raw_tag_editor.js +++ b/js/id/ui/raw_tag_editor.js @@ -43,7 +43,7 @@ iD.ui.RawTagEditor = function(context) { $newTag.enter() .append('button') .attr('class', 'add-tag') - .call(iD.svg.Icon('#icon-plus', 'icon-light')); + .call(iD.svg.Icon('#icon-plus', 'light')); $newTag.on('click', addTag); diff --git a/js/id/ui/selection_list.js b/js/id/ui/selection_list.js index a221308e5..bbbf80bc4 100644 --- a/js/id/ui/selection_list.js +++ b/js/id/ui/selection_list.js @@ -36,12 +36,9 @@ iD.ui.SelectionList = function(context, selectedIDs) { .on('click', selectEntity); // Enter - var label = enter.append('div') - .attr('class', 'label'); - - label.append('span') - .attr('class', 'icon icon-pre-text'); + .attr('class', 'label') + .call(iD.svg.Icon('', 'pre-text')); label.append('span') .attr('class', 'entity-type'); @@ -50,9 +47,11 @@ iD.ui.SelectionList = function(context, selectedIDs) { .attr('class', 'entity-name'); // Update - - items.selectAll('.icon') - .attr('class', function(entity) { return context.geometry(entity.id) + ' icon icon-pre-text'; }); + items.selectAll('use') + .attr('href', function() { + var entity = this.parentElement.parentElement.__data__; + return '#icon-' + context.geometry(entity.id); + }); items.selectAll('.entity-type') .text(function(entity) { return context.presets().match(entity, context.graph()).name(); }); @@ -61,7 +60,6 @@ iD.ui.SelectionList = function(context, selectedIDs) { .text(function(entity) { return iD.util.displayName(entity); }); // Exit - items.exit() .remove(); } diff --git a/js/id/ui/success.js b/js/id/ui/success.js index 83ca2d730..9c9d5c462 100644 --- a/js/id/ui/success.js +++ b/js/id/ui/success.js @@ -12,8 +12,7 @@ iD.ui.Success = function(context) { header.append('button') .attr('class', 'fr') .on('click', function() { dispatch.cancel(); }) - .append('span') - .attr('class', 'icon close'); + .call(iD.svg.Icon('#icon-close')); header.append('h3') .text(t('success.just_edited')); @@ -40,13 +39,15 @@ iD.ui.Success = function(context) { body.selectAll('.button.social') .data(d3.entries(sharing)) - .enter().append('a') - .attr('class', function(d) { return 'button social col4 ' + d.key; }) + .enter() + .append('a') + .attr('class', 'button social col4') .attr('target', '_blank') .attr('href', function(d) { return d.value; }) .call(bootstrap.tooltip() .title(function(d) { return t('success.' + d.key); }) - .placement('bottom')); + .placement('bottom')) + .each(function(d) { d3.select(this).call(iD.svg.Icon('#logo-' + d.key, 'social')); }); } success.changeset = function(_) { diff --git a/js/id/ui/tag_reference.js b/js/id/ui/tag_reference.js index 780c4270d..05723ee8a 100644 --- a/js/id/ui/tag_reference.js +++ b/js/id/ui/tag_reference.js @@ -67,7 +67,7 @@ iD.ui.TagReference = function(tag, context) { .append('a') .attr('target', '_blank') .attr('href', 'http://wiki.openstreetmap.org/wiki/' + docs.title) - .call(iD.svg.Icon('#icon-out-link', null, 'icon-out-link')) + .call(iD.svg.Icon('#icon-out-link', 'inline')) .append('span') .text(t('inspector.reference')); diff --git a/js/id/ui/view_on_osm.js b/js/id/ui/view_on_osm.js index 9e1f9558e..003876671 100644 --- a/js/id/ui/view_on_osm.js +++ b/js/id/ui/view_on_osm.js @@ -13,7 +13,7 @@ iD.ui.ViewOnOSM = function(context) { .append('a') .attr('class', 'view-on-osm') .attr('target', '_blank') - .call(iD.svg.Icon('#icon-out-link', null, 'icon-out-link')) + .call(iD.svg.Icon('#icon-out-link', 'inline')) .append('span') .text(t('inspector.view_on_osm')); diff --git a/js/id/ui/zoom.js b/js/id/ui/zoom.js index 2d34c8fb5..4fb71b4b3 100644 --- a/js/id/ui/zoom.js +++ b/js/id/ui/zoom.js @@ -50,7 +50,7 @@ iD.ui.Zoom = function(context) { button.each(function(d) { d3.select(this) - .call(iD.svg.Icon('#icon-' + d.icon, 'icon-light')); + .call(iD.svg.Icon('#icon-' + d.icon, 'light')); }); var keybinding = d3.keybinding('zoom'); diff --git a/svg/iD-sprite.idraw b/svg/iD-sprite.idraw index 0dd55d158..02cb69456 100644 Binary files a/svg/iD-sprite.idraw and b/svg/iD-sprite.idraw differ diff --git a/svg/iD-sprite.json b/svg/iD-sprite.json index f0fc52d63..46080b184 100644 --- a/svg/iD-sprite.json +++ b/svg/iD-sprite.json @@ -3,12 +3,13 @@ "icon-point": { "viewBox": "20 0 20 20" }, "icon-line": { "viewBox": "40 0 20 20" }, "icon-area": { "viewBox": "60 0 20 20" }, - "icon-undo": { "viewBox": "80 0 20 20" }, - "icon-redo": { "viewBox": "100 0 20 20" }, - "icon-apply": { "viewBox": "120 0 20 20" }, - "icon-save": { "viewBox": "140 0 20 20" }, - "icon-close": { "viewBox": "160 0 20 20" }, - "icon-out-link": { "viewBox": "200 0 20 20" }, + "icon-relation": { "viewBox": "80 0 20 20" }, + "icon-vertex": { "viewBox": "100 0 20 20" }, + "icon-undo": { "viewBox": "120 0 20 20" }, + "icon-redo": { "viewBox": "140 0 20 20" }, + "icon-apply": { "viewBox": "160 0 20 20" }, + "icon-save": { "viewBox": "180 0 20 20" }, + "icon-close": { "viewBox": "200 0 20 20" }, "icon-inspect": { "viewBox": "220 0 20 20" }, "icon-plus": { "viewBox": "240 0 20 20" }, "icon-minus": { "viewBox": "260 0 20 20" }, @@ -17,6 +18,7 @@ "icon-avatar": { "viewBox": "320 0 20 20" }, "icon-nearby": { "viewBox": "340 0 20 20" }, "icon-geolocate": { "viewBox": "360 0 20 20" }, + "icon-out-link": { "viewBox": "380 0 20 20" }, "icon-bug": { "viewBox": "400 0 20 20" }, "icon-translate": { "viewBox": "420 0 20 20" }, "icon-help": { "viewBox": "460 0 20 20" }, @@ -28,6 +30,8 @@ "icon-point-shape": { "fill": "currentColor" }, "icon-line-shape": { "fill": "currentColor" }, "icon-area-shape": { "fill": "currentColor" }, + "icon-relation-shape": { "fill": "currentColor" }, + "icon-vertex-shape": { "fill": "currentColor" }, "icon-undo-shape": { "fill": "currentColor" }, "icon-redo-shape": { "fill": "currentColor" }, "icon-apply-shape": { "fill": "currentColor" }, @@ -141,7 +145,8 @@ "operation-orthogonalize": { "viewBox": "360 380 20 20", "x": "-10", "y": "-10" }, "operation-rotate": { "viewBox": "380 380 20 20", "x": "-10", "y": "-10" }, "operation-simplify": { "viewBox": "400 380 20 20", "x": "-10", "y": "-10" }, - "operation-continue": { "viewBox": "420 380 20 20", "x": "-10", "y": "-10" }, + "operation-smooth": { "viewBox": "420 380 20 20", "x": "-10", "y": "-10" }, + "operation-continue": { "viewBox": "440 380 20 20", "x": "-10", "y": "-10" }, "operation-delete-shape": { "fill": "inherit" }, "operation-circularize-shape": { "fill": "inherit" }, @@ -161,28 +166,16 @@ "operation-rotate-shape2": { "fill": "currentColor" }, "operation-simplify-shape": { "fill": "inherit" }, "operation-simplify-shape2": { "fill": "currentColor" }, + "operation-smooth-shape": { "fill": "inherit" }, + "operation-smooth-shape2": { "fill": "currentColor" }, "operation-continue-shape": { "fill": "inherit" }, "operation-continue-shape2": { "fill": "currentColor" }, "logo-twitter": { "viewBox": "200 400 60 60" }, "logo-facebook": { "viewBox": "260 400 60 60" }, "logo-google": { "viewBox": "320 400 60 60" }, - "logo-osm": { "viewBox": "200 460 100 100" }, - "logo-walkthrough": { "viewBox": "300 460 100 100" }, - "logo-features": { "viewBox": "400 460 100 100" }, - "logo-restore": { "viewBox": "500 480 80 80" }, - "logo-reset": { "viewBox": "580 480 80 80" }, "logo-twitter-shape": { "fill": "currentColor" }, "logo-facebook-shape": { "fill": "currentColor" }, - "logo-google-shape": { "fill": "currentColor" }, - "logo-osm-shape": { "fill": "currentColor" }, - "logo-walkthrough-shape": { "fill": "currentColor" }, - "logo-features-shape": { "fill": "currentColor" }, - "logo-restore-shape": { "fill": "currentColor" }, - "logo-reset-shape": { "fill": "currentColor" }, - - "poi-images": { "viewBox": "0 320 200 80" }, - "landuse-images": { "viewBox": "0 400 200 80" }, - "feature-images": { "viewBox": "0 480 200 80" } + "logo-google-shape": { "fill": "currentColor" } } diff --git a/svg/iD-sprite.svg b/svg/iD-sprite.svg index c386118f5..7e159dbba 100644 --- a/svg/iD-sprite.svg +++ b/svg/iD-sprite.svg @@ -103,10 +103,10 @@ - + - + @@ -131,8 +131,12 @@ - - + + + + + + @@ -1265,22 +1269,28 @@ - + - + - + - + - + - + + + + + + + diff --git a/test/spec/svg/icon.js b/test/spec/svg/icon.js index c8cc9451a..7a839896a 100644 --- a/test/spec/svg/icon.js +++ b/test/spec/svg/icon.js @@ -11,11 +11,9 @@ describe("iD.svg.Icon", function () { 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'); + it("classes the 'svg' and 'use' elements", function () { + selection.call(iD.svg.Icon('#icon-bug', 'svg-class', 'use-class')); + expect(selection.select('svg')).to.be.classed('icon svg-class'); + expect(selection.select('use')).to.be.classed('use-class'); }); - });