SimpleAddUi: scroll to top if a preset is chosen

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<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)
     ) {
@@ -37,9 +38,18 @@ export default class ScrollableFullScreen extends UIElement {
             throw "HashToShow should be defined as it is vital for the 'back' key functionality"
         }
         
-        this._component = this.BuildComponent(title("desktop"), content("desktop"), isShown)
+        const desktopOptions = {
-            .SetClass("hidden md:block");
+            mode: "desktop",
-        this._fullscreencomponent = this.BuildComponent(title("mobile"), content("mobile").SetClass("pb-20"), isShown);
+            resetScrollSignal: this._resetScrollSignal
+        }
+        
+        const mobileOptions = {
+            mode: "mobile",
+            resetScrollSignal: this._resetScrollSignal
+        }
+
+        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])
+              contentWrapper ,
-                    .SetClass("block p-2 md:pt-4 w-full h-full overflow-y-auto md:max-h-65vh"),
                 // 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");

UI/BaseUIElement.ts

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

UI/BigComponents/SimpleAddUI.ts

@@ -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(),
+                Translations.WT(preset.description)?.FirstSentence()
-                tagInfo?.SetClass("subtle")
             ]).SetClass("flex flex-col")
         )
     }

UI/DefaultGUI.ts

@@ -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) {

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) {