diff --git a/src/renderer/components/distraction-settings/distraction-settings.js b/src/renderer/components/distraction-settings/distraction-settings.js index cdb0f4f0159b6..59ad5d9d2e82b 100644 --- a/src/renderer/components/distraction-settings/distraction-settings.js +++ b/src/renderer/components/distraction-settings/distraction-settings.js @@ -111,6 +111,12 @@ export default defineComponent({ showDistractionFreeTitles: function () { return this.$store.getters.getShowDistractionFreeTitles }, + showAddedChannelsHidden: function () { + return this.$store.getters.getShowAddedChannelsHidden + }, + showAddedForbiddenTitles: function () { + return this.$store.getters.getShowAddedForbiddenTitles + }, channelsHidden: function () { return JSON.parse(this.$store.getters.getChannelsHidden).map((ch) => { // Legacy support @@ -157,6 +163,12 @@ export default defineComponent({ handleChannelsExists: function () { showToast(this.$t('Settings.Distraction Free Settings.Hide Channels Already Exists')) }, + handleAddedChannelsHidden: function () { + this.updateShowAddedChannelsHidden(!this.showAddedChannelsHidden) + }, + handleAddedForbiddenTitles: function () { + this.updateShowAddedForbiddenTitles(!this.showAddedForbiddenTitles) + }, validateChannelId: function (text) { return checkYoutubeChannelId(text) }, @@ -224,6 +236,8 @@ export default defineComponent({ 'updateHideSubscriptionsShorts', 'updateHideSubscriptionsLive', 'updateHideSubscriptionsCommunity', + 'updateShowAddedChannelsHidden', + 'updateShowAddedForbiddenTitles', ]) } }) diff --git a/src/renderer/components/distraction-settings/distraction-settings.vue b/src/renderer/components/distraction-settings/distraction-settings.vue index 40fc7a6e7e494..2dfcb323e6b08 100644 --- a/src/renderer/components/distraction-settings/distraction-settings.vue +++ b/src/renderer/components/distraction-settings/distraction-settings.vue @@ -240,10 +240,12 @@ :validate-tag-name="validateChannelId" :find-tag-info="findChannelTagInfo" :are-channel-tags="true" + :show-tags="showAddedChannelsHidden" @invalid-name="handleInvalidChannel" @error-find-tag-info="handleChannelAPIError" @change="handleChannelsHidden" @already-exists="handleChannelsExists" + @toggle-show-tags="handleAddedChannelsHidden" /> @@ -251,10 +253,12 @@ :label="$t('Settings.Distraction Free Settings.Hide Videos and Playlists Containing Text')" :tag-name-placeholder="$t('Settings.Distraction Free Settings.Hide Videos and Playlists Containing Text Placeholder')" :show-action-button="true" + :show-tags="showAddedForbiddenTitles" :tag-list="forbiddenTitles" :min-input-length="3" :tooltip="$t('Tooltips.Distraction Free Settings.Hide Videos and Playlists Containing Text')" @change="handleForbiddenTitles" + @toggle-show-tags="handleAddedForbiddenTitles" /> diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.css b/src/renderer/components/ft-input-tags/ft-input-tags.css index 6d8a667689a33..9a26873ceb021 100644 --- a/src/renderer/components/ft-input-tags/ft-input-tags.css +++ b/src/renderer/components/ft-input-tags/ft-input-tags.css @@ -38,6 +38,13 @@ user-select: text; } +.checkbox-container { + display: flex; + align-items: center; + font-size: 12px; + accent-color: var(--accent-color); +} + .tag-icon { border-radius: 50%; vertical-align: middle; diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.js b/src/renderer/components/ft-input-tags/ft-input-tags.js index 281b3517171e8..2f3225ac81499 100644 --- a/src/renderer/components/ft-input-tags/ft-input-tags.js +++ b/src/renderer/components/ft-input-tags/ft-input-tags.js @@ -1,6 +1,7 @@ import { defineComponent } from 'vue' import FtInput from '../ft-input/ft-input.vue' import { showToast } from '../../helpers/utils' +import { sanitizeForHtmlId } from '../../helpers/accessibility' export default defineComponent({ name: 'FtInputTags', @@ -36,6 +37,10 @@ export default defineComponent({ type: Boolean, default: true }, + showTags: { + type: Boolean, + default: true + }, tagList: { type: Array, default: () => { return [] } @@ -53,7 +58,12 @@ export default defineComponent({ default: (_) => ({ preferredName: '', icon: '' }), } }, - emits: ['already-exists', 'change', 'error-find-tag-info', 'invalid-name'], + emits: ['already-exists', 'change', 'error-find-tag-info', 'invalid-name', 'toggle-show-tags'], + computed: { + sanitizedId: function() { + return sanitizeForHtmlId(`checkbox-${this.label}`) + }, + }, methods: { updateTags: async function (text, _e) { if (this.areChannelTags) { @@ -126,6 +136,9 @@ export default defineComponent({ const newList = this.tagList.filter((tmpTag) => tmpTag.name !== tag.name) this.$emit('change', newList) } - } + }, + toggleShowTags: function () { + this.$emit('toggle-show-tags') + }, } }) diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.vue b/src/renderer/components/ft-input-tags/ft-input-tags.vue index 4c387589e189f..d27eecf18e640 100644 --- a/src/renderer/components/ft-input-tags/ft-input-tags.vue +++ b/src/renderer/components/ft-input-tags/ft-input-tags.vue @@ -21,7 +21,24 @@ :force-action-button-icon-name="['fas', 'arrow-right']" @click="updateTags" /> -
+
+ + +
+