From 0c45d9a654db4c3a0f4afaef27905e39baadcbf1 Mon Sep 17 00:00:00 2001
From: Noel De Martin <noel@moodle.com>
Date: Mon, 20 Mar 2023 12:38:49 +0100
Subject: [PATCH] MOBILE-4188 core: Show sticky participants search

---
 .../user/pages/participants/participants.html    | 10 ++--------
 .../user/pages/participants/participants.page.ts | 16 +---------------
 .../user/pages/participants/participants.scss    | 13 +++++++++++++
 3 files changed, 16 insertions(+), 23 deletions(-)
 create mode 100644 src/core/features/user/pages/participants/participants.scss

diff --git a/src/core/features/user/pages/participants/participants.html b/src/core/features/user/pages/participants/participants.html
index 7304af064..21ef547ed 100644
--- a/src/core/features/user/pages/participants/participants.html
+++ b/src/core/features/user/pages/participants/participants.html
@@ -1,17 +1,11 @@
-<core-navbar-buttons slot="end">
-    <ion-button [hidden]="!searchEnabled" (click)="toggleSearch()" [attr.aria-label]="'core.search' | translate">
-        <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true"></ion-icon>
-    </ion-button>
-</core-navbar-buttons>
-
 <ion-content>
     <core-split-view>
         <ion-refresher slot="fixed" [disabled]="!participants.loaded || searchInProgress" (ionRefresh)="refreshParticipants($event.target)">
             <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
         </ion-refresher>
 
-        <core-search-box *ngIf="showSearchBox" [disabled]="searchInProgress" [spellcheck]="false" [autoFocus]="true" [lengthCheck]="1"
-            autocorrect="off" searchArea="CoreUserParticipants" (onSubmit)="search($event)" (onClear)="clearSearch()">
+        <core-search-box [disabled]="searchInProgress" [spellcheck]="false" [autoFocus]="true" [lengthCheck]="1" autocorrect="off"
+            searchArea="CoreUserParticipants" (onSubmit)="search($event)" (onClear)="clearSearch()">
         </core-search-box>
 
         <core-loading [hideUntil]="participants.loaded">
diff --git a/src/core/features/user/pages/participants/participants.page.ts b/src/core/features/user/pages/participants/participants.page.ts
index 3ff362630..d990edf91 100644
--- a/src/core/features/user/pages/participants/participants.page.ts
+++ b/src/core/features/user/pages/participants/participants.page.ts
@@ -31,6 +31,7 @@ import { CoreRoutedItemsManagerSourcesTracker } from '@classes/items-management/
 @Component({
     selector: 'page-core-user-participants',
     templateUrl: 'participants.html',
+    styleUrls: ['participants.scss'],
 })
 export class CoreUserParticipantsPage implements OnInit, AfterViewInit, OnDestroy {
 
@@ -39,7 +40,6 @@ export class CoreUserParticipantsPage implements OnInit, AfterViewInit, OnDestro
     searchQuery: string | null = null;
     searchInProgress = false;
     searchEnabled = false;
-    showSearchBox = false;
     fetchMoreParticipantsFailed = false;
 
     @ViewChild(CoreSplitViewComponent) splitView!: CoreSplitViewComponent;
@@ -84,20 +84,6 @@ export class CoreUserParticipantsPage implements OnInit, AfterViewInit, OnDestro
         this.participants.destroy();
     }
 
-    /**
-     * Show or hide search box.
-     */
-    toggleSearch(): void {
-        this.showSearchBox = !this.showSearchBox;
-
-        if (this.showSearchBox) {
-            // Make search bar visible.
-            this.splitView.menuContent.scrollToTop();
-        } else {
-            this.clearSearch();
-        }
-    }
-
     /**
      * Clear search.
      */
diff --git a/src/core/features/user/pages/participants/participants.scss b/src/core/features/user/pages/participants/participants.scss
new file mode 100644
index 000000000..9652a7194
--- /dev/null
+++ b/src/core/features/user/pages/participants/participants.scss
@@ -0,0 +1,13 @@
+:host {
+
+    core-split-view {
+        isolation: isolate;
+    }
+
+    core-search-box {
+        position: sticky;
+        top: 8px;
+        z-index: 1;
+    }
+
+}