Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/emoji on comment area #6422

Merged
merged 8 commits into from
Apr 22, 2020
Merged

Feature/emoji on comment area #6422

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4880916
add emoji button and make append the selected emoji to the comment
dzuqe Apr 10, 2020
650a0bf
eslint fix
dzuqe Apr 11, 2020
8d46deb
refactor to fix multiple emoji posts
dzuqe Apr 12, 2020
5551dbc
add newlines and spacing where neccessary to css; update emoji-contai…
dzuqe Apr 13, 2020
2debcb7
rename textArea to a more precise variable name in case there's a sim…
dzuqe Apr 18, 2020
4c952a2
Revert "add newlines and spacing where neccessary to css; update emoj…
dzuqe Apr 21, 2020
c5426f8
Remve code style changes
dzuqe Apr 21, 2020
5312f20
Merge branch 'master' into feature/emoji-on-comment-area
danlipert Apr 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions app/assets/v2/css/activity_stream.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,10 @@ a .sup {
.action.open {
background-color: #eeeeee;
}
.emoji-container,
thelostone-mc marked this conversation as resolved.
Show resolved Hide resolved
.comment-area{
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need set the .comment-area to top:0 ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No we didn't, I have since removed the rule and a few others that weren't necessary within inline css.

top: 0 !important;
}
.comment_container .row{
max-width: 100%;
}
Expand Down
23 changes: 22 additions & 1 deletion app/assets/v2/js/activity.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -739,8 +739,11 @@ $(document).ready(function() {
<div class="col-sm-1 mt-1 activity-avatar d-none d-sm-inline">
<img src="/dynamic/avatar/${document.contxt.github_handle}">
</div>
<div class="col-12 col-sm-11 text-right">
<div class="comment-area col-12 col-sm-11 text-right">
<textarea class="form-control bg-lightblue font-caption enter-activity-comment" placeholder="Enter comment" cols="80" rows="3">${existing_text}</textarea>
<div class="emoji-container position-absolute d-flex flex-wrap" style="width: 3.6em; right: 0; top: 0">
thelostone-mc marked this conversation as resolved.
Show resolved Hide resolved
<button class="btn btn-sm p-1 emoji_button" data-toggle="tooltip" title="Add an emoji to post." style="bottom: 3.5em; right: 0; top: 0;"><i class="far fa-fw fa-smile"></i></button>
</div>
<a href=# class="btn btn-gc-blue btn-sm mt-= font-smaller-7 font-weight-bold post_comment">COMMENT</a>
</div>
</div>
Expand All @@ -753,6 +756,24 @@ $(document).ready(function() {
});
};

// add emoji to comment
let textArea = '';
thelostone-mc marked this conversation as resolved.
Show resolved Hide resolved
var picker = new EmojiButton({
position: 'right-end'
});

picker.on('emoji', function(emoji) {
textArea.value += ` ${emoji} `;
});

$(document).on('click', '.emoji_button', function(e) {
e.preventDefault();
var commentArea = $(this).parents('.comment-area')[0];
var emojiContainer = $(this).parents('.emoji-container')[0];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

^ const


picker.pickerVisible ? picker.hidePicker() : picker.showPicker(emojiContainer);
textArea = commentArea.children[0];
});

// post comment activity
$(document).on('click', '.comment_container .action.like', function(e) {
Expand Down