Move settings expansion toggle on top (& shorten label)

FreeTubeApp · Oct 28, 2023 · 39ced66 · 39ced66
1 parent df50d47
commit 39ced66
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 24 deletions.
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.js b/src/renderer/components/ft-settings-section/ft-settings-section.js
@@ -6,10 +6,6 @@ export default defineComponent({
     title: {
       type: String,
       required: true
-    },
-    isOpenOverride: {
-      type: Boolean,
-      default: false
     }
   },
   computed: {

diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.vue b/src/renderer/components/ft-settings-section/ft-settings-section.vue
@@ -1,6 +1,6 @@
 <template>
   <details
-    :open="allSettingsSectionsExpandedByDefault || isOpenOverride ? 'open' : null"
+    :open="allSettingsSectionsExpandedByDefault ? 'true' : null"
     class="settingsSection"
   >
     <summary class="sectionHeader">

diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
@@ -25,7 +25,6 @@ export default defineComponent({
       uiScaleStep: 5,
       disableSmoothScrollingToggleValue: false,
       showRestartPrompt: false,
-      allSettingsSectionsExpandedByDefaultModified: false,
       restartPromptValues: [
         'yes',
         'no'
@@ -43,9 +42,6 @@ export default defineComponent({
     }
   },
   computed: {
-    allSettingsSectionsExpandedByDefault: function () {
-      return this.$store.getters.getAllSettingsSectionsExpandedByDefault
-    },
     barColor: function () {
       return this.$store.getters.getBarColor
     },
@@ -147,11 +143,6 @@ export default defineComponent({
       this.showRestartPrompt = true
     },
 
-    handleallSettingsSectionsExpandedByDefault: function (value) {
-      this.allSettingsSectionsExpandedByDefaultModified = true
-      this.updateAllSettingsSectionsExpandedByDefault(value)
-    },
-
     handleSmoothScrolling: function (value) {
       this.showRestartPrompt = false
 
@@ -171,7 +162,6 @@ export default defineComponent({
     ...mapActions([
       'updateBarColor',
       'updateBaseTheme',
-      'updateAllSettingsSectionsExpandedByDefault',
       'updateMainColor',
       'updateSecColor',
       'updateExpandSideBar',

diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue
@@ -1,6 +1,5 @@
 <template>
   <ft-settings-section
-    :is-open-override="allSettingsSectionsExpandedByDefaultModified"
     :title="$t('Settings.Theme Settings.Theme Settings')"
   >
     <div class="switchColumnGrid">
@@ -38,12 +37,6 @@
           :default-value="hideHeaderLogo"
           @change="updateHideHeaderLogo"
         />
-        <ft-toggle-switch
-          :label="$t('Settings.Theme Settings.Expand All Settings Sections By Default')"
-          :default-value="allSettingsSectionsExpandedByDefault"
-          :compact="true"
-          @change="handleallSettingsSectionsExpandedByDefault"
-        />
       </div>
     </div>
     <ft-flex-box>

diff --git a/src/renderer/views/Settings/Settings.css b/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;
+}
diff --git a/src/renderer/views/Settings/Settings.js b/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',
+    ])
   }
 })
diff --git a/src/renderer/views/Settings/Settings.vue b/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 />

diff --git a/static/locales/en-US.yaml b/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:
@@ -198,7 +199,6 @@ Settings:
     UI Scale: UI Scale
     Hide Side Bar Labels: Hide Side Bar Labels
     Hide FreeTube Header Logo: Hide FreeTube Header Logo
-    Expand All Settings Sections By Default: Expand All Settings Sections By Default
     Base Theme:
       Base Theme: Base Theme
       Black: Black