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

Finetuning of various features

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-07-27 20:41:06 +02:00
parent 1b5737a06c
commit c175202006
4 changed files with 522 additions and 526 deletions
Download patch file Download diff file Expand all files Collapse all files

28
InitUiElements.ts
View file

@ -43,7 +43,6 @@ import LayerConfig from "./Customizations/JSON/LayerConfig";
import AvailableBaseLayers from "./Logic/Actors/AvailableBaseLayers"; import AvailableBaseLayers from "./Logic/Actors/AvailableBaseLayers";
import {TagsFilter} from "./Logic/Tags/TagsFilter"; import {TagsFilter} from "./Logic/Tags/TagsFilter";
import FilterView from "./UI/BigComponents/FilterView"; import FilterView from "./UI/BigComponents/FilterView";
import ExportPDF from "./Logic/Actors/ExportPDF";
export class InitUiElements { export class InitUiElements {
static InitAll( static InitAll(
@ -59,7 +58,8 @@ export class InitUiElements {
`Error: incorrect layout <i>${layoutName}</i><br/><a href='https://${window.location.host}/'>Go back</a>` `Error: incorrect layout <i>${layoutName}</i><br/><a href='https://${window.location.host}/'>Go back</a>`
) )
.AttachTo("centermessage") .AttachTo("centermessage")
.onClick(() => {}); .onClick(() => {
});
throw "Incorrect layout"; throw "Incorrect layout";
} }
@ -222,9 +222,7 @@ export class InitUiElements {
}); });
new Combine( new Combine(
[plus, min, geolocationButton].map((el) => [plus, min, geolocationButton]
el.SetClass("m-0.5 md:m-1")
)
) )
.SetClass("flex flex-col") .SetClass("flex flex-col")
.AttachTo("bottom-right"); .AttachTo("bottom-right");
@ -372,10 +370,18 @@ export class InitUiElements {
); );
const filterView = new FilterView(State.state.filteredLayers).SetClass( const filterView =
new ScrollableFullScreen(
() => Translations.t.general.layerSelection.title.Clone(),
() =>
new FilterView(State.state.filteredLayers).SetClass(
"block p-1 rounded-full" "block p-1 rounded-full"
),
"filter",
State.state.filterIsOpened
); );
const filterMapControlButton = new MapControlButton( const filterMapControlButton = new MapControlButton(
new CenterFlexedElement( new CenterFlexedElement(
Img.AsImageElement(Svg.filter, "", "width:1.25rem;height:1.25rem") Img.AsImageElement(Svg.filter, "", "width:1.25rem;height:1.25rem")
@ -385,18 +391,18 @@ export class InitUiElements {
const filterButton = new Toggle( const filterButton = new Toggle(
filterView, filterView,
filterMapControlButton, filterMapControlButton,
State.state.FilterIsOpened State.state.filterIsOpened
).ToggleOnClick(); ).ToggleOnClick();
const filterControl = new Toggle( const filterControl = new Toggle(
filterButton, filterButton,
"", undefined,
State.state.featureSwitchFilter State.state.featureSwitchFilter
); );
new Combine([copyrightButton, layerControl, filterControl]).AttachTo( new Combine([copyrightButton, layerControl, filterControl])
"bottom-left" .SetClass("flex flex-col")
); .AttachTo("bottom-left");
State.state.locationControl.addCallback(() => { State.state.locationControl.addCallback(() => {
// Close the layer selection when the map is moved // Close the layer selection when the map is moved

4
State.ts
View file

@ -137,11 +137,11 @@ export default class State {
(b) => "" + b (b) => "" + b
); );
public FilterIsOpened: UIEventSource<boolean> = public filterIsOpened: UIEventSource<boolean> =
QueryParameters.GetQueryParameter( QueryParameters.GetQueryParameter(
"filter-toggle", "filter-toggle",
"false", "false",
"Whether or not the filter is shown" "Whether or not the filter view is shown"
).map<boolean>( ).map<boolean>(
(str) => str !== "false", (str) => str !== "false",
[], [],

10
UI/BigComponents/LayerControlPanel.ts
View file

@ -6,7 +6,6 @@ import Translations from "../i18n/Translations";
import {UIEventSource} from "../../Logic/UIEventSource"; import {UIEventSource} from "../../Logic/UIEventSource";
import BaseUIElement from "../BaseUIElement"; import BaseUIElement from "../BaseUIElement";
import Toggle from "../Input/Toggle"; import Toggle from "../Input/Toggle";
import FilterView from "./FilterView";
import {DownloadPanel} from "./DownloadPanel"; import {DownloadPanel} from "./DownloadPanel";
export default class LayerControlPanel extends ScrollableFullScreen { export default class LayerControlPanel extends ScrollableFullScreen {
@ -31,15 +30,6 @@ export default class LayerControlPanel extends ScrollableFullScreen {
}); });
elements.push(backgroundSelector) elements.push(backgroundSelector)
} }
elements.push(
new Toggle(
new FilterView(State.state.filteredLayers),
undefined,
State.state.filteredLayers.map(
(layers) => layers.length > 1 || layers[0].layerDef.filters.length > 0
)
)
);
elements.push(new Toggle( elements.push(new Toggle(
new DownloadPanel(), new DownloadPanel(),

2
UI/MapControlButton.ts
View file

@ -8,7 +8,7 @@ export default class MapControlButton extends Combine {
constructor(contents: BaseUIElement) { constructor(contents: BaseUIElement) {
super([contents]); super([contents]);
this.SetClass( this.SetClass(
"relative block rounded-full w-10 h-10 p-1 pointer-events-auto z-above-map subtle-background" "relative block rounded-full w-10 h-10 p-1 pointer-events-auto z-above-map subtle-background m-0.5 md:m-1"
); );
this.SetStyle("box-shadow: 0 0 10px var(--shadow-color);"); this.SetStyle("box-shadow: 0 0 10px var(--shadow-color);");
} }