chore: add user doc link to quick one pager

chore: relayout of quick one pager
minor refactor, removal of unused vars

common/constants.js

@@ -6,6 +6,7 @@
     OPEN: 'Open',
     EXPAND: 'Expand',
     COLLAPSE: 'Collapse',
+    OPEN_IN_NEW_WINDOW: 'Open in a new window',
 
     // dataset specific
     EXPLORE_DATASET_IN_KG: `Explore dataset in Knowledge Graph`,

common/helpOnePager.md

@@ -6,7 +6,7 @@
 | Translate / Pan | `[drag]` any of the slice views | `[drag]` any of the slice views |
 | Oblique rotation | `<shift>` + `[drag]` any of the slice views | `[rotate]` any of the slice views |
 | Zoom | `[mousewheel]` | `[pinch zoom]` |
-| Zoom | `[hover]` on any slice views, `[click]` magnifier | `[tap]` on magnifier |
+| Zoom | `[hover]` on any slice views > `[click]` magnifier | `[tap]` on magnifier |
 | Next slice | `<ctrl>` + `[mousewheel]` | - |
 | Next 10 slice | `<ctrl>` + `<shift>` + `[mousewheel]` | - |
 | Toggle delineation | `[q]` | - |

src/atlasViewer/atlasViewer.constantService.service.ts

@@ -133,48 +133,6 @@ Interactive atlas viewer requires **webgl2.0**, and the \`EXT_color_buffer_float
    */
   public showConfigTitle: string = 'Settings'
 
-  private showHelpGeneralMobile = [
-    ['hold 🌏 + ↕', 'change oblique slice mode'],
-    ['hold 🌏 + ↔', 'oblique slice'],
-  ]
-  private showHelpGeneralDesktop = [
-    ['num keys [0-9]', 'toggle layer visibility [0-9]'],
-    ['h', 'show help'],
-    ['?', 'show help'],
-    ['o', 'toggle perspective/orthographic'],
-  ]
-
-  public showHelpGeneralMap = this.showHelpGeneralDesktop
-
-  private showHelpSliceViewMobile = [
-    ['drag', 'pan'],
-  ]
-  private showHelpSliceViewDesktop = [
-    ['drag', 'pan'],
-    ['shift + drag', 'oblique slice'],
-  ]
-
-  public showHelpSliceViewMap = this.showHelpSliceViewDesktop
-
-  private showHelpPerspectiveMobile = [
-    ['drag', 'change perspective view'],
-  ]
-
-  private showHelpPerspectiveDesktop = [
-    ['drag', 'change perspective view'],
-  ]
-  public showHelpPerspectiveViewMap = this.showHelpPerspectiveDesktop
-
-  public repoUrl = `https://github.com/HumanBrainProject/interactive-viewer`
-  public supportEmailAddress = `support@ebrains.eu`
-  public docUrl = `https://interactive-viewer.readthedocs.io/en/latest/`
-
-  public showHelpSupportText: string = `Did you encounter an issue?
-Send us an email: <a target = "_blank" href = "mailto:${this.supportEmailAddress}">${this.supportEmailAddress}</a>
-
-Raise/track issues at github repo: <a target = "_blank" href = "${this.repoUrl}">${this.repoUrl}</a>
-`
-
   public incorrectParcellationNameSearchParam(title) {
     return `The selected parcellation - ${title} - is not available. The the first parcellation of the template is selected instead.`
   }
@@ -202,22 +160,6 @@ Raise/track issues at github repo: <a target = "_blank" href = "${this.repoUrl}"
     this.subscriptions.push(
       this.darktheme$.subscribe(flag => this.darktheme = flag),
     )
-
-    this.subscriptions.push(
-      this.pureConstantService.useTouchUI$.subscribe(bool => {
-        if (bool) {
-          this.showHelpSliceViewMap = this.showHelpSliceViewMobile
-          this.showHelpGeneralMap = this.showHelpGeneralMobile
-          this.showHelpPerspectiveViewMap = this.showHelpPerspectiveMobile
-          this.dissmissUserLayerSnackbarMessage = this.dissmissUserLayerSnackbarMessageMobile
-        } else {
-          this.showHelpSliceViewMap = this.showHelpSliceViewDesktop
-          this.showHelpGeneralMap = this.showHelpGeneralDesktop
-          this.showHelpPerspectiveViewMap = this.showHelpPerspectiveDesktop
-          this.dissmissUserLayerSnackbarMessage = this.dissmissUserLayerSnackbarMessageDesktop
-        }
-      }),
-    ),
     this.pureConstantService.getTemplateEndpoint$.subscribe(arr => {
       this.totalTemplates = arr.length
     })
@@ -238,9 +180,6 @@ Raise/track issues at github repo: <a target = "_blank" href = "${this.repoUrl}"
     })
   }
 
-  private dissmissUserLayerSnackbarMessageDesktop = `You can dismiss extra layers with [ESC]`
-  private dissmissUserLayerSnackbarMessageMobile = `You can dismiss extra layers in the 🌏 menu`
-  public dissmissUserLayerSnackbarMessage: string = this.dissmissUserLayerSnackbarMessageDesktop
 }
 
 export const UNSUPPORTED_PREVIEW = [{

src/ui/help/about/about.component.ts

 import { Component } from '@angular/core'
-import { DomSanitizer } from '@angular/platform-browser';
-import { AtlasViewerConstantsServices } from 'src/atlasViewer/atlasViewer.constantService.service';
+import { PureContantService } from 'src/util';
 
 @Component({
   selector: 'iav-about',
@@ -11,12 +10,6 @@ import { AtlasViewerConstantsServices } from 'src/atlasViewer/atlasViewer.consta
 })
 
 export class AboutCmp {
-
-  public generalHelp = this.constantService.showHelpGeneralMap
-  public sliceviewHelp = this.constantService.showHelpSliceViewMap
-  public perspectiveviewHelp = this.constantService.showHelpPerspectiveViewMap
-  public supportText = this.sanitizer.bypassSecurityTrustHtml(this.constantService.showHelpSupportText)
-
   public contactEmailHref: string = `mailto:${this.constantService.supportEmailAddress}?Subject=[InteractiveAtlasViewer]%20Queries`
   public supportEmailAddress: string = this.constantService.supportEmailAddress
 
@@ -24,8 +17,7 @@ export class AboutCmp {
   public repoUrl = this.constantService.repoUrl
 
   constructor(
-    private constantService: AtlasViewerConstantsServices,
-    private sanitizer: DomSanitizer,
+    private constantService: PureContantService,
   ) {
   }
 }

src/ui/help/helpOnePager/helpOnePager.component.ts

 import { Component, Optional } from "@angular/core";
 import QUICK_STARTER from '!!raw-loader!common/helpOnePager.md'
 import { PureContantService } from "src/util";
+import { ARIA_LABELS } from 'common/constants'
 
 @Component({
   selector: 'help-one-pager',
@@ -11,13 +12,16 @@ import { PureContantService } from "src/util";
 })
 
 export class HelpOnePager{
+  public ARIA_LABELS = ARIA_LABELS
   public QUICK_STARTER_MD = QUICK_STARTER
   public extQuickStarter: string
+  public userDoc: string
   constructor(
     @Optional() pConstService: PureContantService
   ){
-    if (pConstService?.backendUrl) {
-      this.extQuickStarter = `quickstart.html`
+    this.extQuickStarter = `quickstart.html`
+    if (pConstService) {
+      this.userDoc = pConstService.docUrl
     }
   }
 }

src/ui/help/helpOnePager/helpOnePager.template.html

-<markdown-dom mat-dialog-content [markdown]="QUICK_STARTER_MD">
-</markdown-dom>
+<div class="position-relative">
+  <markdown-dom mat-dialog-content [markdown]="QUICK_STARTER_MD">
+  </markdown-dom>
+
+  <a *ngIf="extQuickStarter"
+    [href]="extQuickStarter"
+    target="_blank"
+    class="position-absolute top-0 right-0"
+    [matTooltip]="ARIA_LABELS.OPEN_IN_NEW_WINDOW">
+    <button mat-icon-button
+      color="primary">
+      <i class = "m-1 fas fa-external-link-alt"></i>
+    </button>
+  </a>
+</div>
 
 <div mat-dialog-actions align="center">
   <button mat-button color="primary" mat-dialog-close quick-tour-opener>
-    <span class="d-flex align-items-center">
+    <i class = "far fa-play-circle m-1"></i>
+    <span>
       Take a tour
-      <i class = "far fa-play-circle ml-1"></i>
     </span>
   </button>
 
-  <a *ngIf="extQuickStarter"
-    [href]="extQuickStarter"
+  <a *ngIf="userDoc"
+    [href]="userDoc"
     target="_blank">
-    <button mat-raised-button
+    <button mat-button
       color="primary">
-      <span iav-media-query #iavMediaQuery="iavMediaQuery">
-        Open <ng-template [ngIf]="(iavMediaQuery.mediaBreakPoint$ | async) < 3">in new window</ng-template>
+      <i class="m1 fas fa-book-open"></i>
+      <span>
+        User documentation
       </span>
-      <i class = "fas fa-external-link-alt"></i>
+      <i class="m-1 fas fa-external-link-alt"></i>
     </button>
   </a>
 

src/util/pureConstant.service.ts

@@ -17,6 +17,16 @@ const getUniqueId = () => Math.round(Math.random() * 1e16).toString(16)
 
 export class PureContantService implements OnDestroy{
   
+  public repoUrl = `https://github.com/HumanBrainProject/interactive-viewer`
+  public supportEmailAddress = `support@ebrains.eu`
+  public docUrl = `https://interactive-viewer.readthedocs.io/en/latest/`
+
+  public showHelpSupportText: string = `Did you encounter an issue?
+Send us an email: <a target = "_blank" href = "mailto:${this.supportEmailAddress}">${this.supportEmailAddress}</a>
+
+Raise/track issues at github repo: <a target = "_blank" href = "${this.repoUrl}">${this.repoUrl}</a>
+`
+
   public useTouchUI$: Observable<boolean>
   public fetchedAtlases$: Observable<any>
   public darktheme$: Observable<boolean>