Allow toggling patch checkbox by clicking on lines

CHANGELOG.md

@@ -22,6 +22,10 @@ We are following the [Keep a Changelog](https://keepachangelog.com/) format.
 ### Changed
 - Bump Dependencies [#1427](https://github.com/FredrikNoren/ungit/pull/1427)
 
+### Added
+- Allow toggling patch checkbox by clicking on lines [#1429](https://github.com/FredrikNoren/ungit/pull/1429)
+
+
 ## [1.5.11](https://github.com/FredrikNoren/ungit/compare/v1.5.10...v1.5.11)
 
 ### Added

components/staging/staging.less

@@ -98,9 +98,14 @@
     }
   }
 
+  .d2h-code-linenumber {
+    pointer-events: none;
+  }
+
   .d2h-code-line-prefix input[type='checkbox'] {
     margin: 0;
     margin-right: -6px;
+    pointer-events: none;
     vertical-align: sub;
   }
 
@@ -214,6 +219,10 @@
       }
     }
   }
+
+  .d2h-diff-table td.patched {
+    cursor: pointer;
+  }
 }
 
 @media (min-width: @screen-md-min) {

components/textdiff/textdiff.js

@@ -72,7 +72,6 @@ class TextDiffViewModel {
     this.editState = args.editState;
     this.wordWrap = args.wordWrap;
     this.patchLineList = args.patchLineList;
-    this.numberOfSelectedPatchLines = 0;
     this.htmlSrc = undefined;
     this.isParsed = ko.observable(false);
 
@@ -162,23 +161,29 @@ class TextDiffViewModel {
         drawFileList: false,
       });
 
-      this.numberOfSelectedPatchLines = 0;
+      const rerender = this.patchLineList && !this.patchLineList().length;
       let index = 0;
 
       // ko's binding resolution is not recursive, which means below ko.bind refresh method doesn't work for
       // data bind at getPatchCheckBox that is rendered with "html" binding.
       // which is reason why manually updating the html content and refreshing kobinding to have it render...
       if (this.patchLineList) {
-        html = html.replace(/<span class="d2h-code-line-[a-z]+">(\+|-)/g, (match, capture) => {
-          if (this.patchLineList()[index] === undefined) {
-            this.patchLineList()[index] = true;
+        html = html.replace(
+          /<td class="(d2h-(?:del|ins)[^"]*)">([\s\S]*?)<\/td>/g,
+          (match, tdClass, content) => {
+            if (this.patchLineList()[index] === undefined) {
+              this.patchLineList()[index] = true;
+            }
+            content = content.replace(
+              /<span class="d2h-code-line-[a-z]+">(\+|-)<\/span>/g,
+              (match, capture) => this.getPatchCheckBox(capture, index)
+            );
+            return `<td class="${tdClass}" data-bind="click: (editState() === 'patched') ? togglePatchLine.bind($data, ${index++}) : null, css: { patched: editState() === 'patched' }">${content}</td>`;
           }
-
-          return this.getPatchCheckBox(capture, index, this.patchLineList()[index++]);
-        });
+        );
       }
 
-      if (html !== this.htmlSrc) {
+      if (html !== this.htmlSrc || rerender) {
         // diff has changed since last we displayed and need refresh
         this.htmlSrc = html;
         this.isParsed(false);
@@ -192,28 +197,23 @@ class TextDiffViewModel {
     this.render();
   }
 
-  getPatchCheckBox(symbol, index, isActive) {
-    if (isActive) {
-      this.numberOfSelectedPatchLines++;
-    }
-    return `<div class="d2h-code-line-prefix"><span data-bind="visible: editState() !== 'patched'">${symbol}</span><input ${
-      isActive ? 'checked' : ''
-    } type="checkbox" data-bind="visible: editState() === 'patched', click: togglePatchLine.bind($data, ${index})"></input></div>`;
+  getPatchCheckBox(symbol, index) {
+    return `<div class="d2h-code-line-prefix"><span data-bind="visible: editState() !== 'patched'">${symbol}</span><input type="checkbox" data-bind="visible: editState() === 'patched', checked: patchLineList()[${index}]"></input></div>`;
   }
 
   togglePatchLine(index) {
-    this.patchLineList()[index] = !this.patchLineList()[index];
+    // Selecting text, not toggling the line's patch status
+    if (window.getSelection().toString().length !== 0) return true;
 
-    if (this.patchLineList()[index]) {
-      this.numberOfSelectedPatchLines++;
-    } else {
-      this.numberOfSelectedPatchLines--;
-    }
+    this.patchLineList()[index] = !this.patchLineList()[index];
 
-    if (this.numberOfSelectedPatchLines === 0) {
+    if (this.patchLineList().filter(Boolean).length === 0) {
       this.editState('none');
     }
 
+    this.isParsed(false);
+    this.isParsed(true);
+
     return true;
   }
 }