From 3fa878b3f28b0adbbd11fcd79738a87f52800512 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <117369+srcn@users.noreply.github.com>
Date: Mon, 22 Aug 2022 10:53:19 +0300
Subject: [PATCH] (apps/mailbox) Better label toggle behavior (apps/tasks)
 Better tag toggle behavior

---
 .../admin/apps/mailbox/details/details.component.html      | 7 +++++--
 src/app/modules/admin/apps/mailbox/mailbox.module.ts       | 6 ++++--
 .../admin/apps/tasks/details/details.component.html        | 5 +++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/app/modules/admin/apps/mailbox/details/details.component.html b/src/app/modules/admin/apps/mailbox/details/details.component.html
index 6d94dfb6..a9bc0f0f 100644
--- a/src/app/modules/admin/apps/mailbox/details/details.component.html
+++ b/src/app/modules/admin/apps/mailbox/details/details.component.html
@@ -25,9 +25,12 @@
                 </button>
                 <mat-menu #toggleLabelMenu="matMenu">
                     <ng-container *ngFor="let label of labels; trackBy: trackByFn">
-                        <div mat-menu-item>
+                        <div
+                            mat-menu-item
+                            (click)="toggleLabel(label)"
+                            matRipple>
                             <mat-checkbox
-                                (change)="toggleLabel(label)"
+                                class="pointer-events-none"
                                 [color]="'primary'"
                                 [checked]="mail.labels.includes(label.id)"
                                 [disableRipple]="true">
diff --git a/src/app/modules/admin/apps/mailbox/mailbox.module.ts b/src/app/modules/admin/apps/mailbox/mailbox.module.ts
index 3ab7a5a9..0fe6d400 100644
--- a/src/app/modules/admin/apps/mailbox/mailbox.module.ts
+++ b/src/app/modules/admin/apps/mailbox/mailbox.module.ts
@@ -9,6 +9,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatRippleModule } from '@angular/material/core';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { QuillModule } from 'ngx-quill';
@@ -36,7 +37,7 @@ import { mailboxRoutes } from 'app/modules/admin/apps/mailbox/mailbox.routing';
         MailboxSettingsComponent,
         MailboxSidebarComponent
     ],
-    imports     : [
+    imports: [
         RouterModule.forChild(mailboxRoutes),
         MatButtonModule,
         MatCheckboxModule,
@@ -47,6 +48,7 @@ import { mailboxRoutes } from 'app/modules/admin/apps/mailbox/mailbox.routing';
         MatInputModule,
         MatMenuModule,
         MatProgressBarModule,
+        MatRippleModule,
         MatSelectModule,
         MatSidenavModule,
         QuillModule.forRoot(),
@@ -54,7 +56,7 @@ import { mailboxRoutes } from 'app/modules/admin/apps/mailbox/mailbox.routing';
         FuseNavigationModule,
         FuseScrollbarModule,
         FuseScrollResetModule,
-        SharedModule
+        SharedModule,
     ]
 })
 export class MailboxModule
diff --git a/src/app/modules/admin/apps/tasks/details/details.component.html b/src/app/modules/admin/apps/tasks/details/details.component.html
index 300bce7e..20c631cf 100644
--- a/src/app/modules/admin/apps/tasks/details/details.component.html
+++ b/src/app/modules/admin/apps/tasks/details/details.component.html
@@ -148,9 +148,10 @@
                                             (click)="toggleTaskTag(tag)"
                                             matRipple>
                                             <mat-checkbox
-                                                class="flex items-center h-10 min-h-10"
+                                                class="flex items-center h-10 min-h-10 pointer-events-none"
+                                                [checked]="task.tags.includes(tag.id)"
                                                 [color]="'primary'"
-                                                [checked]="task.tags.includes(tag.id)">
+                                                [disableRipple]="true">
                                             </mat-checkbox>
                                             <div class="ml-1">{{tag.title}}</div>
                                         </div>