MOBILE-3881 timeline: Apply new design on timeline block
Pau Ferrer Ocaña
parent
375301b788
commit
774dc32bfd
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
.userpicture {
|
||||
vertical-align: text-bottom;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,8 +15,6 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { CoreSharedModule } from '@/core/shared.module';
|
||||
import { CoreCoursesComponentsModule } from '@features/courses/components/components.module';
|
||||
import { CoreCourseComponentsModule } from '@features/course/components/components.module';
|
||||
|
||||
import { AddonBlockTimelineComponent } from './timeline/timeline';
|
||||
import { AddonBlockTimelineEventsComponent } from './events/events';
|
||||
|
|
@ -28,8 +26,6 @@ import { AddonBlockTimelineEventsComponent } from './events/events';
|
|||
],
|
||||
imports: [
|
||||
CoreSharedModule,
|
||||
CoreCoursesComponentsModule,
|
||||
CoreCourseComponentsModule,
|
||||
],
|
||||
exports: [
|
||||
AddonBlockTimelineComponent,
|
||||
|
|
|
|||
|
|
@ -1,50 +1,61 @@
|
|||
<ion-item lines="none" *ngIf="course">
|
||||
<ion-label class="ion-text-wrap">
|
||||
<h3>
|
||||
<span class="sr-only">{{ 'core.courses.aria:coursename' | translate }}</span>
|
||||
<core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id"></core-format-text>
|
||||
</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-group *ngFor="let dayEvents of filteredEvents">
|
||||
<ion-item-divider [color]="dayEvents.color">
|
||||
<ion-label><h3>{{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedayshort" }}</h3></ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item lines="none">
|
||||
<ion-label>
|
||||
<h4 [class.core-bold]="!course">{{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedayshort" }}</h4>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ng-container *ngFor="let event of dayEvents.events">
|
||||
<ion-item class="ion-text-wrap core-course-module-handler item-media" detail="false" (click)="action($event, event.url)"
|
||||
[attr.aria-label]="event.name" button>
|
||||
<core-mod-icon *ngIf="event.iconUrl" slot="start" [modicon]="event.iconUrl" [componentId]="event.instance"
|
||||
[modname]="event.modulename">
|
||||
</core-mod-icon>
|
||||
<ion-item class="addon-block-timeline-activity" detail="false" (click)="action($event, event.url)" [attr.aria-label]="event.name"
|
||||
button lines="full">
|
||||
<ion-label>
|
||||
<p class="item-heading">
|
||||
<core-format-text [text]="event.name" contextLevel="module" [contextInstanceId]="event.id"
|
||||
[courseId]="event.course && event.course.id">
|
||||
</core-format-text>
|
||||
</p>
|
||||
<p *ngIf="showCourse && event.course">
|
||||
<core-format-text [text]="event.course.fullnamedisplay" contextLevel="course"
|
||||
[contextInstanceId]="event.course.id">
|
||||
</core-format-text>
|
||||
</p>
|
||||
|
||||
<ion-button fill="clear" class="ion-hide-md-up ion-text-wrap" (click)="action($event, event.action.url)"
|
||||
[title]="event.action.name" [disabled]="!event.action.actionable" *ngIf="event.action">
|
||||
{{event.action.name}}
|
||||
<ion-badge slot="end" class="ion-margin-start" *ngIf="event.action.showitemcount">{{event.action.itemcount}}
|
||||
</ion-badge>
|
||||
</ion-button>
|
||||
<ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding">
|
||||
<ion-col class="addon-block-timeline-activity-main ion-no-padding">
|
||||
<ion-row class="ion-justify-content-between ion-align-items-center ion-nowrap ion-no-padding">
|
||||
<ion-col class="addon-block-timeline-activity-time ion-no-padding">
|
||||
<ion-badge color="light">{{event.timesort * 1000 | coreFormatDate:"strftimetime24" }}</ion-badge>
|
||||
<core-mod-icon *ngIf="event.iconUrl" [modicon]="event.iconUrl" [componentId]="event.instance"
|
||||
[modname]="event.modulename">
|
||||
</core-mod-icon>
|
||||
</ion-col>
|
||||
<ion-col class="addon-block-timeline-activity-name ion-no-padding">
|
||||
<p class="item-heading">
|
||||
<core-format-text [text]="event.activityname || event.name" contextLevel="module"
|
||||
[contextInstanceId]="event.id" [courseId]="event.course && event.course.id">
|
||||
</core-format-text>
|
||||
<ion-badge *ngIf="event.overdue" color="danger">{{ 'addon.block_timeline.overdue' | translate }}
|
||||
</ion-badge>
|
||||
</p>
|
||||
<p *ngIf="(showCourse && event.course) || event.activitystr">
|
||||
<span *ngIf="showCourse && event.course">
|
||||
<core-format-text [text]="event.course.fullnamedisplay" contextLevel="course"
|
||||
[contextInstanceId]="event.course.id">
|
||||
</core-format-text> ·
|
||||
</span>
|
||||
<core-format-text [text]="event.activitystr" contextLevel="module" [contextInstanceId]="event.id">
|
||||
</core-format-text>
|
||||
</p>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
<ion-col class="addon-block-timeline-activity-action ion-no-padding">
|
||||
<ion-button fill="clear" (click)="action($event, event.action.url)" [title]="event.action.name"
|
||||
[disabled]="!event.action.actionable" *ngIf="event.action">
|
||||
{{event.action.name}}
|
||||
<ion-badge slot="end" class="ion-margin-start" *ngIf="event.action.showitemcount">
|
||||
{{event.action.itemcount}}
|
||||
</ion-badge>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-label>
|
||||
|
||||
<div slot="end" class="events-info">
|
||||
<div>
|
||||
<ion-badge color="light">{{event.timesort * 1000 | coreFormatDate:"strftimetime24" }}</ion-badge>
|
||||
</div>
|
||||
<ion-button
|
||||
class="ion-hide-md-down"
|
||||
fill="clear"
|
||||
(click)="action($event, event.action.url)"
|
||||
[title]="event.action.name"
|
||||
[disabled]="!event.action.actionable" *ngIf="event.action"
|
||||
>
|
||||
{{event.action.name}}
|
||||
<ion-badge slot="end" class="ion-margin-start" *ngIf="event.action.showitemcount">
|
||||
{{event.action.itemcount}}
|
||||
</ion-badge>
|
||||
</ion-button>
|
||||
</div>
|
||||
</ion-item>
|
||||
</ng-container>
|
||||
</ion-item-group>
|
||||
|
|
@ -57,6 +68,10 @@
|
|||
<ion-spinner *ngIf="loadingMore" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
|
||||
</div>
|
||||
|
||||
<core-empty-box *ngIf="empty" image="assets/img/icons/activities.svg" [message]="'addon.block_timeline.noevents' | translate"
|
||||
inline="true">
|
||||
</core-empty-box>
|
||||
<ion-item lines="none" *ngIf="empty && course">
|
||||
<ion-label class="ion-text-wrap">
|
||||
<p>{{'addon.block_timeline.noevents' | translate}}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<core-empty-box *ngIf="empty && !course" image="assets/img/icons/activities.svg" inline="true"
|
||||
[message]="'addon.block_timeline.noevents' | translate"></core-empty-box>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,41 @@
|
|||
.events-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: end;
|
||||
padding: 10px 0;
|
||||
@import "~theme/globals";
|
||||
|
||||
h3 {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
h4.core-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.addon-block-timeline-activity ion-badge {
|
||||
@include margin-horizontal(0.25rem, 0.5rem);
|
||||
}
|
||||
|
||||
.addon-block-timeline-activity core-mod-icon {
|
||||
--margin-end: 0.5rem;
|
||||
}
|
||||
|
||||
.addon-block-timeline-activity-time,
|
||||
.addon-block-timeline-activity-action {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.addon-block-timeline-activity-main,
|
||||
.addon-block-timeline-activity-name {
|
||||
flex-grow: 1;
|
||||
p {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.addon-block-timeline-activity-name {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,11 +17,11 @@ import { CoreSites } from '@services/sites';
|
|||
import { CoreDomUtils } from '@services/utils/dom';
|
||||
import { CoreTextUtils } from '@services/utils/text';
|
||||
import { CoreTimeUtils } from '@services/utils/time';
|
||||
import { CoreUtils } from '@services/utils/utils';
|
||||
import { CoreCourse } from '@features/course/services/course';
|
||||
import moment from 'moment';
|
||||
import { CoreContentLinksHelper } from '@features/contentlinks/services/contentlinks-helper';
|
||||
import { AddonCalendarEvent } from '@addons/calendar/services/calendar';
|
||||
import { CoreEnrolledCourseDataWithOptions } from '@features/courses/services/courses-helper';
|
||||
|
||||
/**
|
||||
* Directive to render a list of events in course overview.
|
||||
|
|
@ -34,34 +34,37 @@ import { AddonCalendarEvent } from '@addons/calendar/services/calendar';
|
|||
export class AddonBlockTimelineEventsComponent implements OnChanges {
|
||||
|
||||
@Input() events: AddonBlockTimelineEvent[] = []; // The events to render.
|
||||
@Input() showCourse?: boolean | string; // Whether to show the course name.
|
||||
@Input() course?: CoreEnrolledCourseDataWithOptions; // Whether to show the course name.
|
||||
@Input() from = 0; // Number of days from today to offset the events.
|
||||
@Input() to?: number; // Number of days from today to limit the events to. If not defined, no limit.
|
||||
@Input() canLoadMore?: boolean; // Whether more events can be loaded.
|
||||
@Output() loadMore: EventEmitter<void>; // Notify that more events should be loaded.
|
||||
@Input() canLoadMore = false; // Whether more events can be loaded.
|
||||
@Output() loadMore = new EventEmitter(); // Notify that more events should be loaded.
|
||||
|
||||
showCourse = false; // Whether to show the course name.
|
||||
empty = true;
|
||||
loadingMore = false;
|
||||
filteredEvents: AddonBlockTimelineEventFilteredEvent[] = [];
|
||||
|
||||
constructor() {
|
||||
this.loadMore = new EventEmitter();
|
||||
}
|
||||
|
||||
/**
|
||||
* Detect changes on input properties.
|
||||
* @inheritdoc
|
||||
*/
|
||||
async ngOnChanges(changes: {[name: string]: SimpleChange}): Promise<void> {
|
||||
this.showCourse = CoreUtils.isTrueOrOne(this.showCourse);
|
||||
this.showCourse = !this.course;
|
||||
|
||||
if (changes.events || changes.from || changes.to) {
|
||||
if (this.events && this.events.length > 0) {
|
||||
const filteredEvents = await this.filterEventsByTime(this.from, this.to);
|
||||
this.empty = !filteredEvents || filteredEvents.length <= 0;
|
||||
|
||||
const now = CoreTimeUtils.timestamp();
|
||||
|
||||
const eventsByDay: Record<number, AddonCalendarEvent[]> = {};
|
||||
filteredEvents.forEach((event) => {
|
||||
const dayTimestamp = CoreTimeUtils.getMidnightForTimestamp(event.timesort);
|
||||
|
||||
// Already calculated on 4.0 onwards but this will be live.
|
||||
event.overdue = event.timesort < now;
|
||||
|
||||
if (eventsByDay[dayTimestamp]) {
|
||||
eventsByDay[dayTimestamp].push(event);
|
||||
} else {
|
||||
|
|
@ -69,15 +72,13 @@ export class AddonBlockTimelineEventsComponent implements OnChanges {
|
|||
}
|
||||
});
|
||||
|
||||
const todaysMidnight = CoreTimeUtils.getMidnightForTimestamp();
|
||||
this.filteredEvents = [];
|
||||
Object.keys(eventsByDay).forEach((key) => {
|
||||
this.filteredEvents = Object.keys(eventsByDay).map((key) => {
|
||||
const dayTimestamp = parseInt(key);
|
||||
this.filteredEvents.push({
|
||||
color: dayTimestamp < todaysMidnight ? 'danger' : 'light',
|
||||
|
||||
return {
|
||||
dayTimestamp,
|
||||
events: eventsByDay[dayTimestamp],
|
||||
});
|
||||
};
|
||||
});
|
||||
} else {
|
||||
this.empty = true;
|
||||
|
|
@ -94,7 +95,7 @@ export class AddonBlockTimelineEventsComponent implements OnChanges {
|
|||
*/
|
||||
protected async filterEventsByTime(start: number, end?: number): Promise<AddonBlockTimelineEvent[]> {
|
||||
start = moment().add(start, 'days').startOf('day').unix();
|
||||
end = typeof end != 'undefined' ? moment().add(end, 'days').startOf('day').unix() : end;
|
||||
end = end !== undefined ? moment().add(end, 'days').startOf('day').unix() : end;
|
||||
|
||||
return await Promise.all(this.events.filter((event) => {
|
||||
if (end) {
|
||||
|
|
@ -122,12 +123,12 @@ export class AddonBlockTimelineEventsComponent implements OnChanges {
|
|||
/**
|
||||
* Action clicked.
|
||||
*
|
||||
* @param e Click event.
|
||||
* @param event Click event.
|
||||
* @param url Url of the action.
|
||||
*/
|
||||
async action(e: Event, url: string): Promise<void> {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
async action(event: Event, url: string): Promise<void> {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
// Fix URL format.
|
||||
url = CoreTextUtils.decodeHTMLEntities(url);
|
||||
|
|
@ -137,7 +138,7 @@ export class AddonBlockTimelineEventsComponent implements OnChanges {
|
|||
try {
|
||||
const treated = await CoreContentLinksHelper.handleLink(url);
|
||||
if (!treated) {
|
||||
return CoreSites.getCurrentSite()?.openInBrowserWithAutoLoginIfSameSite(url);
|
||||
return CoreSites.getRequiredCurrentSite().openInBrowserWithAutoLoginIfSameSite(url);
|
||||
}
|
||||
} finally {
|
||||
modal.dismiss();
|
||||
|
|
@ -154,5 +155,4 @@ type AddonBlockTimelineEvent = AddonCalendarEvent & {
|
|||
type AddonBlockTimelineEventFilteredEvent = {
|
||||
events: AddonBlockTimelineEvent[];
|
||||
dayTimestamp: number;
|
||||
color: string;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<ion-item-divider sticky="true">
|
||||
<ion-label><h2>{{ 'addon.block_timeline.pluginname' | translate }}</h2></ion-label>
|
||||
<ion-label>
|
||||
<h2>{{ 'addon.block_timeline.pluginname' | translate }}</h2>
|
||||
</ion-label>
|
||||
<core-context-menu slot="end">
|
||||
<core-context-menu-item *ngIf="loaded" [priority]="900" [content]="'addon.block_timeline.sortbydates' | translate"
|
||||
(action)="switchSort('sortbydates')" [iconAction]="sort == 'sortbydates' ? 'far-dot-circle' : 'far-circle'">
|
||||
|
|
@ -18,7 +20,7 @@
|
|||
<ion-select-option class="ion-text-wrap" value="overdue">
|
||||
{{ 'addon.block_timeline.overdue' | translate }}
|
||||
</ion-select-option>
|
||||
<ion-select-option class="ion-text-wrap" disabled value="disabled">
|
||||
<ion-select-option class="ion-text-wrap core-select-option-title" disabled value="disabled">
|
||||
{{ 'addon.block_timeline.duedate' | translate }}
|
||||
</ion-select-option>
|
||||
<ion-select-option class="ion-text-wrap" value="next7days">
|
||||
|
|
@ -36,21 +38,14 @@
|
|||
</core-combobox>
|
||||
</div>
|
||||
<core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'" [fullscreen]="false">
|
||||
<addon-block-timeline-events [events]="timeline.events" showCourse="true" [canLoadMore]="timeline.canLoadMore"
|
||||
(loadMore)="loadMoreTimeline()" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
|
||||
<addon-block-timeline-events [events]="timeline.events" [canLoadMore]="timeline.canLoadMore" (loadMore)="loadMore()"
|
||||
[from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
|
||||
</core-loading>
|
||||
<core-loading [hideUntil]="timelineCourses.loaded" [hidden]="sort != 'sortbycourses'"
|
||||
[fullscreen]="false" class="safe-area-padding">
|
||||
<ion-grid class="ion-no-padding">
|
||||
<ion-row class="ion-no-padding">
|
||||
<ion-col *ngFor="let course of timelineCourses.courses" class="ion-no-padding" size="12" size-md="6">
|
||||
<core-courses-course-progress [course]="course">
|
||||
<addon-block-timeline-events [events]="course.events" [canLoadMore]="course.canLoadMore"
|
||||
(loadMore)="loadMoreCourse(course)" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
|
||||
</core-courses-course-progress>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
<core-loading [hideUntil]="timelineCourses.loaded" [hidden]="sort != 'sortbycourses'" [fullscreen]="false" class="safe-area-page">
|
||||
<ng-container *ngFor="let course of timelineCourses.courses">
|
||||
<addon-block-timeline-events [events]="course.events" [canLoadMore]="course.canLoadMore" (loadMore)="loadMore(course)"
|
||||
[course]="course" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
|
||||
</ng-container>
|
||||
<core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
|
||||
[message]="'addon.block_timeline.nocoursesinprogress' | translate"></core-empty-box>
|
||||
</core-loading>
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import { CoreCoursesHelper, CoreEnrolledCourseDataWithOptions } from '@features/
|
|||
import { CoreSite } from '@classes/site';
|
||||
import { CoreCourses } from '@features/courses/services/courses';
|
||||
import { CoreCourseOptionsDelegate } from '@features/course/services/course-options-delegate';
|
||||
import { CoreNavigator } from '@services/navigator';
|
||||
|
||||
/**
|
||||
* Component to render a timeline block.
|
||||
|
|
@ -36,7 +37,7 @@ export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implemen
|
|||
|
||||
sort = 'sortbydates';
|
||||
filter = 'next30days';
|
||||
currentSite?: CoreSite;
|
||||
currentSite!: CoreSite;
|
||||
timeline: {
|
||||
events: AddonCalendarEvent[];
|
||||
loaded: boolean;
|
||||
|
|
@ -66,10 +67,18 @@ export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implemen
|
|||
}
|
||||
|
||||
/**
|
||||
* Component being initialized.
|
||||
* @inheritdoc
|
||||
*/
|
||||
async ngOnInit(): Promise<void> {
|
||||
this.currentSite = CoreSites.getRequiredCurrentSite();
|
||||
try {
|
||||
this.currentSite = CoreSites.getRequiredCurrentSite();
|
||||
} catch (error) {
|
||||
CoreDomUtils.showErrorModal(error);
|
||||
|
||||
CoreNavigator.back();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.filter = await this.currentSite.getLocalSiteConfig('AddonBlockTimelineFilter', this.filter);
|
||||
this.switchFilter(this.filter);
|
||||
|
|
@ -117,28 +126,21 @@ export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implemen
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load more events.
|
||||
*/
|
||||
async loadMoreTimeline(): Promise<void> {
|
||||
try {
|
||||
await this.fetchMyOverviewTimeline(this.timeline.canLoadMore);
|
||||
} catch (error) {
|
||||
CoreDomUtils.showErrorModalDefault(error, this.fetchContentDefaultError);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load more events.
|
||||
*
|
||||
* @param course Course.
|
||||
* @param course Course. If defined, it will update the course events, timeline otherwise.
|
||||
* @return Promise resolved when done.
|
||||
*/
|
||||
async loadMoreCourse(course: AddonBlockTimelineCourse): Promise<void> {
|
||||
async loadMore(course?: AddonBlockTimelineCourse): Promise<void> {
|
||||
try {
|
||||
const courseEvents = await AddonBlockTimeline.getActionEventsByCourse(course.id, course.canLoadMore);
|
||||
course.events = course.events?.concat(courseEvents.events);
|
||||
course.canLoadMore = courseEvents.canLoadMore;
|
||||
if (course) {
|
||||
const courseEvents = await AddonBlockTimeline.getActionEventsByCourse(course.id, course.canLoadMore);
|
||||
course.events = course.events?.concat(courseEvents.events);
|
||||
course.canLoadMore = courseEvents.canLoadMore;
|
||||
} else {
|
||||
await this.fetchMyOverviewTimeline(this.timeline.canLoadMore);
|
||||
}
|
||||
} catch (error) {
|
||||
CoreDomUtils.showErrorModalDefault(error, this.fetchContentDefaultError);
|
||||
}
|
||||
|
|
@ -188,12 +190,12 @@ export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implemen
|
|||
*/
|
||||
switchFilter(filter: string): void {
|
||||
this.filter = filter;
|
||||
this.currentSite?.setLocalSiteConfig('AddonBlockTimelineFilter', this.filter);
|
||||
this.currentSite.setLocalSiteConfig('AddonBlockTimelineFilter', this.filter);
|
||||
|
||||
switch (this.filter) {
|
||||
case 'overdue':
|
||||
this.dataFrom = -14;
|
||||
this.dataTo = 0;
|
||||
this.dataTo = 1;
|
||||
break;
|
||||
case 'next7days':
|
||||
this.dataFrom = 0;
|
||||
|
|
@ -226,7 +228,7 @@ export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implemen
|
|||
*/
|
||||
switchSort(sort: string): void {
|
||||
this.sort = sort;
|
||||
this.currentSite?.setLocalSiteConfig('AddonBlockTimelineSort', this.sort);
|
||||
this.currentSite.setLocalSiteConfig('AddonBlockTimelineSort', this.sort);
|
||||
|
||||
if (!this.timeline.loaded && this.sort == 'sortbydates') {
|
||||
this.fetchContent();
|
||||
|
|
@ -237,7 +239,7 @@ export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implemen
|
|||
|
||||
}
|
||||
|
||||
type AddonBlockTimelineCourse = CoreEnrolledCourseDataWithOptions & {
|
||||
export type AddonBlockTimelineCourse = CoreEnrolledCourseDataWithOptions & {
|
||||
events?: AddonCalendarEvent[];
|
||||
canLoadMore?: number;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1707,14 +1707,19 @@ export type AddonCalendarEventBase = {
|
|||
userid?: number; // Userid.
|
||||
repeatid?: number; // Repeatid.
|
||||
eventcount?: number; // Eventcount.
|
||||
component?: string; // Component.
|
||||
modulename?: string; // Modulename.
|
||||
activityname?: string; // Activityname.
|
||||
activitystr?: string; // Activitystr.
|
||||
instance?: number; // Instance.
|
||||
eventtype: AddonCalendarEventType; // Eventtype.
|
||||
timestart: number; // Timestart.
|
||||
timeduration: number; // Timeduration.
|
||||
timesort: number; // Timesort.
|
||||
timeusermidnight: number; // Timeusermidnight.
|
||||
visible: number; // Visible.
|
||||
timemodified: number; // Timemodified.
|
||||
overdue?: boolean; // Overdue.
|
||||
icon: {
|
||||
key: string; // Key.
|
||||
component: string; // Component.
|
||||
|
|
|
|||
|
|
@ -7,4 +7,8 @@
|
|||
ion-item-divider {
|
||||
min-height: var(--item-divider-min-height);
|
||||
}
|
||||
|
||||
::ng-deep core-loading {
|
||||
--loading-inline-min-height: 44px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
<ion-card [attr.course-color]="course.color ? null : course.colorNumber">
|
||||
<div (click)="openCourse()" class="core-course-thumb" [class.core-course-color-img]="course.courseImage"
|
||||
[style.background-color]="course.color">
|
||||
<img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt=""/>
|
||||
<img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt="" />
|
||||
</div>
|
||||
<ion-item button lines="none" (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname"
|
||||
class="core-course-header" [class.item-disabled]="course.visible == 0"
|
||||
[class.core-course-only-title]="!showAll || progress < 0 && completionUserTracked === false"
|
||||
detail="false">
|
||||
<ion-label
|
||||
class="ion-text-wrap core-course-title"
|
||||
[class.core-course-only-title]="!showAll || progress < 0 && completionUserTracked === false" detail="false">
|
||||
<ion-label class="ion-text-wrap core-course-title"
|
||||
[class.core-course-with-buttons]="courseOptionMenuEnabled || (downloadCourseEnabled && showDownload)"
|
||||
[class.core-course-with-spinner]="(downloadCourseEnabled && prefetchCourseData.icon == 'spinner') || showSpinner">
|
||||
<p *ngIf="course.categoryname || (course.displayname && course.shortname && course.fullname != course.displayname)"
|
||||
|
|
@ -19,8 +17,7 @@
|
|||
</span>
|
||||
<span *ngIf="course.categoryname && course.displayname && course.shortname && course.fullname != course.displayname"
|
||||
class="core-course-category"> | </span>
|
||||
<span *ngIf="course.displayname && course.shortname && course.fullname != course.displayname"
|
||||
class="core-course-shortname">
|
||||
<span *ngIf="course.displayname && course.shortname && course.fullname != course.displayname" class="core-course-shortname">
|
||||
<core-format-text [text]="course.shortname" contextLevel="course" [contextInstanceId]="course.id">
|
||||
</core-format-text>
|
||||
</span>
|
||||
|
|
@ -35,12 +32,8 @@
|
|||
</ion-label>
|
||||
|
||||
<div class="core-button-spinner" *ngIf="downloadCourseEnabled && !courseOptionMenuEnabled && showDownload" slot="end">
|
||||
<core-download-refresh
|
||||
[status]="prefetchCourseData.status"
|
||||
[enabled]="downloadCourseEnabled"
|
||||
[statusTranslatable]="prefetchCourseData.statusTranslatable"
|
||||
canTrustDownload="false"
|
||||
[loading]="prefetchCourseData.loading"
|
||||
<core-download-refresh [status]="prefetchCourseData.status" [enabled]="downloadCourseEnabled"
|
||||
[statusTranslatable]="prefetchCourseData.statusTranslatable" canTrustDownload="false" [loading]="prefetchCourseData.loading"
|
||||
(action)="prefetchCourse()"></core-download-refresh>
|
||||
</div>
|
||||
|
||||
|
|
@ -50,9 +43,8 @@
|
|||
[attr.aria-label]="'core.loading' | translate"></ion-spinner>
|
||||
|
||||
<!-- Downloaded icon. -->
|
||||
<ion-icon *ngIf="downloadCourseEnabled && prefetchCourseData.downloadSucceeded && !showSpinner"
|
||||
class="core-icon-downloaded" name="cloud-done" color="success" role="status"
|
||||
[attr.aria-label]="'core.downloaded' | translate"></ion-icon>
|
||||
<ion-icon *ngIf="downloadCourseEnabled && prefetchCourseData.downloadSucceeded && !showSpinner" class="core-icon-downloaded"
|
||||
name="cloud-done" color="success" role="status" [attr.aria-label]="'core.downloaded' | translate"></ion-icon>
|
||||
|
||||
<!-- Options menu. -->
|
||||
<ion-button fill="clear" color="dark" (click)="showCourseOptionsMenu($event)" *ngIf="!showSpinner"
|
||||
|
|
@ -61,11 +53,9 @@
|
|||
</ion-button>
|
||||
</div>
|
||||
</ion-item>
|
||||
<ion-item *ngIf="showAll && progress >= 0 && completionUserTracked !== false" lines="none"
|
||||
class="core-course-progress">
|
||||
<ion-item *ngIf="showAll && progress >= 0 && completionUserTracked !== false" lines="none" class="core-course-progress">
|
||||
<ion-label>
|
||||
<core-progress-bar [progress]="progress" a11yText="core.courses.aria:courseprogress"></core-progress-bar>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ng-content></ng-content>
|
||||
</ion-card>
|
||||
|
|
|
|||
|
|
@ -788,6 +788,13 @@ ion-select::part(icon) {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
ion-select-popover ion-item.core-select-option-title {
|
||||
cursor: pointer;
|
||||
ion-radio {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ion-searchbar {
|
||||
.searchbar-search-icon.ios {
|
||||
top: 4px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue