CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-26 01:47:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

explicit coloring of preset categories

Browse Source
This commit is contained in:
Martin Raifer
2021-11-12 15:46:49 +01:00
parent 0775c24c0a
commit cb96257c63
3 changed files with 58 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+2
View File
@@ -57,11 +57,13 @@ _Breaking developer changes, which may affect downstream projects or sites that
#### :mortar_board: Walkthrough / Help
#### :rocket: Presets
* Radio-button based presets fields can be in an non-unique state (e.g. a tunnel which is also a ford) – this is now rendered like a multi selection with conflicting states ([#8796])
* Add colours for preset categories ([#8799])
#### :hammer: Development
[#8781]: https://github.com/openstreetmap/iD/issues/8781
[#8792]: https://github.com/openstreetmap/iD/pull/8792
[#8796]: https://github.com/openstreetmap/iD/issues/8796
[#8799]: https://github.com/openstreetmap/iD/issues/8799
[#8800]: https://github.com/openstreetmap/iD/pull/8800
[#8805]: https://github.com/openstreetmap/iD/issues/8805
[#8807]: https://github.com/openstreetmap/iD/issues/8807
css/75_categories.css
+53
View File
@@ -0,0 +1,53 @@
svg.preset-icon-category-border path {
stroke-width: 1;
stroke: rgb(170, 170, 170);
fill: rgba(170, 170, 170, 0.3);
}
.preset-category-barrier svg.preset-icon-category-border path {
stroke: rgb(200, 144, 144);
fill: rgba(200, 144, 144, 0.3);
}
.preset-category-building svg.preset-icon-category-border path {
stroke: rgb(224, 110, 95);
fill: rgba(224, 110, 95, 0.3);
}
.preset-category-landuse svg.preset-icon-category-border path {
stroke: rgb(196, 189, 25);
fill: rgba(196, 189, 25, 0.3);
}
.preset-category-natural svg.preset-icon-category-border path,
.preset-category-playground svg.preset-icon-category-border path,
.preset-category-golf svg.preset-icon-category-border path {
stroke: rgb(140, 208, 95);
fill: rgba(140, 208, 95, 0.3);
}
.preset-category-water svg.preset-icon-category-border path,
.preset-category-waterway svg.preset-icon-category-border path {
stroke: rgb(119, 211, 222);
fill: rgba(119, 211, 222, 0.3);
}
.preset-category-utility svg.preset-icon-category-border path {
stroke: rgb(125, 125, 125);
fill: rgba(219, 219, 125, 0.3);
}
.preset-category-path svg.preset-icon-category-border path {
stroke: rgb(221, 221, 204);
fill: rgba(221, 221, 204, 0.3);
}
.preset-category-road_service svg.preset-icon-category-border path,
.preset-category-road_minor svg.preset-icon-category-border path,
.preset-category-road_major svg.preset-icon-category-border path {
stroke: #999;
}
.preset-category-rail svg.preset-icon-category-border path {
stroke: #555;
}
modules/ui/preset_icon.js
+3 -8
View File
@@ -77,21 +77,16 @@ export function uiPresetIcon() {
.attr('height', d)
.attr('viewBox', `0 0 ${d} ${d}`);
['fill', 'stroke'].forEach(klass => {
svgEnter
.append('path')
.attr('class', `area ${klass}`)
.attr('class', 'area')
.attr('d', 'M9.5,7.5 L25.5,7.5 L28.5,12.5 L49.5,12.5 C51.709139,12.5 53.5,14.290861 53.5,16.5 L53.5,43.5 C53.5,45.709139 51.709139,47.5 49.5,47.5 L10.5,47.5 C8.290861,47.5 6.5,45.709139 6.5,43.5 L6.5,12.5 L9.5,7.5 Z');
});
categoryBorder = categoryBorderEnter.merge(categoryBorder);
if (category) {
const tagClasses = svgTagClasses().getClassesString(category.members.collection[0].addTags, '');
categoryBorder.selectAll('path.stroke')
.attr('class', `area stroke ${tagClasses}`);
categoryBorder.selectAll('path.fill')
.attr('class', `area fill ${tagClasses}`);
categoryBorder.selectAll('path')
.attr('class', `area ${category.id}`);
}
}