From 837d3a2ed0bdf66ccc14f0d1a9beba71a75864ae Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Wed, 22 Jun 2022 10:47:15 +0200
Subject: [PATCH] chore: click feedback on dismiss layer

---
 .../parcellation.smartChip.component.ts          | 14 +++++++++++---
 .../smartChip/parcellation.smartChip.style.css   | 14 --------------
 .../parcellation.smartChip.template.html         | 15 ++++++++++++---
 src/overwrite.scss                               | 16 +++++++++++++++-
 4 files changed, 38 insertions(+), 21 deletions(-)

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 541b428be..27d4a53cc 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 93caeb8c2..e8d0ca357 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 b21af3c77..e56b6b69b 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 a6b3e9f55..790e436d3 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;
+  }
+}
-- 
GitLab