MOBILE-3153 core: Implement Swipe Navigation tour
Noel De Martin
parent
0376fd0f29
commit
bd37ed4345
|
|
@ -2269,6 +2269,7 @@
|
|||
"core.submit": "moodle",
|
||||
"core.success": "moodle",
|
||||
"core.summary": "moodle",
|
||||
"core.swipenavigationtourdescription": "local_moodlemobileapp",
|
||||
"core.tablet": "local_moodlemobileapp",
|
||||
"core.tag.defautltagcoll": "tag",
|
||||
"core.tag.errorareanotsupported": "local_moodlemobileapp",
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202 98"><path fill-rule="evenodd" clip-rule="evenodd" d="M98.269 84.491c1.654.528 10.173 2.987 25.555 7.378l13.172-21.987 1.308-12.462-11.649-8.533-12.69-4.665 5.051-19.274-3.955-4.534-5.864 1.961-7.052 26.911-3.439-.148-5.382 2.166-4.591 11.492 7.54 15.381c-.324 3.682.342 5.787 1.996 6.314Z" fill="#fff"/><path d="M117.797 47.53c-1.169-.307-2.275-.156-3.317.452-1.043.608-1.717 1.494-2.022 2.66l-1.106 4.22-1.058-.277.803-3.067c.277-1.055 6.047-23.565 6.047-23.565.381-1.454-.597-3.654-2.779-4.226-2.182-.571-4.113.866-4.494 2.32-.381 1.455-1.345 5.078-1.61 6.09l-8.252 31.489-.8-1.267 1.487-5.672c.276-1.055.158-2.044-.354-2.965-.513-.922-1.298-1.52-2.356-1.798-1.015-.266-1.98-.132-2.898.403-.918.535-1.51 1.308-1.774 2.32l-1.935 7.387c-.27 1.033-.121 2.036.449 3.007l7.694 12.449c.636 1.083.772 2.316.409 3.702-.15.571-.07 1.12.239 1.648.31.528.751.867 1.324 1.017l21.166 5.546c.573.15 1.124.072 1.652-.236.528-.308.867-.748 1.017-1.32l.216-.824a9.733 9.733 0 0 1 .996-2.453l7.338-13.442c.428-.734.76-1.552.996-2.453l2.126-8.113c.276-1.055.158-2.043-.355-2.965-.512-.921-1.298-1.52-2.356-1.798-1.014-.266-1.98-.131-2.897.404-.918.534-1.509 1.308-1.774 2.319l-.277 1.055-1.058-.277 1.08-4.122a3.95 3.95 0 0 0-.201-2.608c-.364-.859-.952-1.489-1.766-1.89a5.8 5.8 0 0 0-.743-.266c-1.015-.265-1.981-.13-2.898.404-.918.535-1.509 1.308-1.774 2.32l-1.106 4.22-1.058-.277 1.054-4.023a4.577 4.577 0 0 0-.302-3.233 4.098 4.098 0 0 0-2.352-2.15c-.105-.05-.245-.1-.421-.145Zm1.105-4.222c1.852.486 3.351 1.466 4.496 2.94a8.08 8.08 0 0 1 4.361-.055 8.136 8.136 0 0 1 3.438 1.853 8.036 8.036 0 0 1 2.187 3.251 8.043 8.043 0 0 1 2.012.28c2.205.579 3.873 1.856 5.004 3.832 1.132 1.977 1.41 4.064.834 6.263l-2.126 8.112c-.293 1.121-.748 2.271-1.363 3.45l-7.371 13.433c-.271.493-.541 1.256-.812 2.29-.461 1.759-1.47 3.092-3.027 4-1.557.907-3.218 1.13-4.981.668l-21.165-5.547c-1.852-.485-3.205-1.527-4.059-3.125-.853-1.598-1.038-3.32-.554-5.168l-7.629-12.43c-1.255-2.045-1.589-4.188-1.001-6.43l1.935-7.388c.57-2.176 1.835-3.836 3.796-4.978 1.96-1.143 4.032-1.428 6.214-.856.243.063.951.26 1.056.311.679-2.054 5.921-22.284 6.778-25.557.929-3.545 6.497-4.029 8.679-3.457 2.182.572 6.916 3.269 5.868 7.269-.191.727-4.365 16.347-4.461 16.71 0 0-.357-.26 1.891.33Z" fill="#0056B3"/><path d="M101.728 32.565c-.812.436-1.832.135-2.178-.719a15.246 15.246 0 0 1-1.051-7.043 15.418 15.418 0 0 1 3.22-8.154 15.566 15.566 0 0 1 7.157-5.113 15.504 15.504 0 0 1 8.774-.415 15.306 15.306 0 0 1 7.547 4.42 15.209 15.209 0 0 1 3.872 7.819c.5 2.93.132 5.947-1.057 8.685a15.51 15.51 0 0 1-4.319 5.75c-.702.582-1.735.37-2.242-.39-.507-.76-.292-1.78.394-2.386a12.146 12.146 0 0 0 3.112-4.273 12.014 12.014 0 0 0 .829-6.81 11.927 11.927 0 0 0-3.036-6.13 12.005 12.005 0 0 0-5.917-3.465 12.158 12.158 0 0 0-6.88.324 12.207 12.207 0 0 0-5.612 4.01 12.092 12.092 0 0 0-2.525 6.393 11.95 11.95 0 0 0 .695 5.187c.319.864.028 1.873-.783 2.31Z" fill="#86CBFF"/><rect x="76.039" y="12.141" width="23.308" height="3.759" rx="1.88" fill="#86CBFF"/><rect x="70.619" y="21.163" width="21.805" height="3.759" rx="1.88" fill="#86CBFF"/><rect x="80.394" y="30.186" width="16.541" height="3.759" rx="1.88" fill="#86CBFF"/><path d="M141.5 20.788a1.88 1.88 0 1 0 0 3.759v-3.76Zm60.15 1.88-18.797-10.853V33.52l18.797-10.853Zm-60.15 1.879h43.233v-3.76H141.5v3.76ZM61.15 24.547a1.88 1.88 0 0 0 0-3.76v3.76ZM1 22.667 19.797 33.52V11.815L1 22.667Zm60.15-1.88H17.917v3.76H61.15v-3.76Z" fill="#0056B3"/></svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
|
|
@ -60,6 +60,7 @@ import { CoreSpacerComponent } from './spacer/spacer';
|
|||
import { CoreHorizontalScrollControlsComponent } from './horizontal-scroll-controls/horizontal-scroll-controls';
|
||||
import { CoreButtonWithSpinnerComponent } from './button-with-spinner/button-with-spinner';
|
||||
import { CoreSwipeSlidesComponent } from './swipe-slides/swipe-slides';
|
||||
import { CoreSwipeNavigationTourComponent } from './swipe-navigation-tour/swipe-navigation-tour';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
|
|
@ -102,6 +103,7 @@ import { CoreSwipeSlidesComponent } from './swipe-slides/swipe-slides';
|
|||
CoreComboboxComponent,
|
||||
CoreSpacerComponent,
|
||||
CoreHorizontalScrollControlsComponent,
|
||||
CoreSwipeNavigationTourComponent,
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
|
|
@ -151,6 +153,7 @@ import { CoreSwipeSlidesComponent } from './swipe-slides/swipe-slides';
|
|||
CoreComboboxComponent,
|
||||
CoreSpacerComponent,
|
||||
CoreHorizontalScrollControlsComponent,
|
||||
CoreSwipeNavigationTourComponent,
|
||||
],
|
||||
})
|
||||
export class CoreComponentsModule {}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<img src="assets/img/user-tours/swipe-navigation.svg" alt="" />
|
||||
<p>{{ 'core.swipenavigationtourdescription' | translate }}</p>
|
||||
<ion-button (click)="dismiss()" expand="block">
|
||||
{{ 'core.endonesteptour' | translate }}
|
||||
</ion-button>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
:host {
|
||||
max-width: 85vw;
|
||||
|
||||
img {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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 Swipe Navigation feature.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'core-swipe-navigation-tour',
|
||||
templateUrl: 'core-swipe-navigation-tour.html',
|
||||
styleUrls: ['swipe-navigation-tour.scss'],
|
||||
})
|
||||
export class CoreSwipeNavigationTourComponent {
|
||||
|
||||
/**
|
||||
* Dismiss User Tour.
|
||||
*/
|
||||
async dismiss(): Promise<void> {
|
||||
await CoreUserTours.dismiss();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -14,6 +14,8 @@
|
|||
|
||||
import { AfterViewInit, Directive, ElementRef, Input, OnDestroy } from '@angular/core';
|
||||
import { CoreSwipeNavigationItemsManager } from '@classes/items-management/swipe-navigation-items-manager';
|
||||
import { CoreSwipeNavigationTourComponent } from '@components/swipe-navigation-tour/swipe-navigation-tour';
|
||||
import { CoreUserTours } from '@features/usertours/services/user-tours';
|
||||
import { Gesture, GestureDetail } from '@ionic/angular';
|
||||
import { CoreScreen } from '@services/screen';
|
||||
import { GestureController, Platform } from '@singletons';
|
||||
|
|
@ -50,7 +52,8 @@ export class CoreSwipeNavigationDirective implements AfterViewInit, OnDestroy {
|
|||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
ngAfterViewInit(): void {
|
||||
async ngAfterViewInit(): Promise<void> {
|
||||
// Set up gesture listener
|
||||
const style = this.element.style;
|
||||
this.swipeGesture = GestureController.create({
|
||||
el: this.element,
|
||||
|
|
@ -71,6 +74,26 @@ export class CoreSwipeNavigationDirective implements AfterViewInit, OnDestroy {
|
|||
},
|
||||
});
|
||||
this.swipeGesture.enable();
|
||||
|
||||
// Show user tour.
|
||||
const source = this.manager?.getSource();
|
||||
|
||||
if (!source) {
|
||||
return;
|
||||
}
|
||||
|
||||
await source.waitForLoaded();
|
||||
|
||||
const items = source.getItems() ?? [];
|
||||
|
||||
if (items.length < 2) {
|
||||
return;
|
||||
}
|
||||
|
||||
await CoreUserTours.showIfPending({
|
||||
id: 'swipe-navigation',
|
||||
component: CoreSwipeNavigationTourComponent,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -302,6 +302,7 @@
|
|||
"submit": "Submit",
|
||||
"success": "Success",
|
||||
"summary": "Summary",
|
||||
"swipenavigationtourdescription": "Swipe left and right to navigate around.",
|
||||
"tablet": "Tablet",
|
||||
"teachers": "Teachers",
|
||||
"thereisdatatosync": "There are offline {{$a}} to be synchronised.",
|
||||
|
|
|
|||
Loading…
Reference in New Issue