CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-14 13:18:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

Introduce new container icon for errors

Browse Source 
As per my last commit, this icon differentiates errors from points and
still allows us to specifiy icons for errors to differentiate them amongst
eachother.

I learned quite a bit about SVGs and using them in HTML while
implementing this 😝Had some issues getting the icon to center in the
header so resorted to using a flexbox instead of absolute positioning
being used elsewhere.
This commit is contained in:
SilentSpike
2019-01-23 21:22:04 +00:00
parent 5d907c1e16
commit 54e02ec28d
3 changed files with 49 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/65_data.css
+12
View File
@@ -42,6 +42,18 @@
height: 15px;
}
/* adjustment for error icon */
.kr_error-header-icon .preset-icon-28 {
top: auto;
left: auto;
}
.kr_error-header-icon {
display: flex;
align-items: center;
justify-content: center;
}
/* Keep Right Errors
------------------------------------------------------- */
modules/svg/improveOSM.js
+9 -9
View File
@@ -19,8 +19,8 @@ export function svgImproveOSM(projection, context, dispatch) {
function markerPath(selection, klass) {
selection
.attr('class', klass)
.attr('transform', 'translate(-8, -23)')
.attr('d', 'M 17,8 C 17,13 11,21 8.5,23.5 C 6,21 0,13 0,8 C 0,4 4,-0.5 8.5,-0.5 C 13,-0.5 17,4 17,8 z');
.attr('transform', 'translate(-10, -28)')
.attr('points', '16,3 4,3 1,6 1,17 4,20 7,20 10,27 13,20 16,20 19,17.033 19,6');
}
@@ -124,25 +124,25 @@ export function svgImproveOSM(projection, context, dispatch) {
});
markersEnter
.append('path')
.append('polygon')
.call(markerPath, 'shadow');
markersEnter
.append('ellipse')
.attr('cx', 0.5)
.attr('cy', 1)
.attr('rx', 6.5)
.attr('cx', 0)
.attr('cy', 0)
.attr('rx', 4.5)
.attr('ry', 2)
.attr('class', 'stroke');
markersEnter
.append('path')
.append('polygon')
.attr('fill', 'currentColor')
.call(markerPath, 'qa_error-fill');
markersEnter
.append('use')
.attr('transform', 'translate(-5, -19)')
.attr('transform', 'translate(-5.5, -21)')
.attr('class', 'icon')
.attr('width', '11px')
.attr('height', '11px')
@@ -182,7 +182,7 @@ export function svgImproveOSM(projection, context, dispatch) {
.attr('width', '20px')
.attr('height', '30px')
.attr('x', '-10px')
.attr('y', '-26px')
.attr('y', '-28px')
.merge(targets)
.sort(sortY)
.attr('class', function(d) {
modules/ui/improveOSM_header.js
+28 -4
View File
@@ -41,12 +41,36 @@ export function uiImproveOsmHeader() {
.attr('class', 'kr_error-header-icon')
.classed('new', function(d) { return d.id < 0; });
iconEnter
.append('div')
var svgEnter = iconEnter
.append('svg')
.attr('width', '20px')
.attr('height', '30px')
.attr('viewbox', '0 0 20 30')
.attr('class', function(d) {
return 'preset-icon-28 qa_error ' + d.source + ' error_id-' + d.id + ' error_type-' + d.error_type + '-' + d.error_subtype;
})
.call(svgIcon('#iD-icon-bolt', 'qa_error-fill'));
});
svgEnter
.append('polygon')
.attr('fill', 'currentColor')
.attr('class', 'qa_error-fill')
.attr('points', '16,3 4,3 1,6 1,17 4,20 7,20 10,27 13,20 16,20 19,17.033 19,6');
svgEnter
.append('use')
.attr('width', '11px')
.attr('height', '11px')
.attr('transform', 'translate(4.5, 7)')
.attr('xlink:href', function(d) {
var picon = d.icon;
if (!picon) {
return '';
} else {
var isMaki = /^maki-/.test(picon);
return '#' + picon + (isMaki ? '-11' : '');
}
});
headerEnter
.append('div')