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

Comment mentions front-end
parents b076a1a1 c2f352d8
......@@ -14,6 +14,7 @@
* 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)
* 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
......
// @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({
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(){
......
......@@ -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}
});
},
......
......@@ -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;
}
......
......@@ -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 @@
.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;
......
......@@ -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>
......
......@@ -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
......
......@@ -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"
......@@ -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
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(){
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() {
......
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