Comment mentions front-end

app/assets/javascripts/app/views/comment_mention_view.js

+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
+//= require ./publisher/mention_view
+
+app.views.CommentMention = app.views.PublisherMention.extend({
+  initialize: function(opts) {
+    opts.url = Routes.mentionablePost(opts.postId);
+    app.views.PublisherMention.prototype.initialize.call(this, opts);
+  }
+});
+// @license-end

app/assets/javascripts/app/views/comment_stream_view.js

@@ -27,6 +27,7 @@ app.views.CommentStream = app.views.Base.extend({
     this.model.comments.each(this.appendComment, this);
     this.commentBox = this.$(".comment_box");
     this.commentSubmitButton = this.$("input[name='commit']");
+    new app.views.CommentMention({el: this.$el, postId: this.model.get("id")});
   },
 
   presenter: function(){

app/assets/javascripts/app/views/publisher/mention_view.js

@@ -6,15 +6,16 @@ app.views.PublisherMention = app.views.SearchBase.extend({
   mentionSyntaxTemplate: function(person) { return "@{" + person.handle + "}"; },
 
   events: {
-    "keydown #status_message_text": "onInputBoxKeyDown",
-    "input #status_message_text": "updateTypeaheadInput",
-    "click #status_message_text": "onInputBoxClick",
-    "blur #status_message_text": "onInputBoxBlur"
+    "keydown .mention-textarea": "onInputBoxKeyDown",
+    "input .mention-textarea": "updateTypeaheadInput",
+    "click .mention-textarea": "onInputBoxClick",
+    "blur .mention-textarea": "onInputBoxBlur"
   },
 
-  initialize: function() {
+  initialize: function(opts) {
     this.mentionedPeople = [];
-    this.inputBox = this.$("#status_message_text");
+    var url = (opts && opts.url) || "/contacts";
+    this.inputBox = this.$(".mention-textarea");
     this.typeaheadInput = this.$(".typeahead-mention-box");
     this.bindTypeaheadEvents();
 
@@ -22,7 +23,7 @@ app.views.PublisherMention = app.views.SearchBase.extend({
       typeaheadInput: this.typeaheadInput,
       customSearch: true,
       autoselect: true,
-      remoteRoute: {url: "/contacts"}
+      remoteRoute: {url: url}
     });
   },
 

app/assets/stylesheets/comments.scss

@@ -46,7 +46,7 @@
 
   .comment.new-comment-form-wrapper { padding-bottom: 0; }
 
-  .submit_button {
+  .submit-button {
     margin-top: 10px;
     input {
       float: right;
@@ -60,7 +60,7 @@
   }
   textarea.comment_box:focus, textarea.comment_box:valid, textarea.comment_box:active {
     border-color: $border-dark-grey;
-    & + .submit_button { display: block; }
+    ~ .submit-button { display: block; }
     min-height: 35px;
     box-shadow: none;
   }

app/assets/stylesheets/mentions.scss

@@ -65,3 +65,21 @@
     }
   }
 }
+
+.typeahead-mention-box-wrap .twitter-typeahead {
+  left: -1px;
+  width: calc(100% + 2px);
+
+  .tt-menu {
+    // Override inline rule of Typeahead
+    // If this is not overridden (`position: absolute` by default in Typeahead) then
+    // the box is cut when opened because of the `overflow: hidden` from parent classes of comment form styles. By
+    // having `position: relative` here we make it visible by inserting it in the flow.
+    // This has a side effect of "Comment" button move down when box is open, but it feels like the least evil.
+    // scss-lint:disable ImportantRule
+    position: relative !important;
+    // scss-lint:enable ImportantRule
+
+    width: 100%;
+  }
+}

app/assets/stylesheets/publisher.scss

@@ -19,12 +19,6 @@
 
   .container-fluid{ padding: 0; }
 
-  .twitter-typeahead {
-    width: calc(100% + 2px);
-
-    .tt-menu { width: 100%; }
-  }
-
   form {
     margin: 0;
     #fileInfo { display: none !important; }
@@ -245,7 +239,6 @@
   }
 
   .twitter-typeahead {
-    left: -1px;
     // Override inline rule of Typeahead
     // scss-lint:disable ImportantRule
     position: absolute !important;

app/assets/templates/comment-stream_tpl.jst.hbs

@@ -26,8 +26,14 @@
 
     <div class="bd">
       <form accept-charset="UTF-8" action="/posts/{{id}}/comments" class="new_comment" id="new_comment_on_{{id}}" method="post">
-        <textarea class="comment_box form-control" id="comment_text_on_{{id}}" name="text" rows="1" required placeholder="{{t "stream.comment"}}" />
-        <div class="submit_button">
+
+        <textarea class="comment_box form-control mention-textarea"
+                  id="comment_text_on_{{id}}" name="text" rows="1" required placeholder="{{t "stream.comment"}}" />
+        <div class="typeahead-mention-box-wrap">
+          <input class="typeahead-mention-box hidden" type="text">
+        </div>
+
+        <div class="submit-button">
           <input class="btn btn-primary" id="comment_submit_{{id}}" name="commit" type="submit" value="{{t "stream.comment"}}" />
         </div>
       </form>

app/views/publisher/_publisher.html.haml

@@ -10,12 +10,13 @@
                 :tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...",
                 "data-title" => popover_with_close_html("1. " + t("shared.public_explain.share")),
                 "data-content" => t("shared.public_explain.new_user_welcome_message"),
-                "class" => "form-control"
+                "class" => "form-control mention-textarea"
             - else
               = status.text_area :text, :rows => 2, :value => h(publisher_formatted_text),
                 :tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...",
-                "class" => "form-control"
-            %input.typeahead-mention-box.hidden{type: "text"}
+                "class" => "form-control mention-textarea"
+            .typeahead-mention-box-wrap
+              %input.typeahead-mention-box.hidden{type: "text"}
 
           .container-fluid.photodropzone-container#photodropzone_container
             %ul#photodropzone

features/desktop/mentions.feature

@@ -66,3 +66,22 @@ Feature: Mentions
     When I sign in as "alice@alice.alice"
     And I follow "Bob Jones"
     Then I should see "Bob Jones"
+
+  Scenario: A user mentions another user in a comment using mention suggestions
+    Given following users exist:
+      | username     | email             |
+      | Bob Jones    | bob@bob.bob       |
+      | Alice Smith  | alice@alice.alice |
+    And a user with email "bob@bob.bob" is connected with "alice@alice.alice"
+    And "alice@alice.alice" has a public post with text "check this out!"
+    When I sign in as "alice@alice.alice"
+    Then I should see "check this out!"
+    When I focus the comment field
+    And I enter "@Bob" in the comment field
+    Then I should see "Bob Jones" within ".tt-suggestion"
+    When I click on the first user in the mentions dropdown list
+    And I press the "A" key in the publisher
+    And I append "@Bob" to the publisher
+    Then I should not see the mentions dropdown list
+    When I press "Comment"
+    Then I should see "Bob Jones" within ".comments .comment:last-child"

features/step_definitions/comment_steps.rb

@@ -38,3 +38,7 @@ Given /^"([^"]*)" has commented a lot on "([^"]*)"$/ do |email, post_text|
     end
   end
 end
+
+When /^I enter "([^"]*)" in the comment field$/ do |comment_text|
+  find("textarea.comment_box.mention-textarea").native.send_keys(comment_text)
+end

spec/javascripts/app/views/comment_mention_view_spec.js

+describe("app.views.CommentMention", function() {
+  describe("initialize", function() {
+    it("passes correct URL to PublisherMention contructor", function() {
+      spyOn(app.views.PublisherMention.prototype, "initialize");
+      new app.views.CommentMention({postId: 123});
+      var call = app.views.PublisherMention.prototype.initialize.calls.mostRecent();
+      expect(call.args[0].url).toEqual("/posts/123/mentionable");
+    });
+  });
+});

spec/javascripts/app/views/comment_stream_view_spec.js

@@ -50,6 +50,13 @@ describe("app.views.CommentStream", function(){
       expect(this.view.commentSubmitButton).toBeDefined();
       expect(this.view.commentSubmitButton).toEqual(this.view.$("input[name='commit']"));
     });
+
+    it("initializes CommentMention view", function() {
+      spyOn(app.views.CommentMention.prototype, "initialize");
+      this.view.postRenderTemplate();
+      var call = app.views.CommentMention.prototype.initialize.calls.mostRecent();
+      expect(call.args[0]).toEqual({el: this.view.$el, postId: this.view.model.id});
+    });
   });
 
   describe("createComment", function() {