EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3811 calendar: Improve calendar visualization

main
Pau Ferrer Ocaña 2022-01-18 14:49:44 +01:00
parent e3daf3738c
commit 18db3c58b6
7 changed files with 93 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/addons/calendar/calendar-common.scss
View File

@ -6,11 +6,7 @@
> ion-icon {
color: white;
border-radius: 50%;
padding: 6px;
}
> core-mod-icon {
padding: 6px;
padding: 0.7rem;
}
&.addon-calendar-eventtype-category > ion-icon {
@ -30,4 +26,4 @@
}
}
}
}

5
src/addons/calendar/components/calendar/addon-calendar-calendar.html
View File

@ -81,13 +81,10 @@
<span class="addon-calendar-event-time">
{{ event.timestart * 1000 | coreFormatDate: timeFormat }}
</span>
<core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" [showAlt]="false"
[modname]="event.modulename" [componentId]="event.instance">
</core-mod-icon>
<!-- Add the icon title so accessibility tools read it. -->
<span class="sr-only">
{{ 'addon.calendar.type' + event.formattedType | translate }}
<span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">
<span class="sr-only" *ngIf="event.iconTitle">
{{ event.iconTitle }}
</span>
</span>

11
src/addons/calendar/components/calendar/calendar.scss
View File

@ -148,17 +148,6 @@
}
}
core-mod-icon {
margin-right: 1px;
margin-left: 1px;
--size: 16px;
display: inline-block;
vertical-align: bottom;
::ng-deep img {
display: block;
}
}
ion-slide {
display: block;
font-size: inherit;

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

@ -68,7 +68,7 @@
(click)="gotoEvent(event.id)" [class.item-dimmed]="event.ispast"
[ngClass]="['addon-calendar-eventtype-'+event.eventtype]" button detail="true">
<core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" slot="start" [showAlt]="false"
[modname]="event.modname" [componentId]="event.instance">
[modname]="event.modulename" [componentId]="event.instance">
</core-mod-icon>
<ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" slot="start"
aria-hidden="true">

167
src/addons/calendar/pages/event/event.html
View File

@ -1,18 +1,10 @@
<ion-header>
<ion-header collapsible>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button [text]="'core.back' | translate"></ion-back-button>
</ion-buttons>
<ion-title>
<h1 *ngIf="event">
<core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" [showAlt]="false" [modname]="event.modulename"
[componentId]="event.instance"></core-mod-icon>
<ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" aria-hidden="true"></ion-icon>
<!-- Add the icon title so accessibility tools read it. -->
<span class="sr-only">
{{ 'addon.calendar.type' + event.formattedType | translate }}
<span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">{{ event.iconTitle }}</span>
</span>
<core-format-text [text]="event.name" [contextLevel]="event.contextLevel" [contextInstanceId]="event.contextInstanceId">
</core-format-text>
</h1>
@ -47,79 +39,96 @@
</ion-item>
</ion-card>
<ion-card>
<ion-card-content *ngIf="event">
<ion-item>
<ion-label>
<h2>{{ 'addon.calendar.when' | translate }}</h2>
<core-format-text [text]="event.formattedtime" [contextLevel]="event.contextLevel"
<ion-list *ngIf="event">
<ion-item class="collapsible-title ion-text-wrap addon-calendar-event"
[ngClass]="['addon-calendar-eventtype-'+event.eventtype]">
<core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" [showAlt]="false" [modname]="event.modulename"
[componentId]="event.instance" slot="start"></core-mod-icon>
<ion-icon *ngIf=" event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" aria-hidden="true" slot="start">
</ion-icon>
<ion-label>
<!-- Add the icon title so accessibility tools read it. -->
<span class="sr-only">
{{ 'addon.calendar.type' + event.formattedType | translate }}
<span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">{{ event.iconTitle }}</span>
</span>
<h1>
<core-format-text [text]="event.name" [contextLevel]="event.contextLevel"
[contextInstanceId]="event.contextInstanceId">
</core-format-text>
</h1>
</ion-label>
</ion-item>
<ion-item>
<ion-label>
<h2>{{ 'addon.calendar.when' | translate }}</h2>
<core-format-text [text]="event.formattedtime" [contextLevel]="event.contextLevel"
[contextInstanceId]="event.contextInstanceId"></core-format-text>
</ion-label>
<ion-note slot="end" *ngIf="event.deleted">
<ion-icon name="fas-trash" aria-hidden="true"></ion-icon> {{ 'core.deletedoffline' | translate }}
</ion-note>
</ion-item>
<ion-item>
<ion-label>
<h2>{{ 'addon.calendar.eventtype' | translate }}</h2>
<p>{{ 'addon.calendar.type' + event.formattedType | translate }}</p>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="courseName" [href]="courseUrl" core-link capture="true">
<ion-label>
<h2>{{ 'core.course' | translate}}</h2>
<p>
<core-format-text [text]="courseName" contextLevel="course" [contextInstanceId]="courseId">
</core-format-text>
</p>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="groupName">
<ion-label>
<h2>{{ 'core.group' | translate}}</h2>
<p>{{ groupName }}</p>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="categoryPath">
<ion-label>
<h2>{{ 'core.category' | translate}}</h2>
<p>
<core-format-text [text]="categoryPath" contextLevel="coursecat" [contextInstanceId]="event.categoryid">
</core-format-text>
</p>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="event.description">
<ion-label>
<h2>{{ 'core.description' | translate}}</h2>
<p>
<core-format-text [text]="event.description" [contextLevel]="event.contextLevel"
[contextInstanceId]="event.contextInstanceId"></core-format-text>
</ion-label>
<ion-note slot="end" *ngIf="event.deleted">
<ion-icon name="fas-trash" aria-hidden="true"></ion-icon> {{ 'core.deletedoffline' | translate }}
</ion-note>
</ion-item>
<ion-item>
<ion-label>
<h2>{{ 'addon.calendar.eventtype' | translate }}</h2>
<p>{{ 'addon.calendar.type' + event.formattedType | translate }}</p>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="courseName" [href]="courseUrl" core-link capture="true">
<ion-label>
<h2>{{ 'core.course' | translate}}</h2>
<p>
<core-format-text [text]="courseName" contextLevel="course" [contextInstanceId]="courseId">
</core-format-text>
</p>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="groupName">
<ion-label>
<h2>{{ 'core.group' | translate}}</h2>
<p>{{ groupName }}</p>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="categoryPath">
<ion-label>
<h2>{{ 'core.category' | translate}}</h2>
<p>
<core-format-text [text]="categoryPath" contextLevel="coursecat" [contextInstanceId]="event.categoryid">
</core-format-text>
</p>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="event.description">
<ion-label>
<h2>{{ 'core.description' | translate}}</h2>
<p>
<core-format-text [text]="event.description" [contextLevel]="event.contextLevel"
</p>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="event.location">
<ion-label>
<h2>{{ 'core.location' | translate}}</h2>
<p>
<a [href]="event.encodedLocation" core-link auto-login="no">
<core-format-text [text]="event.location" [contextLevel]="event.contextLevel"
[contextInstanceId]="event.contextInstanceId"></core-format-text>
</p>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="event.location">
<ion-label>
<h2>{{ 'core.location' | translate}}</h2>
<p>
<a [href]="event.encodedLocation" core-link auto-login="no">
<core-format-text [text]="event.location" [contextLevel]="event.contextLevel"
[contextInstanceId]="event.contextInstanceId"></core-format-text>
</a>
</p>
</ion-label>
</ion-item>
<ion-item *ngIf="moduleUrl">
<ion-label>
<ion-button expand="block" color="primary" [href]="moduleUrl" core-link capture="true">
{{ 'addon.calendar.gotoactivity' | translate }}
</ion-button>
</ion-label>
</ion-item>
</ion-card-content>
</ion-card>
</a>
</p>
</ion-label>
</ion-item>
<ion-item *ngIf="moduleUrl">
<ion-label>
<ion-button expand="block" color="primary" [href]="moduleUrl" core-link capture="true">
{{ 'addon.calendar.gotoactivity' | translate }}
</ion-button>
</ion-label>
</ion-item>
</ion-list>
<ion-card list *ngIf="notificationsEnabled && event">
<ion-card *ngIf="notificationsEnabled && event">
<ion-item>
<ion-label>
<h2>{{ 'addon.calendar.reminders' | translate }}</h2>

2
src/addons/calendar/pages/event/event.page.ts
View File

@ -46,7 +46,7 @@ import { AddonCalendarReminderTimeModalComponent } from '@addons/calendar/compon
@Component({
selector: 'page-addon-calendar-event',
templateUrl: 'event.html',
styleUrls: ['event.scss'],
styleUrls: ['../../calendar-common.scss', 'event.scss'],
})
export class AddonCalendarEventPage implements OnInit, OnDestroy {

5
src/addons/calendar/pages/event/event.scss
View File

@ -2,9 +2,4 @@
ion-card ion-note {
font-size: 1.6rem;
}
h1 ion-icon, h1 img, h1 core-mod-icon {
margin-left: 10px;
margin-right: 10px;
display: inline-block;
}
}