Add reactions to issues/PR and comments (#2856)

public/js/index.js

@@ -117,6 +117,54 @@ function updateIssuesMeta(url, action, issueIds, elementId, afterSuccess) {
     })
 }
 
+function initReactionSelector(parent) {
+    var reactions = '';
+    if (!parent) {
+        parent = $(document);
+        reactions = '.reactions > ';
+    }
+
+    parent.find(reactions + 'a.label').popup({'position': 'bottom left', 'metadata': {'content': 'title', 'title': 'none'}});
+
+    parent.find('.select-reaction > .menu > .item, ' + reactions + 'a.label').on('click', function(e){
+        var vm = this;
+        e.preventDefault();
+
+        if ($(this).hasClass('disabled')) return;
+
+        var actionURL = $(this).hasClass('item') ?
+                $(this).closest('.select-reaction').data('action-url') :
+                $(this).data('action-url');
+        var url = actionURL + '/' + ($(this).hasClass('blue') ? 'unreact' : 'react');
+        $.ajax({
+            type: 'POST',
+            url: url,
+            data: {
+                '_csrf': csrf,
+                'content': $(this).data('content')
+            }
+        }).done(function(resp) {
+            if (resp && (resp.html || resp.empty)) {
+                var content = $(vm).closest('.content');
+                var react = content.find('.segment.reactions');
+                if (react.length > 0) {
+                    react.remove();
+                }
+                if (!resp.empty) {
+                    react = $('<div class="ui attached segment reactions"></div>').appendTo(content);
+                    react.html(resp.html);
+                    var hasEmoji = react.find('.has-emoji');
+                    for (var i = 0; i < hasEmoji.length; i++) {
+                        emojify.run(hasEmoji.get(i));
+                    }
+                    react.find('.dropdown').dropdown();
+                    initReactionSelector(react);
+                }
+            }
+        });
+    });
+}
+
 function initCommentForm() {
     if ($('.comment.form').length == 0) {
         return
@@ -594,6 +642,7 @@ function initRepository() {
             $('#status').val($statusButton.data('status-val'));
             $('#comment-form').submit();
         });
+        initReactionSelector();
     }
 
     // Diff

public/less/_repository.less

@@ -548,7 +548,7 @@
                 }
                 .content {
                     margin-left: 4em;
-                    .header {
+                    > .header {
                         #avatar-arrow;
                         font-weight: normal;
                         padding: auto 15px;
@@ -1350,6 +1350,43 @@
             }
         }
     }
+    .segment.reactions, .select-reaction {
+        &.dropdown .menu {
+            right: 0!important;
+            left: auto!important;
+            > .header {
+                margin: 0.75rem 0 .5rem;
+            }
+            > .item {
+                float: left;
+                padding: .5rem .5rem !important;
+                img.emoji {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+    .segment.reactions {
+        padding: .3em 1em;
+        .ui.label {
+            padding: .4em;
+            &.disabled {
+                cursor: default;
+            }
+            > img {
+                height: 1.5em !important;
+            }
+        }
+        .select-reaction {
+            float: none;
+            &:not(.active) a {
+                display: none;
+            }
+        }
+        &:hover .select-reaction a {
+            display: block;
+        }
+    }
 }
 // End of .repository