Fix date filter wording & improve search feedback

- Show loading when actually loading, instead of no content
- Change modified label to `Date` as it applies to a bunch of things.

Signed-off-by: fenn-cs <fenn25.fn@gmail.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

1 files changed, 14 insertions, 12 deletions

diff --git a/core/src/views/GlobalSearchModal.vue b/core/src/views/GlobalSearchModal.vue
index cfed7543e0d..e764800cfc2 100644
--- a/core/src/views/GlobalSearchModal.vue
+++ b/core/src/views/GlobalSearchModal.vue
@@ -30,26 +30,26 @@
 						{{ t('core', provider.name) }}
 					</NcActionButton>
 				</NcActions>
-				<NcActions :menu-name="t('core', 'Modified')" :open.sync="dateActionMenuIsOpen">
+				<NcActions :menu-name="t('core', 'Date')" :open.sync="dateActionMenuIsOpen">
 					<template #icon>
 						<CalendarRangeIcon :size="20" />
 					</template>
-					<NcActionButton @click="applyQuickDateRange('today')">
+					<NcActionButton :close-after-click="true" @click="applyQuickDateRange('today')">
 						{{ t('core', 'Today') }}
 					</NcActionButton>
-					<NcActionButton @click="applyQuickDateRange('7days')">
+					<NcActionButton :close-after-click="true" @click="applyQuickDateRange('7days')">
 						{{ t('core', 'Last 7 days') }}
 					</NcActionButton>
-					<NcActionButton @click="applyQuickDateRange('30days')">
+					<NcActionButton :close-after-click="true" @click="applyQuickDateRange('30days')">
 						{{ t('core', 'Last 30 days') }}
 					</NcActionButton>
-					<NcActionButton @click="applyQuickDateRange('thisyear')">
+					<NcActionButton :close-after-click="true" @click="applyQuickDateRange('thisyear')">
 						{{ t('core', 'This year') }}
 					</NcActionButton>
-					<NcActionButton @click="applyQuickDateRange('lastyear')">
+					<NcActionButton :close-after-click="true" @click="applyQuickDateRange('lastyear')">
 						{{ t('core', 'Last year') }}
 					</NcActionButton>
-					<NcActionButton @click="applyQuickDateRange('custom')">
+					<NcActionButton :close-after-click="true" @click="applyQuickDateRange('custom')">
 						{{ t('core', 'Custom date range') }}
 					</NcActionButton>
 				</NcActions>
@@ -136,7 +136,6 @@ import CustomDateRangeModal from '../components/GlobalSearch/CustomDateRangeModa
 import DotsHorizontalIcon from 'vue-material-design-icons/DotsHorizontal.vue'
 import FilterIcon from 'vue-material-design-icons/Filter.vue'
 import FilterChip from '../components/GlobalSearch/SearchFilterChip.vue'
-import FlaskEmpty from 'vue-material-design-icons/FlaskEmpty.vue'
 import ListBox from 'vue-material-design-icons/ListBox.vue'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
@@ -163,7 +162,6 @@ export default {
 		DotsHorizontalIcon,
 		FilterIcon,
 		FilterChip,
-		FlaskEmpty,
 		ListBox,
 		NcActions,
 		NcActionButton,
@@ -193,6 +191,7 @@ export default {
 			dateFilterIsApplied: false,
 			personFilterIsApplied: false,
 			filteredProviders: [],
+			searching: false,
 			searchQuery: '',
 			placesFilter: '',
 			dateTimeFilter: null,
@@ -218,8 +217,8 @@ export default {
 
 				return {
 					show: isEmptySearch || hasNoResults,
-					text: isEmptySearch ? t('core', 'Start typing in search') : t('core', 'No matching results'),
-					icon: isEmptySearch ? MagnifyIcon : FlaskEmpty,
+					text: this.searching && hasNoResults ? t('core', 'Searching …') : (isEmptySearch ? t('core', 'Start typing in search') : t('core', 'No matching results')),
+					icon: MagnifyIcon,
 				}
 			},
 		},
@@ -250,8 +249,10 @@ export default {
 	},
 	methods: {
 		find(query) {
+			this.searching = true
 			if (query.length === 0) {
 				this.results = []
+				this.searching = false
 				return
 			}
 			// Event should probably be refactored at some point to used nextcloud:global-search.search
@@ -302,6 +303,7 @@ export default {
 					console.debug('Global search results:', this.results)
 
 					this.updateResults(newResults)
+					this.searching = false
 				})
 			}
 			providersToSearch.forEach(provider => {
@@ -601,7 +603,7 @@ div.v-popper__wrapper {
 				align-items: center !important;
 
 				img {
-					width: 24px;
+					width: 20px;
 					margin: 0 4px;
 					filter: var(--background-invert-if-bright);
 				}