diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.js b/src/renderer/components/ft-search-filters/ft-search-filters.js index 8c35fc3b..47c812a8 100644 --- a/src/renderer/components/ft-search-filters/ft-search-filters.js +++ b/src/renderer/components/ft-search-filters/ft-search-filters.js @@ -42,6 +42,15 @@ export default Vue.extend({ return this.$store.getters.getSearchSettings }, + filterValueChanged: function() { + return [ + this.$refs.sortByRadio.selectedValue !== this.sortByValues[0], + this.$refs.timeRadio.selectedValue !== this.timeValues[0], + this.$refs.typeRadio.selectedValue !== this.typeValues[0], + this.$refs.durationRadio.selectedValue !== this.durationValues[0] + ].some((bool) => bool === true) + }, + sortByLabels: function () { return [ this.$t('Search Filters.Sort By.Most Relevant'), @@ -82,6 +91,7 @@ export default Vue.extend({ methods: { updateSortBy: function (value) { this.$store.commit('setSearchSortBy', value) + this.$emit('filterValueUpdated', this.filterValueChanged) }, updateTime: function (value) { @@ -91,6 +101,7 @@ export default Vue.extend({ this.$store.commit('setSearchType', 'all') } this.$store.commit('setSearchTime', value) + this.$emit('filterValueUpdated', this.filterValueChanged) }, updateType: function (value) { @@ -103,6 +114,7 @@ export default Vue.extend({ this.$store.commit('setSearchDuration', '') } this.$store.commit('setSearchType', value) + this.$emit('filterValueUpdated', this.filterValueChanged) }, updateDuration: function (value) { @@ -112,6 +124,7 @@ export default Vue.extend({ this.updateType('all') } this.$store.commit('setSearchDuration', value) + this.$emit('filterValueUpdated', this.filterValueChanged) } } }) diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js index 6f38110a..34c384dc 100644 --- a/src/renderer/components/top-nav/top-nav.js +++ b/src/renderer/components/top-nav/top-nav.js @@ -19,6 +19,7 @@ export default Vue.extend({ component: this, windowWidth: 0, showFilters: false, + searchFilterValueChanged: false, searchSuggestionsDataList: [] } }, @@ -245,6 +246,10 @@ export default Vue.extend({ this.showFilters = false }, + handleSearchFilterValueChanged: function(filterValueChanged) { + this.searchFilterValueChanged = filterValueChanged + }, + historyBack: function () { window.history.back() }, diff --git a/src/renderer/components/top-nav/top-nav.sass b/src/renderer/components/top-nav/top-nav.sass index cee1cde9..4d63b0bc 100644 --- a/src/renderer/components/top-nav/top-nav.sass +++ b/src/renderer/components/top-nav/top-nav.sass @@ -55,6 +55,17 @@ @include top-nav-is-colored background-color: var(--primary-color-active) +.navFilterIcon // Filter icon + $effect-distance: 10px + + margin-left: $effect-distance + + &.filterChanged // When filter value changed from default + box-shadow: 0 0 $effect-distance var(--primary-color) + + @include top-nav-is-colored + box-shadow: 0 0 $effect-distance var(--text-with-main-color) + .side // parts of the top nav either side of the search bar display: flex align-items: center diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue index a395a0e2..8e131b7d 100644 --- a/src/renderer/components/top-nav/top-nav.vue +++ b/src/renderer/components/top-nav/top-nav.vue @@ -66,6 +66,7 @@ />