Prevent non-mobile-specific theme settings from showing on mobile; up…

…date settings section sort to be ft-select with only default and ascending options; adjust labels; adjust new controls' placement & appearance in settings
FreeTubeApp · Oct 26, 2023 · dc28f86 · dc28f86
1 parent ba60c42
commit dc28f86
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 95 deletions.
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -84,6 +84,7 @@
 .iconFtButton {
   display: flex;
   gap: 10px;
+  inline-size: 100%;
 }
 
 .iconDropdown {

diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
@@ -40,6 +40,10 @@ export default defineComponent({
         'catppuccinMocha',
         'pastelPink',
         'hotPink'
+      ],
+      settingsSectionListOrderValues: [
+        'defaultSort',
+        'alphabeticalAscending'
       ]
     }
   },
@@ -136,20 +140,23 @@ export default defineComponent({
       return this.$store.getters.getProfileListOptions
     },
 
-    settingsSectionListOptions: function () {
-      return this.$store.getters.getSettingsSectionListOptions
+    settingsSectionListOrder: function () {
+      return this.$store.getters.getSettingsSectionListOrder
     },
 
-    subscriptionListDisplayDropdownOptions: function () {
-      return this.listDisplayDropdownOptions(this.subscriptionListOptions, false)
+    settingsSectionListOrderNames: function () {
+      return [
+        this.$t('Settings.Theme Settings.List Display Settings.Sort.Default'),
+        this.$t('Settings.Theme Settings.List Display Settings.Sort.Sort by title (A to Z)'),
+      ]
     },
 
-    profileListDisplayDropdownOptions: function () {
-      return this.listDisplayDropdownOptions(this.profileListOptions, false)
+    subscriptionListDisplayDropdownOptions: function () {
+      return this.listDisplayDropdownOptions(this.subscriptionListOptions)
     },
 
-    settingsSectionListDisplayDropdownOptions: function () {
-      return this.listDisplayDropdownOptions(this.settingsSectionListOptions, true)
+    profileListDisplayDropdownOptions: function () {
+      return this.listDisplayDropdownOptions(this.profileListOptions)
     },
   },
   mounted: function () {
@@ -195,11 +202,6 @@ export default defineComponent({
       this.updateProfileListOptions(newListOptions)
     },
 
-    handleSettingsSectionListDisplayDropdownOptionClick: function (option) {
-      const newListOptions = this.getNewListOptions(this.settingsSectionListOptions, option)
-      this.updateSettingsSectionListOptions(newListOptions)
-    },
-
     getNewListOptions: function(list, option) {
       switch (option) {
         case 'defaultSort':
@@ -229,45 +231,30 @@ export default defineComponent({
       }
     },
 
-    listDisplayDropdownOptions: function (listOptions, showDefaultOption) {
+    listDisplayDropdownOptions: function (listOptions) {
       const radioGroupSort = []
       const options = [
         {
           type: 'radiogroup',
           radios: radioGroupSort
         }
       ]
-      if (showDefaultOption) {
-        radioGroupSort.push(
-          {
-            type: 'checkbox',
-            label: this.$t('Settings.List Display Settings.Sort.Use default sort'),
-            value: 'defaultSort',
-            checked: listOptions.sort === 'defaultSort',
-          }
-        )
-      }
 
       radioGroupSort.push(
         {
           type: 'checkbox',
-          label: this.$t('Settings.List Display Settings.Sort.Sort by title (A to Z)'),
+          label: this.$t('Settings.Theme Settings.List Display Settings.Sort.Sort by title (A to Z)'),
           value: 'alphabeticalAscending',
           checked: listOptions.sort === 'alphabeticalAscending',
+        },
+        {
+          type: 'checkbox',
+          label: this.$t('Settings.Theme Settings.List Display Settings.Sort.Sort by title (Z to A)'),
+          value: 'alphabeticalDescending',
+          checked: listOptions.sort === 'alphabeticalDescending',
         }
       )
 
-      if (!showDefaultOption) {
-        radioGroupSort.push(
-          {
-            type: 'checkbox',
-            label: this.$t('Settings.List Display Settings.Sort.Sort by title (Z to A)'),
-            value: 'alphabeticalDescending',
-            checked: listOptions.sort === 'alphabeticalDescending',
-          }
-        )
-      }
-
       if (listOptions.displayType) {
         const radioGroupDisplayType = []
         options.push(
@@ -282,13 +269,13 @@ export default defineComponent({
           },
           {
             type: 'checkbox',
-            label: this.$t('Settings.List Display Settings.Display Type.List'),
+            label: this.$t('Settings.Theme Settings.List Display Settings.Display Type.List'),
             value: 'list',
             checked: listOptions.displayType === 'list',
           },
           {
             type: 'checkbox',
-            label: this.$t('Settings.List Display Settings.Display Type.Grid.Grid'),
+            label: this.$t('Settings.Theme Settings.List Display Settings.Display Type.Grid.Grid'),
             value: 'grid',
             checked: listOptions.displayType === 'grid',
           }
@@ -312,7 +299,7 @@ export default defineComponent({
           for (let i = 2; i <= 5; ++i) {
             radioGroupItemsPerGridRow.push({
               type: 'checkbox',
-              label: this.$tc('Settings.List Display Settings.Display Type.Grid.Item per grid row', i, { number: i }),
+              label: this.$tc('Settings.Theme Settings.List Display Settings.Display Type.Grid.Item per grid row', i, { number: i }),
               value: i,
               checked: listOptions.itemsPerGridRow === i
             })
@@ -331,13 +318,13 @@ export default defineComponent({
             },
             {
               type: 'checkbox',
-              label: this.$t('Settings.List Display Settings.Display Type.Grid.Show grid item titles'),
+              label: this.$t('Settings.Theme Settings.List Display Settings.Display Type.Grid.Show grid item titles'),
               value: 'showGridItemTitles',
               checked: listOptions.showGridItemTitles
             },
             {
               type: 'checkbox',
-              label: this.$t('Settings.List Display Settings.Display Type.Grid.Hide grid item titles'),
+              label: this.$t('Settings.Theme Settings.List Display Settings.Display Type.Grid.Hide grid item titles'),
               value: 'hideGridItemTitles',
               checked: !listOptions.showGridItemTitles,
             }
@@ -361,7 +348,7 @@ export default defineComponent({
       'updateSubscriptionListSort',
       'updateSubscriptionListOptions',
       'updateProfileListOptions',
-      'updateSettingsSectionListOptions'
+      'updateSettingsSectionListOrder'
     ])
   }
 })
diff --git a/src/renderer/components/theme-settings/theme-settings.scss b/src/renderer/components/theme-settings/theme-settings.scss
@@ -0,0 +1,9 @@
+.switchColumn > .listDisplayOptions {
+  inline-size: 100%;
+}
+
+@media only screen and (max-width: 680px) {
+  .listDisplayOptions {
+    display: none;
+  }
+}
diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue
@@ -40,38 +40,6 @@
       </div>
     </div>
     <br>
-    <ft-flex-box>
-      <ft-icon-button
-        :icon="['fas', 'bars']"
-        :title="$t('Settings.List Display Settings.Subscription List Display Options')"
-        :use-ft-button="true"
-        :close-on-click="false"
-        :size="22"
-        dropdown-position-x="bottom"
-        :dropdown-options="subscriptionListDisplayDropdownOptions"
-        @click="handleSubscriptionListDisplayDropdownOptionClick"
-      />
-      <ft-icon-button
-        :icon="['fas', 'user']"
-        :title="$t('Settings.List Display Settings.Profile List Display Options')"
-        :use-ft-button="true"
-        :close-on-click="false"
-        :size="22"
-        dropdown-position-x="bottom"
-        :dropdown-options="profileListDisplayDropdownOptions"
-        @click="handleProfileListDisplayDropdownOptionClick"
-      />
-      <ft-icon-button
-        :icon="['fas', 'sliders']"
-        :title="$t('Settings.List Display Settings.Settings Section List Display Options')"
-        :use-ft-button="true"
-        :close-on-click="false"
-        :size="22"
-        dropdown-position-x="bottom"
-        :dropdown-options="settingsSectionListDisplayDropdownOptions"
-        @click="handleSettingsSectionListDisplayDropdownOptionClick"
-      />
-    </ft-flex-box>
     <ft-flex-box>
       <ft-slider
         :label="$t('Settings.Theme Settings.UI Scale')"
@@ -84,6 +52,42 @@
       />
     </ft-flex-box>
     <br>
+    <div class="switchColumnGrid">
+      <div class="switchColumn">
+        <ft-select
+          :placeholder="$t('Settings.Theme Settings.Settings Section Sort Order')"
+          :value="settingsSectionListOrder"
+          :select-names="settingsSectionListOrderNames"
+          :select-values="settingsSectionListOrderValues"
+          @change="updateSettingsSectionListOrder"
+        />
+      </div>
+      <div class="switchColumn">
+        <ft-icon-button
+          class="listDisplayOptions"
+          :icon="['fas', 'bars']"
+          :title="$t('Settings.Theme Settings.List Display Settings.Subscription List Display Options')"
+          :use-ft-button="true"
+          :close-on-click="false"
+          :size="22"
+          dropdown-position-x="bottom"
+          :dropdown-options="subscriptionListDisplayDropdownOptions"
+          @click="handleSubscriptionListDisplayDropdownOptionClick"
+        />
+        <ft-icon-button
+          class="listDisplayOptions"
+          :icon="['fas', 'user']"
+          :title="$t('Settings.Theme Settings.List Display Settings.Profile List Display Options')"
+          :use-ft-button="true"
+          :close-on-click="false"
+          :size="22"
+          dropdown-position-x="bottom"
+          :dropdown-options="profileListDisplayDropdownOptions"
+          @click="handleProfileListDisplayDropdownOptionClick"
+        />
+      </div>
+    </div>
+    <br>
     <ft-flex-box>
       <ft-select
         :placeholder="$t('Settings.Theme Settings.Base Theme.Base Theme')"
@@ -120,3 +124,4 @@
 </template>
 
 <script src="./theme-settings.js" />
+<style scoped lang="scss" src="./theme-settings.scss" />
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
@@ -309,9 +309,7 @@ const state = {
     showGridItemTitles: true,
     itemsPerGridRow: 2
   },
-  settingsSectionListOptions: {
-    sort: 'defaultSort'
-  }
+  settingsSectionListOrder: 'defaultSort'
 }
 
 const stateWithSideEffects = {

diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
@@ -112,7 +112,7 @@ export default defineComponent({
 
     sortedSettingsSectionComponents: function () {
       const settingsComponents = deepCopy(this.settingsComponents)
-      sortListUsingMethod(settingsComponents, 'title', this.settingsSectionListOptions.sort)
+      sortListUsingMethod(settingsComponents, 'title', this.settingsSectionListOrder)
       return settingsComponents
     },
 
@@ -124,8 +124,8 @@ export default defineComponent({
       return this.$store.getters.getSettingsPassword
     },
 
-    settingsSectionListOptions: function () {
-      return this.$store.getters.getSettingsSectionListOptions
+    settingsSectionListOrder: function () {
+      return this.$store.getters.getSettingsSectionListOrder
     },
   },
   created: function () {

diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
@@ -197,6 +197,21 @@ Settings:
     UI Scale: UI Scale
     Hide Side Bar Labels: Hide Side Bar Labels
     Hide FreeTube Header Logo: Hide FreeTube Header Logo
+    Settings Section Sort Order: Settings Section Sort Order
+    List Display Settings:
+      Subscription List Display Options: Subscription List Display Options
+      Profile List Display Options: Profile List Display Options
+      Sort:
+        Default: Default
+        Sort by title (A to Z): Sort by title (A to Z)
+        Sort by title (Z to A): Sort by title (Z to A)
+      Display Type:
+        List: List
+        Grid:
+          Grid: Grid
+          Item per grid row: 1 item per grid row | {number} items per grid row
+          Show grid item titles: Show grid item titles
+          Hide grid item titles: Hide grid item titles
     Base Theme:
       Base Theme: Base Theme
       Black: Black
@@ -473,21 +488,6 @@ Settings:
     Set Password To Prevent Access: Set a password to prevent access to settings
     Set Password: Set Password
     Remove Password: Remove Password
-  List Display Settings:
-    Subscription List Display Options: Subscription List Display Options
-    Profile List Display Options: Profile List Display Options
-    Settings Section List Display Options: Settings Section List Display Options
-    Sort:
-      Use default sort: Use default sort
-      Sort by title (A to Z): Sort by title (A to Z)
-      Sort by title (Z to A): Sort by title (Z to A)
-    Display Type:
-      List: List
-      Grid:
-        Grid: Grid
-        Item per grid row: 1 item per grid row | {number} items per grid row
-        Show grid item titles: Show grid item titles
-        Hide grid item titles: Hide grid item titles
 
 About:
   #On About page