use slider

FreeTubeApp · Dec 4, 2024 · c656768 · c656768
1 parent c85c30e
commit c656768
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 33 deletions.
diff --git a/src/renderer/components/subscription-settings/subscription-settings.css b/src/renderer/components/subscription-settings/subscription-settings.css
@@ -0,0 +1,4 @@
+.onlyShowLatestFromChannelNumber {
+  inline-size: calc(100% - 44px);
+  padding-inline-start: 44px;
+}
diff --git a/src/renderer/components/subscription-settings/subscription-settings.js b/src/renderer/components/subscription-settings/subscription-settings.js
@@ -2,14 +2,14 @@ import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
-import FtInput from '../ft-input/ft-input.vue'
+import FtSlider from '../ft-slider/ft-slider.vue'
 
 export default defineComponent({
   name: 'SubscriptionSettings',
   components: {
     'ft-settings-section': FtSettingsSection,
     'ft-toggle-switch': FtToggleSwitch,
-    'ft-input': FtInput,
+    'ft-slider': FtSlider,
   },
   computed: {
     hideWatchedSubs: function () {

diff --git a/src/renderer/components/subscription-settings/subscription-settings.scss b/src/renderer/components/subscription-settings/subscription-settings.scss
diff --git a/src/renderer/components/subscription-settings/subscription-settings.vue b/src/renderer/components/subscription-settings/subscription-settings.vue
@@ -32,22 +32,21 @@
           :compact="true"
           @change="updateHideWatchedSubs"
         />
-        <div class="onlyShowLatestFromChannel">
-          <ft-toggle-switch
-            :id="'onlyShowLatestFromChannel'"
-            :label="onlyShowLatestFromChannel ? $t('Settings.Subscription Settings.Limit the number of videos displayed for each channel to') : $t('Settings.Subscription Settings.Limit the number of videos displayed for each channel')"
-            :default-value="onlyShowLatestFromChannel"
-            :compact="true"
-            @change="updateOnlyShowLatestFromChannel"
-          />
-          <ft-input
-            v-if="onlyShowLatestFromChannel"
-            :placeholder="'1'"
-            :show-action-button="false"
-            input-type="number"
-            :value="onlyShowLatestFromChannelNumber"
-            :aria-labelledby="'onlyShowLatestFromChannel'"
-            @input="updateOnlyShowLatestFromChannelNumber"
+        <ft-toggle-switch
+          :label="$t('Settings.Subscription Settings.Limit the number of videos displayed for each channel')"
+          :default-value="onlyShowLatestFromChannel"
+          :compact="true"
+          @change="updateOnlyShowLatestFromChannel"
+        />
+        <div class="onlyShowLatestFromChannelNumber">
+          <ft-slider
+            :label="$t('Settings.Subscription Settings.To')"
+            :default-value="onlyShowLatestFromChannelNumber"
+            :disabled="!onlyShowLatestFromChannel"
+            :min-value="1"
+            :max-value="30"
+            :step="1"
+            @change="updateOnlyShowLatestFromChannelNumber"
           />
         </div>
       </div>
@@ -56,4 +55,4 @@
 </template>
 
 <script src="./subscription-settings.js" />
-<style lang="scss" src="./subscription-settings.scss"  />
+<style src="./subscription-settings.css" scoped />
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
@@ -488,8 +488,8 @@ Settings:
     Hide Videos on Watch: Hide Videos on Watch
     Fetch Feeds from RSS: Fetch Feeds from RSS
     Fetch Automatically: Fetch Feed Automatically
-    Limit the number of videos displayed for each channel: Limit the number of videos displayed for each channel
-    Limit the number of videos displayed for each channel to: Limit the number of videos displayed for each channel to
+    'Limit the number of videos displayed for each channel': 'Limit the number of videos displayed for each channel'
+    To: To
     Confirm Before Unsubscribing: Confirm Before Unsubscribing
   Distraction Free Settings:
     Distraction Free Settings: Distraction Free