Open/close all settings tabs persistent toggle

src/renderer/components/ft-settings-section/ft-settings-section.js

@@ -7,5 +7,10 @@ export default defineComponent({
  type: String,
  required: true
  }
+ },
+ computed: {
+ allSettingsSectionsExpandedByDefault: function () {
+ return this.$store.getters.getAllSettingsSectionsExpandedByDefault
+ }
  }
 })

src/renderer/components/ft-settings-section/ft-settings-section.vue

@@ -1,5 +1,8 @@
 <template>
- <details class="settingsSection">
+ <details
+ :open="allSettingsSectionsExpandedByDefault ? 'true' : null"
+ class="settingsSection"
+ >
  <summary class="sectionHeader">
  <h3 class="sectionTitle">
  {{ title }}

src/renderer/store/modules/settings.js

@@ -162,6 +162,7 @@ const defaultSideEffectsTriggerId = settingId =>
 /*****/
 
 const state = {
+ allSettingsSectionsExpandedByDefault: false,
  autoplayPlaylists: true,
  autoplayVideos: true,
  backendFallback: process.env.IS_ELECTRON,

src/renderer/views/Settings/Settings.css

@@ -6,3 +6,13 @@ hr {
  border: 0;
  background-color: var(--scrollbar-color-hover);
 }
+
+.switchColumnGrid {
+ inline-size: 85%;
+ margin-inline: auto;
+}
+
+.settingsToggle {
+ padding-block: 0;
+ margin-block: 10px 5px;
+}

src/renderer/views/Settings/Settings.js

@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue'
+import { mapActions } from 'vuex'
 import GeneralSettings from '../../components/general-settings/general-settings.vue'
 import ThemeSettings from '../../components/theme-settings/theme-settings.vue'
 import PlayerSettings from '../../components/player-settings/player-settings.vue'
@@ -14,6 +15,7 @@ import ParentControlSettings from '../../components/parental-control-settings/pa
 import ExperimentalSettings from '../../components/experimental-settings/experimental-settings.vue'
 import PasswordSettings from '../../components/password-settings/password-settings.vue'
 import PasswordDialog from '../../components/password-dialog/password-dialog.vue'
+import FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue'
 
 export default defineComponent({
  name: 'Settings',
@@ -33,6 +35,7 @@ export default defineComponent({
  'experimental-settings': ExperimentalSettings,
  'password-settings': PasswordSettings,
  'password-dialog': PasswordDialog,
+ 'ft-toggle-switch': FtToggleSwitch
  },
  data: function () {
  return {
@@ -46,11 +49,20 @@ export default defineComponent({
 
  settingsPassword: function () {
  return this.$store.getters.getSettingsPassword
- }
+ },
+
+ allSettingsSectionsExpandedByDefault: function () {
+ return this.$store.getters.getAllSettingsSectionsExpandedByDefault
+ },
  },
  created: function () {
  if (this.settingsPassword === '') {
  this.unlocked = true
  }
+ },
+ methods: {
+ ...mapActions([
+ 'updateAllSettingsSectionsExpandedByDefault',
+ ])
  }
 })

src/renderer/views/Settings/Settings.vue

@@ -1,6 +1,17 @@
 <template>
  <div>
  <template v-if="unlocked">
+ <div class="switchColumnGrid">
+ <div class="switchColumn">
+ <ft-toggle-switch
+ class="settingsToggle"
+ :label="$t('Settings.Expand All Settings Sections')"
+ :default-value="allSettingsSectionsExpandedByDefault"
+ :compact="false"
+ @change="updateAllSettingsSectionsExpandedByDefault"
+ />
+ </div>
+ </div>
  <general-settings />
  <hr>
  <theme-settings />

static/locales/en-US.yaml

@@ -149,6 +149,7 @@ History:
 Settings:
  # On Settings Page
  Settings: Settings
+ Expand All Settings Sections: Expand All Settings Sections
  The app needs to restart for changes to take effect. Restart and apply change?: The
  app needs to restart for changes to take effect. Restart and apply change?
  General Settings: