From 6d71565d6b50242f9b64446ecf7904f55f3bdb02 Mon Sep 17 00:00:00 2001 From: Noel De Martin Date: Tue, 8 Mar 2022 18:05:28 +0100 Subject: [PATCH] MOBILE-3153 course: Implement Course Index tour --- scripts/langindex.json | 2 ++ src/assets/img/user-tours/course-index.svg | 1 + .../course/components/components.module.ts | 3 ++ .../course-format/course-format.html | 3 +- .../components/course-format/course-format.ts | 23 ++++++++++++ .../course-index-tour/course-index-tour.html | 6 ++++ .../course-index-tour/course-index-tour.scss | 15 ++++++++ .../course-index-tour/course-index-tour.ts | 35 +++++++++++++++++++ src/core/features/course/lang.json | 2 ++ 9 files changed, 89 insertions(+), 1 deletion(-) create mode 100644 src/assets/img/user-tours/course-index.svg create mode 100644 src/core/features/course/components/course-index-tour/course-index-tour.html create mode 100644 src/core/features/course/components/course-index-tour/course-index-tour.scss create mode 100644 src/core/features/course/components/course-index-tour/course-index-tour.ts diff --git a/scripts/langindex.json b/scripts/langindex.json index 85f7ebd97..477741917 100644 --- a/scripts/langindex.json +++ b/scripts/langindex.json @@ -1567,6 +1567,8 @@ "core.course.startdate": "moodle", "core.course.thisweek": "format_weeks/currentsection", "core.course.todo": "completion", + "core.course.tour_navigation_course_index_student_content": "tool_usertours", + "core.course.tour_navigation_course_index_student_title": "tool_usertours", "core.course.useactivityonbrowser": "local_moodlemobileapp", "core.course.viewcourse": "block_timeline", "core.course.warningmanualcompletionmodified": "local_moodlemobileapp", diff --git a/src/assets/img/user-tours/course-index.svg b/src/assets/img/user-tours/course-index.svg new file mode 100644 index 000000000..c3ecbf014 --- /dev/null +++ b/src/assets/img/user-tours/course-index.svg @@ -0,0 +1 @@ + diff --git a/src/core/features/course/components/components.module.ts b/src/core/features/course/components/components.module.ts index 5eee268bf..a8bbc04f1 100644 --- a/src/core/features/course/components/components.module.ts +++ b/src/core/features/course/components/components.module.ts @@ -28,6 +28,7 @@ import { CoreCourseModuleInfoComponent } from './module-info/module-info'; import { CoreCourseModuleManualCompletionComponent } from './module-manual-completion/module-manual-completion'; import { CoreCourseModuleNavigationComponent } from './module-navigation/module-navigation'; import { CoreCourseModuleSummaryComponent } from './module-summary/module-summary'; +import { CoreCourseCourseIndexTourComponent } from './course-index-tour/course-index-tour'; @NgModule({ declarations: [ @@ -39,6 +40,7 @@ import { CoreCourseModuleSummaryComponent } from './module-summary/module-summar CoreCourseModuleInfoComponent, CoreCourseModuleManualCompletionComponent, CoreCourseCourseIndexComponent, + CoreCourseCourseIndexTourComponent, CoreCourseTagAreaComponent, CoreCourseUnsupportedModuleComponent, CoreCourseModuleNavigationComponent, @@ -57,6 +59,7 @@ import { CoreCourseModuleSummaryComponent } from './module-summary/module-summar CoreCourseModuleInfoComponent, CoreCourseModuleManualCompletionComponent, CoreCourseCourseIndexComponent, + CoreCourseCourseIndexTourComponent, CoreCourseTagAreaComponent, CoreCourseUnsupportedModuleComponent, CoreCourseModuleNavigationComponent, diff --git a/src/core/features/course/components/course-format/course-format.html b/src/core/features/course/components/course-format/course-format.html index 73416f1c5..2d8cd3391 100644 --- a/src/core/features/course/components/course-format/course-format.html +++ b/src/core/features/course/components/course-format/course-format.html @@ -49,7 +49,8 @@ - + {{'core.course.courseindex' | translate }} diff --git a/src/core/features/course/components/course-format/course-format.ts b/src/core/features/course/components/course-format/course-format.ts index 207d2dc8e..ee933d3c3 100644 --- a/src/core/features/course/components/course-format/course-format.ts +++ b/src/core/features/course/components/course-format/course-format.ts @@ -23,6 +23,7 @@ import { QueryList, Type, ElementRef, + ViewChild, } from '@angular/core'; import { CoreDomUtils } from '@services/utils/dom'; import { CoreDynamicComponent } from '@components/dynamic-component/dynamic-component'; @@ -44,6 +45,8 @@ import { CoreBlockHelper } from '@features/block/services/block-helper'; import { CoreNavigator } from '@services/navigator'; import { CoreCourseModuleDelegate } from '@features/course/services/module-delegate'; import { CoreCourseViewedModulesDBRecord } from '@features/course/services/database/course'; +import { CoreUserTours, CoreUserToursAlignment, CoreUserToursSide } from '@features/usertours/services/user-tours'; +import { CoreCourseCourseIndexTourComponent } from '../course-index-tour/course-index-tour'; /** * Component to display course contents using a certain format. If the format isn't found, use default one. @@ -71,6 +74,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy { @Input() moduleId?: number; // The module ID to scroll to. Must be inside the initial selected section. @ViewChildren(CoreDynamicComponent) dynamicComponents?: QueryList; + @ViewChild('courseIndexFab', { read: ElementRef }) courseIndexFab?: ElementRef; // All the possible component classes. courseFormatComponent?: Type; @@ -160,6 +164,25 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy { }); } + /** + * Show Course Index User Tour. + */ + async showCourseIndexTour(): Promise { + const nativeButton = this.courseIndexFab?.nativeElement.shadowRoot?.children[0] as HTMLElement; + + if (!nativeButton) { + return; + } + + await CoreUserTours.showIfPending({ + id: 'course-index', + component: CoreCourseCourseIndexTourComponent, + focus: nativeButton, + side: CoreUserToursSide.Top, + alignment: CoreUserToursAlignment.End, + }); + } + /** * Detect changes on input properties. */ diff --git a/src/core/features/course/components/course-index-tour/course-index-tour.html b/src/core/features/course/components/course-index-tour/course-index-tour.html new file mode 100644 index 000000000..c519d3152 --- /dev/null +++ b/src/core/features/course/components/course-index-tour/course-index-tour.html @@ -0,0 +1,6 @@ +

{{ 'core.course.tour_navigation_course_index_student_title' | translate }}

+ +

{{ 'core.course.tour_navigation_course_index_student_content' | translate }}

+ + {{ 'core.endonesteptour' | translate }} + diff --git a/src/core/features/course/components/course-index-tour/course-index-tour.scss b/src/core/features/course/components/course-index-tour/course-index-tour.scss new file mode 100644 index 000000000..b94fabe85 --- /dev/null +++ b/src/core/features/course/components/course-index-tour/course-index-tour.scss @@ -0,0 +1,15 @@ +:host { + + h2 { + margin-top: 0; + } + + p { + text-align: center; + } + + ion-button { + margin: 0; + } + +} diff --git a/src/core/features/course/components/course-index-tour/course-index-tour.ts b/src/core/features/course/components/course-index-tour/course-index-tour.ts new file mode 100644 index 000000000..bcf3041e8 --- /dev/null +++ b/src/core/features/course/components/course-index-tour/course-index-tour.ts @@ -0,0 +1,35 @@ +// (C) Copyright 2015 Moodle Pty Ltd. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import { Component } from '@angular/core'; +import { CoreUserTours } from '@features/usertours/services/user-tours'; + +/** + * Component showing the User Tour for the Course Index feature. + */ +@Component({ + selector: 'core-course-course-index-tour', + templateUrl: 'course-index-tour.html', + styleUrls: ['course-index-tour.scss'], +}) +export class CoreCourseCourseIndexTourComponent { + + /** + * Dismiss the User Tour. + */ + async dismiss(): Promise { + await CoreUserTours.dismiss(); + } + +} diff --git a/src/core/features/course/lang.json b/src/core/features/course/lang.json index 4c1e75de6..1103a9902 100644 --- a/src/core/features/course/lang.json +++ b/src/core/features/course/lang.json @@ -54,6 +54,8 @@ "startdate": "Course start date", "thisweek": "This week", "todo": "To do", + "tour_navigation_course_index_student_content": "Browse through activities and track your progress.", + "tour_navigation_course_index_student_title": "Find your way around", "useactivityonbrowser": "You can still use it using your device's web browser.", "viewcourse": "View course", "warningmanualcompletionmodified": "The manual completion of an activity was modified on the site.",