From cc5da9ccfccbfd445b20d1228d9a4f249e93fe13 Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Wed, 6 Sep 2017 13:33:54 +0200
Subject: [PATCH] Only most recent comments in preview if there are more than
 three comments on one line

---
 .../stylesheets/request-for-comments.css.scss     |  7 ++++++-
 app/views/request_for_comments/show.html.erb      | 15 +++++++++++----
 config/locales/de.yml                             |  1 +
 config/locales/en.yml                             |  1 +
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/request-for-comments.css.scss b/app/assets/stylesheets/request-for-comments.css.scss
index 5f272825..9810afb8 100644
--- a/app/assets/stylesheets/request-for-comments.css.scss
+++ b/app/assets/stylesheets/request-for-comments.css.scss
@@ -140,4 +140,9 @@
   button {
     margin-top: 10px;
   }
-}
\ No newline at end of file
+}
+
+.popover-footer {
+  color: #008cba;
+  margin-top: 10px;
+}
diff --git a/app/views/request_for_comments/show.html.erb b/app/views/request_for_comments/show.html.erb
index 77ad293d..c8b8d3b9 100644
--- a/app/views/request_for_comments/show.html.erb
+++ b/app/views/request_for_comments/show.html.erb
@@ -211,7 +211,15 @@ also, all settings from the rails model needed for the editor configuration in t
     return htmlContent;
   }
 
-  function buildPopover(fileid, line, htmlContent) {
+  function buildPopover(fileid, line, comments) {
+    // only display the newest three comments in preview
+    var maxComments = 3;
+    var htmlContent = generateCommentHtmlContent(comments.reverse().slice(0, maxComments));
+    if (comments.length > maxComments) {
+      // add a hint that there are more comments than shown here
+      htmlContent += '<div class="popover-footer"><%= t('request_for_comments.click_for_more_comments') %></div>'
+        .replace('${numComments}', comments.length - maxComments);
+    }
     // attach the popover to the ace sidebar (where the comment icon is displayed)
     var icon = $('*[data-file-id="' + fileid + '"]')          // the editor for this file
       .find('.ace_gutter > .ace_gutter-layer')                // the sidebar
@@ -240,9 +248,8 @@ also, all settings from the rails model needed for the editor configuration in t
       editor.commentVisualsByLine = {};
       var clusters = clusterComments(response.slice());
       $.each(clusters, function (line, cluster) {
-        var htmlContent = generateCommentHtmlContent(cluster);
-        editor.commentVisualsByLine[line] = htmlContent;
-        buildPopover(fileid, line, htmlContent);
+        editor.commentVisualsByLine[line] = generateCommentHtmlContent(cluster);
+        buildPopover(fileid, line, cluster);
       });
 
       $.each(response, function(index, comment) {
diff --git a/config/locales/de.yml b/config/locales/de.yml
index 3d362183..3089d2cd 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -474,6 +474,7 @@ de:
     cancel_thank_you_note: "Nichts senden"
     comment_edited: "bearbeitet"
     modal_title: "Einen Kommentar in Zeile ${line} hinzufügen"
+    click_for_more_comments: "Klicken um ${numComments} weitere Kommentare zu sehen..."
   sessions:
     create:
       failure: Fehlerhafte E-Mail oder Passwort.
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 675e4358..bc0737b8 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -495,6 +495,7 @@ en:
     cancel_thank_you_note: "Don't send"
     comment_edited: "edited"
     modal_title: "Add a comment to line ${line}"
+    click_for_more_comments: "Click to view ${numComments} more comments..."
   sessions:
     create:
       failure: Invalid email or password.