Merge pull request #3617 from moodlehq/MOBILE-4282

MOBILE-4282 course: Implement modules indentation

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

@@ -53,7 +53,7 @@
                     <div id="core-course-index-section-{{section.id}}">
                         <ng-container *ngIf="section.expanded">
                             <ng-container *ngFor="let module of section.modules">
-                                <ion-item class="module" [class.item-dimmed]="!module.visible"
+                                <ion-item class="module" [class.item-dimmed]="!module.visible" [class.indented]="module.indented"
                                     [class.item-hightlighted]="section.highlighted"
                                     (click)="selectSectionOrModule($event, section.id, module.id)" button>
                                     <ion-icon class="completioninfo completion_none" name="" *ngIf="module.completionStatus === undefined"

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

@@ -62,6 +62,11 @@ ion-item.item {
         &.item-hightlighted ion-icon.completioninfo {
             @include padding-horizontal(11px, null);
         }
+
+        &.indented {
+            margin-inline-start: 1rem;
+        }
+
     }
 
     ion-icon {

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

@@ -76,6 +76,9 @@ export class CoreCourseCourseIndexComponent implements OnInit {
         }
 
         // Clone sections to add information.
+        const site = CoreSites.getRequiredCurrentSite();
+        const enableIndentation = site.isVersionGreaterEqualThan('4.2');
+
         this.sectionsToRender = this.sections
             .filter((section) => !CoreCourseHelper.isSectionStealth(section))
             .map((section) => {
@@ -93,6 +96,7 @@ export class CoreCourseCourseIndexComponent implements OnInit {
                             course: module.course,
                             visible: !!module.visible,
                             uservisible: CoreCourseHelper.canUserViewModule(module, section),
+                            indented: enableIndentation && module.indent > 0,
                             completionStatus,
                         };
                     });
@@ -192,6 +196,7 @@ type CourseIndexSection = {
         id: number;
         course: number;
         visible: boolean;
+        indented: boolean;
         uservisible: boolean;
         completionStatus?: CoreCourseModuleCompletionStatus;
     }[];

src/core/features/course/components/module/module.scss

@@ -101,4 +101,15 @@
             margin-right: 4px;
         }
     }
+
+    &.indented ion-card {
+        border: none;
+        border-radius: 0;
+        margin-inline-start: calc(var(--horizontal-margin) + 1rem);
+    }
+
+    &.indented + ::ng-deep core-course-module.indented ion-card {
+        border-top: 1px solid var(--border-color);
+    }
+
 }

src/core/features/course/components/module/module.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit, OnDestroy, HostBinding } from '@angular/core';
 
 import { CoreSites } from '@services/sites';
 import {
@@ -52,6 +52,7 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
     @Input() showLegacyCompletion?: boolean; // Whether to show module completion in the old format.
     @Input() isLastViewed = false; // Whether it's the last module viewed in a course.
     @Output() completionChanged = new EventEmitter<CoreCourseModuleCompletionData>(); // Notify when module completion changes.
+    @HostBinding('class.indented') indented = false;
 
     modNameTranslated = '';
     hasInfo = false;
@@ -69,10 +70,13 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
      * @inheritdoc
      */
     async ngOnInit(): Promise<void> {
+        const site = CoreSites.getRequiredCurrentSite();
+
+        this.indented = site.isVersionGreaterEqualThan('4.2') && this.module.indent > 0;
         this.modNameTranslated = CoreCourse.translateModuleName(this.module.modname, this.module.modplural);
         this.showLegacyCompletion = this.showLegacyCompletion ??
             CoreConstants.CONFIG.uselegacycompletion ??
-            !CoreSites.getCurrentSite()?.isVersionGreaterEqualThan('3.11');
+            !site.isVersionGreaterEqualThan('3.11');
         this.checkShowManualCompletion();
 
         if (!this.module.handlerData) {

src/core/features/course/tests/behat/basic_usage.feature

@@ -71,6 +71,15 @@ Feature: Test basic usage of one course in app
       | activity      | name                  | intro             | course | idnumber       | groupmode | section |
       | workshop      | Test workshop name    | Test workshop     | C1     | workshop       | 0         | 3       |
 
+    # TODO remove once MDL-77951 is resolved.
+    And I log in as "admin"
+    And I am on "Course 1" course homepage with editing mode on
+    And I open "Choice course 1" actions menu
+    And I click on "Move right" "link" in the "Choice course 1" activity
+    And I open "assignment" actions menu
+    And I click on "Move right" "link" in the "assignment" activity
+    And I log out
+
   Scenario: View course contents
     When I entered the course "Course 1" as "student1" in the app
     Then the header should be "Course 1" in the app