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

Add spinning animation while exporting the pdf

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-08-22 20:10:19 +02:00
parent 3c73dfd6b2
commit 4790a10cb6
5 changed files with 101 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

32
UI/BigComponents/AllDownloads.ts
View file

@ -9,6 +9,9 @@ import {DownloadPanel} from "./DownloadPanel";
import {SubtleButton} from "../Base/SubtleButton";
import Svg from "../../Svg";
import ExportPDF from "../ExportPDF";
import {Browser} from "leaflet";
import ie = Browser.ie;
import {FixedUiElement} from "../Base/FixedUiElement";
export default class AllDownloads extends ScrollableFullScreen {
@ -23,7 +26,9 @@ export default class AllDownloads extends ScrollableFullScreen {
}
private static GeneratePanel(): BaseUIElement {
const isExporting = new UIEventSource(false, "Pdf-is-exporting")
const generatePdf = () => {
isExporting.setData(true)
new ExportPDF(
{
freeDivId: "belowmap",
@ -31,21 +36,34 @@ export default class AllDownloads extends ScrollableFullScreen {
location: State.state.locationControl,
features: State.state.featurePipeline.features,
layout: State.state.layoutToUse,
})
}).isRunning.addCallbackAndRun(isRunning => isExporting.setData(isRunning))
}
const loading = Svg.loading_svg().SetClass("animate-rotate");
const icon = new Toggle(loading, Svg.floppy_ui(), isExporting);
const text = new Toggle(
new FixedUiElement("Exporting..."),
new Combine([
Translations.t.general.download.downloadAsPdf.Clone().SetClass("font-bold"),
Translations.t.general.download.downloadAsPdfHelper.Clone()]
).SetClass("flex flex-col")
.onClick(() => {
generatePdf()
}),
isExporting);
const pdf = new Toggle(
new SubtleButton(Svg.floppy_ui(),
new Combine([Translations.t.general.download.downloadAsPdf.Clone().SetClass("font-bold"),
Translations.t.general.download.downloadAsPdfHelper.Clone()]
).SetClass("flex flex-col"))
.onClick(generatePdf),
new SubtleButton(
icon,
text),
undefined,
State.state.featureSwitchExportAsPdf
)
const exportPanel = new Toggle(
const exportPanel = new Toggle(
new DownloadPanel(),
undefined,
State.state.featureSwitchEnableExport