midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Add layer icon to filter view

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-10-30 02:34:16 +02:00
parent 1cfcfea314
commit f5d6441b70
6 changed files with 55 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

29
UI/BigComponents/FilterView.ts
View file

@ -14,6 +14,7 @@ import FilteredLayer from "../../Models/FilteredLayer";
import BackgroundSelector from "./BackgroundSelector";
import FilterConfig from "../../Models/ThemeConfig/FilterConfig";
import TilesourceConfig from "../../Models/ThemeConfig/TilesourceConfig";
import {TagUtils} from "../../Logic/Tags/TagUtils";
export default class FilterView extends VariableUiElement {
constructor(filteredLayer: UIEventSource<FilteredLayer[]>, tileLayers: { config: TilesourceConfig, isDisplayed: UIEventSource<boolean> }[]) {
@ -42,9 +43,8 @@ export default class FilterView extends VariableUiElement {
);
const name: Translation = config.config.name;
const styledNameChecked = name.Clone().SetStyle("font-size:large;padding-left:1.25rem");
const styledNameUnChecked = name.Clone().SetStyle("font-size:large;padding-left:1.25rem");
const styledNameChecked = name.Clone().SetStyle("font-size:large").SetClass("ml-2");
const styledNameUnChecked = name.Clone().SetStyle("font-size:large").SetClass("ml-2");
const zoomStatus =
new Toggle(
@ -82,6 +82,8 @@ export default class FilterView extends VariableUiElement {
const iconStyle = "width:1.5rem;height:1.5rem;margin-left:1.25rem;flex-shrink: 0;";
const icon = new Combine([Svg.checkbox_filled]).SetStyle(iconStyle);
const layer = filteredLayer.layerDef
const iconUnselected = new Combine([Svg.checkbox_empty]).SetStyle(
iconStyle
);
@ -95,9 +97,9 @@ export default class FilterView extends VariableUiElement {
filteredLayer.layerDef.name
);
const styledNameChecked = name.Clone().SetStyle("font-size:large;padding-left:1.25rem");
const styledNameChecked = name.Clone().SetStyle("font-size:large").SetClass("ml-3");
const styledNameUnChecked = name.Clone().SetStyle("font-size:large;padding-left:1.25rem");
const styledNameUnChecked = name.Clone().SetStyle("font-size:large").SetClass("ml-3");
const zoomStatus =
new Toggle(
@ -111,11 +113,24 @@ export default class FilterView extends VariableUiElement {
const style =
"display:flex;align-items:center;padding:0.5rem 0;";
const layerChecked = new Combine([icon, styledNameChecked, zoomStatus])
const mapRendering = layer.mapRendering.filter(r => r.location.has("point"))[0]
let layerIcon = undefined
let layerIconUnchecked = undefined
try {
if (mapRendering !== undefined) {
const defaultTags = new UIEventSource( TagUtils.changeAsProperties(layer.source.osmTags.asChange({id: "node/-1"})))
layerIcon = mapRendering.GenerateLeafletStyle(defaultTags, false, {noSize: true}).html.SetClass("w-8 h-8 ml-2")
layerIconUnchecked = mapRendering.GenerateLeafletStyle(defaultTags, false, {noSize: true}).html.SetClass("opacity-50 w-8 h-8 ml-2")
}
} catch (e) {
console.error(e)
}
const layerChecked = new Combine([icon, layerIcon, styledNameChecked, zoomStatus])
.SetStyle(style)
.onClick(() => filteredLayer.isDisplayed.setData(false));
const layerNotChecked = new Combine([iconUnselected, styledNameUnChecked])
const layerNotChecked = new Combine([iconUnselected, layerIconUnchecked, styledNameUnChecked])
.SetStyle(style)
.onClick(() => filteredLayer.isDisplayed.setData(true));