From 2cb128fd51fb91ad9e38ce44bc245770bbc6c0f6 Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Sun, 10 Mar 2024 21:20:56 -0700
Subject: [PATCH] Auto-hide advanced settings

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
---
 src/pages/settings.vue | 197 ++++++++++++++++++++++-------------------
 1 file changed, 106 insertions(+), 91 deletions(-)

diff --git a/src/pages/settings.vue b/src/pages/settings.vue
index 5146465..8a1e325 100644
--- a/src/pages/settings.vue
+++ b/src/pages/settings.vue
@@ -1,12 +1,20 @@
 <template>
-    <f7-page name="settings">
-      <!-- Top Navbar -->
-      <f7-navbar :sliding="false" back-link="Back">
-        <f7-nav-title sliding>Settings</f7-nav-title>
-      </f7-navbar>
-      <f7-block style="display: flex; flex-direction: column; align-items: center;">
-        <div style="display: flex; flex-direction: column; align-items: center;">
-          <f7-block-title medium>Server Settings</f7-block-title>
+  <f7-page name="settings">
+    <!-- Top Navbar -->
+    <f7-navbar :sliding="false" back-link="Back">
+      <f7-nav-title sliding>Settings</f7-nav-title>
+    </f7-navbar>
+    <f7-block style="display: flex; flex-direction: column; align-items: center;">
+      <div style="display: flex; flex-direction: column; align-items: center;">
+        <f7-block-title medium>Dark Mode</f7-block-title>
+        <f7-list style="width: 100%;">
+          <f7-list-item title="Auto" :checked="themeSettings.darkMode == 'auto'" radio name="darkmode" radio-icon="end" @change="setDarkMode('auto')" ></f7-list-item>
+          <f7-list-item title="Light" :checked="themeSettings.darkMode.toString() == 'false'" radio name="darkmode" radio-icon="end" @change="setDarkMode(false)" ></f7-list-item>
+          <f7-list-item title="Dark" :checked="themeSettings.darkMode.toString() == 'true'" radio name="darkmode" radio-icon="end" @change="setDarkMode(true)" ></f7-list-item>
+        </f7-list>
+        <f7-button @click="saveAllSettings">Save</f7-button>
+        <f7-block-title @click="toggleSettingsView" medium>Advanced Settings</f7-block-title>
+        <div ref="advancedSettings" class="settings-container">
           <div style="display:flex; justify-content:space-between; width: 100%">
             <span style="margin-left: 16px;">Use external server</span>
             <f7-toggle v-model:checked="serverSettings.use" style="margin-right: 16px;" />
@@ -20,94 +28,101 @@
             <f7-list-item v-for="(port, add) in otherIp" :disabled="!serverSettings.use" :title="add" @click="setServerProps(add, port)">{{ port }}</f7-list-item>
             <f7-list-item v-if="Object.keys(otherIp).length == 0" title="No previous server settings"></f7-list-item>
           </f7-list>
-          <f7-block-title medium>Dark Mode</f7-block-title>
-          <f7-list style="width: 100%;">
-            <f7-list-item title="Auto" :checked="themeSettings.darkMode == 'auto'" radio name="darkmode" radio-icon="end" @change="setDarkMode('auto')" ></f7-list-item>
-            <f7-list-item title="Light" :checked="themeSettings.darkMode.toString() == 'false'" radio name="darkmode" radio-icon="end" @change="setDarkMode(false)" ></f7-list-item>
-            <f7-list-item title="Dark" :checked="themeSettings.darkMode.toString() == 'true'" radio name="darkmode" radio-icon="end" @change="setDarkMode(true)" ></f7-list-item>
-          </f7-list>
-          <f7-button @click="saveAllSettings" >Save</f7-button>
         </div>
-      </f7-block>
-    </f7-page>
+      </div>
+    </f7-block>
+  </f7-page>
 </template>
 
-<script>
-    import { f7 } from 'framework7-vue'
+<style>
+  .settings-container {
+    max-height: 0px;
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+  }
+</style>
 
-    export default {
-        data () {
-            return {
-              serverSettings: {
-                use: false,
-                address: '10.170.64.22',
-                port: '9001',
-                previous: {}
-              },
-              themeSettings: {
-                darkMode: 'auto'
-              }
-            }
+<script>
+  import { f7 } from 'framework7-vue'
+
+  export default {
+    data () {
+      return {
+        showAdvanced: false,
+        serverSettings: {
+          use: false,
+          address: '10.170.64.22',
+          port: '9001',
+          previous: {}
         },
-        computed: {
-          otherIp () {
-            let filteredIps = {}
-            for (var oldIp in this.serverSettings.previous) {
-              if (oldIp != this.serverSettings.address) {
-                filteredIps[oldIp] = this.serverSettings.previous[oldIp]
-              }
-            }
-            return filteredIps
-          }
-        },
-        created () {
-            var loadServerSettings = localStorage.getItem('serverSettings')
-            if (loadServerSettings) this.serverSettings =  JSON.parse(loadServerSettings)
-            if (!this.serverSettings.previous) this.serverSettings.previous = {}
-            var loadThemeSettings = localStorage.getItem('themeSettings')
-            if (loadThemeSettings) this.themeSettings = JSON.parse(loadThemeSettings)
-        },
-        methods: {
-            saveAllSettings () {
-                let saveSetting = new Promise(
-                  (saved,failed) => {
-                    try {
-                      if (this.serverSettings.use) {
-                        this.serverSettings.previous[this.serverSettings.address] = this.serverSettings.port
-                      }
-                      localStorage.setItem('serverSettings',JSON.stringify(this.serverSettings))
-                      localStorage.setItem('themeSettings',JSON.stringify(this.themeSettings))
-                      saved()
-                    } catch {
-                      failed()
-                    }
-                  }
-                )
-                saveSetting.then(
-                  () => {
-                    var toast = f7.toast.create({
-                      text: 'Settings saved',
-                      closeTimeout: 2000
-                    })
-                    toast.open()
-                  },
-                  () => {
-                    var toast = f7.toast.create({
-                      text: 'ERROR: No settings saved',
-                      closeTimeout: 2000
-                    })
-                    toast.open()
-                  }
-                )
-            },
-            setDarkMode (mode) {
-              this.themeSettings.darkMode = mode
-              f7.setDarkMode(mode)
-            },
-            setServerProps (add, port) {
-              this.serverSettings.address = add
-              this.serverSettings.port = port
-            }
+        themeSettings: {
+          darkMode: 'auto'
+        }
+      }
+    },
+    computed: {
+      otherIp () {
+        let filteredIps = {}
+        for (var oldIp in this.serverSettings.previous) {
+          if (oldIp != this.serverSettings.address) {
+            filteredIps[oldIp] = this.serverSettings.previous[oldIp]
           }
         }
+        return filteredIps
+      }
+    },
+    created () {
+        var loadServerSettings = localStorage.getItem('serverSettings')
+        if (loadServerSettings) this.serverSettings =  JSON.parse(loadServerSettings)
+        if (!this.serverSettings.previous) this.serverSettings.previous = {}
+        var loadThemeSettings = localStorage.getItem('themeSettings')
+        if (loadThemeSettings) this.themeSettings = JSON.parse(loadThemeSettings)
+    },
+    methods: {
+      saveAllSettings () {
+        let saveSetting = new Promise(
+          (saved,failed) => {
+            try {
+              if (this.serverSettings.use) {
+                this.serverSettings.previous[this.serverSettings.address] = this.serverSettings.port
+              }
+              localStorage.setItem('serverSettings',JSON.stringify(this.serverSettings))
+              localStorage.setItem('themeSettings',JSON.stringify(this.themeSettings))
+              saved()
+            } catch {
+              failed()
+            }
+          }
+        )
+        saveSetting.then(
+          () => {
+            var toast = f7.toast.create({
+              text: 'Settings saved',
+              closeTimeout: 2000
+            })
+            toast.open()
+          },
+          () => {
+            var toast = f7.toast.create({
+              text: 'ERROR: No settings saved',
+              closeTimeout: 2000
+            })
+            toast.open()
+          }
+        )
+      },
+      setDarkMode (mode) {
+        this.themeSettings.darkMode = mode
+        f7.setDarkMode(mode)
+      },
+      setServerProps (add, port) {
+        this.serverSettings.address = add
+        this.serverSettings.port = port
+      },
+      toggleSettingsView () {
+        this.showAdvanced = !this.showAdvanced
+        this.$refs.advancedSettings.style.maxHeight = `${this.showAdvanced ? this.$refs.advancedSettings.scrollHeight : 0}px`
+      }
+    }
+  }
 </script>
\ No newline at end of file