diff --git a/scripts/langindex.json b/scripts/langindex.json index 477741917..b568c1a3c 100644 --- a/scripts/langindex.json +++ b/scripts/langindex.json @@ -1450,6 +1450,8 @@ "core.block.blocks": "moodle", "core.block.noblocks": "error", "core.block.opendrawerblocks": "moodle", + "core.block.tour_navigation_dashboard_content": "tool_usertours", + "core.block.tour_navigation_dashboard_title": "tool_usertours", "core.browser": "local_moodlemobileapp", "core.cancel": "moodle", "core.cannotconnect": "local_moodlemobileapp", diff --git a/src/assets/img/user-tours/side-blocks.svg b/src/assets/img/user-tours/side-blocks.svg new file mode 100644 index 000000000..c2c8d4372 --- /dev/null +++ b/src/assets/img/user-tours/side-blocks.svg @@ -0,0 +1 @@ + diff --git a/src/core/features/block/components/components.module.ts b/src/core/features/block/components/components.module.ts index ab8bf883c..62552af04 100644 --- a/src/core/features/block/components/components.module.ts +++ b/src/core/features/block/components/components.module.ts @@ -19,6 +19,7 @@ import { CoreBlockPreRenderedComponent } from './pre-rendered-block/pre-rendered import { CoreSharedModule } from '@/core/shared.module'; import { CoreBlockSideBlocksComponent } from './side-blocks/side-blocks'; import { CoreBlockSideBlocksButtonComponent } from './side-blocks-button/side-blocks-button'; +import { CoreBlockSideBlocksTourComponent } from './side-blocks-tour/side-blocks-tour'; @NgModule({ declarations: [ @@ -27,6 +28,7 @@ import { CoreBlockSideBlocksButtonComponent } from './side-blocks-button/side-bl CoreBlockPreRenderedComponent, CoreBlockSideBlocksComponent, CoreBlockSideBlocksButtonComponent, + CoreBlockSideBlocksTourComponent, ], imports: [ CoreSharedModule, @@ -37,6 +39,7 @@ import { CoreBlockSideBlocksButtonComponent } from './side-blocks-button/side-bl CoreBlockPreRenderedComponent, CoreBlockSideBlocksComponent, CoreBlockSideBlocksButtonComponent, + CoreBlockSideBlocksTourComponent, ], }) export class CoreBlockComponentsModule {} diff --git a/src/core/features/block/components/side-blocks-button/side-blocks-button.html b/src/core/features/block/components/side-blocks-button/side-blocks-button.html index 07dcf6632..13cd1b7fe 100644 --- a/src/core/features/block/components/side-blocks-button/side-blocks-button.html +++ b/src/core/features/block/components/side-blocks-button/side-blocks-button.html @@ -1,3 +1,4 @@ - + diff --git a/src/core/features/block/components/side-blocks-button/side-blocks-button.ts b/src/core/features/block/components/side-blocks-button/side-blocks-button.ts index bd59a030a..e8b369c29 100644 --- a/src/core/features/block/components/side-blocks-button/side-blocks-button.ts +++ b/src/core/features/block/components/side-blocks-button/side-blocks-button.ts @@ -12,8 +12,10 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Component, Input } from '@angular/core'; +import { Component, ElementRef, Input, ViewChild } from '@angular/core'; +import { CoreUserTours, CoreUserToursAlignment, CoreUserToursSide } from '@features/usertours/services/user-tours'; import { CoreDomUtils } from '@services/utils/dom'; +import { CoreBlockSideBlocksTourComponent } from '../side-blocks-tour/side-blocks-tour'; import { CoreBlockSideBlocksComponent } from '../side-blocks/side-blocks'; /** @@ -27,6 +29,7 @@ import { CoreBlockSideBlocksComponent } from '../side-blocks/side-blocks'; export class CoreBlockSideBlocksButtonComponent { @Input() courseId!: number; + @ViewChild('button', { read: ElementRef }) button?: ElementRef; /** * Open side blocks. @@ -40,4 +43,23 @@ export class CoreBlockSideBlocksButtonComponent { }); } + /** + * Show User Tour. + */ + async showTour(): Promise { + const nativeButton = this.button?.nativeElement.shadowRoot?.children[0] as HTMLElement; + + if (!nativeButton) { + return; + } + + await CoreUserTours.showIfPending({ + id: 'side-blocks-button', + component: CoreBlockSideBlocksTourComponent, + focus: nativeButton, + side: CoreUserToursSide.Start, + alignment: CoreUserToursAlignment.Center, + }); + } + } diff --git a/src/core/features/block/components/side-blocks-tour/side-blocks-tour.html b/src/core/features/block/components/side-blocks-tour/side-blocks-tour.html new file mode 100644 index 000000000..47596569a --- /dev/null +++ b/src/core/features/block/components/side-blocks-tour/side-blocks-tour.html @@ -0,0 +1,6 @@ +

{{ 'core.block.tour_navigation_dashboard_title' | translate }}

+ +

{{ 'core.block.tour_navigation_dashboard_content' | translate }}

+ + {{ 'core.endonesteptour' | translate }} + diff --git a/src/core/features/block/components/side-blocks-tour/side-blocks-tour.scss b/src/core/features/block/components/side-blocks-tour/side-blocks-tour.scss new file mode 100644 index 000000000..b94fabe85 --- /dev/null +++ b/src/core/features/block/components/side-blocks-tour/side-blocks-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/block/components/side-blocks-tour/side-blocks-tour.ts b/src/core/features/block/components/side-blocks-tour/side-blocks-tour.ts new file mode 100644 index 000000000..2f5c2ada4 --- /dev/null +++ b/src/core/features/block/components/side-blocks-tour/side-blocks-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 Side Blocks feature. + */ +@Component({ + selector: 'core-block-side-blocks-tour', + templateUrl: 'side-blocks-tour.html', + styleUrls: ['side-blocks-tour.scss'], +}) +export class CoreBlockSideBlocksTourComponent { + + /** + * Dismiss User Tour. + */ + async dismiss(): Promise { + await CoreUserTours.dismiss(); + } + +} diff --git a/src/core/features/block/lang.json b/src/core/features/block/lang.json index cc3f3c95a..b3398e07b 100644 --- a/src/core/features/block/lang.json +++ b/src/core/features/block/lang.json @@ -1,5 +1,7 @@ { "blocks": "Blocks", "noblocks": "No blocks found!", - "opendrawerblocks": "Open block drawer" + "opendrawerblocks": "Open block drawer", + "tour_navigation_dashboard_content": "This side panel can contain more features.", + "tour_navigation_dashboard_title": "Expand to explore" }