Enhancements: Fix and updates to most recent global search UI

core/src/components/GlobalSearch/CustomDateRangeModal.vue

@@ -1,33 +1,33 @@
 <template>
 	<NcModal v-if="isModalOpen"
 		id="global-search"
-		:name="t('core', 'Date range filter')"
+		:name="t('core', 'Custom date range')"
 		:show.sync="isModalOpen"
 		:size="'small'"
 		:clear-view-delay="0"
-		:title="t('Date range filter')"
+		:title="t('core', 'Custom date range')"
 		@close="closeModal">
 		<!-- Custom date range -->
 		<div class="global-search-custom-date-modal">
-			<h1>{{ t('core', 'Date range filter') }}</h1>
+			<h1>{{ t('core', 'Custom date range') }}</h1>
 			<div class="global-search-custom-date-modal__pickers">
 				<NcDateTimePicker :id="'globalsearch-custom-date-range-start'"
 					v-model="dateFilter.startFrom"
-					:max="new Date()"
-					:label="t('core', 'Pick a start date')"
+					:label="t('core', 'Pick start date')"
 					type="date" />
 				<NcDateTimePicker :id="'globalsearch-custom-date-range-end'"
 					v-model="dateFilter.endAt"
-					:max="new Date()"
-					:label="t('core', 'Pick an end date')"
+					:label="t('core', 'Pick end date')"
 					type="date" />
 			</div>
-			<NcButton @click="applyCustomRange">
-				{{ t('core', 'Apply range') }}
-				<template #icon>
-					<CalendarRangeIcon :size="20" />
-				</template>
-			</NcButton>
+			<div class="global-search-custom-date-modal__footer">
+				<NcButton @click="applyCustomRange">
+					{{ t('core', 'Search in date range') }}
+					<template #icon>
+						<CalendarRangeIcon :size="20" />
+					</template>
+				</NcButton>
+			</div>
 		</div>
 	</NcModal>
 </template>
@@ -94,5 +94,10 @@ export default {
 		flex-direction: column;
 	}
 
+	&__footer {
+		display: flex;
+		justify-content: end;
+	}
+
 }
 </style>

core/src/components/GlobalSearch/SearchResult.vue

@@ -0,0 +1,168 @@
+<template>
+	<NcListItem class="result-items__item"
+		:name="title"
+		:bold="false"
+		@click="openResult(result)">
+		<template #icon>
+			<div aria-hidden="true"
+				class="result-items__item-icon"
+				:class="{
+					'result-items__item-icon--rounded': rounded,
+					'result-items__item-icon--no-preview': !isValidIconOrPreviewUrl(thumbnailUrl),
+					'result-items__item-icon--with-thumbnail': isValidIconOrPreviewUrl(thumbnailUrl),
+					[icon]: !isValidIconOrPreviewUrl(icon),
+				}"
+				:style="{
+					backgroundImage: isValidIconOrPreviewUrl(icon) ? `url(${icon})` : '',
+				}">
+				<img v-if="isValidIconOrPreviewUrl(thumbnailUrl) && !thumbnailHasError"
+					:src="thumbnailUrl"
+					@error="thumbnailErrorHandler">
+			</div>
+		</template>
+		<template #subname>
+			{{ subline }}
+		</template>
+	</NcListItem>
+</template>
+
+<script>
+import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
+
+export default {
+	name: 'SearchResult',
+	components: {
+		NcListItem,
+	},
+	props: {
+		thumbnailUrl: {
+			type: String,
+			default: null,
+		},
+		title: {
+			type: String,
+			required: true,
+		},
+		subline: {
+			type: String,
+			default: null,
+		},
+		resourceUrl: {
+			type: String,
+			default: null,
+		},
+		icon: {
+			type: String,
+			default: '',
+		},
+		rounded: {
+			type: Boolean,
+			default: false,
+		},
+		query: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * Only used for the first result as a visual feedback
+		 * so we can keep the search input focused but pressing
+		 * enter still opens the first result
+		 */
+		focused: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			thumbnailHasError: false,
+		}
+	},
+	watch: {
+		thumbnailUrl() {
+			this.thumbnailHasError = false
+		},
+	},
+	methods: {
+		isValidIconOrPreviewUrl(url) {
+			return /^https?:\/\//.test(url) || url.startsWith('/')
+		},
+		thumbnailErrorHandler() {
+			this.thumbnailHasError = true
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+@use "sass:math";
+$clickable-area: 44px;
+$margin: 10px;
+
+.result-items {
+    &__item {
+
+    ::v-deep a {
+            border-radius: 12px;
+            border: 2px solid transparent;
+            border-radius: var(--border-radius-large) !important;
+
+            &--focused {
+                background-color: var(--color-background-hover);
+            }
+
+            &:active,
+            &:hover,
+            &:focus {
+                background-color: var(--color-background-hover);
+                border: 2px solid var(--color-border-maxcontrast);
+            }
+
+            * {
+                cursor: pointer;
+            }
+
+        }
+
+        &-icon {
+            overflow: hidden;
+            width: $clickable-area;
+            height: $clickable-area;
+            border-radius: var(--border-radius);
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 32px;
+
+            &--rounded {
+                border-radius: math.div($clickable-area, 2);
+            }
+
+            &--no-preview {
+                background-size: 32px;
+            }
+
+            &--with-thumbnail {
+                background-size: cover;
+            }
+
+            &--with-thumbnail:not(&--rounded) {
+                // compensate for border
+                max-width: $clickable-area - 2px;
+                max-height: $clickable-area - 2px;
+                border: 1px solid var(--color-border);
+            }
+
+            img {
+                // Make sure to keep ratio
+                width: 100%;
+                height: 100%;
+
+                object-fit: cover;
+                object-position: center;
+            }
+        }
+
+    }
+}
+</style>