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 @@
/>