Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic line previews in line preset icons #5888

Merged
merged 9 commits into from
Feb 14, 2019
Merged

Dynamic line previews in line preset icons #5888

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
041e05e
Make the line component of the line preset icons dynamic and match th…
quincylvania Feb 13, 2019
f443144
Update preset icons to use same tag classes as map SVG
quincylvania Feb 13, 2019
09ec7ea
Remove redundant line preset icons
quincylvania Feb 13, 2019
a3099fa
Tweak line preset icon css
quincylvania Feb 13, 2019
1e7d37c
Make preset icon lines visible on the light background
quincylvania Feb 13, 2019
ed95faf
Add endpoint vertices to the preset icon line
quincylvania Feb 13, 2019
d63430e
Line preset icons:
quincylvania Feb 14, 2019
d0c29f8
Tweak line icon display
quincylvania Feb 14, 2019
7c34a85
Fix rtl layout for line preset icons
quincylvania Feb 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions css/20_map.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,8 +177,10 @@ g.vertex.selected .shadow {

/* lines */
.preset-icon .icon.iD-other-line {
color: #fff;
fill: #777;
color: #989898;
}
.preset-icon-line path.casing {
stroke: #afafaf;
}

path.line {
Expand Down Expand Up @@ -322,4 +324,3 @@ g.vertex.highlighted .shadow {
.surface.tr g.vertex.related.only .shadow {
stroke: #68f;
}

6 changes: 4 additions & 2 deletions css/25_areas.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ path.stroke.tag-leisure-garden,
path.stroke.tag-leisure-park,
path.stroke.tag-landuse-forest,
path.stroke.tag-landuse-wood,
path.stroke.tag-landuse-grass {
path.stroke.tag-landuse-grass,
path.stroke.tag-barrier-hedge {
stroke: rgb(140, 208, 95);
}
path.fill.tag-landuse,
Expand All @@ -46,7 +47,8 @@ path.fill.tag-leisure-garden,
path.fill.tag-leisure-park,
path.fill.tag-landuse-forest,
path.fill.tag-natural-wood,
path.fill.tag-landuse-grass {
path.fill.tag-landuse-grass,
path.fill.tag-barrier-hedge {
stroke: rgba(140, 208, 95, 0.3);
fill: rgba(140, 208, 95, 0.3);
}
Expand Down
97 changes: 57 additions & 40 deletions css/30_highways.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ path.line.stroke.tag-highway {
stroke-width: 5;
}

.preset-icon .icon.iD-highway-motorway,
.preset-icon .icon.iD-highway-motorway-link {
.preset-icon .icon.tag-highway-motorway,
.preset-icon .icon.tag-highway-motorway_link {
color: #CF2081;
fill: #70372f;
}
Expand All @@ -48,8 +48,8 @@ path.line.casing.tag-motorway {
stroke: #70372f;
}

.preset-icon .icon.iD-highway-trunk,
.preset-icon .icon.iD-highway-trunk-link {
.preset-icon .icon.tag-highway-trunk,
.preset-icon .icon.tag-highway-trunk_link {
color: #DD2F22;
fill: #70372f;
}
Expand All @@ -64,8 +64,8 @@ path.line.casing.tag-trunk {
stroke: #70372f;
}

.preset-icon .icon.iD-highway-primary,
.preset-icon .icon.iD-highway-primary-link {
.preset-icon .icon.tag-highway-primary,
.preset-icon .icon.tag-highway-primary_link {
color: #F99806;
fill: #70372f;
}
Expand All @@ -80,8 +80,8 @@ path.line.casing.tag-primary {
stroke: #70372f;
}

.preset-icon .icon.iD-highway-secondary,
.preset-icon .icon.iD-highway-secondary-link {
.preset-icon .icon.tag-highway-secondary,
.preset-icon .icon.tag-highway-secondary_link {
color: #F3F312;
fill: #70372f;
}
Expand All @@ -96,8 +96,8 @@ path.line.casing.tag-secondary {
stroke: #70372f;
}

.preset-icon .icon.iD-highway-tertiary,
.preset-icon .icon.iD-highway-tertiary-link {
.preset-icon .icon.tag-highway-tertiary,
.preset-icon .icon.tag-highway-tertiary_link {
color: #FFF9B3;
fill: #70372f;
}
Expand All @@ -112,8 +112,8 @@ path.line.casing.tag-tertiary {
stroke: #70372f;
}

.legacy-carto .preset-icon .icon.iD-highway-motorway,
.legacy-carto .preset-icon .icon.iD-highway-motorway-link {
.legacy-carto .preset-icon .icon.tag-highway-motorway,
.legacy-carto .preset-icon .icon.tag-highway-motorway_link {
color: #58a9ed;
fill: #2c5476;
}
Expand All @@ -128,8 +128,8 @@ path.line.casing.tag-tertiary {
stroke: #2c5476;
}

.legacy-carto .preset-icon .icon.iD-highway-trunk,
.legacy-carto .preset-icon .icon.iD-highway-trunk-link {
.legacy-carto .preset-icon .icon.tag-highway-trunk,
.legacy-carto .preset-icon .icon.tag-highway-trunk_link {
color: #8cd05f;
fill: #46682f;
}
Expand All @@ -144,8 +144,8 @@ path.line.casing.tag-tertiary {
stroke: #46682f;
}

.legacy-carto .preset-icon .icon.iD-highway-primary,
.legacy-carto .preset-icon .icon.iD-highway-primary-link {
.legacy-carto .preset-icon .icon.tag-highway-primary,
.legacy-carto .preset-icon .icon.tag-highway-primary_link {
color: #e06d5f;
fill: #70372f;
}
Expand All @@ -160,8 +160,8 @@ path.line.casing.tag-tertiary {
stroke: #70372f;
}

.legacy-carto .preset-icon .icon.iD-highway-secondary,
.legacy-carto .preset-icon .icon.iD-highway-secondary-link {
.legacy-carto .preset-icon .icon.tag-highway-secondary,
.legacy-carto .preset-icon .icon.tag-highway-secondary_link {
color: #eab056;
fill: #75582b;
}
Expand All @@ -176,8 +176,8 @@ path.line.casing.tag-tertiary {
stroke: #75582b;
}

.legacy-carto .preset-icon .icon.iD-highway-tertiary,
.legacy-carto .preset-icon .icon.iD-highway-tertiary-link {
.legacy-carto .preset-icon .icon.tag-highway-tertiary,
.legacy-carto .preset-icon .icon.tag-highway-tertiary_link {
color: #ffff7e;
fill: #7f7f3f;
}
Expand All @@ -192,7 +192,7 @@ path.line.casing.tag-tertiary {
stroke: #7f7f3f;
}

.preset-icon .icon.iD-highway-residential {
.preset-icon .icon.tag-highway-residential {
color: #fff;
fill: #444;
}
Expand All @@ -205,7 +205,7 @@ path.line.casing.tag-residential {
stroke: #444;
}

.preset-icon .icon.iD-highway-unclassified {
.preset-icon .icon.tag-highway-unclassified {
color: #dca;
fill: #444;
}
Expand Down Expand Up @@ -387,7 +387,7 @@ path.line.stroke.tag-steps {
}


.preset-icon .icon.iD-highway-living-street {
.preset-icon .icon.tag-highway-living-street {
color: #bbb;
fill: #ddd;
}
Expand All @@ -400,8 +400,8 @@ path.line.casing.tag-living_street {
stroke: #fff;
}

.preset-icon .icon.iD-highway-footway.tag-highway-corridor,
.preset-icon .icon.iD-highway-footway.tag-highway-pedestrian {
.preset-icon .icon.tag-highway-corridor,
.preset-icon .icon.tag-highway-pedestrian {
color: #8cd05f;
fill: #fff;
}
Expand Down Expand Up @@ -431,7 +431,7 @@ path.line.casing.tag-pedestrian.tag-unpaved {
stroke-dasharray: none;
}

.preset-icon .icon.iD-highway-road {
.preset-icon .icon.tag-highway-road {
color: #9e9e9e;
fill: #666;
}
Expand All @@ -444,7 +444,7 @@ path.line.casing.tag-road {
stroke: #666;
}

.preset-icon .icon.iD-highway-service {
.preset-icon .icon.tag-highway-service {
color: #fff;
fill: #666;
}
Expand All @@ -459,8 +459,8 @@ path.line.casing.tag-service {

/* special service roads and bus guideways */
/* with `service=* tag` (e.g. parking_aisle, alley, drive-through) */
.preset-icon .icon.iD-highway-bus_guideway,
.preset-icon .icon.iD-highway-service.tag-service {
.preset-icon .icon.tag-highway-bus_guideway,
.preset-icon .icon.tag-highway-service.tag-service {
color: #dca;
fill: #666;
}
Expand All @@ -475,7 +475,7 @@ path.line.casing.tag-service.tag-service {
stroke: #666;
}

.preset-icon .icon.iD-highway-track {
.preset-icon .icon.tag-highway-track {
color: #eaeaea;
fill: #c5b59f;
}
Expand Down Expand Up @@ -521,7 +521,7 @@ path.line.casing.tag-highway-bridleway.tag-unpaved {
}

.preset-icon .icon.iD-category-path,
.preset-icon .icon.iD-highway-path {
.preset-icon .icon.tag-highway-path {
color: #988;
fill: #dca;
}
Expand All @@ -531,39 +531,49 @@ path.line.stroke.tag-highway-path {

.preset-icon .icon.tag-route-foot,
.preset-icon .icon.tag-route-hiking,
.preset-icon .icon.iD-highway-footway {
.preset-icon .icon.tag-highway-footway {
color: #988;
fill: #fff;
}
path.line.stroke.tag-highway-footway {
path.line.stroke.tag-highway-footway,
.preset-icon-line path.casing.tag-highway-footway {
stroke: #988;
}

.preset-icon-line path.stroke.tag-highway-footway {
stroke: #fff;
}

.preset-icon .icon.tag-route-bicycle,
.preset-icon .icon.iD-highway-cycleway {
.preset-icon .icon.tag-highway-cycleway {
color: #58a9ed;
fill: #fff;
}
path.line.stroke.tag-highway-cycleway {
path.line.stroke.tag-highway-cycleway,
.preset-icon-line path.casing.tag-highway-cycleway {
stroke: #58a9ed;
}
.preset-icon-line path.stroke.tag-highway-cycleway {
stroke: #fff;
}

.preset-icon .icon.tag-route-horse,
.preset-icon .icon.iD-highway-bridleway {
.preset-icon .icon.tag-highway-bridleway {
color: #e06d5f;
fill: #fff;
}
path.line.stroke.tag-highway-bridleway {
path.line.stroke.tag-highway-bridleway,
.preset-icon-line path.casing.tag-highway-bridleway {
stroke: #e06d5f;
}
.preset-icon-line path.stroke.tag-highway-bridleway {
stroke: #fff;
}

.preset-icon .icon.iD-highway-steps {
.preset-icon .icon.tag-highway-steps {
color: #81d25c;
fill: #fff;
}
path.line.stroke.tag-highway-steps {
stroke: #81d25c;
stroke-linecap: butt;
stroke-dasharray: 3, 3;
}
Expand All @@ -576,6 +586,13 @@ path.line.casing.tag-highway-steps.tag-unpaved {
stroke-linecap: round;
stroke-dasharray: none;
}
path.line.stroke.tag-highway-steps,
.preset-icon-line path.line.casing.tag-highway-steps {
stroke: #81d25c;
}
.preset-icon-line path.line.stroke.tag-highway-steps {
stroke: #fff;
}

/* highway midpoints */
g.midpoint.tag-highway-corridor .fill,
Expand Down
8 changes: 3 additions & 5 deletions css/40_railways.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ path.line.stroke.tag-railway {
stroke-width: 2;
stroke-dasharray: 6,6;
}

.preset-icon-line path.line.stroke.tag-railway:not(.tag-status) {
stroke-dasharray: 6;
}

/* styles */
path.line.casing.tag-railway {
Expand All @@ -59,10 +61,6 @@ path.line.stroke.tag-railway-abandoned {
}


.preset-icon .icon.tag-railway-subway {
color: #222;
fill: #bbb;
}
path.line.casing.tag-railway-subway {
stroke: #222;
}
Expand Down
Loading