Merge pull request #3808 from NoelDeMartin/MOBILE-3371

MOBILE-3371: Global Search fixes

scripts/langindex.json

@@ -685,7 +685,6 @@
   "addon.mod_forum.removefromfavourites": "forum",
   "addon.mod_forum.reply": "forum",
   "addon.mod_forum.replyplaceholder": "forum",
-  "addon.mod_forum.searchresults": "course",
   "addon.mod_forum.subject": "forum",
   "addon.mod_forum.tagarea_forum_posts": "forum",
   "addon.mod_forum.thisforumhasduedate": "forum",

src/addons/mod/forum/lang.json

@@ -59,7 +59,6 @@
     "removefromfavourites": "Unstar this discussion",
     "reply": "Reply",
     "replyplaceholder": "Write your reply...",
-    "searchresults": "Search results: {{$a}}",
     "subject": "Subject",
     "tagarea_forum_posts": "Forum posts",
     "thisforumhasduedate": "The due date for posting to this forum is {{$a}}.",

src/addons/mod/forum/pages/search/search.html

@@ -23,10 +23,6 @@
         <core-search-box (onSubmit)="search($event)" (onClear)="clearSearch()" [placeholder]="'core.search' | translate"
             [searchLabel]="'core.search' | translate" [autoFocus]="true" [searchArea]="searchAreaId"></core-search-box>
 
-        <div *ngIf="!resultsSource.isEmpty()" class="results-count">
-            {{ 'addon.mod_forum.searchresults' | translate: { $a: resultsSource.getTotalResults() } }}
-        </div>
-
         <ion-list *ngIf="resultsSource.isLoaded()">
             <core-search-global-search-result *ngFor="let result of resultsSource.getItems()" [result]="result" [showCourse]="false"
                 (onClick)="visitResult(result)">

src/addons/mod/forum/tests/behat/search.feature

@@ -46,6 +46,5 @@ Feature: Test Forum Search
 
     When I set the field "Search" to "message" in the app
     And I press "Search" "button" in the app
-    Then I should find "Search results: 2" in the app
+    Then I should find "Test forum 1" in the app
-    And I should find "Test forum 1" in the app
     And I should find "Test forum 2" in the app

src/core/components/mod-icon/mod-icon.scss

@@ -27,6 +27,12 @@
         }
     }
 
+    &.other {
+        img {
+            filter: var(--filter);
+        }
+    }
+
 }
 
 img {

src/core/features/search/components/global-search-result/global-search-result.html

@@ -11,7 +11,7 @@
             <core-format-text [text]="result.title"></core-format-text>
         </h3>
         <core-format-text *ngIf="result.content && !result.course && !result.user" [text]="result.content"></core-format-text>
-        <div *ngIf="renderedContext" class="flex-row">
+        <div *ngIf="renderedContext" class="result-context-wrapper">
             <div *ngIf="renderedContext.courseName" class="result-context">
                 <ion-icon name="fas-graduation-cap" aria-hidden="true"></ion-icon>
                 <core-format-text [text]="renderedContext.courseName"></core-format-text>

src/core/features/search/components/global-search-result/global-search-result.scss

@@ -21,6 +21,7 @@
             margin-bottom: 0px;
             --padding: 0px;
             background: transparent;
+            flex-shrink: 0;
         }
 
         ion-icon, .result-icon {
@@ -28,6 +29,7 @@
             height: var(--core-global-search-result-icon-size);
 
             margin-inline-end: var(--spacing-2);
+            flex-shrink: 0;
         }
 
     }
@@ -61,20 +63,33 @@
 
         }
 
-        .result-context {
+        .result-context-wrapper {
             display: flex;
-            justify-items: center;
+            flex-wrap: wrap;
-            align-items: center;
+            flex-direction: row;
-            color: var(--core-global-search-result-context-color);
-            margin-top: var(--spacing-2);
-            font-size: 12px;
 
-            ion-icon {
+            .result-context {
-                margin-inline-end: var(--spacing-1);
+                display: flex;
-            }
+                justify-items: center;
+                align-items: center;
+                color: var(--core-global-search-result-context-color);
+                margin-top: var(--spacing-2);
+                margin-inline-end: var(--spacing-4);
+                font-size: 12px;
+
+                ion-icon {
+                    margin-inline-end: var(--spacing-1);
+                    flex-shrink: 0;
+                }
+
+                core-format-text {
+                    color: var(--core-global-search-result-context-color);
+                }
+
+                span {
+                    white-space: normal;
+                }
 
-            + .result-context {
-                margin-inline-start: var(--spacing-4);
             }
 
         }

src/core/features/search/services/global-search.ts

@@ -101,7 +101,7 @@ export class CoreSearchGlobalSearchService {
             ? await CoreSites.getSite(siteId)
             : CoreSites.getRequiredCurrentSite();
 
-        return !site?.isFeatureDisabled('CoreNoDelegate_GlobalSearch')
+        return !site?.isFeatureDisabled('NoDelegate_GlobalSearch')
             && site?.wsAvailable('core_search_get_results') // @since 4.3
             && site?.canUseAdvancedFeature('enableglobalsearch');
     }

src/core/features/search/stories/components/components.module.ts

@@ -20,13 +20,11 @@ import { CommonModule } from '@angular/common';
 import {
     CoreSearchGlobalSearchResultsPageComponent,
 } from '@features/search/stories/components/global-search-results-page/global-search-results-page';
-import { CoreSearchGlobalSearchResultComponent } from '@features/search/components/global-search-result/global-search-result';
 import { CoreSharedModule } from '@/core/shared.module';
 
 @NgModule({
     declarations: [
         CoreSearchGlobalSearchResultsPageComponent,
-        CoreSearchGlobalSearchResultComponent,
     ],
     imports: [
         CoreSharedModule,

src/core/features/search/stories/components/global-search-results-page/global-search-results-page.ts

@@ -107,6 +107,26 @@ export class CoreSearchGlobalSearchResultsPageComponent {
                 iconurl: 'https://master.mm.moodledemo.net/theme/image.php?theme=boost&component=core&image=i%2Fsection',
             },
         },
+        {
+            id: 8,
+            url: '',
+            title: 'This item has long text everywhere, so make sure that it looks good anyways. ' +
+                'Even if the screen you\'re using is also big, this should still be a problem because this text is *really* long.',
+            content: 'You would normally see lorem ipsum here, but we decided to just write some gibberish here to make it more ' +
+                'real. We all know that lorem ipsum is fabricated text, and even though it serves its purpose, it isn\'t as ' +
+                'engaging as some real, hand-crafted text (not sure why this should be engaging, anyways).',
+            context: {
+                courseName: 'And it\'s not just the title, either. Other things like the Course title also take more than ' +
+                    'you would expect in a normal site (or even not so normal).',
+                userName: 'To top it off, it has a user name as well! What is this madness? Well, at some point you just have to ' +
+                    'get creative. Honestly, I\'m surprised if you\'re even reading this. Kudos to you for being thorough.',
+            },
+            module: {
+                name: 'book',
+                iconurl: 'assets/img/mod/book.svg',
+                area: '',
+            },
+        },
     ];
 
     /**