MOBILE-3976 messages: Simplify settings UI
Pau Ferrer Ocaña
parent
75ed990655
commit
1f6c5a672b
|
|
@ -46,88 +46,12 @@
|
||||||
|
|
||||||
<!-- Notifications. -->
|
<!-- Notifications. -->
|
||||||
<ng-container *ngIf="preferences">
|
<ng-container *ngIf="preferences">
|
||||||
<div *ngFor="let component of preferences.components">
|
|
||||||
<ion-card list *ngFor="let notification of component.notifications">
|
|
||||||
<ion-item-divider class="ion-text-wrap">
|
|
||||||
<ion-label>
|
|
||||||
<ion-row class="ion-no-padding" *ngIf="!groupMessagingEnabled">
|
|
||||||
<ion-col class="ion-no-padding">
|
|
||||||
<h2>{{ notification.displayname }}</h2>
|
|
||||||
</ion-col>
|
|
||||||
<ion-col size="2" class="ion-text-center ion-no-padding ion-hide-md-down">
|
|
||||||
<h2>{{ 'core.settings.loggedin' | translate }}</h2>
|
|
||||||
</ion-col>
|
|
||||||
<ion-col *ngIf="!groupMessagingEnabled" size="2" class="ion-text-center ion-no-padding
|
|
||||||
ion-hide-md-down">
|
|
||||||
<h2>{{ 'core.settings.loggedoff' | translate }}</h2>
|
|
||||||
</ion-col>
|
|
||||||
</ion-row>
|
|
||||||
<h2 *ngIf="groupMessagingEnabled">{{ 'addon.notifications.notificationpreferences' | translate }}</h2>
|
|
||||||
</ion-label>
|
|
||||||
</ion-item-divider>
|
|
||||||
<ng-container *ngFor="let processor of notification.processors">
|
|
||||||
<!-- If group messaging is enabled, display a simplified view. -->
|
|
||||||
<ng-container *ngIf="groupMessagingEnabled">
|
|
||||||
<ion-item class="ion-text-wrap">
|
|
||||||
<ion-label>{{ processor.displayname }}</ion-label>
|
|
||||||
<core-button-with-spinner *ngIf="!preferences.disableall" [loading]="!!notification.updating" slot="end">
|
|
||||||
<ion-toggle *ngIf="!processor.locked" [(ngModel)]="processor.checked"
|
|
||||||
(ngModelChange)="changePreference(notification, '', processor)">
|
|
||||||
</ion-toggle>
|
|
||||||
<ion-note *ngIf="processor.locked">
|
|
||||||
{{ processor.lockedmessage }}
|
|
||||||
</ion-note>
|
|
||||||
</core-button-with-spinner>
|
|
||||||
<ion-note slot="end" *ngIf="preferences.disableall">
|
|
||||||
{{ 'core.settings.disabled' | translate }}
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<ng-container *ngIf="!groupMessagingEnabled">
|
<ng-container *ngIf="!groupMessagingEnabled">
|
||||||
<!-- Tablet view -->
|
<ng-container *ngTemplateOutlet="legacySettings; context: {preferences: preferences}"></ng-container>
|
||||||
<ion-row class="ion-text-wrap ion-hide-md-down ion-align-items-center">
|
|
||||||
<ion-col class="ion-margin-horizontal">{{ processor.displayname }}</ion-col>
|
|
||||||
<ion-col size="2" class="ion-text-center" *ngFor="let state of ['loggedin', 'loggedoff']">
|
|
||||||
<core-button-with-spinner *ngIf="!preferences.disableall"
|
|
||||||
[loading]="notification.updating && notification.updating[state]">
|
|
||||||
<!-- If notifications not disabled, show toggle. -->
|
|
||||||
<ion-toggle *ngIf="!processor.locked" [(ngModel)]="processor[state].checked"
|
|
||||||
(ngModelChange)="changePreference(notification, state, processor)">
|
|
||||||
</ion-toggle>
|
|
||||||
<div class="ion-padding text-gray" *ngIf="processor.locked">
|
|
||||||
{{'core.settings.locked' | translate }}
|
|
||||||
</div>
|
|
||||||
</core-button-with-spinner>
|
|
||||||
<!-- If notifications are disabled, show "Disabled" instead of toggle. -->
|
|
||||||
<span *ngIf="preferences.disableall">{{ 'core.settings.disabled' | translate }}</span>
|
|
||||||
</ion-col>
|
|
||||||
</ion-row>
|
|
||||||
<!-- Phone view -->
|
|
||||||
<ion-list-header class="ion-text-wrap ion-hide-md-up">
|
|
||||||
<ion-label>{{ processor.displayname }}</ion-label>
|
|
||||||
</ion-list-header>
|
|
||||||
<!-- If notifications not disabled, show toggles.
|
|
||||||
If notifications are disabled, show "Disabled" instead of toggle. -->
|
|
||||||
<ion-item *ngFor="let state of ['loggedin', 'loggedoff']" class="ion-text-wrap ion-hide-md-up">
|
|
||||||
<ion-label>{{ 'core.settings.' + state | translate }}</ion-label>
|
|
||||||
<core-button-with-spinner slot="end" *ngIf="!preferences.disableall"
|
|
||||||
[loading]="notification.updating && notification.updating[state]">
|
|
||||||
<ion-toggle *ngIf="!processor.locked" [(ngModel)]="processor[state].checked"
|
|
||||||
(ngModelChange)="changePreference(notification, state, processor)">
|
|
||||||
</ion-toggle>
|
|
||||||
<ion-note *ngIf="processor.locked">
|
|
||||||
{{'core.settings.locked' | translate }}
|
|
||||||
</ion-note>
|
|
||||||
</core-button-with-spinner>
|
|
||||||
<ion-note slot="end" *ngIf="preferences.disableall">
|
|
||||||
{{ 'core.settings.disabled' | translate }}
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
<ng-container *ngIf="groupMessagingEnabled">
|
||||||
|
<ng-container *ngTemplateOutlet="settings; context: {preferences: preferences}"></ng-container>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</ion-card>
|
|
||||||
</div>
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<!-- General settings. -->
|
<!-- General settings. -->
|
||||||
|
|
@ -148,3 +72,72 @@
|
||||||
</ion-card>
|
</ion-card>
|
||||||
</core-loading>
|
</core-loading>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
|
||||||
|
<!-- Only 3.5 version -->
|
||||||
|
<ng-template #legacySettings let-preferences="preferences">
|
||||||
|
<ng-container *ngFor="let component of preferences.components">
|
||||||
|
<ion-card *ngFor="let notification of component.notifications">
|
||||||
|
<ion-card-header class="ion-no-padding">
|
||||||
|
<ion-item class="ion-text-wrap">
|
||||||
|
<ion-label>
|
||||||
|
<h2>{{ notification.displayname }}</h2>
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-card-header>
|
||||||
|
<ion-card-content class="ion-no-padding">
|
||||||
|
<ng-container *ngFor="let processor of notification.processors">
|
||||||
|
<ion-item-divider class="ion-text-wrap">
|
||||||
|
<ion-label>{{ processor.displayname }}</ion-label>
|
||||||
|
</ion-item-divider>
|
||||||
|
<!-- If notifications not disabled, show toggles.
|
||||||
|
If notifications are disabled, show "Disabled" instead of toggle. -->
|
||||||
|
<ion-item *ngFor="let state of ['loggedin', 'loggedoff']" class="ion-text-wrap">
|
||||||
|
<ion-label>{{ 'core.settings.' + state | translate }}</ion-label>
|
||||||
|
<core-button-with-spinner slot="end" *ngIf="!preferences.disableall"
|
||||||
|
[loading]="notification.updating && notification.updating[state]">
|
||||||
|
<ion-toggle *ngIf="!processor.locked" [(ngModel)]="processor[state].checked"
|
||||||
|
(ngModelChange)="changePreference(notification, state, processor)">
|
||||||
|
</ion-toggle>
|
||||||
|
<ion-note *ngIf="processor.locked">
|
||||||
|
{{'core.settings.locked' | translate }}
|
||||||
|
</ion-note>
|
||||||
|
</core-button-with-spinner>
|
||||||
|
<ion-note slot="end" *ngIf="preferences.disableall">
|
||||||
|
{{ 'core.settings.disabled' | translate }}
|
||||||
|
</ion-note>
|
||||||
|
</ion-item>
|
||||||
|
</ng-container>
|
||||||
|
</ion-card-content>
|
||||||
|
</ion-card>
|
||||||
|
</ng-container>
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
|
||||||
|
<ng-template #settings let-preferences="preferences">
|
||||||
|
<ng-container *ngFor="let component of preferences.components">
|
||||||
|
<ion-card *ngFor="let notification of component.notifications">
|
||||||
|
<ion-item-divider class="ion-text-wrap">
|
||||||
|
<ion-label>
|
||||||
|
<h2>{{ 'addon.notifications.notificationpreferences' | translate }}</h2>
|
||||||
|
</ion-label>
|
||||||
|
</ion-item-divider>
|
||||||
|
<ng-container *ngFor="let processor of notification.processors">
|
||||||
|
<!-- If group messaging is enabled, display a simplified view. -->
|
||||||
|
<ion-item class="ion-text-wrap">
|
||||||
|
<ion-label>{{ processor.displayname }}</ion-label>
|
||||||
|
<core-button-with-spinner *ngIf="!preferences.disableall" [loading]="!!notification.updating" slot="end">
|
||||||
|
<ion-toggle *ngIf="!processor.locked" [(ngModel)]="processor.checked"
|
||||||
|
(ngModelChange)="changePreference(notification, '', processor)">
|
||||||
|
</ion-toggle>
|
||||||
|
<ion-note *ngIf="processor.locked">
|
||||||
|
{{ processor.lockedmessage }}
|
||||||
|
</ion-note>
|
||||||
|
</core-button-with-spinner>
|
||||||
|
<ion-note slot="end" *ngIf="preferences.disableall">
|
||||||
|
{{ 'core.settings.disabled' | translate }}
|
||||||
|
</ion-note>
|
||||||
|
</ion-item>
|
||||||
|
</ng-container>
|
||||||
|
</ion-card>
|
||||||
|
</ng-container>
|
||||||
|
</ng-template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue