diff --git a/src/addons/messages/pages/settings/settings.html b/src/addons/messages/pages/settings/settings.html index 997cc0277..08bf0c664 100644 --- a/src/addons/messages/pages/settings/settings.html +++ b/src/addons/messages/pages/settings/settings.html @@ -46,88 +46,12 @@ <!-- Notifications. --> <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"> - <!-- Tablet view --> - <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> - </ion-card> - </div> + <ng-container *ngIf="!groupMessagingEnabled"> + <ng-container *ngTemplateOutlet="legacySettings; context: {preferences: preferences}"></ng-container> + </ng-container> + <ng-container *ngIf="groupMessagingEnabled"> + <ng-container *ngTemplateOutlet="settings; context: {preferences: preferences}"></ng-container> + </ng-container> </ng-container> <!-- General settings. --> @@ -148,3 +72,72 @@ </ion-card> </core-loading> </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>