MOBILE-3565 core: Style error alerts

src/app/lang/en.json

@@ -1,12 +1,18 @@
 {
     "back": "Back",
     "browser": "Browser",
+    "cannotconnect": "Cannot connect",
+    "cannotconnecttrouble": "We're having trouble connecting to your site.",
+    "cannotconnectverify": "<strong>Please check the address is correct.</strong>",
     "copiedtoclipboard": "Text copied to clipboard",
     "loading": "Loading",
+    "needhelp": "Need help?",
+    "networkerrormsg": "There was a problem connecting to the site. Please check your connection and try again.",
     "no": "No",
     "offline": "Offline",
     "ok": "OK",
     "online": "Online",
+    "tryagain": "Try again",
     "unknown": "Unknown",
     "yes": "Yes"
 }

src/app/services/utils/dom.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { Injectable, SimpleChange, ElementRef, KeyValueChanges } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
 import { IonContent } from '@ionic/angular';
 import { AlertOptions, AlertButton, TextFieldTypes } from '@ionic/core';
 import { Md5 } from 'ts-md5';
@@ -570,18 +570,6 @@ export class CoreDomUtilsProvider {
         return parseInt(style[measure], 10) || 0;
     }
 
-    /**
-     * Get the HTML code to render a connection warning icon.
-     *
-     * @return HTML Code.
-     */
-    getConnectionWarningIconHtml(): string {
-        return '<div text-center><span class="core-icon-with-badge">' +
-                '<ion-icon role="img" class="icon fa fa-wifi" aria-label="wifi"></ion-icon>' +
-                '<ion-icon class="icon fa fa-exclamation-triangle core-icon-badge"></ion-icon>' +
-            '</span></div>';
-    }
-
     /**
      * Returns width of an element.
      *
@@ -650,18 +638,14 @@ export class CoreDomUtilsProvider {
     }
 
     /**
-     * Given an error message, return a suitable error title.
+     * Given a message, it deduce if it's a network error.
      *
-     * @param message The error message.
-     * @return Title.
+     * @param message Message text.
+     * @return True if the message error is a network error, false otherwise.
      */
-    private getErrorTitle(message: string): SafeHtml | string {
-        if (message == Translate.instance.instant('core.networkerrormsg') ||
-                message == Translate.instance.instant('core.fileuploader.errormustbeonlinetoupload')) {
-            return this.domSanitizer.bypassSecurityTrustHtml(this.getConnectionWarningIconHtml());
-        }
-
-        return CoreTextUtils.instance.decodeHTML(Translate.instance.instant('core.error'));
+    protected isNetworkError(message: string): boolean {
+        return message == Translate.instance.instant('core.networkerrormsg') ||
+            message == Translate.instance.instant('core.fileuploader.errormustbeonlinetoupload');
     }
 
     /**
@@ -1240,7 +1224,7 @@ export class CoreDomUtilsProvider {
         // Store the alert and remove it when dismissed.
         this.displayedAlerts[alertId] = alert;
 
-        // // Set the callbacks to trigger an observable event.
+        // Set the callbacks to trigger an observable event.
         // eslint-disable-next-line promise/catch-or-return, promise/always-return
         alert.onDidDismiss().then(() => {
             delete this.displayedAlerts[alertId];
@@ -1366,7 +1350,18 @@ export class CoreDomUtilsProvider {
             return Promise.resolve(null);
         }
 
-        return this.showAlert(<string> this.getErrorTitle(message), message, undefined, autocloseTime);
+        const alertOptions: AlertOptions = {
+            message: message,
+            buttons: [Translate.instance.instant('core.ok')],
+        };
+
+        if (this.isNetworkError(message)) {
+            alertOptions.cssClass = 'core-alert-network-error';
+        } else {
+            alertOptions.header = Translate.instance.instant('core.error');
+        }
+
+        return this.showAlertWithOptions(alertOptions, autocloseTime);
     }
 
     /**

src/assets/lang/en.json

@@ -302,6 +302,9 @@
     "assets.mimetypes.video": "Video file ({{$a.EXT}})",
     "core.back": "Back",
     "core.browser": "Browser",
+    "core.cannotconnect": "Cannot connect",
+    "core.cannotconnecttrouble": "We're having trouble connecting to your site.",
+    "core.cannotconnectverify": "<strong>Please check the address is correct.</strong>",
     "core.copiedtoclipboard": "Text copied to clipboard",
     "core.courses.addtofavourites": "Star this course",
     "core.courses.allowguests": "This course allows guest users to enter",
@@ -467,6 +470,8 @@
     "core.mainmenu.help": "Help",
     "core.mainmenu.logout": "Log out",
     "core.mainmenu.website": "Website",
+    "core.needhelp": "Need help?",
+    "core.networkerrormsg": "There was a problem connecting to the site. Please check your connection and try again.",
     "core.no": "No",
     "core.offline": "Offline",
     "core.ok": "OK",
@@ -542,6 +547,7 @@
     "core.settings.syncsettings": "Synchronisation settings",
     "core.settings.total": "Total",
     "core.settings.wificonnection": "Wi-Fi connection",
+    "core.tryagain": "Try again",
     "core.unknown": "Unknown",
     "core.yes": "Yes"
 }

src/theme/app.scss

@@ -1,11 +1,11 @@
-// Add here base app styles.
 
+// Ionic toolbar.
 ion-toolbar ion-back-button,
 ion-toolbar .in-toolbar.button-clear {
     --color: var(--ion-color-primary-contrast);
 }
 
-// Ion icon styles.
+// Ionic icon.
 ion-icon {
     &.icon-slash::after,
     &.icon-backslash::after {
@@ -36,3 +36,37 @@ ion-icon {
     transform: scale(-1, 1);
 }
 
+// Ionic alert.
+ion-alert.core-alert-network-error .alert-head {
+    position: relative;
+    content: " ";
+    background: url("/assets/fonts/font-awesome/solid/wifi.svg") no-repeat 50% 50%;
+    margin: 25px auto;
+
+    &::after {
+        content: " ";
+        position: absolute;
+        top: -20%;
+        right: -15%;
+        width: 50%;
+        height: 50%;
+        background-color: var(--ion-color-danger);
+        -webkit-mask: url("/assets/fonts/font-awesome/solid/exclamation-triangle.svg") no-repeat 50% 50%;
+        mask: url("/assets/fonts/font-awesome/solid/exclamation-triangle.svg") no-repeat 50% 50%;
+    }
+}
+[dir=rtl] ion-alert.core-alert-network-error .alert-head::after {
+    right: unset;
+    left: -15%;
+}
+
+// Ionic item divider.
+ion-item-divider {
+    --background: var(--gray-lighter);
+    border: 0;
+}
+
+// Ionic list.
+ion-list.list-md {
+    padding-bottom: 0;
+}