Merge pull request #3617 from moodlehq/MOBILE-4282

MOBILE-4282 course: Implement modules indentation
This commit is contained in:
Dani Palou 2023-04-19 08:41:22 +02:00 committed by GitHub
commit 95324f371c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 37 additions and 3 deletions

View File

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

View File

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

View File

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

View File

@ -101,4 +101,15 @@
margin-right: 4px; 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);
}
} }

View File

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

View File

@ -71,6 +71,15 @@ Feature: Test basic usage of one course in app
| activity | name | intro | course | idnumber | groupmode | section | | activity | name | intro | course | idnumber | groupmode | section |
| workshop | Test workshop name | Test workshop | C1 | workshop | 0 | 3 | | 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 Scenario: View course contents
When I entered the course "Course 1" as "student1" in the app When I entered the course "Course 1" as "student1" in the app
Then the header should be "Course 1" in the app Then the header should be "Course 1" in the app

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB