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--) {