Robin-van-der-Linde/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:
pietervdvn 2021-10-30 02:34:16 +02:00
parent 1cfcfea314
commit f5d6441b70
6 changed files with 55 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Logic/Osm/Actions/CreateNewWayAction.ts
View file

@ -39,6 +39,7 @@ export default class CreateNewWayAction extends OsmChangeAction {
}
const newPoint = new CreateNewNodeAction([], coordinate.lat, coordinate.lon, {
allowReuseOfPreviouslyCreatedPoints: true,
changeType: null,
theme: this._options.theme
})

18
Logic/Tags/TagUtils.ts
View file

@ -19,16 +19,6 @@ export class TagUtils {
[">", (a, b) => a > b],
]
static ApplyTemplate(template: string, tags: any): string {
for (const k in tags) {
while (template.indexOf("{" + k + "}") >= 0) {
const escaped = tags[k].replace(/</g, '&lt;').replace(/>/g, '&gt;');
template = template.replace("{" + k + "}", escaped);
}
}
return template;
}
static KVtoProperties(tags: Tag[]): any {
const properties = {};
for (const tag of tags) {
@ -37,6 +27,14 @@ export class TagUtils {
return properties;
}
static changeAsProperties(kvs : {k: string, v: string}[]): any {
const tags = {}
for (const kv of kvs) {
tags[kv.k] = kv.v
}
return tags
}
/**
* Given two hashes of {key --> values[]}, makes sure that every neededTag is present in availableTags
*/

11
Models/ThemeConfig/PointRenderingConfig.ts
View file

@ -187,7 +187,10 @@ export default class PointRenderingConfig extends WithContextLoader {
public GenerateLeafletStyle(
tags: UIEventSource<any>,
clickable: boolean
clickable: boolean,
options?: {
noSize: false | boolean
}
):
{
html: BaseUIElement;
@ -237,9 +240,13 @@ export default class PointRenderingConfig extends WithContextLoader {
const iconAndBadges = new Combine([this.GetSimpleIcon(tags), this.GetBadges(tags)])
.SetStyle(`width: ${iconW}px; height: ${iconH}px`)
.SetClass("block relative")
if(!options?.noSize){
iconAndBadges.SetStyle(`width: ${iconW}px; height: ${iconH}px`)
}else{
iconAndBadges.SetClass("w-full h-full")
}
return {
html: new Combine([iconAndBadges, this.GetLabel(tags)]).SetStyle("flex flex-col"),

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));

3
assets/themes/ghostbikes/ghostbikes.json
View file

@ -53,6 +53,9 @@
"startLat": 0,
"startLon": 0,
"widenFactor": 5,
"clustering": {
"maxZoom": 0
},
"layers": [
"ghost_bike"
],

32
css/index-tailwind-output.css
View file

@ -868,6 +868,14 @@ video {
margin-right: 1rem;
}
.mt-4 {
margin-top: 1rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.mt-3 {
margin-top: 0.75rem;
}
@ -892,18 +900,10 @@ video {
margin-top: 0px;
}
.ml-2 {
margin-left: 0.5rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mt-4 {
margin-top: 1rem;
}
.mb-8 {
margin-bottom: 2rem;
}
@ -1417,14 +1417,6 @@ video {
padding-right: 0.25rem;
}
.pt-6 {
padding-top: 1.5rem;
}
.pb-3 {
padding-bottom: 0.75rem;
}
.pl-5 {
padding-left: 1.25rem;
}
@ -1593,14 +1585,14 @@ video {
text-decoration: underline;
}
.opacity-0 {
opacity: 0;
}
.opacity-50 {
opacity: 0.5;
}
.opacity-0 {
opacity: 0;
}
.opacity-40 {
opacity: 0.4;
}