From 1e2eb7e4fb7de87038b28d9c0ac5820df8b83008 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Tue, 1 Feb 2022 11:40:31 +0100 Subject: [PATCH] MOBILE-3915 course: Align icons on course index --- .../components/course-index/course-index.html | 78 ++++++------ .../components/course-index/course-index.scss | 9 +- .../components/course-index/course-index.ts | 111 ++++++++++-------- .../components/format/core-course-format.html | 1 - .../course/components/format/format.ts | 39 ++++-- 5 files changed, 131 insertions(+), 107 deletions(-) diff --git a/src/core/features/course/components/course-index/course-index.html b/src/core/features/course/components/course-index/course-index.html index 7a97a6b41..b0f6d03a3 100644 --- a/src/core/features/course/components/course-index/course-index.html +++ b/src/core/features/course/components/course-index/course-index.html @@ -12,9 +12,9 @@ - - + +

@@ -22,16 +22,17 @@

- - - + + +

@@ -42,37 +43,34 @@ -

- - - - - - - - - - - -

- - -

- - - - + + + + + + + + + + + +

+ + +

+ + + -
+ diff --git a/src/core/features/course/components/course-index/course-index.scss b/src/core/features/course/components/course-index/course-index.scss index 8ef120471..f9ee8c8ba 100644 --- a/src/core/features/course/components/course-index/course-index.scss +++ b/src/core/features/course/components/course-index/course-index.scss @@ -16,18 +16,21 @@ ion-icon.completioninfo { width: 18px; } -ion-item.section::part(native) { +ion-item::part(native) { --padding-start: 0; } -ion-icon.expandable-status-icon { +ion-icon { margin: 0; @include padding(12px, 32px, 12px, 16px); } +ion-item.core-course-index-all::part(native) { + --padding-start: 16px; +} + ion-item.item-current ion-icon.expandable-status-icon { @include padding(null, null, null, 11px); - } ion-icon.restricted { diff --git a/src/core/features/course/components/course-index/course-index.ts b/src/core/features/course/components/course-index/course-index.ts index a7b871765..b33f61ee3 100644 --- a/src/core/features/course/components/course-index/course-index.ts +++ b/src/core/features/course/components/course-index/course-index.ts @@ -13,19 +13,18 @@ // limitations under the License. import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; - -import { CoreCourseModuleData, CoreCourseSection } from '@features/course/services/course-helper'; import { CoreCourseModuleCompletionStatus, CoreCourseModuleCompletionTracking, CoreCourseProvider, } from '@features/course/services/course'; -import { CoreCourseAnyCourseData } from '@features/courses/services/courses'; -import { CoreUtils } from '@services/utils/utils'; -import { ModalController } from '@singletons'; +import { CoreCourseSection } from '@features/course/services/course-helper'; import { CoreCourseFormatDelegate } from '@features/course/services/format-delegate'; +import { CoreCourseAnyCourseData } from '@features/courses/services/courses'; import { IonContent } from '@ionic/angular'; import { CoreDomUtils } from '@services/utils/dom'; +import { CoreUtils } from '@services/utils/utils'; +import { ModalController } from '@singletons'; /** * Component to display course index modal. @@ -39,13 +38,13 @@ export class CoreCourseCourseIndexComponent implements OnInit { @ViewChild(IonContent) content?: IonContent; - @Input() sections?: CourseIndexSection[]; + @Input() sections: CoreCourseSection[] = []; @Input() selectedId?: number; @Input() course?: CoreCourseAnyCourseData; - stealthModulesSectionId = CoreCourseProvider.STEALTH_MODULES_SECTION_ID; allSectionId = CoreCourseProvider.ALL_SECTIONS_ID; highlighted?: string; + sectionsToRender: CourseIndexSection[] = []; constructor( protected elementRef: ElementRef, @@ -70,29 +69,47 @@ export class CoreCourseCourseIndexComponent implements OnInit { return; } - // Collapse all sections first. - this.sections.forEach((section) => section.expanded = false); - const currentSection = await CoreCourseFormatDelegate.getCurrentSection(this.course, this.sections); - currentSection.highlighted = true; + if (this.selectedId === undefined) { - currentSection.expanded = true; + // Highlight current section if none is selected. this.selectedId = currentSection.id; - } else { - const selectedSection = this.sections.find((section) => section.id == this.selectedId); - if (selectedSection) { - selectedSection.expanded = true; - } } - this.sections.forEach((section) => { - section.modules.forEach((module) => { - module.completionStatus = module.completiondata === undefined || - module.completiondata.tracking == CoreCourseModuleCompletionTracking.COMPLETION_TRACKING_NONE - ? undefined - : module.completiondata.state; + // Clone sections to add information. + this.sectionsToRender = this.sections + .filter((section) => !section.hiddenbynumsections && + section.id != CoreCourseProvider.STEALTH_MODULES_SECTION_ID && + section.uservisible !== false) + .map((section) => { + const modules = section.modules + .filter((module) => module.visibleoncoursepage !== 0 && !module.noviewlink) + .map((module) => { + const completionStatus = module.completiondata === undefined || + module.completiondata.tracking == CoreCourseModuleCompletionTracking.COMPLETION_TRACKING_NONE + ? undefined + : module.completiondata.state; + + return { + id: module.id, + name: module.name, + course: module.course, + visible: !!module.visible, + uservisible: !!module.uservisible, + completionStatus, + }; + }); + + return { + id: section.id, + name: section.name, + availabilityinfo: !!section.availabilityinfo, + expanded: section.id === this.selectedId, + highlighted: currentSection?.id === section.id, + hasVisibleModules: modules.length > 0, + modules: modules, + }; }); - }); this.highlighted = CoreCourseFormatDelegate.getSectionHightlightedName(this.course); @@ -102,7 +119,7 @@ export class CoreCourseCourseIndexComponent implements OnInit { this.content, '.item.item-current', ); - }, 200); + }, 300); } /** @@ -128,39 +145,33 @@ export class CoreCourseCourseIndexComponent implements OnInit { * Select a section. * * @param event Event. - * @param section Selected section object. + * @param sectionId Selected section id. + * @param moduleId Selected module id, if any. */ - selectSection(event: Event, section: CoreCourseSection): void { - if (section.uservisible !== false) { - ModalController.dismiss({ event, section }); - } - } - - /** - * Select a section and open a module - * - * @param event Event. - * @param section Selected section object. - * @param module Selected module object. - */ - selectModule(event: Event,section: CoreCourseSection, module: CoreCourseModuleData): void { - if (module.uservisible !== false) { - ModalController.dismiss({ event, section, module }); - } + selectSectionOrModule(event: Event, sectionId: number, moduleId?: number): void { + ModalController.dismiss({ event, sectionId, moduleId }); } } -type CourseIndexSection = Omit & { - highlighted?: boolean; - expanded?: boolean; - modules: (CoreCourseModuleData & { +type CourseIndexSection = { + id: number; + name: string; + highlighted: boolean; + expanded: boolean; + hasVisibleModules: boolean; + availabilityinfo: boolean; + modules: { + id: number; + course: number; + visible: boolean; + uservisible: boolean; completionStatus?: CoreCourseModuleCompletionStatus; - })[]; + }[]; }; export type CoreCourseIndexSectionWithModule = { event: Event; - section: CourseIndexSection; - module?: CoreCourseModuleData; + sectionId: number; + moduleId?: number; }; diff --git a/src/core/features/course/components/format/core-course-format.html b/src/core/features/course/components/format/core-course-format.html index e1712fea8..7bacb0dd0 100644 --- a/src/core/features/course/components/format/core-course-format.html +++ b/src/core/features/course/components/format/core-course-format.html @@ -69,7 +69,6 @@ class="section-wrapper" [id]="section.id"> -

diff --git a/src/core/features/course/components/format/format.ts b/src/core/features/course/components/format/format.ts index f6030ede6..2d5067cdc 100644 --- a/src/core/features/course/components/format/format.ts +++ b/src/core/features/course/components/format/format.ts @@ -312,20 +312,33 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy { }, }); - if (data) { - this.sectionChanged(data.section); - if (data.module) { - if (!data.module.handlerData) { - data.module.handlerData = - await CoreCourseModuleDelegate.getModuleDataFor(data.module.modname, data.module, this.course.id); - } - - if (data.module.uservisible !== false && data.module.handlerData?.action) { - data.module.handlerData.action(data.event, data.module, data.module.course); - } - this.moduleId = data.module.id; - } + if (!data) { + return; } + const section = this.sections.find((section) => section.id == data.sectionId); + if (!section) { + return; + } + this.sectionChanged(section); + + if (!data.moduleId) { + return; + } + const module = section.modules.find((module) => module.id == data.moduleId); + if (!module) { + return; + } + + if (!module.handlerData) { + module.handlerData = + await CoreCourseModuleDelegate.getModuleDataFor(module.modname, module, this.course.id); + } + + if (module.uservisible !== false && module.handlerData?.action) { + module.handlerData.action(data.event, module, module.course); + } + + this.moduleId = data.moduleId; } /**