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

MOBILE-3909 calendar: Reorder and reduce height of edit page

main
Dani Palou 2021-11-17 14:32:17 +01:00
parent 55a3c0539c
commit 1f5908ed66
2 changed files with 110 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/addons/calendar/pages/edit-event/edit-event.html
View File

@ -113,35 +113,27 @@
</ion-item> </ion-item>
</ng-container> </ng-container>
<!-- Advanced options. --> <!-- Reminders. Right now, only allow adding them here for new events. -->
<ion-item button class="ion-text-wrap divider" (click)="toggleAdvanced()" detail="false"> <ng-container *ngIf="notificationsEnabled && !eventId">
<ion-icon *ngIf="!advanced" name="fas-caret-right" flip-rtl slot="start" aria-hidden="true"></ion-icon> <ion-item-divider class="addon-calendar-reminders-title">
<ion-icon *ngIf="advanced" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
<ion-label> <ion-label>
<p class="item-heading" *ngIf="!advanced">{{ 'core.showmore' | translate }}</p> <p class="item-heading">{{ 'addon.calendar.reminders' | translate }}</p>
<p class="item-heading" *ngIf="advanced">{{ 'core.showless' | translate }}</p>
</ion-label> </ion-label>
</ion-item> <ion-button fill="clear" color="dark" (click)="addReminder()" slot="end"
[attr.aria-label]="'addon.calendar.setnewreminder' | translate">
<div [hidden]="!advanced"> <ion-icon name="fas-plus" slot="icon-only" aria-hidden="true"></ion-icon>
<!-- Description. --> </ion-button>
<ion-item class="ion-text-wrap"> </ion-item-divider>
<ion-label position="stacked"> <ion-item *ngFor="let reminder of reminders" class="ion-text-wrap">
<p class="item-heading">{{ 'core.description' | translate }}</p> <ion-label>
<p>{{ reminder.label }}</p>
</ion-label> </ion-label>
<core-rich-text-editor [control]="descriptionControl" [attr.aria-label]="'core.description' | translate" <ion-button fill="clear" (click)="removeReminder(reminder)" [attr.aria-label]="'core.delete' | translate"
[placeholder]="'core.description' | translate" name="description" [component]="component" slot="end">
[componentId]="eventId" [autoSave]="false"></core-rich-text-editor> <ion-icon name="fas-trash" color="danger" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-item> </ion-button>
<!-- Location. -->
<ion-item class="ion-text-wrap">
<ion-label position="stacked">
<p class="item-heading">{{ 'core.location' | translate }}</p>
</ion-label>
<ion-input type="text" name="location" [placeholder]="'core.location' | translate" formControlName="location">
</ion-input>
</ion-item> </ion-item>
</ng-container>
<!-- Duration. --> <!-- Duration. -->
<div class="ion-text-wrap addon-calendar-radio-container"> <div class="ion-text-wrap addon-calendar-radio-container">
@ -163,12 +155,11 @@
</ion-label> </ion-label>
<ion-radio slot="end" [value]="1"></ion-radio> <ion-radio slot="end" [value]="1"></ion-radio>
</ion-item> </ion-item>
<ion-item> <ion-item *ngIf="form.controls.duration.value === 1">
<ion-label position="stacked"></ion-label> <ion-label position="stacked"></ion-label>
<ion-datetime formControlName="timedurationuntil" [max]="maxDate" [min]="minDate" <ion-datetime formControlName="timedurationuntil" [max]="maxDate" [min]="minDate"
[placeholder]="'addon.calendar.durationuntil' | translate" [placeholder]="'addon.calendar.durationuntil' | translate"
[displayFormat]="dateFormat" [disabled]="form.controls.duration.value != 1" [displayFormat]="dateFormat" display-timezone="utc">
display-timezone="utc">
</ion-datetime> </ion-datetime>
</ion-item> </ion-item>
<ion-item lines="none"> <ion-item lines="none">
@ -177,11 +168,11 @@
</ion-label> </ion-label>
<ion-radio slot="end" [value]="2"></ion-radio> <ion-radio slot="end" [value]="2"></ion-radio>
</ion-item> </ion-item>
<ion-item> <ion-item *ngIf="form.controls.duration.value === 2">
<ion-label class="sr-only">{{ 'addon.calendar.durationminutes' | translate }}</ion-label> <ion-label class="sr-only">{{ 'addon.calendar.durationminutes' | translate }}</ion-label>
<ion-input type="number" name="timedurationminutes" slot="end" <ion-input type="number" name="timedurationminutes" slot="end"
[placeholder]="'addon.calendar.durationminutes' | translate" [placeholder]="'addon.calendar.durationminutes' | translate"
formControlName="timedurationminutes" [disabled]="form.controls.duration.value != 2"></ion-input> formControlName="timedurationminutes"></ion-input>
</ion-item> </ion-item>
</ion-radio-group> </ion-radio-group>
</div> </div>
@ -226,32 +217,24 @@
</ion-radio-group> </ion-radio-group>
</div> </div>
<!-- Reminders. Right now, only allow adding them here for new events. --> <!-- Description. -->
<ng-container *ngIf="notificationsEnabled && !eventId"> <ion-item class="ion-text-wrap">
<ion-item-divider class="addon-calendar-reminders-title"> <ion-label position="stacked">
<ion-label> <p class="item-heading">{{ 'core.description' | translate }}</p>
<p class="item-heading">{{ 'addon.calendar.reminders' | translate }}</p>
</ion-label> </ion-label>
</ion-item-divider> <core-rich-text-editor [control]="descriptionControl" [attr.aria-label]="'core.description' | translate"
<ion-item *ngFor="let reminder of reminders" class="ion-text-wrap"> [placeholder]="'core.description' | translate" name="description" [component]="component"
<ion-label> [componentId]="eventId" [autoSave]="false"></core-rich-text-editor>
<p>{{ reminder.label }}</p>
</ion-label>
<ion-button fill="clear" (click)="removeReminder(reminder)" [attr.aria-label]="'core.delete' | translate"
slot="end">
<ion-icon name="fas-trash" color="danger" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
</ion-item> </ion-item>
<ion-item> <!-- Location. -->
<ion-label> <ion-item class="ion-text-wrap">
<ion-button expand="block" color="light" (click)="addReminder()"> <ion-label position="stacked">
{{ 'addon.calendar.setnewreminder' | translate }} <p class="item-heading">{{ 'core.location' | translate }}</p>
</ion-button>
</ion-label> </ion-label>
<ion-input type="text" name="location" [placeholder]="'core.location' | translate" formControlName="location">
</ion-input>
</ion-item> </ion-item>
</ng-container>
</div>
<ion-item> <ion-item>
<ion-label> <ion-label>

8
src/addons/calendar/pages/edit-event/edit-event.page.ts
View File

@ -70,7 +70,6 @@ export class AddonCalendarEditEventPage implements OnInit, OnDestroy, CanLeave {
groups: CoreGroup[] = []; groups: CoreGroup[] = [];
loadingGroups = false; loadingGroups = false;
courseGroupSet = false; courseGroupSet = false;
advanced = false;
errors: Record<string, string>; errors: Record<string, string>;
error = false; error = false;
eventRepeatId?: number; eventRepeatId?: number;
@ -441,13 +440,6 @@ export class AddonCalendarEditEventPage implements OnInit, OnDestroy, CanLeave {
} }
} }
/**
* Show or hide advanced form fields.
*/
toggleAdvanced(): void {
this.advanced = !this.advanced;
}
selectDuration(duration: string): void { selectDuration(duration: string): void {
this.form.controls.duration.setValue(duration); this.form.controls.duration.setValue(duration);
} }