From 8603c409fca5935d020b9713c88d3bdcacf5a54f Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Fri, 13 Jan 2023 14:31:28 +0100
Subject: [PATCH] Scroll focused setting into view

---
 UI/BigComponents/UserInformation.ts | 59 ++++++++++++++++++++---------
 UI/Image/ImageUploadFlow.ts         |  2 +-
 css/index-tailwind-output.css       |  4 ++
 3 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/UI/BigComponents/UserInformation.ts b/UI/BigComponents/UserInformation.ts
index fa3a5da3fe..5ee1ec6930 100644
--- a/UI/BigComponents/UserInformation.ts
+++ b/UI/BigComponents/UserInformation.ts
@@ -87,6 +87,9 @@ class SingleUserSettingsPanel extends EditableTagRendering {
 }
 
 class UserInformationMainPanel extends VariableUiElement {
+    private readonly settings: UIEventSource<Record<string, BaseUIElement>>
+    private readonly userInfoFocusedQuestion?: UIEventSource<string>
+
     constructor(
         osmConnection: OsmConnection,
         locationControl: UIEventSource<Loc>,
@@ -97,6 +100,7 @@ class UserInformationMainPanel extends VariableUiElement {
         const t = Translations.t.userinfo
         const imgSize = "h-6 w-6"
         const ud = osmConnection.userDetails
+        const settings = new UIEventSource<Record<string, BaseUIElement>>({})
 
         const amendedPrefs = new UIEventSource<any>({})
         osmConnection.preferencesHandler.preferences.addCallback((newPrefs) => {
@@ -173,15 +177,18 @@ class UserInformationMainPanel extends VariableUiElement {
                 }
 
                 const usersettingsConfig = new LayerConfig(usersettings, "userinformationpanel")
-
-                const questions = usersettingsConfig.tagRenderings.map((c) =>
-                    new SingleUserSettingsPanel(
+                const settingElements = []
+                for (const c of usersettingsConfig.tagRenderings) {
+                    const settingsPanel = new SingleUserSettingsPanel(
                         c,
                         osmConnection,
                         amendedPrefs,
                         userInfoFocusedQuestion
                     ).SetClass("block my-4")
-                )
+                    settings.data[c.id] = settingsPanel
+                    settingElements.push(settingsPanel)
+                }
+                settings.ping()
 
                 return new Combine([
                     new Combine([img, description]).SetClass("flex border border-black rounded-md"),
@@ -189,7 +196,7 @@ class UserInformationMainPanel extends VariableUiElement {
                         layout.language,
                         Translations.t.general.pickLanguage.Clone()
                     ),
-                    ...questions,
+                    ...settingElements,
                     new SubtleButton(
                         Svg.envelope_svg(),
                         new Combine([
@@ -216,10 +223,26 @@ class UserInformationMainPanel extends VariableUiElement {
             })
         )
         this.SetClass("flex flex-col")
+        this.settings = settings
+        this.userInfoFocusedQuestion = userInfoFocusedQuestion
+        const self = this
+        userInfoFocusedQuestion.addCallbackD((_) => {
+            self.focusOnSelectedQuestion()
+        })
+    }
+
+    public focusOnSelectedQuestion() {
+        const focusedId = this.userInfoFocusedQuestion.data
+        console.log("Focusing on", focusedId, this.settings.data[focusedId])
+        if (focusedId === undefined) {
+            return
+        }
+        this.settings.data[focusedId]?.ScrollIntoView()
     }
 }
 
 export default class UserInformationPanel extends ScrollableFullScreen {
+    private readonly userPanel: UserInformationMainPanel
     constructor(
         state: {
             readonly layoutToUse: LayoutConfig
@@ -233,6 +256,13 @@ export default class UserInformationPanel extends ScrollableFullScreen {
         }
     ) {
         const isOpened = options?.isOpened ?? new UIEventSource<boolean>(false)
+        const userPanel = new UserInformationMainPanel(
+            state.osmConnection,
+            state.locationControl,
+            state.layoutToUse,
+            isOpened,
+            options?.userInfoFocusedQuestion
+        )
         super(
             () => {
                 return new VariableUiElement(
@@ -244,20 +274,15 @@ export default class UserInformationPanel extends ScrollableFullScreen {
                     })
                 )
             },
-            () =>
-                new LoginToggle(
-                    new UserInformationMainPanel(
-                        state.osmConnection,
-                        state.locationControl,
-                        state.layoutToUse,
-                        isOpened,
-                        options?.userInfoFocusedQuestion
-                    ),
-                    Translations.t.general.getStartedLogin,
-                    state
-                ),
+            () => new LoginToggle(userPanel, Translations.t.general.getStartedLogin, state),
             "userinfo",
             isOpened
         )
+        this.userPanel = userPanel
+    }
+
+    Activate() {
+        super.Activate()
+        this.userPanel.focusOnSelectedQuestion()
     }
 }
diff --git a/UI/Image/ImageUploadFlow.ts b/UI/Image/ImageUploadFlow.ts
index 75fdb05c1a..84011ce966 100644
--- a/UI/Image/ImageUploadFlow.ts
+++ b/UI/Image/ImageUploadFlow.ts
@@ -190,7 +190,7 @@ export class ImageUploadFlow extends Toggle {
                     })
                     .SetClass("underline"),
             ]).SetStyle("font-size:small;"),
-        ]).SetClass("flex flex-col image-upload-flow mt-4 mb-8 text-center")
+        ]).SetClass("flex flex-col image-upload-flow mt-4 mb-8 text-center leading-none")
 
         super(
             new LoginToggle(
diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css
index 8278000616..3ac35f1423 100644
--- a/css/index-tailwind-output.css
+++ b/css/index-tailwind-output.css
@@ -1687,6 +1687,10 @@ video {
   font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
 }
 
+.leading-none {
+  line-height: 1;
+}
+
 .tracking-tight {
   letter-spacing: -0.025em;
 }