From 988a219dbb874e722b7f65bc6b1f8a17be3b58a1 Mon Sep 17 00:00:00 2001
From: ElonH <elonhhuang@gmail.com>
Date: Sat, 13 Jun 2020 17:05:58 +0800
Subject: [PATCH] feat(list-view): expend click area of checkbox to improving
 user experience

click surrending area of checkbox or area of operation will toggle checkbox
---
 .../manager/fileMode/listView/listView.component.ts    | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app/pages/manager/fileMode/listView/listView.component.ts b/src/app/pages/manager/fileMode/listView/listView.component.ts
index 3c431a1..c7b65aa 100644
--- a/src/app/pages/manager/fileMode/listView/listView.component.ts
+++ b/src/app/pages/manager/fileMode/listView/listView.component.ts
@@ -36,11 +36,11 @@ import { ClipboardService } from '../../clipboard/clipboard.service';
 			[selectAllTemplate]="secAll"
 			(event)="eventEmitted($event)"
 		>
-			<ng-template let-row>
-				<td (dblclick)="$event.stopPropagation()">
+			<ng-template let-row let-idx="index">
+				<td (dblclick)="$event.stopPropagation()" (click)="toggle(idx); $event.preventDefault()">
 					<nb-checkbox [(checked)]="row.check" (checkedChange)="onToggle()"> </nb-checkbox>
 				</td>
-				<td>
+				<td (click)="toggle(idx)">
 					<nb-icon
 						*ngIf="row.ManipulateIcon"
 						class="manipulation"
@@ -143,6 +143,10 @@ export class ListViewComponent implements OnInit, OnDestroy {
 			this.checAllInteral = true;
 		}
 	}
+	toggle(idx: number) {
+		this.data[idx].check = !this.data[idx].check;
+		this.onToggle();
+	}
 
 	manipulate(o: IManipulate) {
 		this.data.forEach(x => {