MOBILE-4188 core: Show sticky participants search

main
Noel De Martin 2023-03-20 12:38:49 +01:00
parent 8bb6b45159
commit 0c45d9a654
3 changed files with 16 additions and 23 deletions

View File

@ -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">

View File

@ -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.
*/

View File

@ -0,0 +1,13 @@
:host {
core-split-view {
isolation: isolate;
}
core-search-box {
position: sticky;
top: 8px;
z-index: 1;
}
}