From cd3c2b623ebd952ce4f23c48d0b73b6a3f28d13d Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Tue, 20 Nov 2018 18:12:06 +0100
Subject: [PATCH] feat: toastDirective feat: refactored template atlas
citations
---
src/atlasViewer/atlasViewer.component.ts | 9 +++-
src/components/toast/toast.animation.ts | 6 +--
src/components/toast/toast.component.ts | 7 ++--
src/components/toast/toast.style.css | 7 +++-
src/services/toastService.service.ts | 4 +-
.../nehubaContainer/nehubaContainer.style.css | 11 ++++-
.../nehubaContainer.template.html | 19 +++++++--
src/ui/ui.module.ts | 4 +-
src/util/directives/showToast.directive.ts | 42 +++++++++++++++++++
9 files changed, 92 insertions(+), 17 deletions(-)
create mode 100644 src/util/directives/showToast.directive.ts
diff --git a/src/atlasViewer/atlasViewer.component.ts b/src/atlasViewer/atlasViewer.component.ts
index 9d888e533..8092e5718 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 56d60cc44..b3b96abd4 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 b26a38cc6..a2d4599f7 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 ea60d77d0..d3e835e46 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 265a1095a..6c755753f 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 13e9fe21b..73d82c86d 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 b5dc6adee..57b4f9eb7 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 330f79c7c..d11c1abf8 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 000000000..0062b5737
--- /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
--
GitLab