diff --git a/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.component.ts b/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.component.ts index 541b428be133981a956008ca640e2b2a67a52cf1..27d4a53cc941a95164407b86f61825c01df1527f 100644 --- a/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.component.ts +++ b/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.component.ts @@ -1,5 +1,5 @@ -import { Component, EventEmitter, Input, OnChanges, Output } from "@angular/core"; -import { concat, Observable, of, timer } from "rxjs"; +import { Component, EventEmitter, Input, OnChanges, Output, SimpleChange, SimpleChanges } from "@angular/core"; +import { BehaviorSubject, concat, Observable, of, timer } from "rxjs"; import { SapiParcellationModel } from "src/atlasComponents/sapi/type"; import { ParcellationVisibilityService } from "../parcellationVis.service"; import { ARIA_LABELS } from "common/constants" @@ -38,7 +38,11 @@ export class SapiViewsCoreParcellationParcellationSmartChip implements OnChanges otherVersions: SapiParcellationModel[] - ngOnChanges() { + ngOnChanges(changes: SimpleChanges) { + const { parcellation } = changes + if (parcellation) { + this.onDismissClicked$.next(false) + } this.otherVersions = [] if (!this.parcellation) { return @@ -82,6 +86,8 @@ export class SapiViewsCoreParcellationParcellationSmartChip implements OnChanges } dismiss(){ + if (this.onDismissClicked$.value) return + this.onDismissClicked$.next(true) this.onDismiss.emit(this.parcellation) } @@ -93,4 +99,6 @@ export class SapiViewsCoreParcellationParcellationSmartChip implements OnChanges trackByFn(parc: SapiParcellationModel){ return parc["@id"] } + + onDismissClicked$ = new BehaviorSubject<boolean>(false) } diff --git a/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.style.css b/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.style.css index 93caeb8c21b229a9d3a4efb5a9219e9f604163d3..e8d0ca357ccbfe577e65a2f9d78c1589227cbf33 100644 --- a/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.style.css +++ b/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.style.css @@ -5,20 +5,6 @@ margin: 0.5rem; } -.otherversion-wrapper.loading > sxplr-sapiviews-core-parcellation-chip -{ - animation: blink 500ms ease-in-out infinite alternate; -} - -@keyframes blink { - 0% { - opacity: 0.8; - } - 100% { - opacity: 0.5; - } -} - .otherversion-wrapper.loading > .spinner-container { position: absolute; diff --git a/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.template.html b/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.template.html index b21af3c775b330b100c4aa8c3e877fdc88237dfd..e56b6b69b9fc9405c4efb29900f9a448921839cf 100644 --- a/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.template.html +++ b/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.template.html @@ -10,7 +10,10 @@ }"> - <sxplr-sapiviews-core-parcellation-chip + <sxplr-sapiviews-core-parcellation-chip + [ngClass]="{ + 'sxplr-blink': (loadingParc$ | async) === parc + }" [sxplr-sapiviews-core-parcellation-chip-parcellation]="parc" [sxplr-sapiviews-core-parcellation-chip-color]="(parcellation | equality : parc : trackByFn) ? 'primary' : 'default'" (sxplr-sapiviews-core-parcellation-chip-onclick)="selectParcellation(parc)"> @@ -28,7 +31,8 @@ <sxplr-sapiviews-core-parcellation-chip [ngClass]="{ - 'sxplr-muted': !(parcellationVisibility$ | async) + 'sxplr-muted': !(parcellationVisibility$ | async), + 'sxplr-blink': onDismissClicked$ | async }" class="sxplr-d-inline-block" [sxplr-sapiviews-core-parcellation-chip-parcellation]="parcellation" @@ -63,7 +67,12 @@ color="primary" iav-stop="mousedown click" (click)="dismiss()"> - <i class="fas fa-times"></i> + + <spinner-cmp class="sxplr-w-100 sxplr-h-100" *ngIf="onDismissClicked$ | async; else defaultDismissIcon"></spinner-cmp> + <ng-template #defaultDismissIcon> + <i class="fas fa-times"></i> + </ng-template> + </button> </div> </sxplr-sapiviews-core-parcellation-chip> diff --git a/src/overwrite.scss b/src/overwrite.scss index a6b3e9f55255d3080d58a94e7be6aedce47fc890..790e436d35acc4e970127548ec060fa796b6a650 100644 --- a/src/overwrite.scss +++ b/src/overwrite.scss @@ -264,4 +264,18 @@ $flex-directions: row,column; .#{$nsp}-flex-static { flex: 0 0 auto; -} \ No newline at end of file +} + +.#{$nsp}-blink +{ + animation: blink 500ms ease-in-out infinite alternate; +} + +@keyframes blink { + 0% { + opacity: 0.8; + } + 100% { + opacity: 0.5; + } +}