GuzhavinAleksey/Vmeda.Online
1
0
Fork 0
forked from CIT/Vmeda.Online
Code Pull Requests Activity

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

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2022-02-28 15:48:58 +01:00
parent be4bfc5a8d
commit 64f687f8a8
29 changed files with 107 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addons/badges/pages/issued-badge/issued-badge.html
View File

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

6
src/addons/calendar/components/components.module.ts
View File

@ -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,
],
})

18
src/addons/calendar/components/filter/addon-calendar-filter-popover.html
View File

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

29
src/addons/calendar/components/filter/filter.html Normal file
View File

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

0
src/addons/calendar/components/filter/filter-popover.scss → src/addons/calendar/components/filter/filter.scss
View File

18
src/addons/calendar/components/filter/filter.ts
View File

@ -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',
templateUrl: 'addon-calendar-filter-popover.html',
styleUrls: ['../../calendar-common.scss', 'filter-popover.scss'],
selector: 'addon-calendar-filter',
templateUrl: 'filter.html',
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();
}
}

2
src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html
View File

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

2
src/addons/calendar/pages/day/day.html
View File

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

13
src/addons/calendar/pages/day/day.page.ts
View File

@ -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.
*
* @param event Event.
* Show the filter menu.
*/
async openFilter(event: MouseEvent): Promise<void> {
await CoreDomUtils.openPopover({
component: AddonCalendarFilterPopoverComponent,
async openFilter(): Promise<void> {
await CoreDomUtils.openSideModal({
component: AddonCalendarFilterComponent,
componentProps: {
courses: this.manager?.getSource().courses,
filter: this.filter,
},
event,
});
}

2
src/addons/calendar/pages/index/index.html
View File

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

13
src/addons/calendar/pages/index/index.page.ts
View File

@ -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.
*
* @param event Event.
* Show the filter menu.
*/
async openFilter(event: MouseEvent): Promise<void> {
await CoreDomUtils.openPopover({
component: AddonCalendarFilterPopoverComponent,
async openFilter(): Promise<void> {
await CoreDomUtils.openSideModal({
component: AddonCalendarFilterComponent,
componentProps: {
courses: this.courses,
filter: this.filter,
},
event,
});
}

2
src/addons/competency/pages/competency/competency.html
View File

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

2
src/addons/competency/pages/competencysummary/competencysummary.html
View File

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

2
src/addons/competency/pages/coursecompetencies/coursecompetencies.html
View File

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

2
src/addons/competency/pages/plan/plan.html
View File

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

2
src/addons/mod/assign/components/index/addon-mod-assign-index.html
View File

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

2
src/addons/mod/data/components/index/addon-mod-data-index.html
View File

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

3
src/addons/mod/data/pages/entry/entry.html
View File

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

2
src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
View File

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

2
src/addons/mod/resource/components/index/addon-mod-resource-index.html
View File

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

2
src/addons/mod/url/components/index/addon-mod-url-index.html
View File

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

2
src/addons/privatefiles/pages/index/index.html
View File

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

2
src/core/features/comments/pages/viewer/viewer.html
View File

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

18
src/core/features/course/components/tag-area/core-course-tag-area.html
View File

@ -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
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-card *ngFor="let item of items">
<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-card>

24
src/core/features/tag/components/feed/core-tag-feed.html
View File

@ -1,11 +1,13 @@
<ion-item class="ion-text-wrap" *ngFor="let item of items" [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>
<core-mod-icon *ngIf="item.iconUrl" [modicon]="item.iconUrl" slot="start" [showAlt]="false">
</core-mod-icon>
<ion-label>
<h2>{{ item.heading }}</h2>
<p *ngFor="let text of item.details">{{ text }}</p>
</ion-label>
</ion-item>
<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>
<core-mod-icon *ngIf="item.iconUrl" [modicon]="item.iconUrl" slot="start" [showAlt]="false">
</core-mod-icon>
<ion-label>
<h2>{{ item.heading }}</h2>
<p *ngFor="let text of item.details">{{ text }}</p>
</ion-label>
</ion-item>
</ion-card>

2
src/core/features/tag/pages/index-area/index-area.html
View File

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

15
src/core/features/user/components/tag-area/core-user-tag-area.html
View File

@ -1,6 +1,9 @@
<ion-item class="ion-text-wrap" *ngFor="let item of items" 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-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-card>

2
src/core/features/user/pages/about/about.html
View File

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

2
src/core/features/user/pages/profile/profile.html
View File

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