diff --git a/src/atlasViewer/atlasViewer.component.ts b/src/atlasViewer/atlasViewer.component.ts
index 9d888e533a21cee521bf6b6b3d5359b875946d42..8092e5718b2345e49e695922deadb73041c7eeb8 100644
--- a/src/atlasViewer/atlasViewer.component.ts
+++ b/src/atlasViewer/atlasViewer.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostBinding, ViewChild, ViewContainerRef, ComponentFactoryResolver, ComponentFactory, OnDestroy, ElementRef, ComponentRef, AfterViewInit, OnInit, HostListener, Renderer2 } from "@angular/core";
+import { Component, HostBinding, ViewChild, ViewContainerRef, ComponentFactoryResolver, ComponentFactory, OnDestroy, ElementRef, ComponentRef, AfterViewInit, OnInit, HostListener, Renderer2, TemplateRef } from "@angular/core";
import { Store, select } from "@ngrx/store";
import { ViewerStateInterface, isDefined, FETCHED_SPATIAL_DATA, UPDATE_SPATIAL_DATA, TOGGLE_SIDE_PANEL, safeFilter } from "../services/stateStore.service";
import { Observable, Subscription, combineLatest } from "rxjs";
@@ -183,7 +183,12 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
? config
: {})
const toastComponent = this.toastContainer.createComponent(this.toastComponentFactory)
- toastComponent.instance.message = message
+ if(typeof message === 'string')
+ toastComponent.instance.message = message
+ if(message instanceof TemplateRef){
+ toastComponent.instance.messageContainer.createEmbeddedView(message as TemplateRef<any>)
+ }
+
toastComponent.instance.dismissable = _config.dismissable
toastComponent.instance.timeout = _config.timeout
diff --git a/src/components/toast/toast.animation.ts b/src/components/toast/toast.animation.ts
index 56d60cc44ab6884509c6aed9c9f32c05a5d36960..b3b96abd4ae4824df57af6d51ab3b89e06500344 100644
--- a/src/components/toast/toast.animation.ts
+++ b/src/components/toast/toast.animation.ts
@@ -3,7 +3,7 @@ import { trigger, state, style, transition, animate } from "@angular/animations"
export const toastAnimation = trigger('exists',[
state('*',
style({
- height : '2em',
+ height : '*',
opacity : 1
})),
state('void',
@@ -11,6 +11,6 @@ export const toastAnimation = trigger('exists',[
height: '0em',
opacity : 0
})),
- transition('* => void', animate('180ms ease-in')),
- transition('void => *', animate('180ms ease-out'))
+ transition('* => void', animate('180ms ease-in')),
+ transition('void => *', animate('180ms ease-out'))
])
\ No newline at end of file
diff --git a/src/components/toast/toast.component.ts b/src/components/toast/toast.component.ts
index b26a38cc6fc5643ef489a577bc40f8e1bfaa30cb..a2d4599f706b2dfbc21a4e6698f103d075e27ba2 100644
--- a/src/components/toast/toast.component.ts
+++ b/src/components/toast/toast.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, ViewContainerRef, ViewChild, Output, EventEmitter, HostBinding } from "@angular/core";
+import { Component, Input, ViewContainerRef, ViewChild, Output, EventEmitter, HostBinding, ElementRef, ChangeDetectionStrategy, OnInit } from "@angular/core";
import { toastAnimation } from "./toast.animation";
@Component({
@@ -7,10 +7,11 @@ import { toastAnimation } from "./toast.animation";
styleUrls : ['./toast.style.css'],
animations : [
toastAnimation
- ]
+ ],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
-export class ToastComponent{
+export class ToastComponent implements OnInit{
@Input() message : string
@Input() timeout : number = 0
@Input() dismissable : boolean = true
diff --git a/src/components/toast/toast.style.css b/src/components/toast/toast.style.css
index ea60d77d0db1bb172a7b7919632539bd2b8761b7..d3e835e4630d5a15ac03ee3d7224781ec459e17e 100644
--- a/src/components/toast/toast.style.css
+++ b/src/components/toast/toast.style.css
@@ -3,7 +3,7 @@
pointer-events: none;
text-align:center;
margin-bottom:5px;
- height:2em;
+ min-height: 2em;
}
div[container]
@@ -26,6 +26,11 @@ div[container]
color : rgba(255,255,255,0.8);
}
+div[message]
+{
+ vertical-align: middle;
+}
+
div[message],
div[close]
{
diff --git a/src/services/toastService.service.ts b/src/services/toastService.service.ts
index 265a1095a5f3a28df8eeb4f9980f4d3a2dd212bf..6c755753f0165ba18eca5b3e4e73f40298592e1f 100644
--- a/src/services/toastService.service.ts
+++ b/src/services/toastService.service.ts
@@ -1,10 +1,10 @@
-import { Injectable } from "@angular/core";
+import { Injectable, TemplateRef } from "@angular/core";
@Injectable({
providedIn : 'root'
})
export class ToastService{
- showToast: (message: string, config?: Partial<ToastConfig>)=>()=>void
+ showToast: (message: string | TemplateRef<any>, config?: Partial<ToastConfig>)=>()=>void
}
export interface ToastConfig{
diff --git a/src/ui/nehubaContainer/nehubaContainer.style.css b/src/ui/nehubaContainer/nehubaContainer.style.css
index 13e9fe21bb986f3031f73b4ccbd69237d45369e3..73d82c86d42674388cae498fb89fa009fb967829 100644
--- a/src/ui/nehubaContainer/nehubaContainer.style.css
+++ b/src/ui/nehubaContainer/nehubaContainer.style.css
@@ -140,8 +140,8 @@ div.loadingIndicator div.spinnerAnimationCircle
[desktopTemplateCitation]
{
- padding: 0 1em;
- display:block;
+ padding: 0.6em 0 0 0.6em;
+ font-size:200%;
}
div[mobileObliqueCtrl]
@@ -177,4 +177,11 @@ div[mobileObliqueGuide]
display:flex;
flex-direction: column;
align-items: center;
+}
+
+template-parcellation-citation-container
+{
+ width: 500px;
+ max-width: 100%;
+ display:block;
}
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html
index b5dc6adee1edda3dfcc24642b91cd6305e8182e7..57b4f9eb785907ae756562628144f1922ad977e0 100644
--- a/src/ui/nehubaContainer/nehubaContainer.template.html
+++ b/src/ui/nehubaContainer/nehubaContainer.template.html
@@ -91,8 +91,13 @@
<!-- TODO export status card to its own container -->
<div statusCard>
- <template-parcellation-citation-container desktopTemplateCitation *ngIf = "!isMobile">
- </template-parcellation-citation-container>
+ <div desktopTemplateCitation *ngIf = "!isMobile">
+ <i
+ [toastLength] = "7000"
+ [showToast] =
+ "templateAtlasCitations"
+ class="glyphicon glyphicon-info-sign"></i>
+ </div>
<hr *ngIf = "showCitation && !isMobile" />
@@ -145,4 +150,12 @@
<div mobileObliqueCtrl initiator>
<i class="glyphicon glyphicon-globe"></i>
</div>
-</mobile-overlay>
\ No newline at end of file
+</mobile-overlay>
+
+<ng-template #templateAtlasCitations>
+ <h4>
+ Citations for {{ selectedTemplate ? selectedTemplate.name : '' }} and {{ selectedParcellation ? selectedParcellation.name : '' }}
+ </h4>
+ <template-parcellation-citation-container>
+ </template-parcellation-citation-container>
+</ng-template>
\ No newline at end of file
diff --git a/src/ui/ui.module.ts b/src/ui/ui.module.ts
index 330f79c7c7b9aa3e0bb53eb99140f81c212ba91b..d11c1abf83ba42f8a09d73b0a189a8833f344235 100644
--- a/src/ui/ui.module.ts
+++ b/src/ui/ui.module.ts
@@ -38,6 +38,7 @@ import { LogoContainer } from "./logoContainer/logoContainer.component";
import { TemplateParcellationCitationsContainer } from "./templateParcellationCitations/templateParcellationCitations.component";
import { MobileOverlay } from "./nehubaContainer/mobileOverlay/mobileOverlay.component";
import { FilterNullPipe } from "../util/pipes/filterNull.pipe";
+import { ShowToastDirective } from "../util/directives/showToast.directive";
@NgModule({
@@ -85,7 +86,8 @@ import { FilterNullPipe } from "../util/pipes/filterNull.pipe";
FilterNullPipe,
/* directive */
- DownloadDirective
+ DownloadDirective,
+ ShowToastDirective
],
entryComponents : [
diff --git a/src/util/directives/showToast.directive.ts b/src/util/directives/showToast.directive.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0062b5737168d0142e7de75752a9389e1ba992a6
--- /dev/null
+++ b/src/util/directives/showToast.directive.ts
@@ -0,0 +1,42 @@
+import { Directive, Input, TemplateRef, HostListener } from "@angular/core";
+import { ToastService } from "../../services/toastService.service";
+
+@Directive({
+ selector: '[showToast]'
+})
+
+export class ShowToastDirective{
+ @Input()
+ showToast : string | TemplateRef<any> = null
+
+ private _toastLength: number = 1000
+
+ @Input()
+ set toastLength(input:any){
+ if(typeof input === 'number'){
+ this._toastLength = input
+ return
+ }
+
+ const parsedNumber = Number(input)
+ if(!Number.isNaN(parsedNumber)){
+ this._toastLength = parsedNumber
+ }
+ }
+
+ get toastLength(){
+ return this._toastLength
+ }
+
+ @HostListener('click', ['$event.target'])
+ click(ev:MouseEvent){
+
+ this.toastService.showToast(this.showToast, {
+ dismissable: true,
+ timeout: this.toastLength
+ })
+ }
+
+ constructor(private toastService:ToastService){
+ }
+}
\ No newline at end of file