MOBILE-4616 scorm: Update sco status icons to match LMS

crazyserver · Oct 15, 2024 · 995bf54 · 995bf54
1 parent 904950d
commit 995bf54
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 24 deletions.
diff --git a/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html b/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
@@ -140,7 +140,7 @@ <h3 class="item-heading">{{'core.grades.grades' | translate}}</h3>
                         <p>{{ currentOrganization.title }}</p>
                         <div *ngFor="let sco of toc" class="core-padding-{{sco.level}} addon-mod_scorm-type-{{sco.scormtype}}">
                             <p *ngIf="sco.isvisible">
-                                <ion-icon *ngIf="sco.icon" [name]="sco.icon.icon" [attr.aria-label]="sco.icon.description" slot="start" />
+                                <ion-icon *ngIf="sco.icon" [name]="sco.icon.icon" [attr.aria-label]="sco.icon.description" />
                                 <button class="as-link" *ngIf="sco.prereq && sco.launch" (click)="open($event, false, sco.id)">
                                     <core-format-text [text]="sco.title" contextLevel="module" [contextInstanceId]="module.id"
                                         [courseId]="courseId" />

diff --git a/src/addons/mod/scorm/components/index/index.scss b/src/addons/mod/scorm/components/index/index.scss
@@ -5,15 +5,7 @@
         font-size: var(--text-size);
     }
 
-    .addon-mod_scorm-toc {
-        // Hide all non sco icons using css to maintain padding.
-        ion-icon {
-            opacity: 0;
-            @include margin(5px, 8px, null, null);
-        }
-
-        .addon-mod_scorm-type-sco ion-icon {
-            opacity: 1
-        }
+    .addon-mod_scorm-toc ion-icon {
+        @include margin(4px, 8px, null, null);
     }
 }
diff --git a/src/addons/mod/scorm/components/toc/toc.scss b/src/addons/mod/scorm/components/toc/toc.scss
@@ -0,0 +1,5 @@
+@use "theme/globals" as *;
+
+.addon-mod_scorm-toc ion-icon {
+    @include margin(4px, 8px, null, null);
+}
diff --git a/src/addons/mod/scorm/components/toc/toc.ts b/src/addons/mod/scorm/components/toc/toc.ts
@@ -25,6 +25,7 @@ import { CoreSharedModule } from '@/core/shared.module';
 @Component({
     selector: 'addon-mod-scorm-toc',
     templateUrl: 'toc.html',
+    styleUrl: 'toc.scss',
     standalone: true,
     imports: [
         CoreSharedModule,

diff --git a/src/addons/mod/scorm/services/scorm.ts b/src/addons/mod/scorm/services/scorm.ts
@@ -63,20 +63,14 @@ const STATUSES = {
     'n': 'notattempted',
 };
 const STATUS_TO_ICON = {
-    assetc: 'far-file-zipper',
-    asset: 'far-file-zipper',
+    asset: '', // Empty to show an space.
     browsed: 'fas-book',
-    completed: 'far-square-check',
+    completed: 'fas-check',
     failed: 'fas-xmark',
-    incomplete: 'far-pen-to-square',
-    minus: 'fas-minus',
+    incomplete: 'fas-pen-to-square',
     notattempted: 'far-square',
-    passed: 'fas-check',
-    plus: 'fas-plus',
-    popdown: 'far-rectangle-xmark',
-    popup: 'fas-window-restore',
+    passed: 'fas-check-double',
     suspend: 'fas-pause',
-    wait: 'far-clock',
 };
 
 /**
@@ -1022,7 +1016,7 @@ export class AddonModScormProvider {
 
         if (sco.isvisible) {
             if (VALID_STATUSES.indexOf(status) >= 0) {
-                if (sco.scormtype == 'sco') {
+                if (sco.scormtype === 'sco') {
                     imageName = status;
                     descName = status;
                 } else {
@@ -1042,7 +1036,7 @@ export class AddonModScormProvider {
             } else {
                 incomplete = true;
 
-                if (sco.scormtype == 'sco') {
+                if (sco.scormtype === 'sco') {
                     // Status empty or not valid, use 'notattempted'.
                     imageName = 'notattempted';
                 } else {

diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
@@ -180,6 +180,8 @@ core-split-view.menu-and-content {
 [aria-current="page"],
 .item.item-current {
     @include safe-area-border-start(var(--selected-item-border-width), solid,  var(--selected-item-color));
+    --padding-start: calc(16px - var(--selected-item-border-width));
+
     > * {
         --ion-safe-area-left: 0px;
     }
@@ -278,7 +280,7 @@ mark, .matchtext {
 // Different levels of padding.
 @for $i from 0 through 15 {
     .core-padding-#{$i} {
-        @include padding(null, null, null, 15px * $i + 16px);
+        @include padding(null, null, null, 16px * $i);
     }
 }