MOBILE-3213 scorm: Use new fontawesome icons on TOC

src/addon/mod/scorm/components/index/addon-mod-scorm-index.html

@@ -95,9 +95,9 @@
                     <!-- If data shown doesn't belong to last attempt, show a warning. -->
                     <p *ngIf="attemptToContinue">{{ 'addon.mod_scorm.dataattemptshown' | translate:{number: attemptToContinue} }}</p>
                     <p>{{ currentOrganization.title }}</p>
-                    <div *ngFor="let sco of toc" class="core-padding-{{sco.level}}">
+                    <div *ngFor="let sco of toc" class="core-padding-{{sco.level}} addon-mod_scorm-type-{{sco.scormtype}}">
                         <p *ngIf="sco.isvisible">
-                            <img [src]="sco.image.url" [alt]="sco.image.description" />
+                            <core-icon [name]="sco.image.icon" [label]="sco.image.description" item-start></core-icon>
                             <a *ngIf="sco.prereq && sco.launch" (click)="open($event, sco.id)"><core-format-text [text]="sco.title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-format-text></a>
                             <span *ngIf="!sco.prereq || !sco.launch"><core-format-text [text]="sco.title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-format-text></span>
                             <span *ngIf="accessInfo && accessInfo.canviewscores && sco.score_raw">({{ 'addon.mod_scorm.score' | translate }}: {{sco.score_raw}})</span>

src/addon/mod/scorm/components/index/index.scss

@@ -1,9 +1,13 @@
-ion-app.app-root addon-mod-scorm-index {
-
+ion-app.app-root addon-mod-scorm-index,
+ion-app.app-root page-addon-mod-scorm-toc {
     .addon-mod_scorm-toc {
-        img {
-            width: auto;
-            display: inline;
+        // Hide all non sco icons using css to maintain padding.
+        ion-icon {
+            opacity: 0;
+        }
+
+        .addon-mod_scorm-type-sco ion-icon {
+            opacity: 1
         }
     }
 }

src/addon/mod/scorm/pages/toc/toc.html

@@ -10,7 +10,7 @@
 </ion-header>
 <ion-content>
     <nav>
-        <ion-list>
+        <ion-list class="addon-mod_scorm-toc">
             <ion-item text-wrap *ngIf="attemptToContinue">
                 <p>{{ 'addon.mod_scorm.dataattemptshown' | translate:{number: attemptToContinue} }}</p>
             </ion-item>
@@ -23,8 +23,8 @@
 
             <!-- List of SCOs. -->
             <ng-container *ngFor="let sco of toc">
-                <a *ngIf="sco.isvisible" ion-item text-wrap [ngClass]="'core-padding-' + sco.level" [class.core-nav-item-selected]="selected == sco.id" (click)="loadSco(sco)" [attr.disabled]="!sco.prereq || !sco.launch ? true : null" [attr.detail-none]="!sco.prereq || !sco.launch ? true : null">
-                    <img [src]="sco.image.url" [alt]="sco.image.description" />
+                <a *ngIf="sco.isvisible" ion-item text-wrap [ngClass]="'core-padding-' + sco.level + ' addon-mod_scorm-type-' + sco.scormtype" [class.core-nav-item-selected]="selected == sco.id" [class]="" (click)="loadSco(sco)" [attr.disabled]="!sco.prereq || !sco.launch ? true : null" [attr.detail-none]="!sco.prereq || !sco.launch ? true : null">
+                    <core-icon [name]="sco.image.icon" [label]="sco.image.description" item-start></core-icon>
                     <core-format-text [text]="sco.title" contextLevel="module" [contextInstanceId]="moduleId" [courseId]="courseId"></core-format-text>
                     <span *ngIf="accessInfo && accessInfo.canviewscores && sco.score_raw">({{ 'addon.mod_scorm.score' | translate }}: {{sco.score_raw}})</span>
                 </a>

src/addon/mod/scorm/pages/toc/toc.module.ts

@@ -16,6 +16,7 @@ import { NgModule } from '@angular/core';
 import { IonicPageModule } from 'ionic-angular';
 import { TranslateModule } from '@ngx-translate/core';
 import { CoreDirectivesModule } from '@directives/directives.module';
+import { CoreComponentsModule } from '@components/components.module';
 import { AddonModScormTocPage } from './toc';
 
 @NgModule({
@@ -24,6 +25,7 @@ import { AddonModScormTocPage } from './toc';
     ],
     imports: [
         CoreDirectivesModule,
+        CoreComponentsModule,
         IonicPageModule.forChild(AddonModScormTocPage),
         TranslateModule.forChild()
     ],

src/addon/mod/scorm/providers/scorm.ts

@@ -106,6 +106,22 @@ export class AddonModScormProvider {
         'b': 'browsed',
         'n': 'notattempted'
     };
+    protected static STATUS_TO_ICON = {
+        assetc: 'fa-file-archive-o',
+        asset: 'fa-file-archive-o',
+        browsed: 'fa-book',
+        completed: 'fa-check-square-o',
+        failed: 'fa-times',
+        incomplete: 'fa-pencil-square-o',
+        minus: 'fa-minus',
+        notattempted: 'fa-square-o',
+        passed: 'fa-check',
+        plus: 'fa-plus',
+        popdown: 'fa-window-close-o',
+        popup: 'fa-window-restore',
+        suspend: 'fa-pause',
+        wait: 'fa-clock-o',
+    };
 
     protected ROOT_CACHE_KEY = 'mmaModScorm:';
     protected logger;
@@ -1048,17 +1064,21 @@ export class AddonModScormProvider {
      * @param incomplete Whether the SCORM is incomplete.
      * @return Image URL and description.
      */
-    getScoStatusIcon(sco: any, incomplete?: boolean): {url: string, description: string} {
+    getScoStatusIcon(sco: any, incomplete?: boolean): {icon: string, description: string} {
         let imageName = '',
             descName = '',
-            status;
+            suspendedStr = '';
 
+        const status = sco.status;
+
+        if (sco.isvisible) {
+            if (this.VALID_STATUSES.indexOf(status) >= 0) {
                 if (sco.scormtype == 'sco') {
-            // Not an asset, calculate image using status.
-            status = sco.status;
-            if (this.VALID_STATUSES.indexOf(status) < 0) {
-                // Status empty or not valid, use 'notattempted'.
-                status = 'notattempted';
+                    imageName = status;
+                    descName = status;
+                } else {
+                    imageName = 'asset';
+                    descName = 'assetlaunched';
                 }
 
                 if (!incomplete) {
@@ -1068,19 +1088,32 @@ export class AddonModScormProvider {
 
                 if (incomplete && sco.exitvalue == 'suspend') {
                     imageName = 'suspend';
-                descName = 'suspended';
-            } else {
-                imageName = sco.status;
-                descName = sco.status;
+                    suspendedStr = ' - ' + this.translate.instant('addon.mod_scorm.suspended');
                 }
+            } else {
+                incomplete = true;
+
+                if (sco.scormtype == 'sco') {
+                    // Status empty or not valid, use 'notattempted'.
+                    imageName = 'notattempted';
                 } else {
                     imageName = 'asset';
-            descName = (!sco.status || sco.status == 'notattempted') ? 'asset' : 'assetlaunched';
+                }
+                descName = imageName;
+            }
         }
 
+        if (imageName == '') {
+            imageName = 'notattempted';
+            descName = 'notattempted';
+            suspendedStr = '';
+        }
+
+        sco.incomplete = incomplete;
+
         return {
-            url: 'assets/img/scorm/' + imageName + '.gif',
-            description: this.translate.instant('addon.mod_scorm.' + descName)
+            icon: AddonModScormProvider.STATUS_TO_ICON[imageName],
+            description: this.translate.instant('addon.mod_scorm.' + descName) + suspendedStr
         };
     }
 

src/components/icon/icon.ts

@@ -82,6 +82,7 @@ export class CoreIconComponent implements OnChanges, OnDestroy {
         !this.ariaLabel && this.newElement.setAttribute('aria-hidden', 'true');
         !this.ariaLabel && this.newElement.setAttribute('role', 'presentation');
         this.ariaLabel && this.newElement.setAttribute('aria-label', this.ariaLabel);
+        this.ariaLabel && this.newElement.setAttribute('title', this.ariaLabel);
 
         const attrs = this.element.attributes;
         for (let i = attrs.length - 1; i >= 0; i--) {