MOBILE-3909 calendar: Reorder and reduce height of edit page
Dani Palou
parent
55a3c0539c
commit
1f5908ed66
|
|
@ -113,146 +113,129 @@
|
||||||
</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">{{ 'addon.calendar.reminders' | translate }}</p>
|
||||||
<p class="item-heading" *ngIf="!advanced">{{ 'core.showmore' | translate }}</p>
|
|
||||||
<p class="item-heading" *ngIf="advanced">{{ 'core.showless' | translate }}</p>
|
|
||||||
</ion-label>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<div [hidden]="!advanced">
|
|
||||||
<!-- Description. -->
|
|
||||||
<ion-item class="ion-text-wrap">
|
|
||||||
<ion-label position="stacked">
|
|
||||||
<p class="item-heading">{{ 'core.description' | translate }}</p>
|
|
||||||
</ion-label>
|
</ion-label>
|
||||||
<core-rich-text-editor [control]="descriptionControl" [attr.aria-label]="'core.description' | translate"
|
<ion-button fill="clear" color="dark" (click)="addReminder()" slot="end"
|
||||||
[placeholder]="'core.description' | translate" name="description" [component]="component"
|
[attr.aria-label]="'addon.calendar.setnewreminder' | translate">
|
||||||
[componentId]="eventId" [autoSave]="false"></core-rich-text-editor>
|
<ion-icon name="fas-plus" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||||
</ion-item>
|
</ion-button>
|
||||||
|
</ion-item-divider>
|
||||||
<!-- Location. -->
|
<ion-item *ngFor="let reminder of reminders" class="ion-text-wrap">
|
||||||
<ion-item class="ion-text-wrap">
|
<ion-label>
|
||||||
<ion-label position="stacked">
|
<p>{{ reminder.label }}</p>
|
||||||
<p class="item-heading">{{ 'core.location' | translate }}</p>
|
|
||||||
</ion-label>
|
</ion-label>
|
||||||
<ion-input type="text" name="location" [placeholder]="'core.location' | translate" formControlName="location">
|
<ion-button fill="clear" (click)="removeReminder(reminder)" [attr.aria-label]="'core.delete' | translate"
|
||||||
</ion-input>
|
slot="end">
|
||||||
|
<ion-icon name="fas-trash" color="danger" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||||
|
</ion-button>
|
||||||
</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">
|
||||||
<ion-radio-group formControlName="duration">
|
<ion-radio-group formControlName="duration">
|
||||||
<ion-item-divider class="addon-calendar-radio-title">
|
<ion-item-divider class="addon-calendar-radio-title">
|
||||||
<ion-label>
|
|
||||||
<p class="item-heading">{{ 'addon.calendar.eventduration' | translate }}</p>
|
|
||||||
</ion-label>
|
|
||||||
</ion-item-divider>
|
|
||||||
<ion-item>
|
|
||||||
<ion-label>
|
|
||||||
<p>{{ 'addon.calendar.durationnone' | translate }}</p>
|
|
||||||
</ion-label>
|
|
||||||
<ion-radio slot="end" [value]="0"></ion-radio>
|
|
||||||
</ion-item>
|
|
||||||
<ion-item lines="none">
|
|
||||||
<ion-label>
|
|
||||||
<p>{{ 'addon.calendar.durationuntil' | translate }}</p>
|
|
||||||
</ion-label>
|
|
||||||
<ion-radio slot="end" [value]="1"></ion-radio>
|
|
||||||
</ion-item>
|
|
||||||
<ion-item>
|
|
||||||
<ion-label position="stacked"></ion-label>
|
|
||||||
<ion-datetime formControlName="timedurationuntil" [max]="maxDate" [min]="minDate"
|
|
||||||
[placeholder]="'addon.calendar.durationuntil' | translate"
|
|
||||||
[displayFormat]="dateFormat" [disabled]="form.controls.duration.value != 1"
|
|
||||||
display-timezone="utc">
|
|
||||||
</ion-datetime>
|
|
||||||
</ion-item>
|
|
||||||
<ion-item lines="none">
|
|
||||||
<ion-label>
|
|
||||||
<p>{{ 'addon.calendar.durationminutes' | translate }}</p>
|
|
||||||
</ion-label>
|
|
||||||
<ion-radio slot="end" [value]="2"></ion-radio>
|
|
||||||
</ion-item>
|
|
||||||
<ion-item>
|
|
||||||
<ion-label class="sr-only">{{ 'addon.calendar.durationminutes' | translate }}</ion-label>
|
|
||||||
<ion-input type="number" name="timedurationminutes" slot="end"
|
|
||||||
[placeholder]="'addon.calendar.durationminutes' | translate"
|
|
||||||
formControlName="timedurationminutes" [disabled]="form.controls.duration.value != 2"></ion-input>
|
|
||||||
</ion-item>
|
|
||||||
</ion-radio-group>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Repeat (for new events). -->
|
|
||||||
<ng-container *ngIf="!eventId || eventId < 0">
|
|
||||||
<ion-item class="ion-text-wrap divider" lines="none">
|
|
||||||
<ion-label>
|
<ion-label>
|
||||||
<p class="item-heading">{{ 'addon.calendar.repeatevent' | translate }}</p>
|
<p class="item-heading">{{ 'addon.calendar.eventduration' | translate }}</p>
|
||||||
</ion-label>
|
|
||||||
<ion-checkbox slot="end" formControlName="repeat"></ion-checkbox>
|
|
||||||
</ion-item>
|
|
||||||
<ion-item class="ion-text-wrap">
|
|
||||||
<ion-label position="stacked">
|
|
||||||
<p>{{ 'addon.calendar.repeatweeksl' | translate }}</p>
|
|
||||||
</ion-label>
|
|
||||||
<ion-input type="number" name="repeats" formControlName="repeats" [disabled]="!form.controls.repeat.value">
|
|
||||||
</ion-input>
|
|
||||||
</ion-item>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<!-- Apply to all events or just this one (editing repeated events). -->
|
|
||||||
<div *ngIf="eventRepeatId" class="ion-text-wrap addon-calendar-radio-container">
|
|
||||||
<ion-radio-group formControlName="repeateditall">
|
|
||||||
<ion-item-divider class="addon-calendar-radio-title">
|
|
||||||
<ion-label>
|
|
||||||
<p class="item-heading">{{ 'addon.calendar.repeatedevents' | translate }}</p>
|
|
||||||
</ion-label>
|
|
||||||
</ion-item-divider>
|
|
||||||
<ion-item>
|
|
||||||
<ion-label>
|
|
||||||
<p>{{ 'addon.calendar.repeateditall' | translate:{$a: otherEventsCount} }}</p>
|
|
||||||
</ion-label>
|
|
||||||
<ion-radio slot="end" value="1"></ion-radio>
|
|
||||||
</ion-item>
|
|
||||||
<ion-item>
|
|
||||||
<ion-label>
|
|
||||||
<p>{{ 'addon.calendar.repeateditthis' | translate }}</p>
|
|
||||||
</ion-label>
|
|
||||||
<ion-radio slot="end" value="0"></ion-radio>
|
|
||||||
</ion-item>
|
|
||||||
</ion-radio-group>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Reminders. Right now, only allow adding them here for new events. -->
|
|
||||||
<ng-container *ngIf="notificationsEnabled && !eventId">
|
|
||||||
<ion-item-divider class="addon-calendar-reminders-title">
|
|
||||||
<ion-label>
|
|
||||||
<p class="item-heading">{{ 'addon.calendar.reminders' | translate }}</p>
|
|
||||||
</ion-label>
|
</ion-label>
|
||||||
</ion-item-divider>
|
</ion-item-divider>
|
||||||
<ion-item *ngFor="let reminder of reminders" class="ion-text-wrap">
|
|
||||||
<ion-label>
|
|
||||||
<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>
|
||||||
<ion-label>
|
<ion-label>
|
||||||
<ion-button expand="block" color="light" (click)="addReminder()">
|
<p>{{ 'addon.calendar.durationnone' | translate }}</p>
|
||||||
{{ 'addon.calendar.setnewreminder' | translate }}
|
|
||||||
</ion-button>
|
|
||||||
</ion-label>
|
</ion-label>
|
||||||
|
<ion-radio slot="end" [value]="0"></ion-radio>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
</ng-container>
|
<ion-item lines="none">
|
||||||
|
<ion-label>
|
||||||
|
<p>{{ 'addon.calendar.durationuntil' | translate }}</p>
|
||||||
|
</ion-label>
|
||||||
|
<ion-radio slot="end" [value]="1"></ion-radio>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item *ngIf="form.controls.duration.value === 1">
|
||||||
|
<ion-label position="stacked"></ion-label>
|
||||||
|
<ion-datetime formControlName="timedurationuntil" [max]="maxDate" [min]="minDate"
|
||||||
|
[placeholder]="'addon.calendar.durationuntil' | translate"
|
||||||
|
[displayFormat]="dateFormat" display-timezone="utc">
|
||||||
|
</ion-datetime>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item lines="none">
|
||||||
|
<ion-label>
|
||||||
|
<p>{{ 'addon.calendar.durationminutes' | translate }}</p>
|
||||||
|
</ion-label>
|
||||||
|
<ion-radio slot="end" [value]="2"></ion-radio>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item *ngIf="form.controls.duration.value === 2">
|
||||||
|
<ion-label class="sr-only">{{ 'addon.calendar.durationminutes' | translate }}</ion-label>
|
||||||
|
<ion-input type="number" name="timedurationminutes" slot="end"
|
||||||
|
[placeholder]="'addon.calendar.durationminutes' | translate"
|
||||||
|
formControlName="timedurationminutes"></ion-input>
|
||||||
|
</ion-item>
|
||||||
|
</ion-radio-group>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Repeat (for new events). -->
|
||||||
|
<ng-container *ngIf="!eventId || eventId < 0">
|
||||||
|
<ion-item class="ion-text-wrap divider" lines="none">
|
||||||
|
<ion-label>
|
||||||
|
<p class="item-heading">{{ 'addon.calendar.repeatevent' | translate }}</p>
|
||||||
|
</ion-label>
|
||||||
|
<ion-checkbox slot="end" formControlName="repeat"></ion-checkbox>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item class="ion-text-wrap">
|
||||||
|
<ion-label position="stacked">
|
||||||
|
<p>{{ 'addon.calendar.repeatweeksl' | translate }}</p>
|
||||||
|
</ion-label>
|
||||||
|
<ion-input type="number" name="repeats" formControlName="repeats" [disabled]="!form.controls.repeat.value">
|
||||||
|
</ion-input>
|
||||||
|
</ion-item>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Apply to all events or just this one (editing repeated events). -->
|
||||||
|
<div *ngIf="eventRepeatId" class="ion-text-wrap addon-calendar-radio-container">
|
||||||
|
<ion-radio-group formControlName="repeateditall">
|
||||||
|
<ion-item-divider class="addon-calendar-radio-title">
|
||||||
|
<ion-label>
|
||||||
|
<p class="item-heading">{{ 'addon.calendar.repeatedevents' | translate }}</p>
|
||||||
|
</ion-label>
|
||||||
|
</ion-item-divider>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
<p>{{ 'addon.calendar.repeateditall' | translate:{$a: otherEventsCount} }}</p>
|
||||||
|
</ion-label>
|
||||||
|
<ion-radio slot="end" value="1"></ion-radio>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
<p>{{ 'addon.calendar.repeateditthis' | translate }}</p>
|
||||||
|
</ion-label>
|
||||||
|
<ion-radio slot="end" value="0"></ion-radio>
|
||||||
|
</ion-item>
|
||||||
|
</ion-radio-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Description. -->
|
||||||
|
<ion-item class="ion-text-wrap">
|
||||||
|
<ion-label position="stacked">
|
||||||
|
<p class="item-heading">{{ 'core.description' | translate }}</p>
|
||||||
|
</ion-label>
|
||||||
|
<core-rich-text-editor [control]="descriptionControl" [attr.aria-label]="'core.description' | translate"
|
||||||
|
[placeholder]="'core.description' | translate" name="description" [component]="component"
|
||||||
|
[componentId]="eventId" [autoSave]="false"></core-rich-text-editor>
|
||||||
|
</ion-item>
|
||||||
|
|
||||||
|
<!-- 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>
|
<ion-item>
|
||||||
<ion-label>
|
<ion-label>
|
||||||
<ion-row>
|
<ion-row>
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue