MOBILE-3565 core: Style loading and show password components

src/app/components/loading/core-loading.html

@@ -1,10 +1,10 @@
 <div class="core-loading-container" *ngIf="!hideUntil" role="status"> <!-- @todo [@coreShowHideAnimation]  -->
     <span class="core-loading-spinner">
-        <ion-spinner></ion-spinner>
+        <ion-spinner color="primary"></ion-spinner>
         <p class="core-loading-message" *ngIf="message" role="status">{{message}}</p>
     </span>
 </div>
 <div #content class="core-loading-content" [id]="uniqueId" [attr.aria-busy]="hideUntil">
     <ng-content *ngIf="hideUntil">
     </ng-content> <!-- @todo [@coreShowHideAnimation]  -->
-</div>
+</div>

src/app/components/loading/loading.scss

@@ -1,67 +1,43 @@
-ion-app.app-root {
+:host {
-    core-loading {
+    position: static;
-        // @todo @include core-transition(height, 200ms);
+    -webkit-transition: height 200ms ease-in-out;
+    transition: height 200ms ease-in-out;
 
-        .core-loading-container {
+    > .core-loading-container {
-            width: 100%;
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        display: table;
+        height: 100%;
+        width: 100%;
+        text-align: center;
+        clear: both;
+        z-index: 3;
+        margin: 0;
+        padding: 10px 0 0 0;
+        background-color: rgba(255, 255, 255, 0.26);
+        -webkit-transition: all 200ms ease-in-out;
+        transition: all 200ms ease-in-out;
+
+        .core-loading-spinner {
+            display: table-cell;
             text-align: center;
-            padding-top: 10px;
+            vertical-align: middle;
-            clear: both;
-            /* @todo @include darkmode() {
-                color: $core-dark-text-color;
-            } */
-        }
-
-        .core-loading-content {
-            display: inline;
-            padding-bottom: 1px; /* This makes height be real */
-        }
-
-        &.core-loading-noheight .core-loading-content {
-            height: auto;
-        }
-
-        &.safe-area-page {
-            padding-left: 0 !important;
-            padding-right: 0 !important;
-
-            > .core-loading-content > *:not[padding],
-            > .core-loading-content-loading > *:not[padding] {
-                // @todo @include safe-area-padding-horizontal(0px, 0px);
-            }
         }
     }
 
-    .scroll-content > core-loading,
+    .core-loading-content {
-    ion-content > .scroll-content > core-loading,
+        display: inline;
-    core-tab core-loading,
+        padding-bottom: 1px; /* This makes height be real */
-    .core-loading-center {
-        position: static !important;
     }
 
-    .scroll-content > core-loading,
+    &.core-loading-noheight .core-loading-content {
-    ion-content > .scroll-content > core-loading,
+        height: auto;
-    core-tab core-loading,
+    }
-    .core-loading-center,
+
-    core-loading.core-loading-loaded {
+    &.core-loading-loaded {
         position: relative;
-
-        > .core-loading-container {
-            position: absolute;
-            // @todo @include position(0, 0, 0, 0);
-            display: table;
-            height: 100%;
-            width: 100%;
-            z-index: 1;
-            margin: 0;
-            padding: 0;
-            clear: both;
-
-            .core-loading-spinner {
-                display: table-cell;
-                text-align: center;
-                vertical-align: middle;
-            }
-        }
     }
 }

src/app/components/show-password/core-show-password.html

@@ -1,4 +1,4 @@
-<ng-content></ng-content>
+<slot></slot>
-<ion-button icon-only clear [attr.aria-label]="label | translate" [core-suppress-events] (onClick)="toggle($event)">
+<ion-button fill="clear" [attr.aria-label]="label | translate" core-suppress-events (onClick)="toggle($event)">
-    <ion-icon [name]="iconName"></ion-icon>
+    <ion-icon [name]="iconName" slot="icon-only"></ion-icon>
 </ion-button>

src/app/components/show-password/show-password.scss

@@ -1,38 +1,35 @@
-ion-app.app-root core-show-password {
+:host {
-    padding: 0px;
+    display: contents;
-    width: 100%;
-    position: relative;
 
-    ion-input input.text-input {
+    ion-button {
-        // @todo @include padding(null, 47px, null, null);
-    }
-
-    .button[icon-only] {
         background: transparent;
-        // @todo padding: 0 ($content-padding / 2);
+        padding: 0 calc(var(--padding-start) / 2);
         position: absolute;
-        // @todo @include position(null, 0, $content-padding / 2, null);
+        right: 0;
+        bottom: calc(var(--padding-bottom) / 2);
         margin-top: 0;
         margin-bottom: 0;
-    }
+        z-index: 3;
-
-    .core-ioninput-password {
-        padding-top: 0;
-        padding-bottom: 0;
     }
 }
 
-ion-app.app-root.md {
+::slotted(ion-input) {
-    .item-label-stacked core-show-password .button[icon-only] {
+    --padding-end: 47px !important;
-        bottom: 0;
-    }
 }
 
-ion-app.app-root.ios {
+:host-context([dir="rtl"]) ion-button {
-    .item-label-stacked core-show-password .button[icon-only] {
+    left: 0;
-        bottom: -5px;
+    right: unset;
-    }
+}
-    core-show-password .button[icon-only] {
+
-        bottom: 0;
+:host-context(.md.item-label.stacked) ion-button {
-    }
+    bottom: 0;
+}
+
+:host-context(.iositem-label.stacked) ion-button {
+    bottom: -5px;
+}
+
+:host-context(.ios) ion-button {
+    bottom: 0;
 }

src/app/components/show-password/show-password.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, OnInit, AfterViewInit, Input, ElementRef, ContentChild } from '@angular/core';
+import { Component, OnInit, AfterViewInit, Input, ElementRef, ContentChild, ViewEncapsulation } from '@angular/core';
 import { IonInput } from '@ionic/angular';
 
 import { CoreApp } from '@services/app';
@@ -29,7 +29,7 @@ import { CoreUtils } from '@services/utils/utils';
  *
  * Example:
  *
- * <core-show-password item-content [name]="'password'">
+ * <core-show-password [name]="'password'">
  *     <ion-input type="password" name="password"></ion-input>
  * </core-show-password>
  */
@@ -37,6 +37,7 @@ import { CoreUtils } from '@services/utils/utils';
     selector: 'core-show-password',
     templateUrl: 'core-show-password.html',
     styleUrls: ['show-password.scss'],
+    encapsulation: ViewEncapsulation.ShadowDom,
 })
 export class CoreShowPasswordComponent implements OnInit, AfterViewInit {
 

src/app/lang/en.json

@@ -2,6 +2,7 @@
     "back": "Back",
     "browser": "Browser",
     "copiedtoclipboard": "Text copied to clipboard",
+    "loading": "Loading",
     "no": "No",
     "offline": "Offline",
     "ok": "OK",

src/assets/lang/en.json

@@ -340,6 +340,7 @@
     "core.courses.sendpaymentbutton": "Send payment via PayPal",
     "core.courses.show": "Restore to view",
     "core.courses.totalcoursesearchresults": "Total courses: {{$a}}",
+    "core.loading": "Loading",
     "core.login.auth_email": "Email-based self-registration",
     "core.login.authenticating": "Authenticating",
     "core.login.cancel": "Cancel",