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

SimpleAddUi: scroll to top if a preset is chosen

Browse source
This commit is contained in:
Pieter Vander Vennet 2022-02-09 00:35:59 +01:00
parent 77a19d33f8
commit 452bf39561
5 changed files with 40 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

38
UI/Base/ScrollableFullScreen.ts
View file

@ -5,7 +5,6 @@ import {FixedUiElement} from "./FixedUiElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import Hash from "../../Logic/Web/Hash";
import BaseUIElement from "../BaseUIElement";
import Img from "./Img";
import Title from "./Title";
/**
@ -24,8 +23,10 @@ export default class ScrollableFullScreen extends UIElement {
private hashToShow: string;
private _component: BaseUIElement;
private _fullscreencomponent: BaseUIElement;
private _resetScrollSignal: UIEventSource<void> = new UIEventSource<void>(undefined);
constructor(title: ((mode: string) => BaseUIElement), content: ((mode: string) => BaseUIElement),
constructor(title: ((options: { mode: string }) => BaseUIElement),
content: ((options: { mode: string, resetScrollSignal: UIEventSource<void> }) => BaseUIElement),
hashToShow: string,
isShown: UIEventSource<boolean> = new UIEventSource<boolean>(false)
) {
@ -36,10 +37,19 @@ export default class ScrollableFullScreen extends UIElement {
if (hashToShow === undefined) {
throw "HashToShow should be defined as it is vital for the 'back' key functionality"
}
const desktopOptions = {
mode: "desktop",
resetScrollSignal: this._resetScrollSignal
}
const mobileOptions = {
mode: "mobile",
resetScrollSignal: this._resetScrollSignal
}
this._component = this.BuildComponent(title("desktop"), content("desktop"), isShown)
.SetClass("hidden md:block");
this._fullscreencomponent = this.BuildComponent(title("mobile"), content("mobile").SetClass("pb-20"), isShown);
this._component = this.BuildComponent(title(desktopOptions), content(desktopOptions)) .SetClass("hidden md:block");
this._fullscreencomponent = this.BuildComponent(title(mobileOptions), content(mobileOptions).SetClass("pb-20"));
const self = this;
@ -66,8 +76,6 @@ export default class ScrollableFullScreen extends UIElement {
ScrollableFullScreen._currentlyOpen?.isShown?.setData(false);
}
})
}
InnerRender(): BaseUIElement {
@ -88,7 +96,7 @@ export default class ScrollableFullScreen extends UIElement {
fs.classList.remove("hidden")
}
private BuildComponent(title: BaseUIElement, content: BaseUIElement, isShown: UIEventSource<boolean>) {
private BuildComponent(title: BaseUIElement, content: BaseUIElement) :BaseUIElement {
const returnToTheMap =
new Combine([
Svg.back_svg().SetClass("block md:hidden w-12 h-12 p-2 svg-foreground"),
@ -96,18 +104,24 @@ export default class ScrollableFullScreen extends UIElement {
]).SetClass("rounded-full p-0 flex-shrink-0 self-center")
returnToTheMap.onClick(() => {
isShown.setData(false)
this.isShown.setData(false)
Hash.hash.setData(undefined)
})
title = new Title(title, 2)
title.SetClass("text-l sm:text-xl md:text-2xl w-full p-0 max-h-20vh overflow-y-auto self-center")
return new Combine([
const contentWrapper = new Combine([content])
.SetClass("block p-2 md:pt-4 w-full h-full overflow-y-auto md:max-h-65vh")
this._resetScrollSignal.addCallback(_ => {
contentWrapper.ScrollToTop();
})
return new Combine([
new Combine([
new Combine([returnToTheMap, title])
.SetClass("border-b-1 border-black shadow bg-white flex flex-shrink-0 pt-1 pb-1 md:pt-0 md:pb-0"),
new Combine([content])
.SetClass("block p-2 md:pt-4 w-full h-full overflow-y-auto md:max-h-65vh"),
contentWrapper ,
// We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
]).SetClass("flex flex-col h-full relative bg-white")
]).SetClass("fixed top-0 left-0 right-0 h-screen w-screen md:max-h-65vh md:w-auto md:relative z-above-controls md:rounded-xl overflow-hidden");