From 2f16be7a0c4f5521d5487bc46dea803bd2434446 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 22 Oct 2020 11:17:21 +0200
Subject: [PATCH] MOBILE-3565 login: Fix sites page styles

---
 src/app/core/login/login.module.ts            |  4 +-
 .../pages/credentials/credentials.page.ts     |  4 +-
 src/app/core/login/pages/site/site.html       |  7 +--
 src/app/core/login/pages/site/site.page.ts    |  4 +-
 src/app/core/login/pages/sites/sites.html     | 46 ++++++++++---------
 src/app/core/login/pages/sites/sites.page.ts  | 13 +++---
 src/app/core/login/pages/sites/sites.scss     |  3 --
 src/app/services/utils/url.ts                 |  2 +-
 src/theme/app.scss                            |  5 ++
 src/types/global.d.ts                         |  2 +-
 10 files changed, 48 insertions(+), 42 deletions(-)
 delete mode 100644 src/app/core/login/pages/sites/sites.scss

diff --git a/src/app/core/login/login.module.ts b/src/app/core/login/login.module.ts
index 3a102970b..5bfd7fd32 100644
--- a/src/app/core/login/login.module.ts
+++ b/src/app/core/login/login.module.ts
@@ -19,8 +19,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { IonicModule } from '@ionic/angular';
 import { TranslateModule } from '@ngx-translate/core';
 
-import { CoreComponentsModule } from '@/app/components/components.module';
-import { CoreDirectivesModule } from '@/app/directives/directives.module';
+import { CoreComponentsModule } from '@components/components.module';
+import { CoreDirectivesModule } from '@directives/directives.module';
 
 import { CoreLoginRoutingModule } from './login-routing.module';
 import { CoreLoginCredentialsPage } from './pages/credentials/credentials.page';
diff --git a/src/app/core/login/pages/credentials/credentials.page.ts b/src/app/core/login/pages/credentials/credentials.page.ts
index 6e399917f..d189c504f 100644
--- a/src/app/core/login/pages/credentials/credentials.page.ts
+++ b/src/app/core/login/pages/credentials/credentials.page.ts
@@ -22,9 +22,9 @@ import { CoreSites } from '@services/sites';
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreUtils } from '@services/utils/utils';
 import { CoreLoginHelper, CoreLoginHelperProvider } from '@core/login/services/helper';
-import { CoreConstants } from '@/app/core/constants';
+import { CoreConstants } from '@core/constants';
 import { Translate } from '@singletons/core.singletons';
-import { CoreSiteIdentityProvider, CoreSitePublicConfigResponse } from '@/app/classes/site';
+import { CoreSiteIdentityProvider, CoreSitePublicConfigResponse } from '@classes/site';
 import { CoreEvents } from '@singletons/events';
 
 /**
diff --git a/src/app/core/login/pages/site/site.html b/src/app/core/login/pages/site/site.html
index 40f5a58b9..559e7cf3e 100644
--- a/src/app/core/login/pages/site/site.html
+++ b/src/app/core/login/pages/site/site.html
@@ -1,14 +1,15 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button></ion-back-button>
+            <ion-back-button [attr.aria-label]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
 
         <ion-title>{{ 'core.login.connecttomoodle' | translate }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button router-direction="forward" routerLink="/settings/app" [attr.aria-label]="'core.settings.appsettings'">
-                <core-icon slot="icon-only" name="fa-cog" color="light" fixed-width="true"></core-icon>
+            <ion-button router-direction="forward" routerLink="/settings/app"
+                [attr.aria-label]="'core.settings.appsettings' | translate">
+                <core-icon slot="icon-only" name="fa-cog"></core-icon>
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
diff --git a/src/app/core/login/pages/site/site.page.ts b/src/app/core/login/pages/site/site.page.ts
index cfd05ec96..4ce8d7381 100644
--- a/src/app/core/login/pages/site/site.page.ts
+++ b/src/app/core/login/pages/site/site.page.ts
@@ -24,10 +24,10 @@ import { CoreDomUtils } from '@services/utils/dom';
 import { CoreLoginHelper, CoreLoginHelperProvider } from '@core/login/services/helper';
 import { CoreSite } from '@classes/site';
 import { CoreError } from '@classes/errors/error';
-import { CoreConstants } from '@/app/core/constants';
+import { CoreConstants } from '@core/constants';
 import { Translate } from '@singletons/core.singletons';
 import { CoreUrl } from '@singletons/url';
-import { CoreUrlUtils } from '@/app/services/utils/url';
+import { CoreUrlUtils } from '@services/utils/url';
 import { NavController } from '@ionic/angular';
 
 /**
diff --git a/src/app/core/login/pages/sites/sites.html b/src/app/core/login/pages/sites/sites.html
index 45c01774c..805287344 100644
--- a/src/app/core/login/pages/sites/sites.html
+++ b/src/app/core/login/pages/sites/sites.html
@@ -1,39 +1,43 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-back-button></ion-back-button>
+            <ion-back-button [attr.aria-label]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
 
         <ion-title>{{ 'core.settings.sites' | translate }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button *ngIf="sites && sites.length > 0" icon-only (click)="toggleDelete()" [attr.aria-label]="'core.delete' | translate">
+            <ion-button *ngIf="sites && sites.length > 0" (click)="toggleDelete()" [attr.aria-label]="'core.delete' | translate">
                 <core-icon slot="icon-only" name="fa-pencil"></core-icon>
-                </ion-button>
-                <ion-button router-direction="forward" routerLink="/settings/app" [attr.aria-label]="'core.settings.appsettings'">
-                    <core-icon slot="icon-only" name="fa-cog"></core-icon>
+            </ion-button>
+            <ion-button router-direction="forward" routerLink="/settings/app"
+                [attr.aria-label]="'core.settings.appsettings' | translate">
+                <core-icon slot="icon-only" name="fa-cog"></core-icon>
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
     <ion-list>
-        <ion-item (click)="login(site.id)" *ngFor="let site of sites; let idx = index" detail-none>
-            <ion-avatar item-start>
+        <ion-item (click)="login(site.id)" *ngFor="let site of sites">
+            <ion-avatar slot="start">
                 <img [src]="site.avatar" core-external-content [siteId]="site.id" alt="{{ 'core.pictureof' | translate:{$a: site.fullName} }}" role="presentation" onError="this.src='assets/img/user-avatar.png'">
             </ion-avatar>
-            <h2>{{site.fullName}}</h2>
-            <p><core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text></p>
-            <p>{{site.siteUrl}}</p>
-            <ion-badge item-end *ngIf="!showDelete && site.badge">{{site.badge}}</ion-badge>
-            <ion-button *ngIf="showDelete" item-end icon-only clear color="danger" (click)="deleteSite($event, idx)" [attr.aria-label]="'core.delete' | translate">
-                <ion-icon name="trash"></ion-icon>
-            </ion-button>
-        </ion-item>
-    </ion-list>
-    <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end">
-        <ion-fab-button (click)="add()" [attr.aria-label]="'core.add' | translate">
-            <ion-icon name="add"></ion-icon>
-        </ion-fab-button>
-    </ion-fab>
+            <ion-label>
+                <h2>{{site.fullName}}</h2>
+                <p><core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text></p>
+                <p>{{site.siteUrl}}</p>
+            </ion-label>
+            <ion-badge slot="end" *ngIf="!showDelete && site.badge">{{site.badge}}</ion-badge>
+            <ion-button *ngIf="showDelete" slot="end" fill="clear" color="danger" (click)="deleteSite($event, site)"
+                [attr.aria-label]="'core.delete' | translate">
+                <core-icon name="fa-trash" slot="icon-only"></core-icon>
+        </ion-button>
+    </ion-item>
+</ion-list>
+<ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end">
+    <ion-fab-button (click)="add()" [attr.aria-label]="'core.add' | translate">
+        <core-icon name="fa-plus"></core-icon>
+    </ion-fab-button>
+</ion-fab>
 </ion-content>
diff --git a/src/app/core/login/pages/sites/sites.page.ts b/src/app/core/login/pages/sites/sites.page.ts
index 8605780a1..c05b8974f 100644
--- a/src/app/core/login/pages/sites/sites.page.ts
+++ b/src/app/core/login/pages/sites/sites.page.ts
@@ -12,8 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { CoreDomUtils } from '@/app/services/utils/dom';
-import { CoreUtils } from '@/app/services/utils/utils';
+import { CoreDomUtils } from '@services/utils/dom';
+import { CoreUtils } from '@services/utils/utils';
 import { Component, OnInit } from '@angular/core';
 
 import { CoreSiteBasicInfo, CoreSites } from '@services/sites';
@@ -26,7 +26,6 @@ import { CoreLoginHelper } from '../../services/helper';
 @Component({
     selector: 'page-core-login-sites',
     templateUrl: 'sites.html',
-    styleUrls: ['sites.scss'],
 })
 export class CoreLoginSitesPage implements OnInit {
 
@@ -76,13 +75,12 @@ export class CoreLoginSitesPage implements OnInit {
      * Delete a site.
      *
      * @param e Click event.
-     * @param index Position of the site.
+     * @param site Site to delete.
      * @return Promise resolved when done.
      */
-    async deleteSite(e: Event, index: number): Promise<void> {
+    async deleteSite(e: Event, site: CoreSiteBasicInfo): Promise<void> {
         e.stopPropagation();
 
-        const site = this.sites[index];
         const siteName = site.siteName || '';
 
         // @todo: Format text: siteName.
@@ -97,7 +95,8 @@ export class CoreLoginSitesPage implements OnInit {
         try {
             await CoreSites.instance.deleteSite(site.id);
 
-            this.sites.splice(index, 1);
+            const index = this.sites.findIndex((listedSite) => listedSite.id == site.id);
+            index >= 0 && this.sites.splice(index, 1);
             this.showDelete = false;
 
             // If there are no sites left, go to add site.
diff --git a/src/app/core/login/pages/sites/sites.scss b/src/app/core/login/pages/sites/sites.scss
deleted file mode 100644
index abe0054de..000000000
--- a/src/app/core/login/pages/sites/sites.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.item-ios .item-button[icon-only] ion-icon {
-    font-size: 2.1em;
-}
diff --git a/src/app/services/utils/url.ts b/src/app/services/utils/url.ts
index 51725c131..7fc7ee464 100644
--- a/src/app/services/utils/url.ts
+++ b/src/app/services/utils/url.ts
@@ -16,7 +16,7 @@ import { Injectable } from '@angular/core';
 
 import { CoreLang } from '@services/lang';
 import { CoreTextUtils } from '@services/utils/text';
-import { CoreConstants } from '@/app/core/constants';
+import { CoreConstants } from '@core/constants';
 import { makeSingleton } from '@singletons/core.singletons';
 import { CoreUrl } from '@singletons/url';
 
diff --git a/src/theme/app.scss b/src/theme/app.scss
index a653a15bc..033a25fa9 100644
--- a/src/theme/app.scss
+++ b/src/theme/app.scss
@@ -1 +1,6 @@
 // Add here base app styles.
+
+ion-toolbar ion-back-button,
+ion-toolbar .in-toolbar.button-clear {
+    --color: var(--ion-color-primary-contrast);
+}
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 26369b55c..fe9f98a26 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -14,7 +14,7 @@
 
 /* eslint-disable @typescript-eslint/naming-convention */
 
-import { CoreSitesDemoSiteData } from '@/app/services/sites';
+import { CoreSitesDemoSiteData } from '@services/sites';
 
 declare global {