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([ - ` + const checkbox = ` - `, - ``, - layer.layerDef.name]), - new Combine([ - ` + `; + let icon = ""; + if (layer.layerDef.icon && layer.layerDef.icon !== "") { + icon = `` + } + const name = layer.layerDef.name; + + this._checkboxes.push(new CheckBox( + new Combine([checkbox, icon, name]), + new Combine([ + ` `, - ``, - 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 = "" + - " msgs" + - " " + - "" + + "msgs" + user.unreadMessages.toString() + ""; } 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([`

Maplayers

`, new LayerSelection(flayers)]); +let layerControl = backgroundMapPicker; if (flayers.length > 1) { - new CheckBox(new Combine([`

Maplayers

`, 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,