Implement search filter changed indicator (#1257)

* ! Fix app unable to load due to missing `getLocale` in `mapActions`

* Implement search filter changed indicator

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)
     }
   }
 })

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()
     },

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

src/renderer/components/top-nav/top-nav.vue

@@ -66,6 +66,7 @@
         />
         <font-awesome-icon
           class="navFilterIcon navIcon"
+          :class="{ filterChanged: searchFilterValueChanged }"
           icon="filter"
           role="button"
           tabindex="0"
@@ -77,6 +78,7 @@
         v-show="showFilters"
         class="searchFilters"
         :class="{ expand: !isSideNavOpen }"
+        @filterValueUpdated="handleSearchFilterValueChanged"
       />
     </div>
     <ft-profile-selector class="side profiles" />