Restore almost all of the rest of the icons throughout the UI

This commit is contained in:
Bryan Housel
2015-10-31 01:38:39 -04:00
parent 27439208b1
commit 7a9acd84ee
29 changed files with 152 additions and 181 deletions
+26 -59
View File
@@ -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,
+2 -2
View File
@@ -1265,10 +1265,10 @@
<path d="M229.969,4.003 Q230.532,4.003 230.932,4.403 Q231.332,4.803 231.332,5.374 Q231.332,5.937 230.932,6.336 Q230.532,6.736 229.96,6.736 Q229.398,6.736 228.998,6.336 Q228.598,5.937 228.598,5.374 Q228.598,4.803 228.998,4.403 Q229.398,4.003 229.969,4.003 z M227.517,16.747 L227.517,16.018 Q228.51,15.982 228.664,15.895 Q228.818,15.807 228.862,15.402 Q228.932,14.849 228.932,12.959 Q228.932,12.142 228.906,11.447 L228.879,10.419 Q228.879,9.909 228.77,9.791 Q228.66,9.672 228.176,9.654 L227.517,9.628 L227.517,8.951 Q229.635,8.793 231.006,8.204 L231.226,8.38 Q231.103,10.059 231.103,13.267 Q231.103,15.121 231.165,15.508 Q231.208,15.78 231.327,15.859 Q231.446,15.938 232.483,16.018 L232.483,16.747 Q230.892,16.694 230.022,16.694 Q229.556,16.694 227.517,16.747 z" fill="currentColor" id="icon-inspect-shape"/>
</symbol>
<symbol id="icon-out-link" viewBox="200 0 20 20">
<symbol d="M210.326,3.582 L210.236,4.159 C210.228,4.214 210.221,4.262 210.206,4.37 L210.204,4.381 C210.198,4.421 210.195,4.472 210.195,4.534 L210.195,5.233 C210.195,5.311 210.206,5.398 210.229,5.496 L210.375,6.112 L205.128,6.112 C205.015,6.112 204.927,6.148 204.846,6.229 C204.761,6.314 204.726,6.4 204.726,6.516 L204.726,13.824 C204.726,13.94 204.761,14.026 204.844,14.108 C204.928,14.192 205.015,14.228 205.128,14.228 L213.65,14.228 C213.766,14.228 213.854,14.192 213.942,14.105 C214.026,14.023 214.062,13.937 214.062,13.824 L214.062,10.124 L214.864,10.73 C215.041,10.864 215.235,10.97 215.445,11.048 C215.661,11.126 215.88,11.169 216.107,11.175 L216.592,11.189 L216.592,13.824 C216.592,14.226 216.511,14.61 216.349,14.972 C216.191,15.318 215.979,15.626 215.715,15.89 C215.452,16.154 215.145,16.364 214.796,16.522 C214.44,16.679 214.057,16.758 213.65,16.758 L205.128,16.758 C204.729,16.758 204.345,16.68 203.982,16.522 C203.625,16.366 203.313,16.153 203.052,15.886 C202.795,15.623 202.589,15.317 202.432,14.965 C202.275,14.607 202.196,14.224 202.196,13.824 L202.196,6.516 C202.196,6.116 202.274,5.734 202.431,5.369 C202.587,5.012 202.794,4.704 203.056,4.442 C203.317,4.181 203.628,3.973 203.982,3.82 C204.342,3.661 204.727,3.582 205.128,3.582 L210.326,3.582 z M216.852,3.582 L212.287,3.582 C212.032,3.582 211.8,3.677 211.614,3.853 C211.409,4.054 211.311,4.307 211.337,4.582 L211.335,5.216 C211.335,5.476 211.425,5.712 211.604,5.894 C211.782,6.079 212.022,6.175 212.287,6.175 L213.214,6.175 L207.961,11.443 C207.78,11.611 207.681,11.856 207.684,12.127 C207.691,12.388 207.783,12.617 207.958,12.795 L208.585,13.43 C208.782,13.616 209.016,13.705 209.271,13.705 C209.53,13.705 209.765,13.613 209.945,13.433 L215.211,8.181 L215.211,9.101 C215.211,9.358 215.307,9.593 215.489,9.775 C215.671,9.957 215.908,10.051 216.17,10.051 L216.852,10.051 C217.069,10.075 217.317,9.982 217.512,9.793 C217.704,9.605 217.804,9.367 217.804,9.101 L217.804,4.534 C217.804,4.284 217.705,4.054 217.525,3.871 C217.346,3.685 217.111,3.582 216.852,3.582 z" fill="#000000" id="icon-out-link" viewBox="200 0 20 20"/>
<path d="M210.326,3.582 L210.236,4.159 C210.228,4.214 210.221,4.262 210.206,4.37 L210.204,4.381 C210.198,4.421 210.195,4.472 210.195,4.534 L210.195,5.233 C210.195,5.311 210.206,5.398 210.229,5.496 L210.375,6.112 L205.128,6.112 C205.015,6.112 204.927,6.148 204.846,6.229 C204.761,6.314 204.726,6.4 204.726,6.516 L204.726,13.824 C204.726,13.94 204.761,14.026 204.844,14.108 C204.928,14.192 205.015,14.228 205.128,14.228 L213.65,14.228 C213.766,14.228 213.854,14.192 213.942,14.105 C214.026,14.023 214.062,13.937 214.062,13.824 L214.062,10.124 L214.864,10.73 C215.041,10.864 215.235,10.97 215.445,11.048 C215.661,11.126 215.88,11.169 216.107,11.175 L216.592,11.189 L216.592,13.824 C216.592,14.226 216.511,14.61 216.349,14.972 C216.191,15.318 215.979,15.626 215.715,15.89 C215.452,16.154 215.145,16.364 214.796,16.522 C214.44,16.679 214.057,16.758 213.65,16.758 L205.128,16.758 C204.729,16.758 204.345,16.68 203.982,16.522 C203.625,16.366 203.313,16.153 203.052,15.886 C202.795,15.623 202.589,15.317 202.432,14.965 C202.275,14.607 202.196,14.224 202.196,13.824 L202.196,6.516 C202.196,6.116 202.274,5.734 202.431,5.369 C202.587,5.012 202.794,4.704 203.056,4.442 C203.317,4.181 203.628,3.973 203.982,3.82 C204.342,3.661 204.727,3.582 205.128,3.582 L210.326,3.582 z M216.852,3.582 L212.287,3.582 C212.032,3.582 211.8,3.677 211.614,3.853 C211.409,4.054 211.311,4.307 211.337,4.582 L211.335,5.216 C211.335,5.476 211.425,5.712 211.604,5.894 C211.782,6.079 212.022,6.175 212.287,6.175 L213.214,6.175 L207.961,11.443 C207.78,11.611 207.681,11.856 207.684,12.127 C207.691,12.388 207.783,12.617 207.958,12.795 L208.585,13.43 C208.782,13.616 209.016,13.705 209.271,13.705 C209.53,13.705 209.765,13.613 209.945,13.433 L215.211,8.181 L215.211,9.101 C215.211,9.358 215.307,9.593 215.489,9.775 C215.671,9.957 215.908,10.051 216.17,10.051 L216.852,10.051 C217.069,10.075 217.317,9.982 217.512,9.793 C217.704,9.605 217.804,9.367 217.804,9.101 L217.804,4.534 C217.804,4.284 217.705,4.054 217.525,3.871 C217.346,3.685 217.111,3.582 216.852,3.582 z" fill="currentColor" id="icon-out-link-shape"/>
</symbol>
<symbol id="icon-close" viewBox="160 0 20 20">
<path d="M174.462,4.323 L174.981,4.615 C175.608,5.157 175.676,6.105 175.135,6.731 L171.983,10.375 L175.135,14.019 C175.676,14.645 175.608,15.593 174.981,16.135 C174.355,16.676 173.407,16.608 172.865,15.981 L170,12.668 L167.135,15.981 C166.593,16.608 165.645,16.676 165.019,16.135 C164.392,15.593 164.324,14.645 164.865,14.019 L168.017,10.375 L164.865,6.731 C164.324,6.105 164.392,5.157 165.019,4.615 C165.645,4.074 166.593,4.142 167.135,4.769 L170,8.082 L172.865,4.769 C173.634,4.174 173.138,4.419 174.462,4.323 z" fill="currentColor" id="icon-save-shape"/>
<path d="M174.462,4.323 L174.981,4.615 C175.608,5.157 175.676,6.105 175.135,6.731 L171.983,10.375 L175.135,14.019 C175.676,14.645 175.608,15.593 174.981,16.135 C174.355,16.676 173.407,16.608 172.865,15.981 L170,12.668 L167.135,15.981 C166.593,16.608 165.645,16.676 165.019,16.135 C164.392,15.593 164.324,14.645 164.865,14.019 L168.017,10.375 L164.865,6.731 C164.324,6.105 164.392,5.157 165.019,4.615 C165.645,4.074 166.593,4.142 167.135,4.769 L170,8.082 L172.865,4.769 C173.634,4.174 173.138,4.419 174.462,4.323 z" fill="currentColor" id="icon-close-shape"/>
</symbol>
<symbol id="icon-save" viewBox="140 0 20 20">
<path d="M150.02,6.5 C150.849,6.5 151.521,7.172 151.52,8 L151.52,15 C151.521,15.828 150.849,16.5 150.02,16.5 C149.192,16.5 148.521,15.828 148.52,15 L148.52,8 C148.521,7.172 149.192,6.5 150.02,6.5 z M145,8 L150.026,3 L155,8 z" fill="currentColor" id="icon-save-shape"/>

Before

Width:  |  Height:  |  Size: 219 KiB

After

Width:  |  Height:  |  Size: 219 KiB

+6 -8
View File
@@ -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) {
+5 -4
View File
@@ -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);
};
};
+2 -2
View File
@@ -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')
+2 -2
View File
@@ -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
+6 -11
View File
@@ -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));
+6 -5
View File
@@ -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()
+1 -2
View File
@@ -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'));
+4 -6
View File
@@ -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');
+2 -4
View File
@@ -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');
};
};
+1 -3
View File
@@ -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');
+3 -7
View File
@@ -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()
+4 -2
View File
@@ -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')
+3 -4
View File
@@ -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'));
+5 -3
View File
@@ -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
+8 -5
View File
@@ -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')
+1 -2
View File
@@ -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() {
+4 -5
View File
@@ -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('&#9658;');
} 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();
+4 -2
View File
@@ -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();
+11 -7
View File
@@ -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() {
+9 -8
View File
@@ -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);
+9 -13
View File
@@ -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;
};
};
+4 -2
View File
@@ -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(); })
+7 -8
View File
@@ -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(_) {
+6 -2
View File
@@ -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');
Binary file not shown.
+2 -2
View File
@@ -1265,10 +1265,10 @@
<path d="M229.969,4.003 Q230.532,4.003 230.932,4.403 Q231.332,4.803 231.332,5.374 Q231.332,5.937 230.932,6.336 Q230.532,6.736 229.96,6.736 Q229.398,6.736 228.998,6.336 Q228.598,5.937 228.598,5.374 Q228.598,4.803 228.998,4.403 Q229.398,4.003 229.969,4.003 z M227.517,16.747 L227.517,16.018 Q228.51,15.982 228.664,15.895 Q228.818,15.807 228.862,15.402 Q228.932,14.849 228.932,12.959 Q228.932,12.142 228.906,11.447 L228.879,10.419 Q228.879,9.909 228.77,9.791 Q228.66,9.672 228.176,9.654 L227.517,9.628 L227.517,8.951 Q229.635,8.793 231.006,8.204 L231.226,8.38 Q231.103,10.059 231.103,13.267 Q231.103,15.121 231.165,15.508 Q231.208,15.78 231.327,15.859 Q231.446,15.938 232.483,16.018 L232.483,16.747 Q230.892,16.694 230.022,16.694 Q229.556,16.694 227.517,16.747 z" fill="#000000" id="icon-inspect-shape"/>
</g>
<g id="icon-out-link">
<path d="M210.326,3.582 L210.236,4.159 C210.228,4.214 210.221,4.262 210.206,4.37 L210.204,4.381 C210.198,4.421 210.195,4.472 210.195,4.534 L210.195,5.233 C210.195,5.311 210.206,5.398 210.229,5.496 L210.375,6.112 L205.128,6.112 C205.015,6.112 204.927,6.148 204.846,6.229 C204.761,6.314 204.726,6.4 204.726,6.516 L204.726,13.824 C204.726,13.94 204.761,14.026 204.844,14.108 C204.928,14.192 205.015,14.228 205.128,14.228 L213.65,14.228 C213.766,14.228 213.854,14.192 213.942,14.105 C214.026,14.023 214.062,13.937 214.062,13.824 L214.062,10.124 L214.864,10.73 C215.041,10.864 215.235,10.97 215.445,11.048 C215.661,11.126 215.88,11.169 216.107,11.175 L216.592,11.189 L216.592,13.824 C216.592,14.226 216.511,14.61 216.349,14.972 C216.191,15.318 215.979,15.626 215.715,15.89 C215.452,16.154 215.145,16.364 214.796,16.522 C214.44,16.679 214.057,16.758 213.65,16.758 L205.128,16.758 C204.729,16.758 204.345,16.68 203.982,16.522 C203.625,16.366 203.313,16.153 203.052,15.886 C202.795,15.623 202.589,15.317 202.432,14.965 C202.275,14.607 202.196,14.224 202.196,13.824 L202.196,6.516 C202.196,6.116 202.274,5.734 202.431,5.369 C202.587,5.012 202.794,4.704 203.056,4.442 C203.317,4.181 203.628,3.973 203.982,3.82 C204.342,3.661 204.727,3.582 205.128,3.582 L210.326,3.582 z M216.852,3.582 L212.287,3.582 C212.032,3.582 211.8,3.677 211.614,3.853 C211.409,4.054 211.311,4.307 211.337,4.582 L211.335,5.216 C211.335,5.476 211.425,5.712 211.604,5.894 C211.782,6.079 212.022,6.175 212.287,6.175 L213.214,6.175 L207.961,11.443 C207.78,11.611 207.681,11.856 207.684,12.127 C207.691,12.388 207.783,12.617 207.958,12.795 L208.585,13.43 C208.782,13.616 209.016,13.705 209.271,13.705 C209.53,13.705 209.765,13.613 209.945,13.433 L215.211,8.181 L215.211,9.101 C215.211,9.358 215.307,9.593 215.489,9.775 C215.671,9.957 215.908,10.051 216.17,10.051 L216.852,10.051 C217.069,10.075 217.317,9.982 217.512,9.793 C217.704,9.605 217.804,9.367 217.804,9.101 L217.804,4.534 C217.804,4.284 217.705,4.054 217.525,3.871 C217.346,3.685 217.111,3.582 216.852,3.582 z" fill="#000000" id="icon-out-link"/>
<path d="M210.326,3.582 L210.236,4.159 C210.228,4.214 210.221,4.262 210.206,4.37 L210.204,4.381 C210.198,4.421 210.195,4.472 210.195,4.534 L210.195,5.233 C210.195,5.311 210.206,5.398 210.229,5.496 L210.375,6.112 L205.128,6.112 C205.015,6.112 204.927,6.148 204.846,6.229 C204.761,6.314 204.726,6.4 204.726,6.516 L204.726,13.824 C204.726,13.94 204.761,14.026 204.844,14.108 C204.928,14.192 205.015,14.228 205.128,14.228 L213.65,14.228 C213.766,14.228 213.854,14.192 213.942,14.105 C214.026,14.023 214.062,13.937 214.062,13.824 L214.062,10.124 L214.864,10.73 C215.041,10.864 215.235,10.97 215.445,11.048 C215.661,11.126 215.88,11.169 216.107,11.175 L216.592,11.189 L216.592,13.824 C216.592,14.226 216.511,14.61 216.349,14.972 C216.191,15.318 215.979,15.626 215.715,15.89 C215.452,16.154 215.145,16.364 214.796,16.522 C214.44,16.679 214.057,16.758 213.65,16.758 L205.128,16.758 C204.729,16.758 204.345,16.68 203.982,16.522 C203.625,16.366 203.313,16.153 203.052,15.886 C202.795,15.623 202.589,15.317 202.432,14.965 C202.275,14.607 202.196,14.224 202.196,13.824 L202.196,6.516 C202.196,6.116 202.274,5.734 202.431,5.369 C202.587,5.012 202.794,4.704 203.056,4.442 C203.317,4.181 203.628,3.973 203.982,3.82 C204.342,3.661 204.727,3.582 205.128,3.582 L210.326,3.582 z M216.852,3.582 L212.287,3.582 C212.032,3.582 211.8,3.677 211.614,3.853 C211.409,4.054 211.311,4.307 211.337,4.582 L211.335,5.216 C211.335,5.476 211.425,5.712 211.604,5.894 C211.782,6.079 212.022,6.175 212.287,6.175 L213.214,6.175 L207.961,11.443 C207.78,11.611 207.681,11.856 207.684,12.127 C207.691,12.388 207.783,12.617 207.958,12.795 L208.585,13.43 C208.782,13.616 209.016,13.705 209.271,13.705 C209.53,13.705 209.765,13.613 209.945,13.433 L215.211,8.181 L215.211,9.101 C215.211,9.358 215.307,9.593 215.489,9.775 C215.671,9.957 215.908,10.051 216.17,10.051 L216.852,10.051 C217.069,10.075 217.317,9.982 217.512,9.793 C217.704,9.605 217.804,9.367 217.804,9.101 L217.804,4.534 C217.804,4.284 217.705,4.054 217.525,3.871 C217.346,3.685 217.111,3.582 216.852,3.582 z" fill="#000000" id="icon-out-link-shape"/>
</g>
<g id="icon-close">
<path d="M174.462,4.323 L174.981,4.615 C175.608,5.157 175.676,6.105 175.135,6.731 L171.983,10.375 L175.135,14.019 C175.676,14.645 175.608,15.593 174.981,16.135 C174.355,16.676 173.407,16.608 172.865,15.981 L170,12.668 L167.135,15.981 C166.593,16.608 165.645,16.676 165.019,16.135 C164.392,15.593 164.324,14.645 164.865,14.019 L168.017,10.375 L164.865,6.731 C164.324,6.105 164.392,5.157 165.019,4.615 C165.645,4.074 166.593,4.142 167.135,4.769 L170,8.082 L172.865,4.769 C173.634,4.174 173.138,4.419 174.462,4.323 z" fill="#000000" id="icon-save-shape"/>
<path d="M174.462,4.323 L174.981,4.615 C175.608,5.157 175.676,6.105 175.135,6.731 L171.983,10.375 L175.135,14.019 C175.676,14.645 175.608,15.593 174.981,16.135 C174.355,16.676 173.407,16.608 172.865,15.981 L170,12.668 L167.135,15.981 C166.593,16.608 165.645,16.676 165.019,16.135 C164.392,15.593 164.324,14.645 164.865,14.019 L168.017,10.375 L164.865,6.731 C164.324,6.105 164.392,5.157 165.019,4.615 C165.645,4.074 166.593,4.142 167.135,4.769 L170,8.082 L172.865,4.769 C173.634,4.174 173.138,4.419 174.462,4.323 z" fill="#000000" id="icon-close-shape"/>
</g>
<g id="icon-save">
<path d="M150.02,6.5 C150.849,6.5 151.521,7.172 151.52,8 L151.52,15 C151.521,15.828 150.849,16.5 150.02,16.5 C149.192,16.5 148.521,15.828 148.52,15 L148.52,8 C148.521,7.172 149.192,6.5 150.02,6.5 z M145,8 L150.026,3 L155,8 z" fill="#000000" id="icon-save-shape"/>

Before

Width:  |  Height:  |  Size: 214 KiB

After

Width:  |  Height:  |  Size: 214 KiB

+9 -1
View File
@@ -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');
});
});