From 6d039ffba8a7e7e48d30998feeb804024dfcf9fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 23 Nov 2022 13:38:31 +0100
Subject: [PATCH] MOBILE-4081 notifications: Change notification preferences
 layout

---
 scripts/langindex.json                        |  2 +
 src/addons/notifications/lang.json            |  2 +
 .../pages/settings/settings.html              | 62 +++++++++++--------
 .../pages/settings/settings.scss              |  4 ++
 4 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/scripts/langindex.json b/scripts/langindex.json
index 65bdc325e..6d9c132b6 100644
--- a/scripts/langindex.json
+++ b/scripts/langindex.json
@@ -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",
diff --git a/src/addons/notifications/lang.json b/src/addons/notifications/lang.json
index b3c02b52e..200844392 100644
--- a/src/addons/notifications/lang.json
+++ b/src/addons/notifications/lang.json
@@ -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}}"
 }
diff --git a/src/addons/notifications/pages/settings/settings.html b/src/addons/notifications/pages/settings/settings.html
index 274953f0d..97174d554 100644
--- a/src/addons/notifications/pages/settings/settings.html
+++ b/src/addons/notifications/pages/settings/settings.html
@@ -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>
diff --git a/src/addons/notifications/pages/settings/settings.scss b/src/addons/notifications/pages/settings/settings.scss
index d224357cb..3a21dcc3f 100644
--- a/src/addons/notifications/pages/settings/settings.scss
+++ b/src/addons/notifications/pages/settings/settings.scss
@@ -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);
+}