From 467c5d8445341545de51e6298bbf0463e4fb7e34 Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Fri, 9 Apr 2021 17:58:48 +0200
Subject: [PATCH] chore: re-added tour pagination/position
---
src/res/css/extra_styles.css | 5 +++++
src/ui/quickTour/quickTour.service.ts | 7 +------
.../quickTourComponent/quickTour.component.ts | 19 ++++++++++++++++++-
.../quickTour.template.html | 5 +++++
src/util/LinkedList.ts | 16 ++++++++++++++--
5 files changed, 43 insertions(+), 9 deletions(-)
diff --git a/src/res/css/extra_styles.css b/src/res/css/extra_styles.css
index 88e4a8d10..c52fbef10 100644
--- a/src/res/css/extra_styles.css
+++ b/src/res/css/extra_styles.css
@@ -438,6 +438,11 @@ markdown-dom pre code
opacity: 0.5!important;
}
+.muted-3
+{
+ opacity: 0.3!important;
+}
+
.card
{
background:none;
diff --git a/src/ui/quickTour/quickTour.service.ts b/src/ui/quickTour/quickTour.service.ts
index 5bac137e8..d4a7552c2 100644
--- a/src/ui/quickTour/quickTour.service.ts
+++ b/src/ui/quickTour/quickTour.service.ts
@@ -6,7 +6,7 @@ import { QuickTourThis } from "./quickTourThis.directive";
import { DoublyLinkedList, IDoublyLinkedItem } from 'src/util'
import { QUICK_TOUR_CMP_INJTKN } from "./constrants";
-export function findInLinkedList<T>(first: IDoublyLinkedItem<T>, predicate: (linkedObj: IDoublyLinkedItem<T>) => boolean): IDoublyLinkedItem<T>{
+export function findInLinkedList<T extends object>(first: IDoublyLinkedItem<T>, predicate: (linkedObj: IDoublyLinkedItem<T>) => boolean): IDoublyLinkedItem<T>{
let compareObj = first,
returnObj: IDoublyLinkedItem<T> = null
@@ -43,11 +43,6 @@ export class QuickTourService {
*/
@Inject(QUICK_TOUR_CMP_INJTKN) private quickTourCmp: any,
){
-
- // todo remove in production
- setTimeout(() => {
- this.startTour()
- }, 2500)
}
public register(dir: QuickTourThis) {
diff --git a/src/ui/quickTour/quickTourComponent/quickTour.component.ts b/src/ui/quickTour/quickTourComponent/quickTour.component.ts
index 471bd58f7..393b025d2 100644
--- a/src/ui/quickTour/quickTourComponent/quickTour.component.ts
+++ b/src/ui/quickTour/quickTourComponent/quickTour.component.ts
@@ -5,7 +5,7 @@ import {
SecurityContext,
TemplateRef,
} from "@angular/core";
-import { Subscription } from "rxjs";
+import { combineLatest, Subscription } from "rxjs";
import { QuickTourService } from "../quickTour.service";
import { debounceTime, map, shareReplay} from "rxjs/operators";
import { DomSanitizer } from "@angular/platform-browser";
@@ -68,6 +68,23 @@ export class QuickTourComponent {
map(val => val.thisObj.description)
)
+ private quickTourSize$ = this.currTipLinkedObj$.pipe(
+ map(val => val.list.size())
+ )
+
+ private quickTourIdx$ = this.currTipLinkedObj$.pipe(
+ map(val => val.index)
+ )
+
+ public quickTourProgress$ = combineLatest([
+ this.quickTourSize$,
+ this.quickTourIdx$
+ ]).pipe(
+ map(([ size, idx ]) => {
+ return Array(size).fill(false).map((_, index) => index === idx ? 'active' : _)
+ })
+ )
+
public overwrittenPosition = this.currTipLinkedObj$.pipe(
map(val => val.thisObj.overwritePosition)
)
diff --git a/src/ui/quickTour/quickTourComponent/quickTour.template.html b/src/ui/quickTour/quickTourComponent/quickTour.template.html
index af7277221..d99b89dbe 100644
--- a/src/ui/quickTour/quickTourComponent/quickTour.template.html
+++ b/src/ui/quickTour/quickTourComponent/quickTour.template.html
@@ -22,6 +22,11 @@
(click)="endTour()">
<i class="fas fa-times"></i>
</button>
+ <span class="muted d-inline-flex align-items-center">
+ <i *ngFor="let active of quickTourProgress$ | async"
+ [ngClass]="{ 'fa-xs muted-3': !active }"
+ class="ml-1 fas fa-circle"></i>
+ </span>
</mat-card-actions>
</mat-card>
diff --git a/src/util/LinkedList.ts b/src/util/LinkedList.ts
index 86f2ab618..5432aaafe 100644
--- a/src/util/LinkedList.ts
+++ b/src/util/LinkedList.ts
@@ -1,7 +1,9 @@
-export interface IDoublyLinkedItem<T> {
+export interface IDoublyLinkedItem<T extends object> {
next: IDoublyLinkedItem<T>
prev: IDoublyLinkedItem<T>
thisObj: T
+ readonly index: number
+ list: DoublyLinkedList<T>
}
export class DoublyLinkedList<T extends object>{
@@ -32,7 +34,17 @@ export class DoublyLinkedList<T extends object>{
const newDoublyLinkedItem: IDoublyLinkedItem<T> = {
prev: insertAfter,
next: newDoublyLinkedItemNext,
- thisObj: element
+ thisObj: element,
+ get index() {
+ let count = 0, prev: IDoublyLinkedItem<T>
+ prev = this.prev
+ while (prev) {
+ prev = prev.prev
+ count ++
+ }
+ return count
+ },
+ list: this
}
/**
--
GitLab