From 33084ef8a6c280b3d4d010c7edcafcba381fb08a Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Mon, 10 Oct 2022 09:42:08 +0200
Subject: [PATCH] MOBILE-4142 courses: Display hidden from students message

---
 .../core-courses-course-list-item.html                 | 10 ++++++++--
 .../components/course-list-item/course-list-item.scss  |  9 ++++-----
 .../course-progress/core-courses-course-progress.html  |  1 -
 .../components/course-progress/course-progress.scss    |  5 -----
 4 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
index 954a0a190..eef29500e 100644
--- a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
+++ b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
@@ -27,8 +27,7 @@
         </div>
     </ng-container>
 
-    <ion-item class="ion-text-wrap" button detail="false" (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname"
-        [class.core-course-disabled]="course.visible == 0">
+    <ion-item class="ion-text-wrap" button detail="false" (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname">
 
         <ng-container *ngIf="layout == 'list' || layout == 'listwithenrol'">
             <ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" slot="start" class="course-icon core-course-thumb"
@@ -74,6 +73,13 @@
                         </core-format-text>
                     </ion-label>
                 </ion-chip>
+
+                <ion-chip color="info" *ngIf="course.visible == 0"
+                    class="core-course-additional-info ion-text-wrap core-course-hidden-message">
+                    <ion-label>
+                        {{ 'core.course.hiddenfromstudents' | translate }}
+                    </ion-label>
+                </ion-chip>
             </div>
 
             <div *ngIf="layout != 'summarycard' && isEnrolled && progress >= 0 && completionUserTracked !== false"
diff --git a/src/core/features/courses/components/course-list-item/course-list-item.scss b/src/core/features/courses/components/course-list-item/course-list-item.scss
index 0ee8e5dc1..151fccf4f 100644
--- a/src/core/features/courses/components/course-list-item/course-list-item.scss
+++ b/src/core/features/courses/components/course-list-item/course-list-item.scss
@@ -39,11 +39,6 @@
     color: var(--core-star-color);
 }
 
-// Simulate item[disabled] but keep pointer-events for hidden courses.
-ion-item.core-course-disabled {
-    opacity: .8;
-}
-
 button {
     z-index: 1;
 }
@@ -102,6 +97,10 @@ ion-chip {
     margin-left: 0;
     margin-right: 0;
     max-width: 100%;
+
+    &.core-course-category {
+        @include margin-horizontal(0px, 8px);
+    }
 }
 
 
diff --git a/src/core/features/courses/components/course-progress/core-courses-course-progress.html b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
index 8dd5eea27..528aa6ad6 100644
--- a/src/core/features/courses/components/course-progress/core-courses-course-progress.html
+++ b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
@@ -4,7 +4,6 @@
         <img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt="" />
     </div>
     <ion-item button (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname" class="core-course-header"
-        [class.core-course-disabled]="course.visible == 0"
         [class.core-course-only-title]="!showAll || progress < 0 && completionUserTracked === false" detail="false">
         <ion-label class="ion-text-wrap core-course-title"
             [class.core-course-with-buttons]="courseOptionMenuEnabled || (downloadCourseEnabled && showDownload)"
diff --git a/src/core/features/courses/components/course-progress/course-progress.scss b/src/core/features/courses/components/course-progress/course-progress.scss
index d120215d6..1ab3357e5 100644
--- a/src/core/features/courses/components/course-progress/course-progress.scss
+++ b/src/core/features/courses/components/course-progress/course-progress.scss
@@ -114,11 +114,6 @@
 }
 
 // Common styles.
-// Simulate item[disabled] but keep pointer-events for hidden courses.
-ion-item.core-course-disabled {
-    opacity: .8;
-}
-
 :host-context(.core-horizontal-scroll) {
     @include horizontal_scroll_item(80%, 250px, 300px);