Show parent commit ids and try to scroll to them on click

components/commit/commit.html

@@ -42,10 +42,13 @@
               data-bind="text: numberOfRemovedLines"
             ></span>
             |
-            <span data-bind="text: sha1.substr(0, 8)"></span>
-            <!-- ko if: navigator.clipboard && (selected() || nodeIsMousehover()) -->
+            <span title="Commit" data-bind="text: sha1.substring(0, 8)"></span>
+            <!-- ko if: navigator.clipboard -->
             <button class="btn btn-default btn-xs" type="button" data-bind="click: copyHash"><span class="glyphicon glyphicon-copy"></span></button>
             <!-- /ko -->
+            <!-- ko foreach: parents -->
+            | <a href="#" title="Parent Commit" data-bind="text: $data.substring(0, 8), click: $parent.gotoCommit.bind($parent, $data)"></a>
+            <!-- /ko -->
           </div>
         </div>
       </div>

components/commit/commit.js

@@ -8,6 +8,7 @@ components.register('commit', (args) => new CommitViewModel(args));
 
 class CommitViewModel {
   constructor(gitNode) {
+    this.graph = gitNode.graph;
     this.repoPath = gitNode.graph.repoPath;
     this.sha1 = gitNode.sha1;
     this.server = gitNode.graph.server;
@@ -27,6 +28,7 @@ class CommitViewModel {
     this.fileLineDiffs = ko.observable();
     this.numberOfAddedLines = ko.observable();
     this.numberOfRemovedLines = ko.observable();
+    this.parents = ko.observable();
     this.authorGravatar = ko.computed(() => md5((this.authorEmail() || '').trim().toLowerCase()));
 
     this.showCommitDiff = ko.computed(
@@ -56,6 +58,7 @@ class CommitViewModel {
     this.authorEmail(args.authorEmail);
     this.numberOfAddedLines(args.additions);
     this.numberOfRemovedLines(args.deletions);
+    this.parents(args.parents || []);
     this.fileLineDiffs(args.fileLineDiffs);
     this.commitDiff = ko.observable(
       components.create('commitDiff', {
@@ -88,4 +91,11 @@ class CommitViewModel {
   copyHash() {
     navigator.clipboard.writeText(this.sha1);
   }
+
+  gotoCommit(sha1) {
+    const node = this.graph.nodesById[sha1];
+    if (node) {
+      node.toggleSelected();
+    }
+  }
 }

components/graph/git-node.js

@@ -251,41 +251,12 @@ class GitNodeViewModel extends Animateable {
   }
 
   toggleSelected() {
-    const beforeThisCR = this.commitComponent.element().getBoundingClientRect();
-    let beforeBelowCR = null;
-    if (this.belowNode) {
-      beforeBelowCR = this.belowNode.commitComponent.element().getBoundingClientRect();
-    }
-
-    let prevSelected = this.graph.currentActionContext();
-    if (!(prevSelected instanceof GitNodeViewModel)) prevSelected = null;
-    const prevSelectedCR = prevSelected
-      ? prevSelected.commitComponent.element().getBoundingClientRect()
-      : null;
     this.selected(!this.selected());
-
-    // If we are deselecting
-    if (!this.selected()) {
-      if (beforeThisCR.top < 0 && beforeBelowCR) {
-        const afterBelowCR = this.belowNode.commitComponent.element().getBoundingClientRect();
-        // If the next node is showing, try to keep it in the screen (no jumping)
-        if (beforeBelowCR.top < window.innerHeight) {
-          window.scrollBy(0, afterBelowCR.top - beforeBelowCR.top);
-          // Otherwise just try to bring them to the middle of the screen
-        } else {
-          window.scrollBy(0, afterBelowCR.top - window.innerHeight / 2);
-        }
-      }
-      // If we are selecting
-    } else {
-      const afterThisCR = this.commitComponent.element().getBoundingClientRect();
-      if (
-        prevSelectedCR &&
-        (prevSelectedCR.top < 0 || prevSelectedCR.top > window.innerHeight) &&
-        afterThisCR.top != beforeThisCR.top
-      ) {
-        window.scrollBy(0, -(beforeThisCR.top - afterThisCR.top));
-        console.log('Fix');
+    if (this.selected()) {
+      const commitElement = this.commitComponent.element();
+      const commitRect = commitElement.getBoundingClientRect();
+      if (commitRect.top < +window.getComputedStyle(document.documentElement).scrollPaddingTop.replace("px", "") || commitRect.bottom > document.documentElement.clientHeight) {
+        commitElement.scrollIntoView();
       }
     }
     return false;

components/header/header.less

@@ -1,5 +1,10 @@
 @import 'public/less/variables.less';
 
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 100px;
+}
+
 .navbarPadder {
   height: 81px;
 }

source/git-parser.js

@@ -301,10 +301,10 @@ exports.parseGitSubmodule = (text) => {
           if (url.indexOf('http') != 0) {
             if (url.indexOf('git:') == 0) {
               // git
-              url = `http${url.substr(url.indexOf(':'))}`;
+              url = `http${url.substring(url.indexOf(':'))}`;
             } else {
               // ssh
-              url = `http://${url.substr(url.indexOf('@') + 1).replace(':', '/')}`;
+              url = `http://${url.substring(url.indexOf('@') + 1).replace(':', '/')}`;
             }
           }