From 95bb3307925be146b49a4c4ef377f1b8bbf8915b Mon Sep 17 00:00:00 2001
From: Martyn Janes <martyn@obany.com>
Date: Tue, 16 Mar 2021 11:36:16 +0100
Subject: [PATCH 1/3] fix: Auto scroll settings from settings home

---
 .../shared/components/SettingsMenu.svelte     |  4 ++--
 packages/shared/lib/router.ts                 |  5 +++++
 .../routes/dashboard/settings/Settings.svelte |  3 ++-
 .../settings/views/SettingsHome.svelte        | 22 ++++++++++++++-----
 .../settings/views/SettingsViewer.svelte      | 10 ++++++++-
 5 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/packages/shared/components/SettingsMenu.svelte b/packages/shared/components/SettingsMenu.svelte
index 7629c7202cf..85a1b6cd420 100644
--- a/packages/shared/components/SettingsMenu.svelte
+++ b/packages/shared/components/SettingsMenu.svelte
@@ -8,7 +8,7 @@
     export let iconColor
     export let title
     export let description
-    export let onClick = () => {}
+    export let onClick = (setting) => {}
 </script>
 
 <div class="flex-1">
@@ -17,7 +17,7 @@
     <Text type="p" classes="mb-4" secondary>{description}</Text>
     {#each Object.values(settings) as setting}
         <button
-            on:click={() => onClick()}
+            on:click={() => onClick(setting)}
             class="group flex flex-row justify-start items-center hover:bg-blue-50 py-2 rounded-lg w-3/4 text-left">
             <Icon icon={icons[setting]} classes="text-gray-500 ml-1 mr-3 group-hover:text-blue-500" />
             <Text type="p" secondary classes="group-hover:text-blue-500">{locale(`views.settings.${setting}.title`)}</Text>
diff --git a/packages/shared/lib/router.ts b/packages/shared/lib/router.ts
index 1afa60b4482..390ddfb800a 100644
--- a/packages/shared/lib/router.ts
+++ b/packages/shared/lib/router.ts
@@ -70,6 +70,11 @@ export const accountRoute = writable<AccountRoutes>(AccountRoutes.Init)
  */
 export const settingsRoute = writable<SettingsRoutes>(SettingsRoutes.Init)
 
+/**
+ * Settings child route
+ */
+ export const settingsChildRoute = writable<string>(null)
+
 /**
  * Navigate to initial route
  */
diff --git a/packages/shared/routes/dashboard/settings/Settings.svelte b/packages/shared/routes/dashboard/settings/Settings.svelte
index 17e87facbcd..e1984fcab34 100644
--- a/packages/shared/routes/dashboard/settings/Settings.svelte
+++ b/packages/shared/routes/dashboard/settings/Settings.svelte
@@ -1,7 +1,7 @@
 <script lang="typescript">
     import { deepLinkRequestActive } from 'shared/lib/deepLinking'
     import { activeProfile } from 'shared/lib/profile'
-    import { settingsRoute } from 'shared/lib/router'
+    import { settingsChildRoute, settingsRoute } from 'shared/lib/router'
     import { SettingsRoutes } from 'shared/lib/typings/routes'
     import { createEventDispatcher, onDestroy } from 'svelte'
     import { get } from 'svelte/store'
@@ -25,6 +25,7 @@
 
     onDestroy(() => {
         settingsRoute.set(SettingsRoutes.Init)
+        settingsChildRoute.set(null)
     })
 </script>
 
diff --git a/packages/shared/routes/dashboard/settings/views/SettingsHome.svelte b/packages/shared/routes/dashboard/settings/views/SettingsHome.svelte
index 57b2f0a12ff..67806a63364 100644
--- a/packages/shared/routes/dashboard/settings/views/SettingsHome.svelte
+++ b/packages/shared/routes/dashboard/settings/views/SettingsHome.svelte
@@ -2,7 +2,7 @@
     import { SettingsRoutes, GeneralSettings, SecuritySettings, AdvancedSettings, HelpAndInfo } from 'shared/lib/typings/routes'
     import { SettingsIcons } from 'shared/lib/typings/icons'
     import { Text, SettingsMenu } from 'shared/components'
-    import { settingsRoute } from 'shared/lib/router';
+    import { settingsChildRoute, settingsRoute } from 'shared/lib/router';
 
     export let locale
     export let mobile
@@ -21,7 +21,10 @@
                 settings={GeneralSettings}
                 title={locale('views.settings.generalSettings.title')}
                 description={locale('views.settings.generalSettings.description')}
-                onClick={() => settingsRoute.set(SettingsRoutes.GeneralSettings)}
+                onClick={(setting) => {
+                    settingsRoute.set(SettingsRoutes.GeneralSettings)
+                    settingsChildRoute.set(setting)
+                }}
                 {locale} />
             <SettingsMenu
                 icon="security"
@@ -30,7 +33,10 @@
                 settings={SecuritySettings}
                 title={locale('views.settings.security.title')}
                 description={locale('views.settings.security.description')}
-                onClick={() => settingsRoute.set(SettingsRoutes.Security)}
+                onClick={(setting) => {
+                    settingsRoute.set(SettingsRoutes.Security)
+                    settingsChildRoute.set(setting)
+                }}
                 {locale} />
             <SettingsMenu
                 icon="tools"
@@ -39,7 +45,10 @@
                 settings={AdvancedSettings}
                 title={locale('views.settings.advancedSettings.title')}
                 description={locale('views.settings.advancedSettings.description')}
-                onClick={() => settingsRoute.set(SettingsRoutes.AdvancedSettings)}
+                onClick={(setting) => {
+                    settingsRoute.set(SettingsRoutes.AdvancedSettings)
+                    settingsChildRoute.set(setting)
+                }}
                 {locale} />
             <SettingsMenu
                 icon="info"
@@ -48,7 +57,10 @@
                 settings={HelpAndInfo}
                 title={locale('views.settings.helpAndInfo.title')}
                 description={locale('views.settings.helpAndInfo.description')}
-                onClick={() => settingsRoute.set(SettingsRoutes.HelpAndInfo)}
+                onClick={(setting) => {
+                    settingsRoute.set(SettingsRoutes.HelpAndInfo)
+                    settingsChildRoute.set(setting)
+                }}
                 {locale} />
         </div>
     </div>
diff --git a/packages/shared/routes/dashboard/settings/views/SettingsViewer.svelte b/packages/shared/routes/dashboard/settings/views/SettingsViewer.svelte
index ae104da3d9d..94df14cc32c 100644
--- a/packages/shared/routes/dashboard/settings/views/SettingsViewer.svelte
+++ b/packages/shared/routes/dashboard/settings/views/SettingsViewer.svelte
@@ -1,9 +1,11 @@
 <script lang="typescript">
     import { Icon, Scroller, SettingsNavigator, Text } from 'shared/components'
-    import { settingsRoute } from 'shared/lib/router'
+    import { settingsChildRoute, settingsRoute } from 'shared/lib/router'
     import { SettingsIcons } from 'shared/lib/typings/icons'
     import { AdvancedSettings, GeneralSettings, HelpAndInfo, SecuritySettings, SettingsRoutes } from 'shared/lib/typings/routes'
+    import { onMount } from 'svelte'
     import { Advanced, General, Security } from './'
+
     export let locale
     export let mobile
 
@@ -34,6 +36,12 @@
     function goToSettingsHome() {
         settingsRoute.set(SettingsRoutes.Init)
     }
+    onMount(() => {
+        const child = $settingsChildRoute
+        if (child) {
+            scrollIntoView(child)
+        }
+    })
 </script>
 
 {#if mobile}

From 6444c2dd636ec5ecf16b79ca106b0151643dfda0 Mon Sep 17 00:00:00 2001
From: Martyn Janes <martyn@obany.com>
Date: Tue, 16 Mar 2021 11:38:55 +0100
Subject: [PATCH 2/3] fix: Clear the child route

---
 .../shared/routes/dashboard/settings/views/SettingsViewer.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/shared/routes/dashboard/settings/views/SettingsViewer.svelte b/packages/shared/routes/dashboard/settings/views/SettingsViewer.svelte
index 94df14cc32c..aae9ff87312 100644
--- a/packages/shared/routes/dashboard/settings/views/SettingsViewer.svelte
+++ b/packages/shared/routes/dashboard/settings/views/SettingsViewer.svelte
@@ -38,6 +38,7 @@
     }
     onMount(() => {
         const child = $settingsChildRoute
+        settingsChildRoute.set(null)
         if (child) {
             scrollIntoView(child)
         }

From 6363525141adecbd2085fccd8f49c0f2a86380fd Mon Sep 17 00:00:00 2001
From: Charlie Varley <charlie.varley@iota.org>
Date: Wed, 17 Mar 2021 01:32:49 +0000
Subject: [PATCH 3/3] fix: settings scroll behaviour

---
 .../routes/dashboard/settings/views/SettingsViewer.svelte   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/shared/routes/dashboard/settings/views/SettingsViewer.svelte b/packages/shared/routes/dashboard/settings/views/SettingsViewer.svelte
index aae9ff87312..80ff91b69a7 100644
--- a/packages/shared/routes/dashboard/settings/views/SettingsViewer.svelte
+++ b/packages/shared/routes/dashboard/settings/views/SettingsViewer.svelte
@@ -23,11 +23,11 @@
         helpAndInfo: HelpAndInfo,
     }
 
-    function scrollIntoView(id) {
+    function scrollIntoView(id, options = null) {
         if (id) {
             const elem = document.getElementById(id)
             if (elem) {
-                elem.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' })
+                elem.scrollIntoView(options ?? { behavior: 'smooth' })
             } else {
                 console.error(`Element with id "${id}" missing in scrollIntoView`)
             }
@@ -40,7 +40,7 @@
         const child = $settingsChildRoute
         settingsChildRoute.set(null)
         if (child) {
-            scrollIntoView(child)
+            scrollIntoView(child, { behavior: 'auto' })
         }
     })
 </script>