MOBILE-3814 calendar: Change calendar filter to a side modal

src/addons/badges/pages/issued-badge/issued-badge.html

@@ -13,7 +13,7 @@
     <ion-refresher slot="fixed" [disabled]="!badgeLoaded" (ionRefresh)="refreshBadges($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="badgeLoaded">
+    <core-loading [hideUntil]="badgeLoaded" class="list-item-limited-width">
         <ion-item-group *ngIf="badge">
             <ion-item class="ion-text-wrap ion-text-center">
                 <ion-label>

src/addons/calendar/components/components.module.ts

@@ -18,14 +18,14 @@ import { CoreSharedModule } from '@/core/shared.module';
 
 import { AddonCalendarCalendarComponent } from './calendar/calendar';
 import { AddonCalendarUpcomingEventsComponent } from './upcoming-events/upcoming-events';
-import { AddonCalendarFilterPopoverComponent } from './filter/filter';
+import { AddonCalendarFilterComponent } from './filter/filter';
 import { AddonCalendarReminderTimeModalComponent } from './reminder-time-modal/reminder-time-modal';
 
 @NgModule({
     declarations: [
         AddonCalendarCalendarComponent,
         AddonCalendarUpcomingEventsComponent,
-        AddonCalendarFilterPopoverComponent,
+        AddonCalendarFilterComponent,
         AddonCalendarReminderTimeModalComponent,
     ],
     imports: [
@@ -36,7 +36,7 @@ import { AddonCalendarReminderTimeModalComponent } from './reminder-time-modal/r
     exports: [
         AddonCalendarCalendarComponent,
         AddonCalendarUpcomingEventsComponent,
-        AddonCalendarFilterPopoverComponent,
+        AddonCalendarFilterComponent,
         AddonCalendarReminderTimeModalComponent,
     ],
 })

src/addons/calendar/components/filter/addon-calendar-filter-popover.html

@@ -1,18 +0,0 @@
-<ion-list>
-    <ion-item *ngFor="let type of types" class="addon-calendar-event" [ngClass]="['addon-calendar-eventtype-'+type]">
-        <ion-icon [name]="typeIcons[type]" slot="start" aria-hidden="true"></ion-icon>
-        <ion-label>{{ 'addon.calendar.' + type + 'events' | translate}}</ion-label>
-        <ion-toggle [(ngModel)]="filter[type]" (ionChange)="onChange()" slot="end"></ion-toggle>
-    </ion-item>
-    <core-spacer *ngIf="filter.course || filter.category || filter.group"></core-spacer>
-    <ng-container *ngIf="filter.course || filter.category || filter.group">
-        <ion-radio-group [(ngModel)]="courseId" (ionChange)="onChange()">
-            <ion-item class="ion-text-wrap" *ngFor="let course of courses">
-                <ion-label>
-                    <core-format-text [text]="course.fullname"></core-format-text>
-                </ion-label>
-                <ion-radio slot="end" [value]="course.id"></ion-radio>
-            </ion-item>
-        </ion-radio-group>
-    </ng-container>
-</ion-list>

src/addons/calendar/components/filter/filter.html

@@ -0,0 +1,29 @@
+<ion-header class="no-title">
+    <ion-toolbar>
+        <ion-buttons slot="end">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+                <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
+            </ion-button>
+        </ion-buttons>
+    </ion-toolbar>
+</ion-header>
+<ion-content [fullscreen]="true">
+    <ion-list>
+        <ion-item *ngFor="let type of types" class="addon-calendar-event" [ngClass]="['addon-calendar-eventtype-'+type]">
+            <ion-icon [name]="typeIcons[type]" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>{{ 'addon.calendar.' + type + 'events' | translate}}</ion-label>
+            <ion-toggle [(ngModel)]="filter[type]" (ionChange)="onChange()" slot="end"></ion-toggle>
+        </ion-item>
+        <core-spacer *ngIf="filter.course || filter.category || filter.group"></core-spacer>
+        <ng-container *ngIf="filter.course || filter.category || filter.group">
+            <ion-radio-group [(ngModel)]="courseId" (ionChange)="onChange()">
+                <ion-item class="ion-text-wrap" *ngFor="let course of courses">
+                    <ion-label>
+                        <core-format-text [text]="course.fullname"></core-format-text>
+                    </ion-label>
+                    <ion-radio slot="end" [value]="course.id"></ion-radio>
+                </ion-item>
+            </ion-radio-group>
+        </ng-container>
+    </ion-list>
+</ion-content>

src/addons/calendar/components/filter/filter.ts

@@ -15,6 +15,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { CoreEnrolledCourseData } from '@features/courses/services/courses';
 import { CoreUtils } from '@services/utils/utils';
+import { ModalController } from '@singletons';
 import { CoreEvents } from '@singletons/events';
 import { AddonCalendarEventType, AddonCalendarProvider } from '../../services/calendar';
 import { AddonCalendarFilter, AddonCalendarEventIcons } from '../../services/calendar-helper';
@@ -23,11 +24,11 @@ import { AddonCalendarFilter, AddonCalendarEventIcons } from '../../services/cal
  * Component to display the events filter that includes events types and a list of courses.
  */
 @Component({
-    selector: 'addon-calendar-filter-popover',
+    selector: 'addon-calendar-filter',
-    templateUrl: 'addon-calendar-filter-popover.html',
+    templateUrl: 'filter.html',
-    styleUrls: ['../../calendar-common.scss', 'filter-popover.scss'],
+    styleUrls: ['../../calendar-common.scss', 'filter.scss'],
 })
-export class AddonCalendarFilterPopoverComponent implements OnInit {
+export class AddonCalendarFilterComponent implements OnInit {
 
     @Input() filter: AddonCalendarFilter = {
         filtered: false,
@@ -56,7 +57,7 @@ export class AddonCalendarFilterPopoverComponent implements OnInit {
     }
 
     /**
-     * Init the component.
+     * @inheritdoc
      */
     ngOnInit(): void {
         this.courseId = this.filter.courseId || -1;
@@ -80,4 +81,11 @@ export class AddonCalendarFilterPopoverComponent implements OnInit {
         CoreEvents.trigger(AddonCalendarProvider.FILTER_CHANGED_EVENT, this.filter);
     }
 
+    /**
+     * Close modal.
+     */
+    closeModal(): void {
+        ModalController.dismiss();
+    }
+
 }

src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html

@@ -6,7 +6,7 @@
         <ng-container *ngFor="let event of filteredEvents">
             <ion-card>
                 <ion-item class="ion-text-wrap addon-calendar-event" [attr.aria-label]="event.name" (click)="eventClicked(event)" button
-                    [ngClass]="['addon-calendar-eventtype-'+event.eventtype]" detail="true">
+                    [ngClass]="['addon-calendar-eventtype-'+event.eventtype]" [detail]="false">
                     <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" slot="start" [modname]="event.modulename"
                         [componentId]="event.instance" [showAlt]="false"></core-mod-icon>
                     <ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" slot="start" aria-hidden="true">

src/addons/calendar/pages/day/day.html

@@ -7,7 +7,7 @@
             <h1>{{ 'addon.calendar.calendarevents' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="openFilter($event)" [attr.aria-label]="'core.filter' | translate">
+            <ion-button fill="clear" (click)="openFilter()" [attr.aria-label]="'core.filter' | translate">
                 <ion-icon slot="icon-only" name="fas-filter" aria-hidden="true"></ion-icon>
             </ion-button>
             <core-context-menu>

src/addons/calendar/pages/day/day.page.ts

@@ -31,7 +31,7 @@ import { AddonCalendarFilter, AddonCalendarHelper } from '../../services/calenda
 import { AddonCalendarSync, AddonCalendarSyncProvider } from '../../services/calendar-sync';
 import { CoreCategoryData, CoreCourses, CoreEnrolledCourseData } from '@features/courses/services/courses';
 import { CoreCoursesHelper } from '@features/courses/services/courses-helper';
-import { AddonCalendarFilterPopoverComponent } from '../../components/filter/filter';
+import { AddonCalendarFilterComponent } from '../../components/filter/filter';
 import moment from 'moment';
 import { Network, NgZone } from '@singletons';
 import { CoreNavigator } from '@services/navigator';
@@ -348,18 +348,15 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
     }
 
     /**
-     * Show the context menu.
+     * Show the filter menu.
-     *
-     * @param event Event.
      */
-    async openFilter(event: MouseEvent): Promise<void> {
+    async openFilter(): Promise<void> {
-        await CoreDomUtils.openPopover({
+        await CoreDomUtils.openSideModal({
-            component: AddonCalendarFilterPopoverComponent,
+            component: AddonCalendarFilterComponent,
             componentProps: {
                 courses: this.manager?.getSource().courses,
                 filter: this.filter,
             },
-            event,
         });
     }
 

src/addons/calendar/pages/index/index.html

@@ -7,7 +7,7 @@
             <h1>{{ (showCalendar ? 'addon.calendar.calendarevents' : 'addon.calendar.upcomingevents') | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="openFilter($event)" [attr.aria-label]="'core.filter' | translate">
+            <ion-button fill="clear" (click)="openFilter()" [attr.aria-label]="'core.filter' | translate">
                 <ion-icon slot="icon-only" name="fas-filter" aria-hidden="true"></ion-icon>
             </ion-button>
             <core-context-menu>

src/addons/calendar/pages/index/index.page.ts

@@ -29,7 +29,7 @@ import { CoreEnrolledCourseData } from '@features/courses/services/courses';
 import { ActivatedRoute, Params } from '@angular/router';
 import { AddonCalendarCalendarComponent } from '../../components/calendar/calendar';
 import { AddonCalendarUpcomingEventsComponent } from '../../components/upcoming-events/upcoming-events';
-import { AddonCalendarFilterPopoverComponent } from '../../components/filter/filter';
+import { AddonCalendarFilterComponent } from '../../components/filter/filter';
 import { CoreNavigator } from '@services/navigator';
 import { CoreLocalNotifications } from '@services/local-notifications';
 import { CoreConstants } from '@/core/constants';
@@ -328,18 +328,15 @@ export class AddonCalendarIndexPage implements OnInit, OnDestroy {
     }
 
     /**
-     * Show the context menu.
+     * Show the filter menu.
-     *
-     * @param event Event.
      */
-    async openFilter(event: MouseEvent): Promise<void> {
+    async openFilter(): Promise<void> {
-        await CoreDomUtils.openPopover({
+        await CoreDomUtils.openSideModal({
-            component: AddonCalendarFilterPopoverComponent,
+            component: AddonCalendarFilterComponent,
             componentProps: {
                 courses: this.courses,
                 filter: this.filter,
             },
-            event,
         });
     }
 

src/addons/competency/pages/competency/competency.html

@@ -14,7 +14,7 @@
     <ion-refresher slot="fixed" [disabled]="!competencyLoaded" (ionRefresh)="refreshCompetency($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="competencyLoaded">
+    <core-loading [hideUntil]="competencyLoaded" class="list-item-limited-width">
         <ion-card *ngIf="user">
             <ion-item class="ion-text-wrap">
                 <core-user-avatar [user]="user" slot="start"></core-user-avatar>

src/addons/competency/pages/competencysummary/competencysummary.html

@@ -14,7 +14,7 @@
     <ion-refresher slot="fixed" [disabled]="!competencyLoaded" (ionRefresh)="refreshCompetency($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="competencyLoaded">
+    <core-loading [hideUntil]="competencyLoaded" class="list-item-limited-width">
         <ion-card *ngIf="competency">
             <ion-item class="ion-text-wrap" *ngIf="competency.competency.description">
                 <ion-label>

src/addons/competency/pages/coursecompetencies/coursecompetencies.html

@@ -12,7 +12,7 @@
     <ion-refresher slot="fixed" [disabled]="!competencies.loaded" (ionRefresh)="refreshCourseCompetencies($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="competencies.loaded">
+    <core-loading [hideUntil]="competencies.loaded" class="list-item-limited-width">
         <ion-card *ngIf="!user && courseCompetencies && courseCompetencies.statistics.competencycount > 0">
             <ng-container *ngIf="courseCompetencies.cangradecompetencies">
                 <ion-item class="ion-text-wrap" *ngIf="courseCompetencies.settings.pushratingstouserplans">

src/addons/competency/pages/plan/plan.html

@@ -12,7 +12,7 @@
     <ion-refresher slot="fixed" [disabled]="!competencies.loaded" (ionRefresh)="refreshLearningPlan($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="competencies.loaded">
+    <core-loading [hideUntil]="competencies.loaded" class="list-item-limited-width">
         <ion-card *ngIf="user">
             <ion-item class="ion-text-wrap">
                 <ion-label>

src/addons/mod/assign/components/index/addon-mod-assign-index.html

@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading">
+<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"

src/addons/mod/data/components/index/addon-mod-data-index.html

@@ -18,7 +18,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading">
+<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"

src/addons/mod/data/pages/entry/entry.html

@@ -16,7 +16,8 @@
         (ionRefresh)="refreshDatabase($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="entryLoaded && (isPullingToRefresh || !renderingEntry && !loadingRating && !loadingComments)">
+    <core-loading [hideUntil]="entryLoaded && (isPullingToRefresh || !renderingEntry && !loadingRating && !loadingComments)"
+        class="list-item-limited-width">
         <!-- Database entries found to be synchronized -->
         <ion-card class="core-warning-card" *ngIf="entry && entry.hasOffline">
             <ion-item>

src/addons/mod/feedback/components/index/addon-mod-feedback-index.html

@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading">
+<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"

src/addons/mod/resource/components/index/addon-mod-resource-index.html

@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding core-loading-full-height">
+<core-loading [hideUntil]="!showLoading" class="safe-area-padding core-loading-full-height list-item-limited-width">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [courseId]="courseId" [description]="displayDescription && description"

src/addons/mod/url/components/index/addon-mod-url-index.html

@@ -6,7 +6,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading">
+<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
 
     <!-- Activity info. -->
     <core-course-module-info [module]="module" [description]="displayDescription && description" [component]="component"

src/addons/privatefiles/pages/index/index.html

@@ -14,7 +14,7 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <core-loading [hideUntil]="filesLoaded" *ngIf="showPrivateFiles || showSiteFiles">
+    <core-loading [hideUntil]="filesLoaded" *ngIf="showPrivateFiles || showSiteFiles" class="list-item-limited-width">
         <!-- Allow selecting the files to see: private or site. -->
         <core-combobox [selection]="root" (onChange)="rootChanged($event)" *ngIf="showPrivateFiles && showSiteFiles && !path">
             <ion-select-option class="ion-text-wrap" value="my">

src/core/features/comments/pages/viewer/viewer.html

@@ -38,7 +38,7 @@
         <core-infinite-loading [enabled]="canLoadMore" position="top" (action)="loadPrevious($event)" [error]="loadMoreError">
         </core-infinite-loading>
 
-        <ion-list class="addon-messages-discussion-container">
+        <ion-list class="addon-messages-discussion-container  list-item-limited-width">
             <ng-container *ngFor="let comment of comments; index as index; last as last">
 
                 <p class="ion-text-center addon-messages-date" *ngIf="comment.showDate">

src/core/features/course/components/tag-area/core-course-tag-area.html

@@ -1,8 +1,10 @@
-<ion-item class="ion-text-wrap" *ngFor="let item of items" (click)="openCourse(item.courseId)" [attr.aria-label]="item.courseName" button
+<ion-card *ngFor="let item of items">
-    detail="true">
+    <ion-item class="ion-text-wrap" (click)="openCourse(item.courseId)" [attr.aria-label]="item.courseName" button detail="true">
         <ion-icon name="fas-graduation-cap" slot="start" aria-hidden="true"></ion-icon>
         <ion-label>
             <p class="item-heading">{{ item.courseName }}</p>
             <p *ngIf="item.categoryName">{{ 'core.category' | translate }}: {{ item.categoryName }}</p>
         </ion-label>
-</ion-item>
+    </ion-item>
+
+</ion-card>

src/core/features/tag/components/feed/core-tag-feed.html

@@ -1,4 +1,5 @@
-<ion-item class="ion-text-wrap" *ngFor="let item of items" [href]="item.url" core-link [capture]="true">
+<ion-card *ngFor="let item of items">
+    <ion-item class="ion-text-wrap" [href]="item.url" core-link [capture]="true">
         <ion-avatar slot="start" *ngIf="item.avatarUrl">
             <img [src]="item.avatarUrl" core-external-content alt="" role="presentation" onError="this.src='assets/img/user-avatar.png'">
         </ion-avatar>
@@ -8,4 +9,5 @@
             <h2>{{ item.heading }}</h2>
             <p *ngFor="let text of item.details">{{ text }}</p>
         </ion-label>
-</ion-item>
+    </ion-item>
+</ion-card>

src/core/features/tag/pages/index-area/index-area.html

@@ -14,7 +14,7 @@
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
         <ng-container *ngIf="loaded">
             <core-dynamic-component [component]="areaComponent" [data]="{items: items}"></core-dynamic-component>
         </ng-container>

src/core/features/user/components/tag-area/core-user-tag-area.html

@@ -1,6 +1,9 @@
-<ion-item class="ion-text-wrap" *ngFor="let item of items" core-user-link [userId]="item.user.id">
+<ion-card *ngFor="let item of items">
+    <ion-item class="ion-text-wrap" core-user-link [userId]="item.user.id">
         <core-user-avatar [user]="item.user" slot="start"></core-user-avatar>
         <ion-label>
             <h2>{{ item.heading }}</h2>
         </ion-label>
-</ion-item>
+    </ion-item>
+
+</ion-card>

src/core/features/user/pages/about/about.html

@@ -12,7 +12,7 @@
     <ion-refresher slot="fixed" [disabled]="!userLoaded" (ionRefresh)="refreshUser($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="userLoaded">
+    <core-loading [hideUntil]="userLoaded" class="list-item-limited-width">
         <ion-list *ngIf="user">
             <ion-item class="ion-text-center core-user-profile-maininfo ion-text-wrap" lines="full">
                 <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="!canChangeProfilePicture">

src/core/features/user/pages/profile/profile.html

@@ -12,7 +12,7 @@
     <ion-refresher slot="fixed" [disabled]="!userLoaded" (ionRefresh)="refreshUser($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="userLoaded">
+    <core-loading [hideUntil]="userLoaded" class="list-item-limited-width">
         <ion-list *ngIf="user && !isDeleted && isEnrolled">
             <ion-item class="ion-text-center core-user-profile-maininfo ion-text-wrap">
                 <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="true">