From ef593654f4dbfb1219e163bd9809bdccda0b788f Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@gmail.com>
Date: Thu, 23 Jul 2020 16:28:19 +0200
Subject: [PATCH] Css tweaking

---
 Customizations/Layers/Park.ts |  2 +-
 UI/Base/Combine.ts            |  1 +
 UI/LayerSelection.ts          | 26 +++++++++++++++-----------
 UI/UserBadge.ts               |  4 +---
 index.css                     | 32 ++++++++------------------------
 index.ts                      | 15 +++++++--------
 6 files changed, 33 insertions(+), 47 deletions(-)

diff --git a/Customizations/Layers/Park.ts b/Customizations/Layers/Park.ts
index e2814a7..ba7a6c5 100644
--- a/Customizations/Layers/Park.ts
+++ b/Customizations/Layers/Park.ts
@@ -48,7 +48,7 @@ export class Park extends LayerDefinition {
     constructor() {
         super();
         this.name = "park";
-        this.icon = "./assets/tree_white_background.svg";
+        this.icon = "";
         this.overpassFilter =
             new Or([new Tag("leisure", "park"), new Tag("landuse", "village_green")]);
         this.newElementTags = [new Tag("leisure", "park"),
diff --git a/UI/Base/Combine.ts b/UI/Base/Combine.ts
index 649c497..3a469cd 100644
--- a/UI/Base/Combine.ts
+++ b/UI/Base/Combine.ts
@@ -3,6 +3,7 @@ import Translations from "../i18n/Translations";
 
 export default class Combine extends UIElement {
     private uiElements: (string | UIElement)[];
+    private clas: string = undefined;
 
     constructor(uiElements: (string | UIElement)[]) {
         super(undefined);
diff --git a/UI/LayerSelection.ts b/UI/LayerSelection.ts
index 299392c..e9408d4 100644
--- a/UI/LayerSelection.ts
+++ b/UI/LayerSelection.ts
@@ -12,20 +12,24 @@ export class LayerSelection extends UIElement{
       this._checkboxes = [];
       
       for (const layer of layers) {
-        this._checkboxes.push(new CheckBox(
-          new Combine([
-            `<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+          const checkbox = `<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M3 7.28571L10.8261 15L23 3" stroke="#003B8B" stroke-width="4" stroke-linejoin="round"/>
-            </svg>`,
-            `<img width="20" height="20" src="${layer.layerDef.icon}" alt="">`,
-            layer.layerDef.name]),
-          new Combine([
-            `<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            </svg>`;
+          let icon = "<img >";
+          if (layer.layerDef.icon && layer.layerDef.icon !== "") {
+              icon = `<img width="20" height="20" src="${layer.layerDef.icon}" alt="">`
+          }
+          const name = layer.layerDef.name;
+
+          this._checkboxes.push(new CheckBox(
+              new Combine([checkbox, icon, name]),
+              new Combine([
+                  `<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M3 7.28571L10.8261 15L23 3" stroke="#ffffff" stroke-width="4" stroke-linejoin="round"/>
             </svg>`,
-            `<img width="20" height="20" src="${layer.layerDef.icon}" alt="">`,
-            layer.layerDef.name]),
-          layer.isDisplayed));
+                  icon,
+                  layer.layerDef.name]),
+              layer.isDisplayed));
       }
     }
 
diff --git a/UI/UserBadge.ts b/UI/UserBadge.ts
index 7e85964..508bdb2 100644
--- a/UI/UserBadge.ts
+++ b/UI/UserBadge.ts
@@ -75,9 +75,7 @@ export class UserBadge extends UIElement {
 
         if (user.unreadMessages > 0) {
             messageSpan = "<span id='messages' class='alert'>" +
-                "     <a href='https://www.openstreetmap.org/messages/inbox' target='_blank'><img class='small-userbadge-icon' src='./assets/envelope.svg' alt='msgs'/>" +
-                " " +
-                "" +
+                "<a href='https://www.openstreetmap.org/messages/inbox' target='_blank'><img class='small-userbadge-icon' src='./assets/envelope.svg' alt='msgs'/>" +
                 user.unreadMessages.toString() +
                 "</a></span>";
         }
diff --git a/index.css b/index.css
index 6ceb6d1..c7d5f7b 100644
--- a/index.css
+++ b/index.css
@@ -274,20 +274,21 @@ e
     position: relative;
 }
 
-.filter__button--shadow {
-    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
-}
-
 .filter__button svg {
     vertical-align: middle;
 }
 
+#filter__selection{
+    z-index: 6000;
+}
+
 #filter__selection form {
     display: flex;
     flex-flow: column;
     width: 100%;
     background-color: #ffffff;
-    border-radius: 15px;
+    border-radius:  15px;
+    border-bottom-left-radius: 30px;
     border: none;
     font-size: 16px;
     transform: translateY(60px);
@@ -311,7 +312,7 @@ e
     font-size: 14px;
     padding: 5px;
     margin: 0 15px;
-    max-width: 250px;
+    max-width: 250px; 
 }
 
 #filter__selection ul {
@@ -326,7 +327,6 @@ e
 #filter__selection ul li span > span {
     display: flex;
     align-items: center;
-    /* padding: 10px 0; */
 }
 
 #filter__selection ul svg {
@@ -351,24 +351,8 @@ e
     border-radius: 15px 15px 0 0;
 }
 
-#filter__layers {
-    pointer-events: all;
-    list-style: none;
-    padding-left: 0;
-}
+.
 
-#filter__layers li span {
-    display: flex;
-    align-items: center;
-}
-
-.checkbox__label--checked {
-    margin-left: .7rem;
-}
-
-.checkbox__label--unchecked {
-    margin-left: 2.45rem;
-}
 
 
 @media only screen and (max-width: 600px) {
diff --git a/index.ts b/index.ts
index 24d4b5e..cfea672 100644
--- a/index.ts
+++ b/index.ts
@@ -224,18 +224,20 @@ for (const key in BaseLayers.baseLayers) {
     baseLayerOptions.push({value: {name: key, layer: BaseLayers.baseLayers[key]}, shown: key});
 }
 
+
+const backgroundMapPicker = new Combine([new DropDown(`Background map`, baseLayerOptions, bm.CurrentLayer), openFilterButton]);
+const layerSelection = new Combine([`<p class="filter__label">Maplayers</p>`, new LayerSelection(flayers)]);
+let layerControl = backgroundMapPicker;
 if (flayers.length > 1) {
-    new CheckBox(new Combine([`<p class="filter__label">Maplayers</p>`, new LayerSelection(flayers), new DropDown(`Background map`, baseLayerOptions, bm.CurrentLayer), openFilterButton]), closedFilterButton).AttachTo("filter__selection");
-} else {
-    new CheckBox(new Combine([new DropDown(`Background map`, baseLayerOptions, bm.CurrentLayer), openFilterButton]), closedFilterButton).AttachTo("filter__selection");
+    layerControl = new Combine([layerSelection, backgroundMapPicker);
 }
 
+new CheckBox(layerControl, closedFilterButton).AttachTo("filter__selection");
+
 
 // ------------------ Setup various UI elements ------------
 
 
-
-
 new StrayClickHandler(bm, selectedElement, fullScreenMessage, () => {
         return new SimpleAddUI(bm.Location,
             bm.LastClickLocation,
@@ -304,9 +306,6 @@ new FullScreenMessageBoxHandler(fullScreenMessage, () => {
     selectedElement.setData(undefined)
 }).update();
 
-// fullScreenMessage.setData(generateWelcomeMessage());
-
-
 new CenterMessageBox(
     minZoom,
     centerMessage,