Merge pull request #41781 from nextcloud/minor-ui-updates-global-search

UI updates for global search

core/src/components/GlobalSearch/SearchFilterChip.vue

@@ -6,22 +6,28 @@
 		</span>
 		<span class="text">{{ text }}</span>
 		<span class="close-icon" @click="deleteChip">
-			<CloseIcon :size="16" />
+			<CloseIcon :size="18" />
 		</span>
 	</div>
 </template>
 
 <script>
-import CloseIcon from 'vue-material-design-icons/CloseThick.vue'
+import CloseIcon from 'vue-material-design-icons/Close.vue'
 
 export default {
 	name: 'SearchFilterChip',
 	components: {
 		CloseIcon,
 	},
 	props: {
-		text: String,
-		pretext: String,
+		text: {
+			type: String,
+			required: true,
+		},
+		pretext: {
+			type: String,
+			required: true,
+		},
 	},
 	methods: {
 		deleteChip() {
@@ -40,8 +46,6 @@ export default {
     border-radius: 20px;
     background-color: var(--color-primary-element-light);
     margin: 2px;
-    font-size: 10px;
-    font-weight: bolder;
 
     .icon {
         display: flex;
@@ -61,7 +65,7 @@ export default {
     }
 
     .close-icon {
-        cursor: pointer;
+        cursor: pointer ;
 
         :hover {
             filter: invert(20%);

core/src/components/GlobalSearch/SearchableList.vue

@@ -149,6 +149,9 @@ export default {
 
 		:deep(.button-vue) {
 			border-radius: var(--border-radius-large) !important;
+			span {
+				font-weight: initial;
+			}
 		}
 	}
 

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,
@@ -217,8 +216,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,
 				}
 			},
 		},
@@ -244,8 +243,10 @@ export default {
 	},
 	methods: {
 		find(query) {
+			this.searching = true
 			if (query.length === 0) {
 				this.results = []
+				this.searching = false
 				return
 			}
 			if (this.supportFiltering()) {
@@ -297,6 +298,7 @@ export default {
 					console.debug('Global search results:', this.results)
 
 					this.updateResults(newResults)
+					this.searching = false
 				})
 			}
 			providersToSearch.forEach(provider => {
@@ -596,7 +598,7 @@ div.v-popper__wrapper {
 				align-items: center !important;
 
 				img {
-					width: 24px;
+					width: 20px;
 					margin: 0 4px;
 					filter: var(--background-invert-if-bright);
 				}