Fixed issue in Firefox where NFT card checkboxes weren't working, lig…

…ht styling changes to modal buttons.
soonaverse · Mar 15, 2024 · 8056d88 · 8056d88
1 parent 4d47312
commit 8056d88
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 27 deletions.
diff --git a/src/app/components/nft/components/nft-card/nft-card.component.html b/src/app/components/nft/components/nft-card/nft-card.component.html
@@ -6,11 +6,14 @@
     'cursor-not-allowed opacity-50': nftSelected
   }"
 >
+  <!--
   <a
     class="flex flex-col h-full text-current hover:text-current"
     [routerLink]="nftSelected ? null : ['/', this.path, nft?.uid]"
     (click)="nftSelected ? $event.preventDefault() : null"
   >
+  -->
+  <a class="flex flex-col h-full ..." (click)="onCardClick($event, nft)">
     <div class="relative w-full h-40 overflow-hidden lg:h-60 rounded-2xl">
       <img
         loading="lazy"
@@ -58,6 +61,7 @@
       <div class="absolute top-4 right-4 z-10 flex items-center space-x-2">
         <div *ngIf="nftSelectable" class="flex items-center">
           <label
+            (click)="$event.stopPropagation()"
             nz-checkbox
             [nzChecked]="nftSelected"
             (nzCheckedChange)="toggleNftSelection($event)"

diff --git a/src/app/components/nft/components/nft-card/nft-card.component.ts b/src/app/components/nft/components/nft-card/nft-card.component.ts
@@ -126,7 +126,7 @@ export class NftCardComponent implements OnInit, OnDestroy {
       )
       .subscribe((isOwner) => {
         this.nftSelectable = isOwner && this.nft?.locked === false;
-        this.cd.markForCheck(); // Trigger change detection
+        this.cd.markForCheck();
       });
 
     this.nftSelectionSubscription$.add(nftSelectableSub);
@@ -243,18 +243,20 @@ export class NftCardComponent implements OnInit, OnDestroy {
     }
   }
 
-  ngOnDestroy() {
-    if (this.nftSelectionSubscription$) {
-      this.nftSelectionSubscription$.unsubscribe();
+  preventDefaultOnClick(event: MouseEvent): void {
+    if (this.nftSelected) {
+      event.preventDefault();
+      event.stopPropagation();
     }
-
-    this.cartSubscription$.unsubscribe();
   }
 
-  public toggleNftSelection(isChecked: boolean, event?: Event): void {
-    if (event) {
-      event.stopPropagation();
+  onCardClick(event: MouseEvent, nft: any): void {
+    if (!this.nftSelected) {
+      this.router.navigate(['/', this.path, nft?.uid]);
     }
+  }
+
+  public toggleNftSelection(isChecked: boolean): void {
     this.nftSelected = isChecked;
 
     const action = isChecked ? 'select' : 'deselect';
@@ -266,4 +268,12 @@ export class NftCardComponent implements OnInit, OnDestroy {
 
     this.cd.markForCheck();
   }
+
+  ngOnDestroy() {
+    if (this.nftSelectionSubscription$) {
+      this.nftSelectionSubscription$.unsubscribe();
+    }
+
+    this.cartSubscription$.unsubscribe();
+  }
 }
diff --git a/src/app/components/nft/components/nft-selection-toolbar/nft-selection-toolbar.component.html b/src/app/components/nft/components/nft-selection-toolbar/nft-selection-toolbar.component.html
@@ -9,21 +9,15 @@
       <div class="flex space-x-2 text-foregrounds-primary dark:text-foregrounds-primary-dark">
         <button
           nz-button
-          nzType="link"
-          class="text-lg text-foregrounds-primary dark:text-foregrounds-primary-dark"
+          nzType="default"
+          class="wen-btn-link mr-2"
           (click)="clearSelection()"
-          style="background-color: silver; border: 2px solid black"
+          i18n
         >
           Clear
         </button>
-        <button
-          nz-button
-          nzType="default"
-          (click)="openTransferModal()"
-          style="background-color: silver; border: 2px solid black"
-        >
-          Transfer
-        </button>
+
+        <button nz-button nzType="primary" (click)="openTransferModal()" i18n>Transfer</button>
       </div>
     </div>
   </div>

diff --git a/src/app/components/nft/components/nft-transfer/nft-transfer.component.html b/src/app/components/nft/components/nft-transfer/nft-transfer.component.html
@@ -168,9 +168,8 @@
         <nz-col nzSpan="24">
           <button
             nz-button
-            type="button"
             nzType="default"
-            class="wen-btn-link m-2"
+            class="wen-btn-link mr-2"
             (click)="handleCancel()"
             i18n
           >
@@ -179,22 +178,21 @@
 
           <button
             nz-button
-            nzType="link"
-            class="text-lg text-foregrounds-primary dark:text-foregrounds-primary-dark"
+            nzType="default"
+            class="text-red-600 hover:text-red-800 mr-2"
             (click)="clearSelection()"
-            style="background-color: silver; border: 2px solid black"
           >
-            Clear
+            Clear NFTs
           </button>
 
           <button
             *ngIf="auth.isLoggedIn$ | async"
             nz-button
             nzType="primary"
-            class="m-2"
             [disabled]="!canSubmit()"
             nz-tooltip
             [nzTooltipTitle]="getSubmitButtonTooltip()"
+            i18n
           >
             Transfer NFTs
           </button>