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 5 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
105 changes: 72 additions & 33 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 @@ -5,26 +5,33 @@
background-color: #ecf0f4;
Copy link
Contributor

Choose a reason for hiding this comment

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

In general, please do not include arbitrary style changes in PRs as it makes it difficult to do a code review. Please limit your changes to the feature or fix thats described in the PR description - if you want to do a style fix PR, you can submit it separately.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I've removed the code style changes and left only changes I've made for the feature. I will follow this rule of thumb from now onwards.

border: 0px solid;
}

.click_here_to_join_video{
width: 100%;
cursor: pointer;
min-height: 250px;
}
.click_here_to_join_video iframe{

.click_here_to_join_video iframe {
min-height: 250px;
}
.click_here_to_join_video img{

.click_here_to_join_video img {
width: 100%;
}

.after_copy{
font-size: 12px;
}

.activity_stream{
margin-bottom: 50px;
}

.activity_stream .content{
cursor: pointer;
}

#new_activity_notifier {
text-align: center;
background-color: #f5f5f9;
Expand All @@ -36,18 +43,22 @@
font-size: 0.8rem;
font-weight: bold;
}
#activities .row.show_more a{

#activities .row.show_more a {
margin: 0px auto;
}
#activities .row .attachment{

#activities .row .attachment {
width: 100%;
object-fit: contain;
max-height: 200px;
cursor: pointer;
}
#activities .row .attachment.expanded{

#activities .row .attachment.expanded {
max-height: 450px;
}

#activities {
text-align: left;
}
Expand All @@ -62,7 +73,7 @@
font-size: smaller;
}

.activity_feed_kudos_image{
.activity_feed_kudos_image {
max-width: 70px;
}

Expand All @@ -79,16 +90,26 @@ a .sup {
.action.open {
background-color: #eeeeee;
}
.comment_container .row{

.emoji-container {
width: 3.6em;
right: 0;
top: 0;
}

.comment_container .row {
max-width: 100%;
}
.comment_container .action{

.comment_container .action {
cursor: pointer;
}

.comment_container .action.open,
.comment_container .open .fa-heart{
.comment_container .open .fa-heart {
color: var(--gc-pink) !important;
}

.activity_stream .activity_detail {
flex: 1;
font-size: 0.75rem;
Expand All @@ -98,7 +119,7 @@ a .sup {
padding: 0px;
}

.comment_container.filled{
.comment_container.filled {
text-align: left;
width: 300px;
background-color: #f2f2f2;
Expand All @@ -110,21 +131,22 @@ a .sup {
border-radius: 20px;
max-width: 40px;
}
.activity_stream .content img{

.activity_stream .content img {
max-height: 100px;
}

.comment_container li{
.comment_container li {
text-align: left;
list-style: none;
padding: 5px;
}

.comment_container li .comment{
.comment_container li .comment {
padding-left: 25px;
}

.comment_container li:nth-child(even){
.comment_container li:nth-child(even) {
background-color: #fafafa;
}

Expand Down Expand Up @@ -152,7 +174,6 @@ a .sup {
margin-top: 1rem;
}


.tip_activity{
color: black;
}
Expand All @@ -164,13 +185,16 @@ a .sup {
.copy_activity:hover {
text-decoration: none;
}

.funder-avatar,
.activity-avatar {
text-align: center;
}
.activity_stream .activity-avatar{

.activity_stream .activity-avatar {
margin-top: -10px;
}

.activity_stream .avatar {
width: 4.5rem;
height: 4.5rem;
Expand Down Expand Up @@ -210,18 +234,21 @@ a .sup {

.click-gif.selected,
#poll-button.selected,
#video-button.selected{
#video-button.selected {
color: black;
}
#video_container{

#video_container {
background-color: white;
text-align: center;
}
#video_container img{

#video_container img {
width: 75%;
margin: 0px auto;
}
iframe.popout{

iframe.popout {
position: fixed;
right: 0px;
bottom: 0px;
Expand All @@ -230,50 +257,56 @@ iframe.popout{
z-index: 1;
}

#poll_container input{
#poll_container input {
display: block;
width: 100%;
margin-top: 2em;
margin-bottom: 2em
}
.poll_choices div.vote{

.poll_choices div.vote {
border: 1px solid black;
background-color: #f5f5f9;
margin-top: 5px;
margin-bottom: 5px;
padding: 5px;
cursor: pointer;
}
.poll_choices.answered div.vote{

.poll_choices.answered div.vote {
border: 1px solid #e9e9e9;
background-color: #f9f9f9;
cursor: default;
}
.poll_choices div span{

.poll_choices div span {
display: none;
}

.poll_choices.answered div span{
display: inline-block;
font-style: italic;
}
.poll_choices div p{

.poll_choices div p {
padding: 3px 10px;
margin: 0px;
}
.poll_choices div.answer{

.poll_choices div.answer {
border: 3px solid black;
background-color: #f0f0f0;
}

.activity_stream .activity_detail .tag{
.activity_stream .activity_detail .tag {
background-color: #e7f0fa;
color: var(--gc-blue);
font-size: 10px;
list-style: none;
padding: 5px;
}
.staff_tag
{

.staff_tag {
background-color: #eEbAEE;
border-radius: 5px;
color: #8E2ABE;
Expand All @@ -290,7 +323,7 @@ iframe.popout{
display: none;
}

.infinite-more-link{
.infinite-more-link {
position: absolute;
bottom: 10px;
text-align: center;
Expand All @@ -304,22 +337,25 @@ iframe.popout{
.activity_feed_kudos_image{
max-width: 110px;
}

.activity .secondary {
position: relative;
left: -10px;
}
}
@media (max-width: 767.98px) {

@media (max-width: 767.98px) {
.activity_stream .activity-avatar{
margin-top: 0px;
}

.activity_stream .avatar {
width: 2.5rem;
height: 2.5rem;
min-height: 2.5rem;
}
.comment_container.filled{

.comment_container.filled {
text-align: center;
margin: 0px auto;
}
Expand All @@ -328,11 +364,12 @@ iframe.popout{
text-align: center;
}

#activities .organizations{
#activities .organizations {
text-align: center;
margin: 0px auto;
}
}

@media (max-width: 1100px) {
.activity_stream .avatar {
width: 3.5rem;
Expand Down Expand Up @@ -380,12 +417,14 @@ textarea.enter-activity-comment {
opacity:0;
background-size:0 0;
}

51% {
transform:translate(calc(var(--r) * -2.7), calc(var(--r) * -1.5)) scale(1.2);
opacity:1;
background-size:calc(var(--r) / 3) calc(var(--r) / 3);

}

100% {
transform:translate(calc(var(--r) * -2.7), calc(var(--r) * -1.5)) scale(0);
opacity:0;
Expand Down
25 changes: 24 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,13 @@ $(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">
<button class="btn btn-sm p-1 emoji_button" data-toggle="tooltip" title="Add an emoji to post.">
<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 +758,24 @@ $(document).ready(function() {
});
};

// add emoji to comment
let activityCommentTextArea = '';
var picker = new EmojiButton({
position: 'right-end'
});

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

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

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

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