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

Streamline download buttons

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-07-28 16:48:59 +02:00
parent 0c760c8458
commit b5eb569802
10 changed files with 222 additions and 193 deletions
Download patch file Download diff file Expand all files Collapse all files

53
UI/BigComponents/AllDownloads.ts Normal file
View file

@ -0,0 +1,53 @@
import State from "../../State";
import Combine from "../Base/Combine";
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
import Translations from "../i18n/Translations";
import {UIEventSource} from "../../Logic/UIEventSource";
import BaseUIElement from "../BaseUIElement";
import Toggle from "../Input/Toggle";
import {DownloadPanel} from "./DownloadPanel";
import {SubtleButton} from "../Base/SubtleButton";
import Svg from "../../Svg";
import ExportPDF from "../ExportPDF";
export default class AllDownloads extends ScrollableFullScreen {
constructor(isShown: UIEventSource<boolean>) {
super(AllDownloads.GenTitle, AllDownloads.GeneratePanel, "layers", isShown);
}
private static GenTitle(): BaseUIElement {
return Translations.t.general.download.title
.Clone()
.SetClass("text-2xl break-words font-bold p-2");
}
private static GeneratePanel(): BaseUIElement {
const generatePdf = () => {
new ExportPDF(
{
freeDivId: "belowmap",
background: State.state.backgroundLayer,
location: State.state.locationControl,
features: State.state.featurePipeline.features,
layout: State.state.layoutToUse,
})
}
const pdf = new Toggle(
new SubtleButton(Svg.floppy_ui(), Translations.t.general.download.downloadAsPdf.Clone().SetClass("font-bold"),)
.onClick(generatePdf),
undefined,
State.state.featureSwitchExportAsPdf
)
const exportPanel = new Toggle(
new DownloadPanel(),
undefined,
State.state.featureSwitchEnableExport
)
return new Combine([pdf, exportPanel]).SetClass("flex flex-col");
}
}

8
UI/BigComponents/FilterView.ts
View file

@ -15,6 +15,7 @@ import {UIEventSource} from "../../Logic/UIEventSource";
import BaseUIElement from "../BaseUIElement";
import State from "../../State";
import FilteredLayer from "../../Models/FilteredLayer";
import BackgroundSelector from "./BackgroundSelector";
/**
@ -23,9 +24,14 @@ import FilteredLayer from "../../Models/FilteredLayer";
export default class FilterView extends VariableUiElement {
constructor(filteredLayer: UIEventSource<FilteredLayer[]>) {
const backgroundSelector = new Toggle(
new BackgroundSelector(),
undefined,
State.state.featureSwitchBackgroundSlection
)
super(
filteredLayer.map((filteredLayers) =>
filteredLayers?.map(l => FilterView.createOneFilteredLayerElement(l))
filteredLayers?.map(l => FilterView.createOneFilteredLayerElement(l)).concat(backgroundSelector)
)
);
}

42
UI/BigComponents/LayerControlPanel.ts
View file

@ -1,42 +0,0 @@
import State from "../../State";
import BackgroundSelector from "./BackgroundSelector";
import Combine from "../Base/Combine";
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
import Translations from "../i18n/Translations";
import {UIEventSource} from "../../Logic/UIEventSource";
import BaseUIElement from "../BaseUIElement";
import Toggle from "../Input/Toggle";
import {DownloadPanel} from "./DownloadPanel";
export default class LayerControlPanel extends ScrollableFullScreen {
constructor(isShown: UIEventSource<boolean>) {
super(LayerControlPanel.GenTitle, LayerControlPanel.GeneratePanel, "layers", isShown);
}
private static GenTitle(): BaseUIElement {
return Translations.t.general.layerSelection.title
.Clone()
.SetClass("text-2xl break-words font-bold p-2");
}
private static GeneratePanel(): BaseUIElement {
const elements: BaseUIElement[] = [];
if (State.state.layoutToUse.data.enableBackgroundLayerSelection) {
const backgroundSelector = new BackgroundSelector();
backgroundSelector.SetStyle("margin:1em");
backgroundSelector.onClick(() => {
});
elements.push(backgroundSelector)
}
elements.push(new Toggle(
new DownloadPanel(),
undefined,
State.state.featureSwitchEnableExport
))
return new Combine(elements).SetClass("flex flex-col");
}
}

94
UI/BigComponents/LeftControls.ts Normal file
View file

@ -0,0 +1,94 @@
import Combine from "../Base/Combine";
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
import Translations from "../i18n/Translations";
import AttributionPanel from "./AttributionPanel";
import State from "../../State";
import ContributorCount from "../../Logic/ContributorCount";
import Toggle from "../Input/Toggle";
import MapControlButton from "../MapControlButton";
import Svg from "../../Svg";
import AllDownloads from "./AllDownloads";
import FilterView from "./FilterView";
import FeatureSource from "../../Logic/FeatureSource/FeatureSource";
export default class LeftControls extends Combine {
constructor(featureSource: FeatureSource) {
const toggledCopyright = new ScrollableFullScreen(
() => Translations.t.general.attribution.attributionTitle.Clone(),
() =>
new AttributionPanel(
State.state.layoutToUse,
new ContributorCount(featureSource).Contributors
),
undefined
);
const copyrightButton = new Toggle(
toggledCopyright,
new MapControlButton(Svg.copyright_svg()),
toggledCopyright.isShown
)
.ToggleOnClick()
.SetClass("p-0.5");
const toggledDownload = new Toggle(
new AllDownloads(
State.state.downloadControlIsOpened
).SetClass("block p-1 rounded-full"),
new MapControlButton(Svg.download_svg()),
State.state.downloadControlIsOpened
).ToggleOnClick();
const downloadButtonn = new Toggle(
toggledDownload,
undefined,
State.state.featureSwitchEnableExport.map(downloadEnabled => downloadEnabled || State.state.featureSwitchExportAsPdf.data,
[State.state.featureSwitchExportAsPdf])
);
const toggledFilter = new Toggle(
new ScrollableFullScreen(
() => Translations.t.general.layerSelection.title.Clone(),
() =>
new FilterView(State.state.filteredLayers).SetClass(
"block p-1 rounded-full"
),
undefined,
State.state.filterIsOpened
),
new MapControlButton(Svg.filter_svg()),
State.state.filterIsOpened
).ToggleOnClick();
const filterButton = new Toggle(
toggledFilter,
undefined,
State.state.featureSwitchFilter
);
State.state.locationControl.addCallback(() => {
// Close the layer selection when the map is moved
toggledDownload.isEnabled.setData(false);
copyrightButton.isEnabled.setData(false);
toggledFilter.isEnabled.setData(false);
});
State.state.selectedElement.addCallbackAndRunD((_) => {
toggledDownload.isEnabled.setData(false);
copyrightButton.isEnabled.setData(false);
toggledFilter.isEnabled.setData(false);
});
super([filterButton,
downloadButtonn,
copyrightButton])
this.SetClass("flex flex-col")
}
}

43
UI/BigComponents/RightControls.ts Normal file
View file

@ -0,0 +1,43 @@
import Combine from "../Base/Combine";
import Toggle from "../Input/Toggle";
import MapControlButton from "../MapControlButton";
import GeoLocationHandler from "../../Logic/Actors/GeoLocationHandler";
import State from "../../State";
import Svg from "../../Svg";
export default class RightControls extends Combine {
constructor() {
const geolocationButton = new Toggle(
new MapControlButton(
new GeoLocationHandler(
State.state.currentGPSLocation,
State.state.leafletMap,
State.state.layoutToUse
), {
dontStyle: true
}
),
undefined,
State.state.featureSwitchGeolocation
);
const plus = new MapControlButton(
Svg.plus_zoom_svg()
).onClick(() => {
State.state.locationControl.data.zoom++;
State.state.locationControl.ping();
});
const min = new MapControlButton(
Svg.min_zoom_svg()
).onClick(() => {
State.state.locationControl.data.zoom--;
State.state.locationControl.ping();
});
super([plus, min, geolocationButton].map(el => el.SetClass("m-0.5 md:m-1")))
this.SetClass("flex flex-col")
}
}

10
UI/BigComponents/SimpleAddUI.ts
View file

@ -166,7 +166,7 @@ export default class SimpleAddUI extends Toggle {
])
)
.onClick(() => State.state.layerControlIsOpened.setData(true))
.onClick(() => State.state.filterIsOpened.setData(true))
const openLayerOrConfirm = new Toggle(
confirmButton,
@ -238,7 +238,13 @@ export default class SimpleAddUI extends Toggle {
const allButtons = [];
for (const layer of State.state.filteredLayers.data) {
if (layer.isDisplayed.data === false && State.state.featureSwitchLayers) {
if (layer.isDisplayed.data === false && State.state.featureSwitchFilter.data) {
// The layer is not displayed and we cannot enable the layer control -> we skip
continue;
}
if(layer.layerDef.name === undefined){
// this is a parlty hidden layer
continue;
}