From 452bf39561de5f23667e57ab3f91894e020374f8 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Wed, 9 Feb 2022 00:35:59 +0100 Subject: [PATCH] SimpleAddUi: scroll to top if a preset is chosen --- UI/Base/ScrollableFullScreen.ts | 38 ++++++++++++++++++--------- UI/BaseUIElement.ts | 4 +++ UI/BigComponents/SimpleAddUI.ts | 9 +++++-- UI/DefaultGUI.ts | 4 +-- UI/NewPoint/ConfirmLocationOfPoint.ts | 2 +- 5 files changed, 40 insertions(+), 17 deletions(-) diff --git a/UI/Base/ScrollableFullScreen.ts b/UI/Base/ScrollableFullScreen.ts index 2c4a89852..c6dc803a5 100644 --- a/UI/Base/ScrollableFullScreen.ts +++ b/UI/Base/ScrollableFullScreen.ts @@ -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 = new UIEventSource(undefined); - constructor(title: ((mode: string) => BaseUIElement), content: ((mode: string) => BaseUIElement), + constructor(title: ((options: { mode: string }) => BaseUIElement), + content: ((options: { mode: string, resetScrollSignal: UIEventSource }) => BaseUIElement), hashToShow: string, isShown: UIEventSource = new UIEventSource(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) { + 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"); diff --git a/UI/BaseUIElement.ts b/UI/BaseUIElement.ts index 4b431959b..61d55c251 100644 --- a/UI/BaseUIElement.ts +++ b/UI/BaseUIElement.ts @@ -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 diff --git a/UI/BigComponents/SimpleAddUI.ts b/UI/BigComponents/SimpleAddUI.ts index 3e61338ed..e8b278352 100644 --- a/UI/BigComponents/SimpleAddUI.ts +++ b/UI/BigComponents/SimpleAddUI.ts @@ -43,6 +43,7 @@ export interface PresetInfo extends PresetConfig { export default class SimpleAddUI extends Toggle { constructor(isShown: UIEventSource, + resetScrollSignal: UIEventSource, filterViewIsOpened: UIEventSource, state: { featureSwitchIsTesting: UIEventSource, @@ -68,6 +69,11 @@ export default class SimpleAddUI extends Toggle { const selectedPreset = new UIEventSource(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") ) } diff --git a/UI/DefaultGUI.ts b/UI/DefaultGUI.ts index 989a5a77a..df31db8a2 100644 --- a/UI/DefaultGUI.ts +++ b/UI/DefaultGUI.ts @@ -72,10 +72,10 @@ export default class DefaultGUI { const newPointDialogIsShown = new UIEventSource(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) { diff --git a/UI/NewPoint/ConfirmLocationOfPoint.ts b/UI/NewPoint/ConfirmLocationOfPoint.ts index aea36e0bc..458b470a2 100644 --- a/UI/NewPoint/ConfirmLocationOfPoint.ts +++ b/UI/NewPoint/ConfirmLocationOfPoint.ts @@ -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) {