Merge pull request #7386 from cmrd-senya/comment-mention-front-end

Comment mentions front-end
parents b076a1a1 c2f352d8
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
* Add support for mentions in comments to the backend [#6818](https://github.com/diaspora/diaspora/pull/6818) * Add support for mentions in comments to the backend [#6818](https://github.com/diaspora/diaspora/pull/6818)
* Add support for new mention syntax [#7300](https://github.com/diaspora/diaspora/pull/7300) * Add support for new mention syntax [#7300](https://github.com/diaspora/diaspora/pull/7300)
* Render mentions as links in comments [#7327](https://github.com/diaspora/diaspora/pull/7327) * Render mentions as links in comments [#7327](https://github.com/diaspora/diaspora/pull/7327)
* Add support for mentions in comments to the front-end [#7386](https://github.com/diaspora/diaspora/pull/7386)
# 0.6.5.0 # 0.6.5.0
......
// @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
...@@ -27,6 +27,7 @@ app.views.CommentStream = app.views.Base.extend({ ...@@ -27,6 +27,7 @@ app.views.CommentStream = app.views.Base.extend({
this.model.comments.each(this.appendComment, this); this.model.comments.each(this.appendComment, this);
this.commentBox = this.$(".comment_box"); this.commentBox = this.$(".comment_box");
this.commentSubmitButton = this.$("input[name='commit']"); this.commentSubmitButton = this.$("input[name='commit']");
new app.views.CommentMention({el: this.$el, postId: this.model.get("id")});
}, },
presenter: function(){ presenter: function(){
......
...@@ -6,15 +6,16 @@ app.views.PublisherMention = app.views.SearchBase.extend({ ...@@ -6,15 +6,16 @@ app.views.PublisherMention = app.views.SearchBase.extend({
mentionSyntaxTemplate: function(person) { return "@{" + person.handle + "}"; }, mentionSyntaxTemplate: function(person) { return "@{" + person.handle + "}"; },
events: { events: {
"keydown #status_message_text": "onInputBoxKeyDown", "keydown .mention-textarea": "onInputBoxKeyDown",
"input #status_message_text": "updateTypeaheadInput", "input .mention-textarea": "updateTypeaheadInput",
"click #status_message_text": "onInputBoxClick", "click .mention-textarea": "onInputBoxClick",
"blur #status_message_text": "onInputBoxBlur" "blur .mention-textarea": "onInputBoxBlur"
}, },
initialize: function() { initialize: function(opts) {
this.mentionedPeople = []; 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.typeaheadInput = this.$(".typeahead-mention-box");
this.bindTypeaheadEvents(); this.bindTypeaheadEvents();
...@@ -22,7 +23,7 @@ app.views.PublisherMention = app.views.SearchBase.extend({ ...@@ -22,7 +23,7 @@ app.views.PublisherMention = app.views.SearchBase.extend({
typeaheadInput: this.typeaheadInput, typeaheadInput: this.typeaheadInput,
customSearch: true, customSearch: true,
autoselect: true, autoselect: true,
remoteRoute: {url: "/contacts"} remoteRoute: {url: url}
}); });
}, },
......
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
.comment.new-comment-form-wrapper { padding-bottom: 0; } .comment.new-comment-form-wrapper { padding-bottom: 0; }
.submit_button { .submit-button {
margin-top: 10px; margin-top: 10px;
input { input {
float: right; float: right;
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
} }
textarea.comment_box:focus, textarea.comment_box:valid, textarea.comment_box:active { textarea.comment_box:focus, textarea.comment_box:valid, textarea.comment_box:active {
border-color: $border-dark-grey; border-color: $border-dark-grey;
& + .submit_button { display: block; } ~ .submit-button { display: block; }
min-height: 35px; min-height: 35px;
box-shadow: none; box-shadow: none;
} }
......
...@@ -65,3 +65,21 @@ ...@@ -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%;
}
}
...@@ -19,12 +19,6 @@ ...@@ -19,12 +19,6 @@
.container-fluid{ padding: 0; } .container-fluid{ padding: 0; }
.twitter-typeahead {
width: calc(100% + 2px);
.tt-menu { width: 100%; }
}
form { form {
margin: 0; margin: 0;
#fileInfo { display: none !important; } #fileInfo { display: none !important; }
...@@ -245,7 +239,6 @@ ...@@ -245,7 +239,6 @@
} }
.twitter-typeahead { .twitter-typeahead {
left: -1px;
// Override inline rule of Typeahead // Override inline rule of Typeahead
// scss-lint:disable ImportantRule // scss-lint:disable ImportantRule
position: absolute !important; position: absolute !important;
......
...@@ -26,8 +26,14 @@ ...@@ -26,8 +26,14 @@
<div class="bd"> <div class="bd">
<form accept-charset="UTF-8" action="/posts/{{id}}/comments" class="new_comment" id="new_comment_on_{{id}}" method="post"> <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"}}" /> <input class="btn btn-primary" id="comment_submit_{{id}}" name="commit" type="submit" value="{{t "stream.comment"}}" />
</div> </div>
</form> </form>
......
...@@ -10,12 +10,13 @@ ...@@ -10,12 +10,13 @@
:tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...", :tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...",
"data-title" => popover_with_close_html("1. " + t("shared.public_explain.share")), "data-title" => popover_with_close_html("1. " + t("shared.public_explain.share")),
"data-content" => t("shared.public_explain.new_user_welcome_message"), "data-content" => t("shared.public_explain.new_user_welcome_message"),
"class" => "form-control" "class" => "form-control mention-textarea"
- else - else
= status.text_area :text, :rows => 2, :value => h(publisher_formatted_text), = status.text_area :text, :rows => 2, :value => h(publisher_formatted_text),
:tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...", :tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...",
"class" => "form-control" "class" => "form-control mention-textarea"
%input.typeahead-mention-box.hidden{type: "text"} .typeahead-mention-box-wrap
%input.typeahead-mention-box.hidden{type: "text"}
.container-fluid.photodropzone-container#photodropzone_container .container-fluid.photodropzone-container#photodropzone_container
%ul#photodropzone %ul#photodropzone
......
...@@ -66,3 +66,22 @@ Feature: Mentions ...@@ -66,3 +66,22 @@ Feature: Mentions
When I sign in as "alice@alice.alice" When I sign in as "alice@alice.alice"
And I follow "Bob Jones" And I follow "Bob Jones"
Then I should see "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"
...@@ -38,3 +38,7 @@ Given /^"([^"]*)" has commented a lot on "([^"]*)"$/ do |email, post_text| ...@@ -38,3 +38,7 @@ Given /^"([^"]*)" has commented a lot on "([^"]*)"$/ do |email, post_text|
end end
end 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
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");
});
});
});
...@@ -50,6 +50,13 @@ describe("app.views.CommentStream", function(){ ...@@ -50,6 +50,13 @@ describe("app.views.CommentStream", function(){
expect(this.view.commentSubmitButton).toBeDefined(); expect(this.view.commentSubmitButton).toBeDefined();
expect(this.view.commentSubmitButton).toEqual(this.view.$("input[name='commit']")); 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() { describe("createComment", function() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment