MOBILE-3153 block: Implement Side Blocks tour

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",

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 {}

src/core/features/block/components/side-blocks-button/side-blocks-button.html

@@ -1,3 +1,4 @@
-<ion-button (click)="openBlocks()" [attr.aria-label]="'core.block.opendrawerblocks' | translate" color="secondary">
+<ion-button (click)="openBlocks()" (onAppear)="showTour()" [attr.aria-label]="'core.block.opendrawerblocks' | translate" color="secondary"
+    #button>
     <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
 </ion-button>

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<HTMLElement>;
 
     /**
      * Open side blocks.
@@ -40,4 +43,23 @@ export class CoreBlockSideBlocksButtonComponent {
         });
     }
 
+    /**
+     * Show User Tour.
+     */
+    async showTour(): Promise<void> {
+        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,
+        });
+    }
+
 }

src/core/features/block/components/side-blocks-tour/side-blocks-tour.html

@@ -0,0 +1,6 @@
+<h2>{{ 'core.block.tour_navigation_dashboard_title' | translate }}</h2>
+<img src="assets/img/user-tours/side-blocks.svg" alt="" />
+<p>{{ 'core.block.tour_navigation_dashboard_content' | translate }}</p>
+<ion-button (click)="dismiss()" expand="block">
+    {{ 'core.endonesteptour' | translate }}
+</ion-button>

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;
+    }
+
+}

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<void> {
+        await CoreUserTours.dismiss();
+    }
+
+}

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"
 }