mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-12 16:52:50 +00:00
Move some css rules around, add hash and geometry.type to css classlist
This commit is contained in:
Bryan Housel
@@ -306,33 +306,3 @@ g.turn circle {
|
||||
stroke: #68f;
|
||||
}
|
||||
|
||||
|
||||
/* Other Data (gpx, kml, geojson, mvt, pbf) */
|
||||
|
||||
.layer-mapdata {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.layer-mapdata path {
|
||||
stroke: #ff26d4;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.layer-mapdata text.label-halo,
|
||||
.layer-mapdata text.label {
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
dominant-baseline: middle;
|
||||
}
|
||||
|
||||
.layer-mapdata text.label {
|
||||
fill: #ff26d4;
|
||||
}
|
||||
|
||||
.layer-mapdata text.label-halo {
|
||||
opacity: 0.7;
|
||||
stroke: #000;
|
||||
stroke-width: 5px;
|
||||
stroke-miterlimit: 1;
|
||||
}
|
||||
|
||||
141
css/65_data.css
141
css/65_data.css
@@ -41,140 +41,49 @@
|
||||
.note-header-icon .preset-icon-28 {
|
||||
top: 18px;
|
||||
}
|
||||
|
||||
.note-header-icon .note-icon-annotation {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 22px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.note-header-icon .note-icon-annotation .icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
|
||||
/* OSM Note UI */
|
||||
.note-header {
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
/* Custom Map Data (geojson, gpx, kml, vector tile) */
|
||||
|
||||
.layer-mapdata {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.note-header-icon {
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
flex: 0 0 62px;
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-right: 1px solid #ccc;
|
||||
border-radius: 5px 0 0 5px;
|
||||
.layer-mapdata path {
|
||||
stroke: #ff26d4;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
}
|
||||
[dir='rtl'] .note-header-icon {
|
||||
border-right: unset;
|
||||
border-left: 1px solid #ccc;
|
||||
border-radius: 0 5px 5px 0;
|
||||
.layer-mapdata path.MultiPolygon,
|
||||
.layer-mapdata path.Polygon {
|
||||
stroke-width: 1;
|
||||
fill: #ff26d4;
|
||||
fill-opacity: 0.2;
|
||||
}
|
||||
|
||||
.note-header-icon .icon-wrap {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.note-header-label {
|
||||
background-color: #f6f6f6;
|
||||
padding: 0 15px;
|
||||
flex: 1 1 100%;
|
||||
font-size: 14px;
|
||||
.layer-mapdata text.label-halo,
|
||||
.layer-mapdata text.label {
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
border-radius: 0 5px 5px 0;
|
||||
dominant-baseline: middle;
|
||||
}
|
||||
[dir='rtl'] .note-header-label {
|
||||
border-radius: 5px 0 0 5px;
|
||||
.layer-mapdata text.label {
|
||||
fill: #ff26d4;
|
||||
}
|
||||
.layer-mapdata text.label-halo {
|
||||
opacity: 0.7;
|
||||
stroke: #000;
|
||||
stroke-width: 5px;
|
||||
stroke-miterlimit: 1;
|
||||
}
|
||||
|
||||
.note-category {
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
.comments-container {
|
||||
background: #ececec;
|
||||
padding: 1px 10px;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.comment {
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 10px auto;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
.comment-avatar {
|
||||
padding: 10px;
|
||||
flex: 0 0 62px;
|
||||
}
|
||||
.comment-avatar .icon.comment-avatar-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: cover;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.comment-main {
|
||||
padding: 10px 10px 10px 0;
|
||||
flex: 1 1 100%;
|
||||
flex-flow: column nowrap;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
[dir='rtl'] .comment-main {
|
||||
padding: 10px 0 10px 10px;
|
||||
}
|
||||
|
||||
.comment-metadata {
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.comment-author {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.comment-date {
|
||||
color: #aaa;
|
||||
}
|
||||
.comment-text {
|
||||
color: #333;
|
||||
margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
max-height: 250px;
|
||||
}
|
||||
.comment-text::-webkit-scrollbar {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.note-save {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.note-save #new-comment-input {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
max-height: 300px;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.note-save .detail-section {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.note-report {
|
||||
float: right;
|
||||
}
|
||||
|
||||
129
css/80_app.css
129
css/80_app.css
@@ -1204,7 +1204,7 @@ a.hide-toggle {
|
||||
}
|
||||
|
||||
|
||||
/* preset form basics */
|
||||
/* Preset Editor */
|
||||
|
||||
.preset-editor {
|
||||
overflow: hidden;
|
||||
@@ -2415,6 +2415,133 @@ input.key-trap {
|
||||
border: 1px solid rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
|
||||
/* OSM Note UI */
|
||||
.note-header {
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.note-header-icon {
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
flex: 0 0 62px;
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-right: 1px solid #ccc;
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
[dir='rtl'] .note-header-icon {
|
||||
border-right: unset;
|
||||
border-left: 1px solid #ccc;
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
.note-header-icon .icon-wrap {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.note-header-label {
|
||||
background-color: #f6f6f6;
|
||||
padding: 0 15px;
|
||||
flex: 1 1 100%;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
[dir='rtl'] .note-header-label {
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
|
||||
.note-category {
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
.comments-container {
|
||||
background: #ececec;
|
||||
padding: 1px 10px;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.comment {
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 10px auto;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
.comment-avatar {
|
||||
padding: 10px;
|
||||
flex: 0 0 62px;
|
||||
}
|
||||
.comment-avatar .icon.comment-avatar-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: cover;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.comment-main {
|
||||
padding: 10px 10px 10px 0;
|
||||
flex: 1 1 100%;
|
||||
flex-flow: column nowrap;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
[dir='rtl'] .comment-main {
|
||||
padding: 10px 0 10px 10px;
|
||||
}
|
||||
|
||||
.comment-metadata {
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.comment-author {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.comment-date {
|
||||
color: #aaa;
|
||||
}
|
||||
.comment-text {
|
||||
color: #333;
|
||||
margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
max-height: 250px;
|
||||
}
|
||||
.comment-text::-webkit-scrollbar {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.note-save {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.note-save #new-comment-input {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
max-height: 300px;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.note-save .detail-section {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.note-report {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Fullscreen button */
|
||||
div.full-screen {
|
||||
float: right;
|
||||
|
||||
@@ -37,9 +37,6 @@ function vtToGeoJSON(data, tile, mergeCache) {
|
||||
for (var i = 0; i < layer.length; i++) {
|
||||
var feature = layer.feature(i).toGeoJSON(tile.xyz[0], tile.xyz[1], tile.xyz[2]);
|
||||
var geometry = feature.geometry;
|
||||
if (layers.length > 1) {
|
||||
feature.properties.vt_layer = layerID;
|
||||
}
|
||||
|
||||
// Treat all Polygons as MultiPolygons
|
||||
if (geometry.type === 'Polygon') {
|
||||
@@ -59,9 +56,10 @@ function vtToGeoJSON(data, tile, mergeCache) {
|
||||
if (!feature.geometry.coordinates[0].length) continue; // not actually on this tile
|
||||
}
|
||||
|
||||
// force some unique id generation
|
||||
// Generate some unique IDs and add some metadata
|
||||
var featurehash = utilHashcode(stringify(feature));
|
||||
var propertyhash = utilHashcode(stringify(feature.properties || {}));
|
||||
feature.__layerID__ = layerID.replace(/[^_a-zA-Z0-9\-]/g, '_');
|
||||
feature.__featurehash__ = featurehash;
|
||||
feature.__propertyhash__ = propertyhash;
|
||||
features.push(feature);
|
||||
|
||||
@@ -151,6 +151,15 @@ export function svgData(projection, context, dispatch) {
|
||||
}
|
||||
|
||||
|
||||
function featureClasses(d) {
|
||||
return [
|
||||
'data' + d.__featurehash__,
|
||||
d.geometry.type,
|
||||
d.__layerID__ || ''
|
||||
].join(' ');
|
||||
}
|
||||
|
||||
|
||||
function drawData(selection) {
|
||||
var vtService = getService();
|
||||
var getPath = svgPath(projection).geojson;
|
||||
@@ -190,7 +199,7 @@ export function svgData(projection, context, dispatch) {
|
||||
// enter/update
|
||||
paths = paths.enter()
|
||||
.append('path')
|
||||
.attr('class', 'pathdata')
|
||||
.attr('class', function(d) { return 'pathdata ' + featureClasses(d); })
|
||||
.merge(paths)
|
||||
.attr('d', getPath);
|
||||
|
||||
@@ -216,7 +225,7 @@ export function svgData(projection, context, dispatch) {
|
||||
// enter/update
|
||||
labels = labels.enter()
|
||||
.append('text')
|
||||
.attr('class', textClass)
|
||||
.attr('class', function(d) { return textClass + ' ' + featureClasses(d); })
|
||||
.merge(labels)
|
||||
.text(function(d) {
|
||||
return d.properties.desc || d.properties.name;
|
||||
|
||||
Reference in New Issue
Block a user