MOBILE-3021 calendar: Improve event page display

main
Dani Palou 2019-07-18 12:56:55 +02:00
parent f07d6e1df7
commit 6d94c961f1
7 changed files with 41 additions and 28 deletions

View File

@ -30,6 +30,7 @@
"addon.block_badges.pluginname": "block_badges",
"addon.block_blogmenu.pluginname": "block_blog_menu",
"addon.block_blogrecent.nocourses": "block_blog_recent",
"addon.block_blogrecent.pluginname": "block_blog_recent",
"addon.block_blogtags.pluginname": "block_blog_tags",
"addon.block_calendarmonth.pluginname": "block_calendar_month",
"addon.block_calendarupcoming.pluginname": "block_calendar_upcoming",
@ -51,12 +52,12 @@
"addon.block_newsitems.pluginname": "block_news_items",
"addon.block_onlineusers.pluginname": "block_online_users",
"addon.block_privatefiles.pluginname": "block_private_files",
"addon.block_recentactivity.pluginname": "block_recent_activity",
"addon.block_recentlyaccessedcourses.nocourses": "block_recentlyaccessedcourses",
"addon.block_recentlyaccessedcourses.pluginname": "block_recentlyaccessedcourses",
"addon.block_recentlyaccesseditems.noitems": "block_recentlyaccesseditems",
"addon.block_recentactivity.pluginname": "block_recent_activity",
"addon.block_recentlyaccesseditems.pluginname": "block_recentlyaccesseditems",
"addon.block_rssclient.pluginname": "block_rss_client",
"addon.block_glossaryrandom.pluginname": "block_glossary_random",
"addon.block_selfcompletion.pluginname": "block_selfcompletion",
"addon.block_sitemainmenu.pluginname": "block_site_main_menu",
"addon.block_starredcourses.nocourses": "block_starredcourses",
@ -149,6 +150,7 @@
"addon.calendar.upcomingevents": "calendar",
"addon.calendar.wed": "calendar",
"addon.calendar.wednesday": "calendar",
"addon.calendar.when": "calendar",
"addon.calendar.yesterday": "calendar",
"addon.competency.activities": "tool_lp",
"addon.competency.competencies": "competency",

View File

@ -43,6 +43,7 @@
<span class="calendar_event_type calendar_event_{{event.formattedType}}"></span>
<ion-icon *ngIf="event.offline && !event.deleted" name="time"></ion-icon>
<ion-icon *ngIf="event.deleted" name="trash"></ion-icon>
<img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" alt="" role="presentation" class="core-module-icon">
{{ event.timestart * 1000 | coreFormatDate: timeFormat }}
{{event.name}}
</p>

View File

@ -48,4 +48,11 @@ ion-app.app-root addon-calendar-calendar {
background-color: $calendar-event-site-color;
}
}
.core-module-icon {
@include margin-horizontal(1px, 1px);
width: 16px;
height: 16px;
display: inline;
}
}

View File

@ -65,5 +65,6 @@
"upcomingevents": "Upcoming events",
"wed": "Wed",
"wednesday": "Wednesday",
"when": "When",
"yesterday": "Yesterday"
}

View File

@ -1,6 +1,10 @@
<ion-header>
<ion-navbar core-back-button>
<ion-title><core-format-text [text]="title"></core-format-text></ion-title>
<ion-title>
<img *ngIf="event && event.moduleIcon" src="{{event.moduleIcon}}" alt="" role="presentation" class="core-module-icon">
<core-icon *ngIf="event && event.icon && !event.moduleIcon" [name]="event.icon" item-start></core-icon>
<core-format-text *ngIf="event" [text]="event.name"></core-format-text>
</ion-title>
<ion-buttons end>
<!-- The context menu will be added in here. -->
</ion-buttons>
@ -26,14 +30,26 @@
<ion-card>
<ion-card-content *ngIf="event">
<ion-item text-wrap>
<ion-item text-wrap *ngIf="isSplitViewOn">
<img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" item-start alt="" role="presentation" class="core-module-icon">
<core-icon *ngIf="event.icon && !event.moduleIcon" [name]="event.icon" item-start></core-icon>
<h2><core-format-text [text]="event.name"></core-format-text></h2>
<p><core-format-text [text]="event.formattedtime"></core-format-text></p>
<h2>{{ 'addon.calendar.eventname' | translate }}</h2>
<p><core-format-text [text]="event.name"></core-format-text></p>
<ion-note item-end *ngIf="event.deleted">
<ion-icon name="trash"></ion-icon> {{ 'core.deletedoffline' | translate }}
</ion-note>
</ion-item>
<ion-item>
<h2>{{ 'addon.calendar.when' | translate }}</h2>
<p><core-format-text [text]="event.formattedtime"></core-format-text></p>
<ion-note item-end *ngIf="!isSplitViewOn && event.deleted">
<ion-icon name="trash"></ion-icon> {{ 'core.deletedoffline' | translate }}
</ion-note>
</ion-item>
<ion-item>
<h2>{{ 'addon.calendar.eventtype' | translate }}</h2>
<p>{{ 'addon.calendar.type' + event.formattedType | translate }}</p>
</ion-item>
<a ion-item text-wrap *ngIf="courseName" [href]="courseUrl" core-link capture="true">
<h2>{{ 'core.course' | translate}}</h2>
<p><core-format-text [text]="courseName"></core-format-text></p>
@ -46,10 +62,8 @@
<h2>{{ 'core.category' | translate}}</h2>
<p><core-format-text [text]="categoryPath"></core-format-text></p>
</a>
<ion-item text-wrap *ngIf="event.moduleIcon">
<img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" item-start alt="" role="presentation" class="core-module-icon"> {{event.moduleName}}
</ion-item>
<ion-item text-wrap *ngIf="event.description">
<h2>{{ 'core.description' | translate}}</h2>
<p>
<core-format-text [text]="event.description"></core-format-text>
</p>

View File

@ -57,7 +57,6 @@ export class AddonCalendarEventPage implements OnDestroy {
notificationMax: string;
notificationTimeText: string;
event: any = {};
title: string;
courseName: string;
groupName: string;
courseUrl = '';
@ -236,8 +235,6 @@ export class AddonCalendarEventPage implements OnDestroy {
this.courseUrl = '';
this.moduleUrl = '';
// Guess event title.
let title = this.translate.instant('addon.calendar.type' + event.eventtype);
if (event.moduleIcon) {
// It's a module event, translate the module name to the current language.
const name = this.courseProvider.translateModuleName(event.modulename);
@ -245,27 +242,12 @@ export class AddonCalendarEventPage implements OnDestroy {
event.moduleName = name;
}
// Calculate the title of the page;
if (title == 'addon.calendar.type' + event.eventtype) {
title = this.translate.instant('core.mod_' + event.modulename + '.' + event.eventtype);
if (title == 'core.mod_' + event.modulename + '.' + event.eventtype) {
title = name;
}
}
// Get the module URL.
if (canGetById) {
this.moduleUrl = event.url;
}
} else {
if (title == 'addon.calendar.type' + event.eventtype) {
title = event.name;
}
}
this.title = title;
// If the event belongs to a course, get the course name and the URL to view it.
if (canGetById && event.course && event.course.id != this.siteHomeId) {
this.courseName = event.course.fullname;
@ -403,7 +385,12 @@ export class AddonCalendarEventPage implements OnDestroy {
refreshEvent(sync?: boolean, showErrors?: boolean): Promise<any> {
this.syncIcon = 'spinner';
return this.calendarProvider.invalidateEvent(this.eventId).catch(() => {
const promises = [];
promises.push(this.calendarProvider.invalidateEvent(this.eventId));
promises.push(this.calendarProvider.invalidateTimeFormat());
return Promise.all(promises).catch(() => {
// Ignore errors.
}).then(() => {
return this.fetchEvent(sync, showErrors);

View File

@ -149,6 +149,7 @@
"addon.calendar.upcomingevents": "Upcoming events",
"addon.calendar.wed": "Wed",
"addon.calendar.wednesday": "Wednesday",
"addon.calendar.when": "When",
"addon.calendar.yesterday": "Yesterday",
"addon.competency.activities": "Activities",
"addon.competency.competencies": "Competencies",