Settings page is now wrapped into routing

- expanding one settings section will push onto the history - now the extra button is not needed for going back
MarmadileManteater · Oct 21, 2024 · 6e028cb · 6e028cb
1 parent ee5b1a3
commit 6e028cb
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 18 deletions.
diff --git a/src/renderer/views/Settings/Settings.css b/src/renderer/views/Settings/Settings.css
@@ -42,8 +42,6 @@
     inline-size: 100%;
     max-inline-size: 100%;
     box-sizing: border-box;
-    padding-inline-end: 4%;
-    padding-block-end: 1em;
   }
 
   .settingsContent {

diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
@@ -50,7 +50,8 @@ export default defineComponent({
     return {
       isInDesktopView: true,
       settingsSectionTypeOpenInMobile: null,
-      unlocked: false
+      unlocked: false,
+      currentPath: window.location.hash
     }
   },
   computed: {
@@ -170,9 +171,11 @@ export default defineComponent({
     }
   },
   mounted: function () {
+    this.onPopState(undefined, true)
     this.handleResize()
     window.addEventListener('resize', this.handleResize)
     document.addEventListener('scroll', this.markScrolledToSectionAsActive)
+    window.addEventListener('popstate', this.onPopState)
 
     // mark first section as active before any scrolling has taken place
     if (this.settingsSectionComponents.length > 0) {
@@ -183,9 +186,26 @@ export default defineComponent({
   beforeDestroy: function () {
     document.removeEventListener('scroll', this.markScrolledToSectionAsActive)
     window.removeEventListener('resize', this.handleResize)
+    window.removeEventListener('popstate', this.popState)
   },
   methods: {
-    navigateToSection: function(sectionType) {
+    onPopState: function (ev, forcedMobile = true) {
+      this.currentPath = window.location.hash
+      if (this.currentPath === '#/settings') {
+        this.returnToSettingsMenu()
+      } else {
+        const subPath = this.currentPath.split('#/settings#')[1]
+        if (subPath !== undefined) {
+          this.navigateToSection(subPath, forcedMobile)
+        }
+      }
+    },
+    pushState: function (path) {
+      if (`#/settings${path}` !== window.location.hash) {
+        history.pushState({}, null, `#/settings${path}`)
+      }
+    },
+    navigateToSection: function(sectionType, forcedMobile = false) {
       if (this.isInDesktopView) {
         nextTick(() => {
           const sectionElement = this.$refs[sectionType][0].$el
@@ -196,7 +216,10 @@ export default defineComponent({
           sectionHeading.focus()
           sectionHeading.tabIndex = -1
         })
-      } else {
+      }
+
+      if ((!this.isInDesktopView) || forcedMobile) {
+        this.pushState(`#${sectionType}`)
         this.settingsSectionTypeOpenInMobile = sectionType
       }
     },

diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
@@ -1,19 +1,6 @@
 <template>
   <div class="settingsPage">
     <template v-if="unlocked">
-      <div
-        v-show="settingsSectionTypeOpenInMobile != null"
-        class="returnToMenuMobileIcon"
-        @click="returnToSettingsMenu"
-        @keydown.space.enter="returnToSettingsMenu"
-      >
-        <font-awesome-icon
-          :icon="['fas', 'angle-left']"
-          role="button"
-          :title="$t('Settings.Return to Settings Menu')"
-          tabindex="0"
-        />
-      </div>
       <ft-settings-menu
         v-show="isInDesktopView || settingsSectionTypeOpenInMobile == null"
         :settings-sections="settingsSectionComponents"