Robin-van-der-Linde/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:
pietervdvn 2022-02-09 00:35:59 +01:00
parent 77a19d33f8
commit 452bf39561
5 changed files with 40 additions and 17 deletions
Show stats 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");

4
UI/BaseUIElement.ts
View file

@ -39,6 +39,10 @@ export default abstract class BaseUIElement {
return this;
}
public ScrollToTop(){
this._constructedHtmlElement?.scrollTo(0,0)
}
/**
* Adds all the relevant classes, space separated

9
UI/BigComponents/SimpleAddUI.ts
View file

@ -43,6 +43,7 @@ export interface PresetInfo extends PresetConfig {
export default class SimpleAddUI extends Toggle {
constructor(isShown: UIEventSource<boolean>,
resetScrollSignal: UIEventSource<void>,
filterViewIsOpened: UIEventSource<boolean>,
state: {
featureSwitchIsTesting: UIEventSource<boolean>,
@ -68,6 +69,11 @@ export default class SimpleAddUI extends Toggle {
const selectedPreset = new UIEventSource<PresetInfo>(undefined);
selectedPreset.addCallback(_ => {
resetScrollSignal.ping();
})
isShown.addCallback(_ => selectedPreset.setData(undefined)) // Clear preset selection when the UI is closed/opened
state.LastClickLocation.addCallback(_ => selectedPreset.setData(undefined))
@ -183,8 +189,7 @@ export default class SimpleAddUI extends Toggle {
Translations.t.general.add.addNew.Subs({
category: preset.name
}).SetClass("font-bold"),
Translations.WT(preset.description)?.FirstSentence(),
tagInfo?.SetClass("subtle")
Translations.WT(preset.description)?.FirstSentence()
]).SetClass("flex flex-col")
)
}

4
UI/DefaultGUI.ts
View file

@ -72,10 +72,10 @@ export default class DefaultGUI {
const newPointDialogIsShown = new UIEventSource<boolean>(false);
const addNewPoint = new ScrollableFullScreen(
() => hasPresets ? Translations.t.general.add.title : Translations.t.notes.createNoteTitle,
() => {
({resetScrollSignal}) => {
let addNew = undefined;
if (hasPresets) {
addNew = new SimpleAddUI(newPointDialogIsShown, filterViewIsOpened, state);
addNew = new SimpleAddUI(newPointDialogIsShown, resetScrollSignal, filterViewIsOpened, state);
}
let addNote = undefined;
if (noteLayer !== undefined) {

2
UI/NewPoint/ConfirmLocationOfPoint.ts
View file

@ -64,7 +64,7 @@ export default class ConfirmLocationOfPoint extends Combine {
bounds: mapBounds
})
preciseInput.installBounds(preset.boundsFactor ?? 0.25, true)
preciseInput.SetClass("h-32 rounded-xl overflow-hidden border border-gray").SetStyle("height: 12rem;")
preciseInput.SetClass("h-40 rounded-xl overflow-hidden border border-gray").SetStyle("height: 12rem;")
if (preset.preciseInput.snapToLayers && preset.preciseInput.snapToLayers.length > 0) {