feat(tour): also add swipe tutorial

This commit is contained in:
Johannes Millan 2024-01-26 16:31:31 +01:00
parent 77fdc514bf
commit 95ac2e484e
3 changed files with 32 additions and 7 deletions

View file

@ -6,7 +6,7 @@ import { filter, first, map, switchMap } from 'rxjs/operators';
import { Actions, ofType } from '@ngrx/effects';
import { addTask, deleteTask, updateTask } from '../tasks/store/task.actions';
import { GlobalConfigState } from '../config/global-config.model';
import { IS_MOUSE_PRIMARY } from '../../util/is-mouse-primary';
import { IS_MOUSE_PRIMARY, IS_TOUCH_PRIMARY } from '../../util/is-mouse-primary';
import { NavigationEnd, Router } from '@angular/router';
import { promiseTimeout } from '../../util/promise-timeout';
import { hideAddTaskBar } from '../../core-ui/layout/store/layout.actions';
@ -234,13 +234,37 @@ export const SHEPHERD_STEPS = (
? [
{
title: 'Edit Task Title',
text: '<p>You can edit the task title by clicking on it. Do this now and change the task title to something else.',
text: '<p>You can edit the task title by clicking on it. Do this now and change the task title to something else.</p>',
attachTo: {
element: '.task-title',
on: 'bottom' as any,
},
beforeShowPromise: () => promiseTimeout(500),
...nextOnObs(actions$.pipe(ofType(updateTask)), shepherdService, () => {}),
...nextOnObs(actions$.pipe(ofType(updateTask)), shepherdService),
},
]
: []),
//
...(IS_TOUCH_PRIMARY
? [
{
title: 'Marking tasks as done',
text: '<p>You can mark tasks as done by swiping them to the right</p><p>Swiping to the left will open up the schedule Dialog.</p><p><em>Swipe right</em> now to mark the task as done!</p>',
attachTo: {
element: '.tour-undoneList task',
on: 'bottom' as any,
},
...nextOnObs(actions$.pipe(ofType(updateTask)), shepherdService),
},
{
title: 'Marking tasks as undone',
text: '<p>You can mark tasks as undone again by swiping it to the right</p>',
attachTo: {
element: '.tour-doneList task',
on: 'bottom' as any,
},
beforeShowPromise: () => promiseTimeout(500),
...nextOnObs(actions$.pipe(ofType(updateTask)), shepherdService),
},
]
: []),
@ -257,7 +281,7 @@ export const SHEPHERD_STEPS = (
element: 'task',
on: 'bottom',
},
beforeShowPromise: () => promiseTimeout(1500),
beforeShowPromise: () => promiseTimeout(300),
when: (() => {
let intId: number;
return {
@ -282,7 +306,7 @@ export const SHEPHERD_STEPS = (
{
id: TourId.Projects,
title: 'Projects',
text: 'You can create different task lists by using projects.',
text: 'If you have lots of tasks, you probably need more than a single task list. One way of creating different lists is by using projects.',
buttons: [NEXT_BTN],
},
{

View file

@ -46,8 +46,7 @@ export class ShepherdService {
) as any,
);
this.start();
// this.show(TourId.Projects);
// this.show(TourId.FinalCongrats);
// this.show('XXX' as TourId);
}
async show(id: TourId): Promise<void> {

View file

@ -218,6 +218,7 @@
</button>
</div>
<task-list
class="tour-undoneList"
[tasks]="undoneTasks"
listId="PARENT"
listModelId="UNDONE"
@ -231,6 +232,7 @@
{{T.WW.COMPLETED_TASKS|translate}}
</h2>
<task-list
class="tour-doneList"
[noTasksMsg]="T.WW.NO_COMPLETED_TASKS|translate"
[tasks]="doneTasks"
listId="PARENT"