Merge pull request gitkraken#125 from cagdas001/fix-124

Fixes gitkraken#124 and adds an animation to indicate newly added comment
tmobile · Jan 13, 2019 · 9e2b3e1 · 9e2b3e1
2 parents deb9500 + b72214b
commit 9e2b3e1
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 19 deletions.
diff --git a/bitbucket-comment-viewer-app/index.html b/bitbucket-comment-viewer-app/index.html
@@ -54,8 +54,6 @@
     // a map for comments
     // [key: CommentID, value: CommentObject]
     var commentsMap = new Map();
-    let nonReplyCount = 0;
-    let scrollToIndex;
 
     function reply(data) {
       let commentID = data.getAttribute('commentID');
@@ -116,16 +114,14 @@
         return linkedText;
     }
 
-    function render(comments, ul) {
+    function render(comments, ul, scrollToId) {
       for (var i = 0; i < comments.length; i++) {
         var comment = comments[i];
         commentsMap[comment.Id] = comment;
 
         var item = document.createElement('li');
         item.className = 'cmmnt';
-        if (!comment.ParentId) {
-          item.id = `comment-${++nonReplyCount}`;
-        }
+        item.id = `comment-${comment.Id}`;
 
         var avatarDiv = document.createElement('div');
         avatarDiv.className = 'avatar';
@@ -155,6 +151,17 @@
       for (i = 0, j = allPre.length; i < j; i++) {
         hljs.highlightBlock(allPre[i]);
       }
+
+      if (scrollToId) {
+        let scrollToComment = document.getElementById(`comment-${scrollToId}`);
+        // change background-color to clearly indicate the newly added comment
+        scrollToComment.style.backgroundColor = '#f9f581';
+        // scroll to the newly added comment
+        scrollToComment.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
+        // change back the background color slowly
+        scrollToComment.style.transition = 'background-color 2s ease-in'
+        scrollToComment.style.backgroundColor = 'white';
+      }
     }
 
     // send ui.ready message to main process when the window loaded
@@ -165,24 +172,21 @@
     // init the editor with the incoming value
     ipcRenderer.on('init.editor', function (event, arg) {
       commentUl.innerHTML = '';
-      nonReplyCount = 0;
-      if (arg.length == 0) {
+      const comments = arg.Comments;
+      const scrollToId = arg.ScrollTo;
+      if (comments.length == 0) {
         commentUl.innerText = 'No Comments Found';
       }
-      else render(arg, commentUl);
+      else render(comments, commentUl, scrollToId);
 
       document.getElementById('spinner').style.display = 'none';
       document.getElementById('w').style.display = 'block';
-
-      let lastComment = document.getElementById(`comment-${scrollToIndex}`);
-      lastComment.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
     })
 
     var addBtn = document.getElementById('addBtn');
     var closeBtn = document.getElementById('closeBtn');
 
     addBtn.addEventListener('click', function () {
-      scrollToIndex = nonReplyCount + 1;
       ipcRenderer.send('add.comment');
     })
     closeBtn.addEventListener('click', function () {

diff --git a/src/commands/commentAppHelper.ts b/src/commands/commentAppHelper.ts
@@ -183,7 +183,7 @@ export function initComment(comments: Comment[]) {
                 ipcForCommentViewer.of.bitbucketCommentViewerApp.emit('app.message', {
                     id: ipcForCommentViewer.config.id,
                     command: 'init.editor',
-                    payload: comments
+                    payload: { Comments: comments }
                 });
             }
             else if (data.command === 'close') {
@@ -199,11 +199,12 @@ export function initComment(comments: Comment[]) {
 /**
  * Show comment on running comment viewer app
  * @param comments: Comments to show.
+ * @param scrollToId: (optional) App scrolls to the comment with given ID, if specified
  */
-export function showComment(comments: Comment[]) {
+export function showComment(comments: Comment[], scrollToId?: number) {
     ipcForCommentViewer.of.bitbucketCommentViewerApp.emit('app.message', {
         id: ipcForCommentViewer.config.id,
         command: 'init.editor',
-        payload: comments
+        payload: { Comments: comments, ScrollTo: scrollToId }
     });
 }
diff --git a/src/gitCommentService.ts b/src/gitCommentService.ts
@@ -166,7 +166,11 @@ export class GitCommentService implements Disposable {
         return;
     }
 
-    async refreshView() {
+    /**
+     *
+     * @param scrollToId: (optional) App scrolls to the comment with given ID, if specified
+     */
+    async refreshView(scrollToId?: number) {
         if (GitCommentService.lastFetchedComments) {
             if (!GitCommentService.commentViewerActive) {
                 const app = await runApp('bitbucket-comment-viewer-app');
@@ -176,7 +180,7 @@ export class GitCommentService implements Disposable {
                 });
                 initComment(GitCommentService.lastFetchedComments);
             }
-            else showComment(GitCommentService.lastFetchedComments);
+            else showComment(GitCommentService.lastFetchedComments, scrollToId);
         }
     }
 
@@ -495,6 +499,7 @@ export class GitCommentService implements Disposable {
 
             const response = await Axios.create({ auth: auth }).post(url, data);
             window.showInformationMessage('Comment/reply added successfully.');
+            let scrollToId: number | undefined;
             if (GitCommentService.lastFetchedComments) {
                 const newComment: Comment = {
                     Id: isV2 ? response.data.id : response.data.comment_id,
@@ -538,8 +543,9 @@ export class GitCommentService implements Disposable {
                 else {
                     GitCommentService.lastFetchedComments.push(newComment);
                 }
+                scrollToId = newComment.Id;
             }
-            await this.refreshView();
+            await this.refreshView(scrollToId);
         }
         catch (e) {
             Logger.error(e);