From 1f6c5a672b3d455eca04c071a65b95f570bd3642 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 28 Jan 2022 14:36:20 +0100
Subject: [PATCH] MOBILE-3976 messages: Simplify settings UI

---
 .../messages/pages/settings/settings.html     | 157 +++++++++---------
 1 file changed, 75 insertions(+), 82 deletions(-)

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>