MOBILE-4081 notifications: Change notification preferences layout

main
Pau Ferrer Ocaña 2022-11-23 13:38:31 +01:00
parent a61fab5f70
commit 6d039ffba8
4 changed files with 45 additions and 25 deletions

View File

@ -1095,12 +1095,14 @@
"addon.notes.publishstate": "notes",
"addon.notes.sitenotes": "notes",
"addon.notes.warningnotenotsent": "local_moodlemobileapp",
"addon.notifications.allownotifications": "local_moodlemobileapp",
"addon.notifications.errorgetnotifications": "local_moodlemobileapp",
"addon.notifications.markallread": "moodle",
"addon.notifications.notificationpreferences": "message",
"addon.notifications.notifications": "local_moodlemobileapp",
"addon.notifications.playsound": "local_moodlemobileapp",
"addon.notifications.therearentnotificationsyet": "local_moodlemobileapp",
"addon.notifications.typeofnotification": "local_moodlemobileapp",
"addon.notifications.unreadnotification": "message",
"addon.privatefiles.couldnotloadfiles": "local_moodlemobileapp",
"addon.privatefiles.emptyfilelist": "local_moodlemobileapp",

View File

@ -1,9 +1,11 @@
{
"allownotifications": "Allow notifications",
"errorgetnotifications": "Error getting notifications.",
"markallread": "Mark all as read",
"notificationpreferences": "Notification preferences",
"notifications": "Notifications",
"playsound": "Play sound",
"therearentnotificationsyet": "There are no notifications.",
"typeofnotification": "Type of notification",
"unreadnotification": "Unread notification: {{$a}}"
}

View File

@ -24,38 +24,49 @@
<core-loading [hideUntil]="preferencesLoaded">
<ion-card>
<ion-item class="ion-text-wrap" *ngIf="preferences">
<ion-label>{{ 'addon.notifications.notifications' | translate }}</ion-label>
<ion-toggle [(ngModel)]="preferences.enableall" (ngModelChange)="enableAll(preferences.enableall)"></ion-toggle>
<ion-label>
<p class="item-heading">{{ 'addon.notifications.allownotifications' | translate }}</p>
</ion-label>
<ion-toggle [(ngModel)]="preferences.enableall" (ngModelChange)="enableAll(preferences.enableall)" slot="end"></ion-toggle>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="canChangeSound">
<ion-label>{{ 'addon.notifications.playsound' | translate }}</ion-label>
<ion-toggle [(ngModel)]="notificationSound" (ngModelChange)="changeNotificationSound(notificationSound)">
<ion-label>
<p class="item-heading">{{ 'addon.notifications.playsound' | translate }}</p>
</ion-label>
<ion-toggle [(ngModel)]="notificationSound" (ngModelChange)="changeNotificationSound(notificationSound)" slot="end">
</ion-toggle>
</ion-item>
</ion-card>
<!-- Show processor selector. -->
<core-combobox *ngIf="preferences && preferences.processors && preferences.processors.length > 0" [selection]="currentProcessorName"
(onChange)="changeProcessor($event)">
<ion-select-option class="ion-text-wrap" *ngFor="let processor of preferences.processors" [value]="processor.name">
{{ processor.displayname }}
</ion-select-option>
</core-combobox>
<ion-card>
<ion-item class="ion-text-wrap only-links" *ngIf="preferences?.processors?.length" lines="none" [button]="false">
<ion-label class="addon-notification-type-form">
<p class="item-heading">{{ 'addon.notifications.typeofnotification' | translate }}</p>
</ion-label>
<!-- Show processor selector. -->
<ion-select [(ngModel)]="currentProcessorName" (ionChange)="changeProcessor($event)" interface="popover">
<ion-select-option class="ion-text-wrap" *ngFor="let processor of preferences?.processors" [value]="processor.name">
{{ processor.displayname }}
</ion-select-option>
</ion-select>
</ion-item>
<ng-container *ngIf="loggedInOffLegacyMode">
<ng-container *ngTemplateOutlet="legacySettings; context: {preferences: preferences}"></ng-container>
</ng-container>
<ng-container *ngIf="loggedInOffLegacyMode">
<ng-container *ngTemplateOutlet="legacySettings; context: {preferences: preferences}"></ng-container>
</ng-container>
<ng-container *ngIf="!loggedInOffLegacyMode">
<ng-container *ngTemplateOutlet="settings; context: {preferences: preferences}"></ng-container>
</ng-container>
<ng-container *ngIf="!loggedInOffLegacyMode">
<ng-container *ngTemplateOutlet="settings; context: {preferences: preferences}"></ng-container>
</ng-container>
</ion-card>
</core-loading>
</ion-content>
<!-- 3.11 or downwards version -->
<!-- 3.11 downwards version -->
<ng-template #legacySettings let-preferences="preferences">
<ion-card *ngFor="let component of components" class="ion-margin-top">
<ng-container *ngFor="let component of components" class="ion-margin-top">
<ion-card-header class="ion-no-padding">
<ion-item class="ion-text-wrap divider">
<ion-label class="ion-text-wrap">
@ -108,7 +119,9 @@
<!-- Phone view -->
<ion-item class="ion-text-wrap ion-no-margin ion-hide-md-up">
<p class="item-heading">{{ notification.displayname }}</p>
<ion-label>
<p class="item-heading">{{ notification.displayname }}</p>
</ion-label>
</ion-item>
<!-- If notifications enabled, show toggles. If disabled, show "Disabled" instead of toggle. -->
<ion-item *ngFor="let state of ['loggedin', 'loggedoff']" class="ion-text-wrap ion-hide-md-up">
@ -135,12 +148,12 @@
<span class="text-gray" slot="end" *ngIf="!preferences!.enableall">{{ 'core.settings.disabled' | translate }}</span>
</ion-item>
</ng-container>
</ion-card>
</ng-container>
</ng-template>
<!-- 4.0 or downwards version -->
<!-- 4.0 onwards version -->
<ng-template #settings let-preferences="preferences">
<ion-card *ngFor="let component of components" class="ion-margin-top">
<ng-container *ngFor="let component of components" class="ion-margin-top">
<ion-item-divider class="ion-text-wrap">
<ion-label>
<p class="item-heading">{{ component.displayname }}</p>
@ -173,6 +186,5 @@
<span class="text-gray" slot="end" *ngIf="!preferences!.enableall">{{ 'core.settings.disabled' | translate }}</span>
</ion-item>
</ng-container>
</ion-card>
</ng-container>
</ng-template>

View File

@ -1,3 +1,7 @@
.addon-notifications-table-content ion-row {
min-height: 35px;
}
ion-item-divider, ion-card-header {
border-top: 1px solid var(--stroke);
}