Round avatars when needed and show url-based mime icons

- Pass `results.rounded` property that comes with search result
 data to determine if avatar would be rounded or not.

- Icons loaded via url's now visible.

Signed-off-by: fenn-cs <fenn25.fn@gmail.com>

diff --git a/core/src/views/GlobalSearchModal.vue b/core/src/views/GlobalSearchModal.vue
index 9db4c06c9bcfbb486a5e9aae1dfa8db7e32d9843..a9d422e0ff87ccd27106ab1a5f3469917e6584db 100644 (file)
--- a/core/src/views/GlobalSearchModal.vue
+++ b/core/src/views/GlobalSearchModal.vue
@@ -104,17 +104,17 @@
                                                        :bold="false"
                                                        @click="openResult(result)">
                                                        <template #icon>
-                                                               <div v-if="result.icon"
-                                                                       class="result-items__item-icon"
+                                                               <div class="result-items__item-icon"
                                                                        :class="{
-                                                                               'result-items__item-icon--no-preview': !isValidUrl(result.thumbnailUrl),
-                                                                               'result-items__item-icon--with-thumbnail': isValidUrl(result.thumbnailUrl),
-                                                                               [result.icon]: !isValidUrl(result.icon),
+                                                                               'result-items__item-icon--rounded': result.rounded,
+                                                                               'result-items__item-icon--no-preview': !isValidIconOrPreviewUrl(result.thumbnailUrl),
+                                                                               'result-items__item-icon--with-thumbnail': isValidIconOrPreviewUrl(result.thumbnailUrl),
+                                                                               [result.icon]: !isValidIconOrPreviewUrl(result.icon),
                                                                        }"
                                                                        :style="{
-                                                                               backgroundImage: isValidUrl(result.icon) ? `url(${result.icon})` : '',
+                                                                               backgroundImage: isValidIconOrPreviewUrl(result.icon) ? `url(${result.icon})` : '',
                                                                        }">
-                                                                       <img v-if="result.thumbnailUrl" :src="result.thumbnailUrl" class="">
+                                                                       <img v-if="isValidIconOrPreviewUrl(result.thumbnailUrl)" :src="result.thumbnailUrl" class="">
                                                                </div>
                                                        </template>
                                                        <template #subname>
@@ -512,8 +512,8 @@ export default {
                        this.dateFilter.text = t('core', `Between ${this.dateFilter.startFrom.toLocaleDateString()} and ${this.dateFilter.endAt.toLocaleDateString()}`)
                        this.updateDateFilter()
                },
-               isValidUrl(icon) {
-                       return /^https?:\/\//.test(icon) || icon.startsWith('//')
+               isValidIconOrPreviewUrl(url) {
+                       return /^https?:\/\//.test(url) || url.startsWith('/')
                },
                closeModal() {
                        this.searchQuery = ''