From 2c7f4200cf974f2bae02bf90c29148edfa1d42c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Mon, 16 Dec 2019 15:38:26 +0100
Subject: [PATCH] MOBILE-3213 scorm: Use new fontawesome icons on TOC

---
 .../index/addon-mod-scorm-index.html          |   4 +-
 .../mod/scorm/components/index/index.scss     |  14 ++--
 src/addon/mod/scorm/pages/toc/toc.html        |   6 +-
 src/addon/mod/scorm/pages/toc/toc.module.ts   |   2 +
 src/addon/mod/scorm/providers/scorm.ts        |  79 +++++++++++++-----
 src/assets/img/scorm/asset.gif                | Bin 178 -> 0 bytes
 src/assets/img/scorm/browsed.gif              | Bin 105 -> 0 bytes
 src/assets/img/scorm/completed.gif            | Bin 190 -> 0 bytes
 src/assets/img/scorm/failed.gif               | Bin 190 -> 0 bytes
 src/assets/img/scorm/incomplete.gif           | Bin 597 -> 0 bytes
 src/assets/img/scorm/notattempted.gif         | Bin 79 -> 0 bytes
 src/assets/img/scorm/passed.gif               | Bin 190 -> 0 bytes
 src/assets/img/scorm/suspend.gif              | Bin 362 -> 0 bytes
 src/components/icon/icon.ts                   |   1 +
 14 files changed, 73 insertions(+), 33 deletions(-)
 delete mode 100644 src/assets/img/scorm/asset.gif
 delete mode 100644 src/assets/img/scorm/browsed.gif
 delete mode 100644 src/assets/img/scorm/completed.gif
 delete mode 100644 src/assets/img/scorm/failed.gif
 delete mode 100644 src/assets/img/scorm/incomplete.gif
 delete mode 100644 src/assets/img/scorm/notattempted.gif
 delete mode 100644 src/assets/img/scorm/passed.gif
 delete mode 100644 src/assets/img/scorm/suspend.gif

diff --git a/src/addon/mod/scorm/components/index/addon-mod-scorm-index.html b/src/addon/mod/scorm/components/index/addon-mod-scorm-index.html
index 265323472..15299f5f6 100644
--- a/src/addon/mod/scorm/components/index/addon-mod-scorm-index.html
+++ b/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>
diff --git a/src/addon/mod/scorm/components/index/index.scss b/src/addon/mod/scorm/components/index/index.scss
index 67f01dcb6..763ae6067 100644
--- a/src/addon/mod/scorm/components/index/index.scss
+++ b/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
         }
     }
 }
diff --git a/src/addon/mod/scorm/pages/toc/toc.html b/src/addon/mod/scorm/pages/toc/toc.html
index 0cff8c294..0ce9163f0 100644
--- a/src/addon/mod/scorm/pages/toc/toc.html
+++ b/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>
diff --git a/src/addon/mod/scorm/pages/toc/toc.module.ts b/src/addon/mod/scorm/pages/toc/toc.module.ts
index 0a0197203..fec325aeb 100644
--- a/src/addon/mod/scorm/pages/toc/toc.module.ts
+++ b/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()
     ],
diff --git a/src/addon/mod/scorm/providers/scorm.ts b/src/addon/mod/scorm/providers/scorm.ts
index 2592cbb25..a8424dc3f 100644
--- a/src/addon/mod/scorm/providers/scorm.ts
+++ b/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,39 +1064,56 @@ 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 = '';
 
-        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';
-            }
+        const status = sco.status;
 
-            if (!incomplete) {
-                // Check if SCO is completed or not. If SCORM is incomplete there's no need to check SCO.
-                incomplete = this.isStatusIncomplete(status);
-            }
+        if (sco.isvisible) {
+            if (this.VALID_STATUSES.indexOf(status) >= 0) {
+                if (sco.scormtype == 'sco') {
+                    imageName = status;
+                    descName = status;
+                } else {
+                    imageName = 'asset';
+                    descName = 'assetlaunched';
+                }
 
-            if (incomplete && sco.exitvalue == 'suspend') {
-                imageName = 'suspend';
-                descName = 'suspended';
+                if (!incomplete) {
+                    // Check if SCO is completed or not. If SCORM is incomplete there's no need to check SCO.
+                    incomplete = this.isStatusIncomplete(status);
+                }
+
+                if (incomplete && sco.exitvalue == 'suspend') {
+                    imageName = 'suspend';
+                    suspendedStr = ' - ' + this.translate.instant('addon.mod_scorm.suspended');
+                }
             } else {
-                imageName = sco.status;
-                descName = sco.status;
+                incomplete = true;
+
+                if (sco.scormtype == 'sco') {
+                    // Status empty or not valid, use 'notattempted'.
+                    imageName = 'notattempted';
+                } else {
+                    imageName = 'asset';
+                }
+                descName = imageName;
             }
-        } else {
-            imageName = 'asset';
-            descName = (!sco.status || sco.status == 'notattempted') ? 'asset' : 'assetlaunched';
         }
 
+        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
         };
     }
 
diff --git a/src/assets/img/scorm/asset.gif b/src/assets/img/scorm/asset.gif
deleted file mode 100644
index 09fa56516f57b56f918c07d2829942c768c53044..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 178
zcmZ?wbhEHb6krfw_{_`j|Ns9pKy>E+%rpPffN17_V<1ZV&j3WmGZ~E27#NHhkbvS(
z7FH1kUIrbI7|09;miP@PHN7QGf{$z!oAWT0wY-OSanYPtK|BT<IvDQo@JwlK<S}>1
z6MD>1ad2S^qtgisPYK4r9fdkhGu}T~EILI~>a75S{yOH_hSq@!d<SI@9hj!_?Bg?r
PGafoIT3no3f(+IG<m^9Z

diff --git a/src/assets/img/scorm/browsed.gif b/src/assets/img/scorm/browsed.gif
deleted file mode 100644
index ea5e0408199b7b23ed6034b1ea6c48fe9eee6718..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 105
zcmZ?wbhEHb6krfw_{hxg|Nnmm1|R|f#h)y!A`Hw7Iv@^6o`K0~PXEg616+5k6;3E`
z61&QE#5Ku*NnXt@rBZ6)uBrzTr!&H57w>%)GAo-mZtkKFS6Bat*>a`m#LG+{Rt9ST
DK2s#`

diff --git a/src/assets/img/scorm/completed.gif b/src/assets/img/scorm/completed.gif
deleted file mode 100644
index 536191528d7c913387d5799feb1c6486981f6aa0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 190
zcmZ?wbhEHb6krfw_{_`j|Ns9p|IYxy%>OfIo|&0;CM|7dn(-N9<C(?`GZ`4t7#NHh
zkb&Y)7FH1kUIrbIAjk{`mh1^rJZJ6Y6<EZ*C_>mH+CVb6!E<r~Cu>yXq(T9$wQqPf
zzp*){x?n*@04t+IMWjfc+GC;37ANMlF(llYQ=`_Zd;QP{IlEK3lXV;w7Cb6#W-Pvc
f<nd0;!fVG2c^EY0D=HhAgX+a??YMjT1sSXXF*`yi

diff --git a/src/assets/img/scorm/failed.gif b/src/assets/img/scorm/failed.gif
deleted file mode 100644
index d3ca677721f06ec034cff662729f9f37f23bba64..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 190
zcmZ?wbhEHb6krfw_{`1l9|+Ez`9E{!|FpFK#>W2{7|t*-%w%9lV_-05zycJ1vapIU
za5LzD<UnRHuw)1DFizWR*0G^YUWU!%&@;h%(`w@cHmp6uHNE6cTjBlAMKO(s8v+y-
zXfPajzeqxgd%+T+$puo;C!Z>D{AO7u);QsT&;px;-U5ZWy76rpzbA9>w_Hkj5EFl6
YLZu2v8GA!eYCaQ(tz9oyk066J0AS5O<^TWy

diff --git a/src/assets/img/scorm/incomplete.gif b/src/assets/img/scorm/incomplete.gif
deleted file mode 100644
index fe2c6ea9d4d4d0f83396f9751617241d03392bc5..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 597
zcmcK1TT9ac9Eb6r;HD1EdB|mLxj92!+w!ba+dOS!P3LK=&CNC45+VwMqOL;x&)lL2
zM5xHfY*RL=Ofj`>O+z9PA}R=41%VoMl^9Z2-|$8BynxTmqt$7u6g^zx(vFL;^8>%v
zvHcBOU-0V_ey(A237gB<h+-px^)O;S#Qca&;NvJhjNtt+-rdAoFWwAd?Fv>eVf8Xz
zU&O2PSUH22eOPuOYDd(87u|?-A!0?ug0LB(;|QNX$b^s)&pWW#hQ(Ga7_iWSc|GQv
z@l1y~4d&FCZNO|DW>k1ui)jU(RNzr5rsSBCB6t`<2?B)(<YO`qlezHcz%PK0kMS&w
zrQ<$#;T#3~C~%4<T;zAs!(JM5&^<ei+UagL-LcVaD~(v_hKa5lX{enB40N`hPOHdK
zO}0wvEFqng)P*F;rmPf7P9P4O5?S=068(*5Ws-}eyZ-JIN|@<)4KVJ(t3w{IH;$8>
zkrwaiwRU!BZymFobUNK;KEJS}ys9F1Z(<L_ZY>at3u=@~MUl9RNo|oz4@e}HbxlpB
zMuw}Ci}oEUuWe{ltJ;`7%`(}3+0oDSU$sn9d%jR8|1PgqmKhi_9o*t=XJ-}{ce-r?
zK@Kk^g)RLv-M|qQr7JHK^*mULOFdL;7L{rGSs7ftPgp<R$h+nY8+F4gp0qsuV|P+K
G)%*hyXXJPQ

diff --git a/src/assets/img/scorm/notattempted.gif b/src/assets/img/scorm/notattempted.gif
deleted file mode 100644
index 7dbb43be50f6f4c10411fc63bf67dd119fb621ee..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 79
zcmZ?wbhEHb6krfw_`t;Q|Nnmm1_s5SEUY37Obj|eHc(uEfq_YFO8?5!Z}Xexge+p%
ibnoFi{t|Y!tfY`xaZ>AEYED=meW=K{x$LMogEat?NE&zm

diff --git a/src/assets/img/scorm/passed.gif b/src/assets/img/scorm/passed.gif
deleted file mode 100644
index 536191528d7c913387d5799feb1c6486981f6aa0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 190
zcmZ?wbhEHb6krfw_{_`j|Ns9p|IYxy%>OfIo|&0;CM|7dn(-N9<C(?`GZ`4t7#NHh
zkb&Y)7FH1kUIrbIAjk{`mh1^rJZJ6Y6<EZ*C_>mH+CVb6!E<r~Cu>yXq(T9$wQqPf
zzp*){x?n*@04t+IMWjfc+GC;37ANMlF(llYQ=`_Zd;QP{IlEK3lXV;w7Cb6#W-Pvc
f<nd0;!fVG2c^EY0D=HhAgX+a??YMjT1sSXXF*`yi

diff --git a/src/assets/img/scorm/suspend.gif b/src/assets/img/scorm/suspend.gif
deleted file mode 100644
index 35e8413f9f0f79303ef3c519c98c254f24039495..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 362
zcmZ?wbhEHb6krfw_^QGH1iN=LgoiU6I55%Jn4z)JapT6S>S~7f?;rgC&mbno;N`_o
zRAhMJ!pbL47?P7!otzkE&Sc==V7PmiAt*@l{{6!xB@9kZ0yl3mC@HZ_oEY@_HA817
z!<jP-0s;(aX$)#=3=0>ge)+;+WW))wjM_l)Ckv|xg9?KV$Y7A47}(k!CKY(p*a#d^
z34FXzV?Hy}iVr?+%v>sh2i`h~aWb)N@C{PxJl|}S!mTaj{-~gE@|!9CN{K6{xAJpI
zS99}}rErL_2v;j{u`wv}s&KIINHX<Q%S)Dv3kk_7$jeq&3o<a5b11V&EUV^|ms51=
g;1LpF7nI@Vl3caTSyVv$82{G#ZLw$0I5JoR0LblCAOHXW

diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index ffe497983..9bab34f9b 100644
--- a/src/components/icon/icon.ts
+++ b/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--) {