From 2685b6e7341d67578611deb12ce1e83fdf142c6b Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Mon, 16 Nov 2020 02:33:44 +0100 Subject: [PATCH] Fix ways: they show up again --- Logic/FilteredLayer.ts | 80 +++++++++++++++++-------------------- UI/Image/ImageUploadFlow.ts | 20 ++-------- css/imageUploadFlow.css | 23 +++++++++++ css/userbadge.css | 2 +- index.css | 6 +-- index.html | 1 + 6 files changed, 67 insertions(+), 65 deletions(-) create mode 100644 css/imageUploadFlow.css diff --git a/Logic/FilteredLayer.ts b/Logic/FilteredLayer.ts index 12522ab..ac70ae5 100644 --- a/Logic/FilteredLayer.ts +++ b/Logic/FilteredLayer.ts @@ -128,52 +128,45 @@ export class FilteredLayer { let self = this; console.log(data); this._geolayer = L.geoJSON(data, { - /* style: feature => { - self.layerDef.GenerateLeafletStyle(feature.properties); - return { - color: "#f00", - weight: 4 - } - },*/ - /* - pointToLayer: function (feature, latLng) { - // Point to layer converts the 'point' to a layer object - as the geojson layer natively cannot handle points - // Click handling is done in the next step + style: feature => + self.layerDef.GenerateLeafletStyle(feature.properties), + pointToLayer: function (feature, latLng) { + // Point to layer converts the 'point' to a layer object - as the geojson layer natively cannot handle points + // Click handling is done in the next step - const style = self.layerDef.GenerateLeafletStyle(feature.properties); - let marker; - if (style.icon === undefined) { - marker = L.circle(latLng, { - radius: 25, - color: style.color - }); - } else if (style.icon.iconUrl.startsWith("$circle")) { - marker = L.circle(latLng, { - radius: 25, - color: style.color - }); - } else { - if (style.icon.iconSize === undefined) { - style.icon.iconSize = [50, 50] + const style = self.layerDef.GenerateLeafletStyle(feature.properties); + let marker; + if (style.icon === undefined) { + marker = L.circle(latLng, { + radius: 25, + color: style.color + }); + } else if (style.icon.iconUrl.startsWith("$circle")) { + marker = L.circle(latLng, { + radius: 25, + color: style.color + }); + } else { + if (style.icon.iconSize === undefined) { + style.icon.iconSize = [50, 50] + } + + marker = L.marker(latLng, { + icon: L.icon(style.icon) + }); } + return marker; + }, + onEachFeature: function (feature, layer: Layer) { - marker = L.marker(latLng, { - icon: L.icon(style.icon) - }); - } - return marker; - },*/ -/* - onEachFeature: function (feature, layer:Layer) { - - layer.on("click", (e) => { - if (layer.getPopup() === undefined - && (window.screen.availHeight > 600 || window.screen.availWidth > 600) // We DON'T trigger this code on small screens! No need to create a popup - ) { - const popup = L.popup({ - autoPan: true, - closeOnEscapeKey: true, - }, layer); + layer.on("click", (e) => { + if (layer.getPopup() === undefined + && (window.screen.availHeight > 600 || window.screen.availWidth > 600) // We DON'T trigger this code on small screens! No need to create a popup + ) { + const popup = L.popup({ + autoPan: true, + closeOnEscapeKey: true, + }, layer); // @ts-ignore popup.setLatLng(e.latlng) @@ -196,7 +189,6 @@ export class FilteredLayer { L.DomEvent.stop(e); }); } - */ } ) ; diff --git a/UI/Image/ImageUploadFlow.ts b/UI/Image/ImageUploadFlow.ts index aa75f7b..21fed61 100644 --- a/UI/Image/ImageUploadFlow.ts +++ b/UI/Image/ImageUploadFlow.ts @@ -103,21 +103,8 @@ export class ImageUploadFlow extends UIElement { const label = new Combine([ Svg.camera_plus_svg().SetStyle("width: 36px;height: 36px;padding: 0.1em;margin-top: 5px;border-radius: 0;float: left;display:block"), Translations.t.image.addPicture - .SetStyle("width:max-content;font-size: 28px;" + - "font-weight: bold;" + - "float: left;" + - "margin-top: 4px;" + - "padding-top: 4px;" + - "padding-bottom: 4px;" + - "padding-left: 13px;"), - - ]).SetStyle(" display: flex;" + - "cursor:pointer;" + - "padding: 0.5em;" + - "border-radius: 1em;" + - "border: 3px solid var(--foreground-color);" + - "box-sizing:border-box;") - + ]).SetClass("image-upload-flow-button") + const actualInputElement = ``; @@ -131,7 +118,8 @@ export class ImageUploadFlow extends UIElement { return new Combine([ form, extraInfo - ]).SetStyle("margin-top: 1em;margin-bottom: 2em;text-align: center;") + ]).SetClass("image-upload-flow") + .SetStyle("margin-top: 1em;margin-bottom: 2em;text-align: center;") .Render(); } diff --git a/css/imageUploadFlow.css b/css/imageUploadFlow.css new file mode 100644 index 0000000..c36b33b --- /dev/null +++ b/css/imageUploadFlow.css @@ -0,0 +1,23 @@ +.image-upload-flow-button span { + width: max-content; + font-size: 28px; + font-weight: bold; + margin-top: 4px; + padding-top: 4px; + padding-bottom: 4px; + padding-left: 13px; +} + +.image-upload-flow-button { + display: flex; + cursor: pointer; + padding: 0.5em; + border-radius: 1em; + border: 3px solid var(--foreground-color); + box-sizing: border-box; +} + +.image-upload-flow svg { + fill: var(--foreground-color); + stroke: var(--foreground-color); +} diff --git a/css/userbadge.css b/css/userbadge.css index 49ddab2..ca36f51 100644 --- a/css/userbadge.css +++ b/css/userbadge.css @@ -46,7 +46,7 @@ .userstats svg { width: 1em; height: 1em; - border-radius: 0; + border-radius: 0; display: block; } diff --git a/index.css b/index.css index 8ddaa20..4fbd1ee 100644 --- a/index.css +++ b/index.css @@ -25,14 +25,12 @@ a { color: var(--foreground-color) } -svg { +#topleft-tools svg { fill: var(--foreground-color) !important; stroke: var(--foreground-color) !important; - width: 100%; - height: 100%; } -svg path { +#topleft-tools svg path { fill: var(--foreground-color) !important; stroke: var(--foreground-color) !important; } diff --git a/index.html b/index.html index 70be6c3..3751ce6 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,7 @@ +