Merge pull request #3177 from crazyserver/MOBILE-3814

Mobile 3814

src/core/components/loading/loading.ts

@@ -103,23 +103,19 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {
      * @return Promise resolved when done.
      */
     async changeState(loaded: boolean): Promise<void> {
-        await CoreUtils.nextTick();
-
         this.element.classList.toggle('core-loading-loaded', loaded);
-        this.content?.nativeElement.classList.add('core-loading-content', loaded);
+        this.content?.nativeElement.classList.toggle('core-loading-content', loaded);
-
-        await CoreUtils.nextTick();
-
-        // Wait for next tick before triggering the event to make sure ngIf elements have been added to the DOM.
-        CoreEvents.trigger(CoreEvents.CORE_LOADING_CHANGED, <CoreEventLoadingChangedData> {
-            loaded: loaded,
-            uniqueId: this.uniqueId,
-        });
 
         if (!this.loaded && loaded) {
             this.loaded = true; // Only comes true once.
             this.firstLoadedPromise.resolve(this.uniqueId);
         }
+
+        // Event has been deprecated since app 4.0.
+        CoreEvents.trigger(CoreEvents.CORE_LOADING_CHANGED, <CoreEventLoadingChangedData> {
+            loaded: true,
+            uniqueId: this.uniqueId,
+        });
     }
 
     /**

src/core/directives/collapsible-header.ts

@@ -228,7 +228,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
             throw new Error('[collapsible-header] Couldn\'t create floating title');
         }
 
-        this.page.classList.remove('is-active');
+        this.page.classList.remove('collapsible-header-page-is-active');
         CoreUtils.nextTick();
 
         // Add floating title and measure initial position.
@@ -293,7 +293,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
             .forEach(([property, value]) => floatingTitle.style.setProperty(property, value as string));
 
         // Activate styles.
-        this.page.classList.add('is-active');
+        this.page.classList.add('collapsible-header-page-is-active');
 
         this.floatingTitle = floatingTitle;
         this.scrollingHeight = originalTitleBoundingBox.top - collapsedHeaderTitleBoundingBox.top;
@@ -376,7 +376,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
         }
 
         this.page.style.setProperty('--collapsible-header-progress', enable ? '0' : '1');
-        this.page.classList.toggle('is-collapsed', !enable);
+        this.page.classList.toggle('collapsible-header-page-is-collapsed', !enable);
     }
 
     /**
@@ -409,11 +409,12 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
             !collapsedFontStyles ||
             !floatingTitle
         ) {
+            page?.classList.remove('collapsible-header-page-is-active');
             throw new Error('[collapsible-header] Couldn\'t set up scrolling');
         }
 
         this.isWithinContent = content.contains(expandedHeader);
-        page.classList.toggle('is-within-content', this.isWithinContent);
+        page.classList.toggle('collapsible-header-page-is-within-content', this.isWithinContent);
         this.setEnabled(this.enabled);
 
         Object
@@ -440,8 +441,8 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
                 : CoreMath.clamp(contentScroll.scrollTop / scrollingHeight, 0, 1);
 
             page.style.setProperty('--collapsible-header-progress', `${progress}`);
-            page.classList.toggle('is-frozen', frozen);
+            page.classList.toggle('collapsible-header-page-is-frozen', frozen);
-            page.classList.toggle('is-collapsed', progress === 1);
+            page.classList.toggle('collapsible-header-page-is-collapsed', progress === 1);
 
             Object
                 .entries(progress > .5 ? collapsedFontStyles : expandedFontStyles)
@@ -455,7 +456,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
                     return;
                 }
 
-                if (page.classList.contains('is-frozen')) {
+                if (page.classList.contains('collapsible-header-page-is-frozen')) {
                     return;
                 }
 
@@ -464,7 +465,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
                 const collapse = progress > 0.5;
 
                 page.style.setProperty('--collapsible-header-progress', collapse ? '1' : '0');
-                page.classList.toggle('is-collapsed', collapse);
+                page.classList.toggle('collapsible-header-page-is-collapsed', collapse);
 
                 if (collapse && this.scrollingHeight && this.scrollingHeight > 0 && scrollTop < this.scrollingHeight) {
                     this.content?.scrollToPoint(null, this.scrollingHeight);

src/core/features/course/components/course-index/course-index.html

@@ -24,7 +24,7 @@
             </ion-item>
             <ng-container *ngIf="allSectionId != section.id">
                 <ion-item class="divider section" (click)="selectSectionOrModule($event, section.id)" button
-                    [class.item-current]="selectedId === section.id" [class.item-dimmed]="section.visible === 0"
+                    [class.item-current]="selectedId === section.id" [class.item-dimmed]="!section.visible"
                     [class.item-hightlighted]="section.highlighted" detail="false" sticky="true">
                     <ion-icon *ngIf="section.hasVisibleModules" name="fas-chevron-right" flip-rtl slot="start"
                         class="expandable-status-icon" (click)="toggleExpand($event, section)"
@@ -40,9 +40,13 @@
                             </core-format-text>
                         </h2>
                     </ion-label>
-                    <ion-badge *ngIf="section.highlighted && highlighted">{{highlighted}}</ion-badge>
+                    <ion-badge *ngIf="section.highlighted && highlighted" slot="end">{{highlighted}}</ion-badge>
                     <ion-icon name="fas-lock" *ngIf="section.availabilityinfo" slot="end" class="restricted"
                         [attr.aria-label]="'core.restricted' | translate"></ion-icon>
+                    <ion-icon name="fas-eye-slash" *ngIf="!section.visible && !section.uservisible" slot="end" class="restricted"
+                        [attr.aria-label]="'core.notavailable' | translate"></ion-icon>
+                    <ion-icon name="fas-eye-slash" *ngIf="!section.visible && section.uservisible" slot="end" class="restricted"
+                        [attr.aria-label]="'core.course.hiddenfromstudents' | translate"></ion-icon>
                 </ion-item>
                 <ng-container *ngIf="section.expanded">
                     <ng-container *ngFor="let module of section.modules">

src/core/features/course/components/course-index/course-index.ts

@@ -78,8 +78,7 @@ export class CoreCourseCourseIndexComponent implements OnInit {
         // Clone sections to add information.
         this.sectionsToRender = this.sections
             .filter((section) => !section.hiddenbynumsections &&
-                section.id != CoreCourseProvider.STEALTH_MODULES_SECTION_ID &&
+                section.id != CoreCourseProvider.STEALTH_MODULES_SECTION_ID)
-                section.uservisible !== false)
             .map((section) => {
                 const modules = section.modules
                     .filter((module) => module.visibleoncoursepage !== 0 && !module.noviewlink)
@@ -103,6 +102,8 @@ export class CoreCourseCourseIndexComponent implements OnInit {
                     id: section.id,
                     name: section.name,
                     availabilityinfo: !!section.availabilityinfo,
+                    visible: !!section.visible,
+                    uservisible: section.uservisible !== false,
                     expanded: section.id === this.selectedId,
                     highlighted: currentSectionData.section.id === section.id,
                     hasVisibleModules: modules.length > 0,
@@ -160,6 +161,8 @@ type CourseIndexSection = {
     expanded: boolean;
     hasVisibleModules: boolean;
     availabilityinfo: boolean;
+    visible: boolean;
+    uservisible: boolean;
     modules: {
         id: number;
         course: number;

src/core/singletons/events.ts

@@ -117,6 +117,9 @@ export class CoreEvents {
     static readonly APP_LAUNCHED_URL = 'app_launched_url'; // App opened with a certain URL (custom URL scheme).
     static readonly FILE_SHARED = 'file_shared';
     static readonly KEYBOARD_CHANGE = 'keyboard_change';
+    /**
+     * @deprecated since app 4.0. Use CoreComponentsRegistry promises instead.
+     */
     static readonly CORE_LOADING_CHANGED = 'core_loading_changed';
     static readonly ORIENTATION_CHANGE = 'orientation_change';
     static readonly SEND_ON_ENTER_CHANGED = 'send_on_enter_changed';

src/theme/components/collapsible-header.scss

@@ -25,7 +25,7 @@
         opacity: 0;
     }
 
-    &:not(.is-collapsed) .collapsible-header-collapsed {
+    &:not(.collapsible-header-page-is-collapsed) .collapsible-header-collapsed {
         --core-header-toolbar-border-width: 0;
         ion-toolbar {
             --background: transparent;
@@ -37,11 +37,11 @@
 
     }
 
-    &.is-active.is-collapsed.is-within-content ion-header.core-header-shadow {
+    &.collapsible-header-page-is-active.collapsible-header-page-is-collapsed.collapsible-header-page-is-within-content ion-header.core-header-shadow {
         --core-header-shadow: var(--drop-shadow-bottom, none);
     }
 
-    &.is-active {
+    &.collapsible-header-page-is-active {
 
         .collapsible-header-expanded {
             height: calc(var(--collapsible-header-expanded-height) * (1 - var(--collapsible-header-progress)));
@@ -75,7 +75,7 @@
 
     }
 
-    &.is-active.is-within-content  {
+    &.collapsible-header-page-is-active.collapsible-header-page-is-within-content  {
 
         ion-content {
             --offset-top: var(--collapsible-header-collapsed-height) !important;
@@ -88,7 +88,7 @@
 
     }
 
-    &.is-active.is-frozen {
+    &.collapsible-header-page-is-active.collapsible-header-page-is-frozen {
 
         .collapsible-header-floating-title {
             display: none;