Skip to content

Commit 5492206

Browse files
dpaloudpalou
authored
Merge pull request #4591 from crazyserver/MOBILE-4842
Mobile 4842
2 parents 5e81de4 + 686f0c5 commit 5492206

File tree

11 files changed

+110
-111
lines changed

11 files changed

+110
-111
lines changed

‎src/addons/calendar/components/calendar-event-card/calendar-event-card.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
@let calEvent = event();
2+
<ion-card>
3+
<ion-item [attr.aria-label]="calEvent.name" (click)="onEventClicked.emit()" button [class.item-dimmed]="calEvent.ispast"
4+
[class]="['ion-text-wrap', 'addon-calendar-event', 'addon-calendar-eventtype-'+calEvent.eventtype]" [detail]="false">
5+
@if (calEvent.moduleIcon) {
6+
<core-mod-icon [modicon]="calEvent.moduleIcon" slot="start" [modname]="calEvent.modulename"
7+
[componentId]="calEvent.instance" [showAlt]="false" [purpose]="calEvent.purpose" [isBranded]="calEvent.branded" />
8+
} @else if (calEvent.eventIcon) {
9+
<ion-icon [name]="calEvent.eventIcon" slot="start" aria-hidden="true" />
10+
}
11+
<ion-label>
12+
<!-- Add the icon title so accessibility tools read it. -->
13+
<span class="sr-only">
14+
{{ 'addon.calendar.type' + calEvent.formattedType | translate }}
15+
@if (calEvent.moduleIcon && calEvent.iconTitle) {
16+
<span class="sr-only">{{ calEvent.iconTitle }}</span>
17+
}
18+
</span>
19+
<p class="item-heading">
20+
<core-format-text [text]="calEvent.name" [contextLevel]="calEvent.contextLevel"
21+
[contextInstanceId]="calEvent.contextInstanceId" [sanitize]="calEvent.offline" />
22+
</p>
23+
<p>
24+
<core-format-text [text]="calEvent.formattedtime" [filter]="false" />
25+
</p>
26+
</ion-label>
27+
@if (calEvent.deleted) {
28+
<ion-note slot="end">
29+
<ion-icon name="fas-trash" aria-hidden="true" />
30+
<span class="ion-text-wrap">{{ 'core.deletedoffline' | translate }}</span>
31+
</ion-note>
32+
} @else if (calEvent.offline) {
33+
<ion-note slot="end">
34+
<ion-icon name="fas-clock" aria-hidden="true" />
35+
<span class="ion-text-wrap">{{ 'core.notsent' | translate }}</span>
36+
</ion-note>
37+
}
38+
39+
</ion-item>
40+
</ion-card>

‎src/addons/calendar/components/calendar-event-card/calendar-event-card.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// (C) Copyright 2015 Moodle Pty Ltd.
2+
//
3+
// Licensed under the Apache License, Version 2.0 (the "License");
4+
// you may not use this file except in compliance with the License.
5+
// You may obtain a copy of the License at
6+
//
7+
// http://www.apache.org/licenses/LICENSE-2.0
8+
//
9+
// Unless required by applicable law or agreed to in writing, software
10+
// distributed under the License is distributed on an "AS IS" BASIS,
11+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
// See the License for the specific language governing permissions and
13+
// limitations under the License.
14+
15+
import { Component, input, output } from '@angular/core';
16+
import { AddonCalendarEventToDisplay } from '../../services/calendar';
17+
import { CoreSharedModule } from '@/core/shared.module';
18+
19+
/**
20+
* Component that displays an event card.
21+
*/
22+
@Component({
23+
selector: 'addon-calendar-event-card',
24+
templateUrl: 'calendar-event-card.html',
25+
styleUrl: '../../calendar-common.scss',
26+
imports: [
27+
CoreSharedModule,
28+
],
29+
})
30+
export class AddonCalendarEventCardComponent {
31+
32+
readonly event = input.required<AddonCalendarEventToDisplay>();
33+
readonly onEventClicked = output();
34+
35+
}

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

Lines changed: 4 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,11 @@
1-
<core-loading [hideUntil]="loaded">
1+
<core-loading [hideUntil]="loaded" placeholderType="column" placeholderHeight="70px" [placeholderLimit]="8">
22
@if (!filteredEvents || !filteredEvents.length) {
33
<core-empty-box icon="fas-calendar" [message]="'addon.calendar.noevents' | translate" />
44
} @else {
55
<ion-list class="list-item-limited-width">
6-
<ng-container *ngFor="let event of filteredEvents">
7-
<ion-card>
8-
<ion-item [attr.aria-label]="event.name" (click)="eventClicked(event)" button
9-
[class]="['ion-text-wrap', 'addon-calendar-event', 'addon-calendar-eventtype-'+event.eventtype]" [detail]="false">
10-
@if (event.moduleIcon) {
11-
<core-mod-icon [modicon]="event.moduleIcon" slot="start" [modname]="event.modulename"
12-
[componentId]="event.instance" [showAlt]="false" [purpose]="event.purpose" [isBranded]="event.branded" />
13-
} @else if (event.eventIcon) {
14-
<ion-icon [name]="event.eventIcon" slot="start" aria-hidden="true" />
15-
}
16-
<ion-label>
17-
<!-- Add the icon title so accessibility tools read it. -->
18-
<span class="sr-only">
19-
{{ 'addon.calendar.type' + event.formattedType | translate }}
20-
@if (event.moduleIcon && event.iconTitle) {
21-
<span class="sr-only">{{ event.iconTitle }}</span>
22-
}
23-
</span>
24-
<p class="item-heading">
25-
<core-format-text [text]="event.name" [contextLevel]="event.contextLevel"
26-
[contextInstanceId]="event.contextInstanceId" />
27-
</p>
28-
<p>
29-
<core-format-text [text]="event.formattedtime" [filter]="false" />
30-
</p>
31-
</ion-label>
32-
@if (event.deleted) {
33-
<ion-note slot="end">
34-
<ion-icon name="fas-trash" aria-hidden="true" />
35-
<span class="ion-text-wrap">{{ 'core.deletedoffline' | translate }}</span>
36-
</ion-note>
37-
} @else if (event.offline) {
38-
<ion-note slot="end">
39-
<ion-icon name="fas-clock" aria-hidden="true" />
40-
<span class="ion-text-wrap">{{ 'core.notsent' | translate }}</span>
41-
</ion-note>
42-
}
43-
44-
</ion-item>
45-
</ion-card>
46-
</ng-container>
6+
@for (event of filteredEvents; track event.id) {
7+
<addon-calendar-event-card [event]="event" (onEventClicked)="eventClicked(event)" />
8+
}
479
</ion-list>
4810
}
4911

‎src/addons/calendar/components/upcoming-events/upcoming-events.ts‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ import { ADDON_CALENDAR_UNDELETED_EVENT_EVENT } from '@addons/calendar/constants
4242
import { CoreAlerts } from '@services/overlays/alerts';
4343
import { CoreSharedModule } from '@/core/shared.module';
4444
import { CoreUserPreferences } from '@features/user/services/user-preferences';
45+
import { AddonCalendarEventCardComponent } from '../calendar-event-card/calendar-event-card';
4546

4647
/**
4748
* Component that displays upcoming events.
@@ -52,6 +53,7 @@ import { CoreUserPreferences } from '@features/user/services/user-preferences';
5253
styleUrl: '../../calendar-common.scss',
5354
imports: [
5455
CoreSharedModule,
56+
AddonCalendarEventCardComponent,
5557
],
5658
})
5759
export class AddonCalendarUpcomingEventsComponent implements OnInit, DoCheck, OnDestroy {
@@ -125,14 +127,14 @@ export class AddonCalendarUpcomingEventsComponent implements OnInit, DoCheck, On
125127
}
126128

127129
/**
128-
* Component loaded.
130+
* @inheritdoc
129131
*/
130132
ngOnInit(): void {
131133
this.fetchData();
132134
}
133135

134136
/**
135-
* Detect and act upon changes that Angular can’t or won’t detect on its own (objects and arrays).
137+
* @inheritdoc
136138
*/
137139
ngDoCheck(): void {
138140
// Check if there's any change in the filter object.
@@ -144,8 +146,6 @@ export class AddonCalendarUpcomingEventsComponent implements OnInit, DoCheck, On
144146

145147
/**
146148
* Fetch data.
147-
*
148-
* @returns Promise resolved when done.
149149
*/
150150
async fetchData(): Promise<void> {
151151
const promises: Promise<void>[] = [];
@@ -198,8 +198,6 @@ export class AddonCalendarUpcomingEventsComponent implements OnInit, DoCheck, On
198198

199199
/**
200200
* Fetch upcoming events.
201-
*
202-
* @returns Promise resolved when done.
203201
*/
204202
async fetchEvents(): Promise<void> {
205203
// Don't pass courseId and categoryId, we'll filter them locally.
@@ -223,8 +221,6 @@ export class AddonCalendarUpcomingEventsComponent implements OnInit, DoCheck, On
223221

224222
/**
225223
* Load categories to be able to filter events.
226-
*
227-
* @returns Promise resolved when done.
228224
*/
229225
protected async loadCategories(): Promise<void> {
230226
if (this.categoriesRetrieved) {
@@ -338,10 +334,10 @@ export class AddonCalendarUpcomingEventsComponent implements OnInit, DoCheck, On
338334
}
339335

340336
/**
341-
* Component destroyed.
337+
* @inheritdoc
342338
*/
343339
ngOnDestroy(): void {
344-
this.undeleteEventObserver?.off();
340+
this.undeleteEventObserver.off();
345341
}
346342

347343
}

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

Lines changed: 11 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -53,61 +53,23 @@ <h2>{{ periodName }}</h2>
5353
<core-loading [hideUntil]="day.loaded" placeholderType="column" placeholderHeight="70px" [placeholderLimit]="8">
5454
<!-- There is data to be synchronized -->
5555
@if (day.hasOffline) {
56-
<ion-card class="core-warning-card list-item-limited-width">
57-
<ion-item>
58-
<ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
59-
<ion-label>{{ 'core.hasdatatosync' | translate:{$a: 'core.day' | translate} }}</ion-label>
60-
</ion-item>
61-
</ion-card>
56+
<div class="list-item-limited-width">
57+
<ion-card class="core-warning-card">
58+
<ion-item>
59+
<ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
60+
<ion-label>{{ 'core.hasdatatosync' | translate:{$a: 'core.day' | translate} }}</ion-label>
61+
</ion-item>
62+
</ion-card>
63+
</div>
6264
}
6365

6466
@if (!day.filteredEvents || !day.filteredEvents.length) {
6567
<core-empty-box icon="fas-calendar" [message]="'addon.calendar.noevents' | translate" />
6668
} @else {
6769
<ion-list class="list-item-limited-width">
68-
<ng-container *ngFor="let event of day.filteredEvents">
69-
<ion-card>
70-
<ion-item [class]="['addon-calendar-event', 'ion-text-wrap', 'addon-calendar-eventtype-'+event.eventtype]"
71-
[class.item-dimmed]="event.ispast" [attr.aria-label]="event.name"
72-
(click)="gotoEvent(event.id, day)" button [detail]="false">
73-
@if (event.moduleIcon) {
74-
<core-mod-icon [modicon]="event.moduleIcon" slot="start" [showAlt]="false"
75-
[modname]="event.modulename" [componentId]="event.instance" [purpose]="event.purpose"
76-
[isBranded]="event.branded" />
77-
} @else if (event.eventIcon) {
78-
<ion-icon [name]="event.eventIcon" slot="start" aria-hidden="true" />
79-
}
80-
<ion-label>
81-
<!-- Add the icon title so accessibility tools read it. -->
82-
<span class="sr-only">
83-
{{ 'addon.calendar.type' + event.formattedType | translate }}
84-
@if (event.moduleIcon && event.iconTitle) {
85-
<span class="sr-only">{{ event.iconTitle
86-
}}</span>
87-
}
88-
</span>
89-
<p class="item-heading">
90-
<core-format-text [text]="event.name" [contextLevel]="event.contextLevel"
91-
[contextInstanceId]="event.contextInstanceId" [sanitize]="event.offline" />
92-
</p>
93-
<p>
94-
<core-format-text [text]="event.formattedtime" [filter]="false" />
95-
</p>
96-
</ion-label>
97-
@if (event.deleted) {
98-
<ion-note slot="end">
99-
<ion-icon name="fas-trash" aria-hidden="true" />
100-
<span class="ion-text-wrap">{{ 'core.deletedoffline' | translate }}</span>
101-
</ion-note>
102-
} @else if (event.offline) {
103-
<ion-note slot="end">
104-
<ion-icon name="fas-clock" aria-hidden="true" />
105-
<span class="ion-text-wrap">{{ 'core.notsent' | translate }}</span>
106-
</ion-note>
107-
}
108-
</ion-item>
109-
</ion-card>
110-
</ng-container>
70+
@for (event of day.filteredEvents; track event.id) {
71+
<addon-calendar-event-card [event]="event" (onEventClicked)="gotoEvent(event.id, day)" />
72+
}
11173
</ion-list>
11274
}
11375
</core-loading>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ import { CoreObject } from '@singletons/object';
5959
import { CoreAlerts } from '@services/overlays/alerts';
6060
import { CoreSharedModule } from '@/core/shared.module';
6161
import { CoreUserPreferences } from '@features/user/services/user-preferences';
62+
import { AddonCalendarEventCardComponent } from '@addons/calendar/components/calendar-event-card/calendar-event-card';
6263

6364
/**
6465
* Page that displays the calendar events for a certain day.
@@ -69,6 +70,7 @@ import { CoreUserPreferences } from '@features/user/services/user-preferences';
6970
styleUrls: ['../../calendar-common.scss', 'day.scss'],
7071
imports: [
7172
CoreSharedModule,
73+
AddonCalendarEventCardComponent,
7274
],
7375
})
7476
export default class AddonCalendarDayPage implements OnInit, OnDestroy {

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,14 @@ <h1>{{ 'addon.calendar.calendar' | translate }}</h1>
3838

3939
<!-- There is data to be synchronized -->
4040
@if (hasOffline) {
41-
<ion-card class="core-warning-card">
42-
<ion-item>
43-
<ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
44-
<ion-label>{{ 'core.hasdatatosync' | translate:{$a: 'addon.calendar.calendar' | translate} }}</ion-label>
45-
</ion-item>
46-
</ion-card>
41+
<div class="list-item-limited-width">
42+
<ion-card class="core-warning-card">
43+
<ion-item>
44+
<ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
45+
<ion-label>{{ 'core.hasdatatosync' | translate:{$a: 'addon.calendar.calendar' | translate} }}</ion-label>
46+
</ion-item>
47+
</ion-card>
48+
</div>
4749
}
4850

4951
<addon-calendar-calendar [hidden]="!showCalendar" [initialYear]="year" [initialMonth]="month" [filter]="filter"

‎src/core/components/swipe-slides/swipe-slides.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
display: flex;
1111
flex-direction: column;
1212
overflow: visible;
13-
touch-action: pan-x pinch-zoom;
13+
touch-action: pan-x pan-y pinch-zoom;
1414
}
1515

1616
&::part(wrapper) {

‎src/core/components/tabs/tabs.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
flex-grow: 1;
5050

5151
&::part(container) {
52-
touch-action: pan-x pinch-zoom;
52+
touch-action: pan-x pan-y pinch-zoom;
5353
}
5454

5555
swiper-slide {

‎src/core/features/editor/components/classic-editor/classic-editor.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@
122122
flex-shrink: 1;
123123

124124
&::part(container) {
125-
touch-action: pan-x pinch-zoom;
125+
touch-action: pan-x pan-y pinch-zoom;
126126
}
127127
}
128128

0 commit comments

Comments
 (0)