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

Halfway removing the fullscreenmessage

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-01-24 18:33:16 +01:00
parent 81f0a21076
commit e1a4c75391
9 changed files with 88 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

47
UI/Base/ScrollableFullScreen.ts
View file

@ -9,33 +9,62 @@ import Ornament from "./Ornament";
*/
export default class ScrollableFullScreen extends UIElement {
private _component: UIElement;
private elementsToRestore: Set<HTMLElement> = new Set<HTMLElement>();
constructor(title: UIElement, content: UIElement, onClose: (() => void)) {
super();
this.dumbMode = false;
const returnToTheMap = Svg.back_svg().onClick(() => {
onClose();
}) .SetClass("block sm:hidden mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5")
console.log("Clicked back!");
this.RestoreLeaflet();
if (onClose() !== undefined) {
console.error("WARNING: onClose is not defined")
onClose();
}
}).SetClass("block sm:hidden mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5")
title.SetClass("block w-full")
const ornament = new Combine([new Ornament().SetStyle("height:5em;")])
.SetClass("block sm:hidden h-5")
this._component = new Combine([
this._component =
new Combine([
new Combine([
new Combine([returnToTheMap, title])
.AddClass("border-b-2 border-black shadow sm:shadow-none z-50 bg-white p-2 pb-0 sm:p-0 flex overflow-x-hidden flex-shrink-0 max-h-20vh"),
.AddClass("border-b-2 border-black shadow sm:shadow-none bg-white p-2 pb-0 sm:p-0 flex overflow-x-hidden flex-shrink-0 max-h-20vh"),
new Combine(["<span>", content, "</span>", ornament])
.SetClass("block p-2 sm:pt-4 w-full max-h-screen landscape:max-h-screen overflow-y-auto overflow-x-hidden"),
.SetClass("block p-2 sm:pt-4 w-full h-screen landscape:h-screen sm:h-full sm:w-full overflow-y-auto overflow-x-hidden"),
// We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
]).SetClass("block flex flex-col fixed max-h-screen sm:max-h-65vh sm:relative top-0 left-0 right-0");
]).SetClass("block flex flex-col relative bg-white")
]).SetClass("fixed top-0 left-0 right-0 h-screen w-screen sm:max-h-65vh sm:w-auto");
}
InnerRender(): string {
return this._component.Render();
}
protected InnerUpdate(htmlElement: HTMLElement) {
do {
// A leaflet workaround: in order for fullscreen to work, we need to get the parent element which does a transform3d and remove/read the transform
if (htmlElement.style.transform !== "") {
this.elementsToRestore.add(htmlElement);
htmlElement.classList.add("no-transform")
}
htmlElement = htmlElement.parentElement;
} while (htmlElement != null)
super.InnerUpdate(htmlElement);
}
private RestoreLeaflet() {
this.elementsToRestore.forEach(
el => el.classList.remove("no-transform")
);
}
}