From 88a7eaed30b131761aefc83f220b1775f669309a Mon Sep 17 00:00:00 2001
From: fsdavid <daviti1@mail.com>
Date: Mon, 28 Jun 2021 23:16:29 +0200
Subject: [PATCH] Quick tour changes
---
common/constants.js | 2 +-
src/ui/quickTour/quickTourThis.directive.ts | 12 +++++++++++-
src/util/constants.ts | 7 ++++---
src/viewerModule/viewerCmp/viewerCmp.template.html | 11 ++++++-----
4 files changed, 22 insertions(+), 10 deletions(-)
diff --git a/common/constants.js b/common/constants.js
index 3b2b74b09..9fccab3c4 100644
--- a/common/constants.js
+++ b/common/constants.js
@@ -101,7 +101,7 @@
ATLAS_SELECTOR: `This is the atlas selector. Click here to choose between EBRAINS reference atlases of different species.`,
CHIPS: `These "chips" indicate the currently selected parcellation map as well as selected region. Click the chip to see different versions, if any. Click (i) to read more about a selected item. Click (x) to clear a selection.`,
SLICE_VIEW: `The planar views allow you to zoom in to full resolution (mouse wheel), pan the view (click+drag), and select oblique sections (shift+click+drag). You can double-click brain regions to select them.`,
- PERSPECTIVE_VIEW: `The 3D view gives an overview of the brain with limited resolution. It can be independently rotated. Click the „eye“ icon on the bottom left to toggle pure surface view.`,
+ PERSPECTIVE_VIEW: `The 3D view gives an overview of the brain with limited resolution. It can be independently rotated. On the 3d view you can find additional settings.`,
VIEW_ICONS: `Use these icons in any of the views to maximize it and zoom in/out.`,
TOP_MENU: `These icons provide access to plugins, pinned datasets, and user documentation. Use the profile icon to login with your EBRAINS account.`,
LAYER_SELECTOR: `This is the atlas layer browser. If an atlas supports multiple template spaces or parcellation maps, you will find them here.`,
diff --git a/src/ui/quickTour/quickTourThis.directive.ts b/src/ui/quickTour/quickTourThis.directive.ts
index 1493a3972..b7ccf2c7b 100644
--- a/src/ui/quickTour/quickTourThis.directive.ts
+++ b/src/ui/quickTour/quickTourThis.directive.ts
@@ -1,6 +1,7 @@
import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, TemplateRef } from "@angular/core";
import { QuickTourService } from "src/ui/quickTour/quickTour.service";
import { IQuickTourOverwritePosition, TQuickTourPosition } from "src/ui/quickTour/constrants";
+import {LOCAL_STORAGE_CONST} from "src/util/constants";
@Directive({
selector: '[quick-tour]',
@@ -14,7 +15,8 @@ export class QuickTourThis implements OnInit, OnChanges, OnDestroy {
@Input('quick-tour-position') position: TQuickTourPosition
@Input('quick-tour-overwrite-position') overwritePosition: IQuickTourOverwritePosition
@Input('quick-tour-overwrite-arrow') overWriteArrow: TemplateRef<any> | string
-
+ @Input('quick-tour-check-auto-start') quickTourCheckAutoStart: boolean
+
private attachedTmpl: ElementRef
constructor(
@@ -29,6 +31,14 @@ export class QuickTourThis implements OnInit, OnChanges, OnDestroy {
ngOnInit() {
this.quickTourService.register(this)
+
+ if (this.quickTourCheckAutoStart) {
+ if (!localStorage.getItem(LOCAL_STORAGE_CONST.QUICK_TOUR_VIEWED)) {
+ this.quickTourService.startTour()
+ localStorage.setItem(LOCAL_STORAGE_CONST.QUICK_TOUR_VIEWED, 'true')
+ }
+ }
+
}
ngOnChanges() {
diff --git a/src/util/constants.ts b/src/util/constants.ts
index 0236f4e41..7b3d33613 100644
--- a/src/util/constants.ts
+++ b/src/util/constants.ts
@@ -7,6 +7,7 @@ export const LOCAL_STORAGE_CONST = {
MOBILE_UI: 'fzj.xg.iv.MOBILE_UI',
AGREE_COOKIE: 'fzj.xg.iv.AGREE_COOKIE',
AGREE_KG_TOS: 'fzj.xg.iv.AGREE_KG_TOS',
+ QUICK_TOUR_VIEWED: 'fzj.dg.iv.QUICK_TOUR_VIEWED',
FAV_DATASET: 'fzj.xg.iv.FAV_DATASET_V2',
}
@@ -41,7 +42,7 @@ export const appendScriptFactory = (document: Document) => {
})
}
-export const REMOVE_SCRIPT_TOKEN: InjectionToken<(el: HTMLScriptElement) => void> = new InjectionToken(`REMOVE_SCRIPT_TOKEN`)
+export const REMOVE_SCRIPT_TOKEN: InjectionToken<(el: HTMLScriptElement) => void> = new InjectionToken(`REMOVE_SCRIPT_TOKEN`)
export const removeScriptFactory = (document: Document) => {
return (srcEl: HTMLScriptElement) => {
@@ -73,10 +74,10 @@ import { EnumColorMapName, mapKeyColorMap } from './colorMaps'
import { InjectionToken } from "@angular/core"
export const getShader = ({
- colormap = EnumColorMapName.GREYSCALE,
+ colormap = EnumColorMapName.GREYSCALE,
lowThreshold = 0,
highThreshold = 1,
- brightness = 0,
+ brightness = 0,
contrast = 0,
removeBg = false
} = {}): string => {
diff --git a/src/viewerModule/viewerCmp/viewerCmp.template.html b/src/viewerModule/viewerCmp/viewerCmp.template.html
index e94a1e79f..b4fc9ca93 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.template.html
+++ b/src/viewerModule/viewerCmp/viewerCmp.template.html
@@ -32,7 +32,7 @@
}">
</ng-container>
</div>
-
+
<annotating-tools-panel class="z-index-10">
</annotating-tools-panel>
</div>
@@ -52,7 +52,7 @@
</mat-card>
</div>
</iav-layout-fourcorners>
-
+
</mat-drawer-content>
</mat-drawer-container>
@@ -154,7 +154,8 @@
class="iv-custom-comp bg card m-2 mat-elevation-z2"
quick-tour
[quick-tour-description]="quickTourAtlasSelector.description"
- [quick-tour-order]="quickTourAtlasSelector.order">
+ [quick-tour-order]="quickTourAtlasSelector.order"
+ [quick-tour-check-auto-start]="true">
<atlas-dropdown-selector class="pe-all mt-2">
</atlas-dropdown-selector>
</div>
@@ -1090,12 +1091,12 @@
[ngTemplateOutlet]="tmplRef.tmpl"
[ngTemplateOutletContext]="{$implicit: tmplRef.data}">
</ng-template>
-
+
<!-- template not provided -->
<ng-template #fallbackTmpl>
{{ tmplRef.data.message || 'test' }}
</ng-template>
-
+
<mat-divider></mat-divider>
</mat-card-content>
</mat-card>
--
GitLab