+
diff --git a/templates/repo/issue/view_content/reactions.tmpl b/templates/repo/issue/view_content/reactions.tmpl
index da6319667bf74..0011efe8b286f 100644
--- a/templates/repo/issue/view_content/reactions.tmpl
+++ b/templates/repo/issue/view_content/reactions.tmpl
@@ -1,7 +1,7 @@
-
{{if not .OriginalAuthor}}
@@ -82,7 +82,7 @@
{{$reactions := .Reactions.GroupByType}}
{{if $reactions}}
- {{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
+ {{template "repo/issue/view_content/reactions" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
{{end}}
{{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole}}
{{if not $.Repository.IsArchived}}
- {{template "repo/issue/view_content/add_reaction" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
+ {{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
{{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" . "delete" true "issue" true "diff" true "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}}
{{end}}
@@ -103,7 +103,7 @@
+
{{range $key, $value := .Reactions}}
- {{$hasReacted := $value.HasUser $.ctxData.SignedUserID}}
-
{{end}}
{{if AllowedReactions}}
- {{template "repo/issue/view_content/add_reaction" dict "ctxData" $.ctxData "ActionURL" .ActionURL}}
+ {{template "repo/issue/view_content/add_reaction" dict "ActionURL" .ActionURL}}
{{end}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index c6a22a5dc4bcc..02067971a0f48 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1366,8 +1366,7 @@ table th[data-sortt-desc] .svg {
box-shadow: 0 0 0 1px var(--color-secondary) inset;
}
-.emoji,
-.reaction {
+.emoji {
font-size: 1.25em;
line-height: var(--line-height-default);
font-style: normal !important;
@@ -1375,8 +1374,7 @@ table th[data-sortt-desc] .svg {
vertical-align: -0.075em;
}
-.emoji img,
-.reaction img {
+.emoji img {
border-width: 0 !important;
margin: 0 !important;
width: 1em !important;
diff --git a/web_src/css/index.css b/web_src/css/index.css
index ad59f32636a20..73e10eedcb410 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -62,6 +62,7 @@
@import "./repo/linebutton.css";
@import "./repo/wiki.css";
@import "./repo/header.css";
+@import "./repo/reactions.css";
@import "./editor/fileeditor.css";
@import "./editor/combomarkdowneditor.css";
diff --git a/web_src/css/modules/comment.css b/web_src/css/modules/comment.css
index 799eeb8574d27..cf080db225536 100644
--- a/web_src/css/modules/comment.css
+++ b/web_src/css/modules/comment.css
@@ -16,7 +16,7 @@
.ui.comments .comment {
position: relative;
background: none;
- margin: 0.5em 0 0;
+ margin: 3px 0 0;
padding: 0.5em 0 0;
border: none;
border-top: none;
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index edb3bc2e872c9..4b7ad49677a99 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -913,6 +913,9 @@ td .commit-summary {
.repository.view.issue .comment-list .ui.comments {
max-width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
}
.repository.view.issue .comment-list .comment > .content > div:first-child {
@@ -928,6 +931,11 @@ td .commit-summary {
.repository.view.issue .comment-list .comment .comment-container {
border: 1px solid var(--color-secondary);
border-radius: var(--border-radius);
+ background: var(--color-box-body);
+}
+
+.repository.view.issue .comment-list .conversation-holder .comment .comment-container {
+ border: none;
}
@media (max-width: 767.98px) {
@@ -1042,30 +1050,6 @@ td .commit-summary {
margin-left: 42px;
}
-.repository.view.issue .comment-list .comment-code-cloud .segment.reactions {
- margin-top: 16px !important;
- margin-bottom: -8px !important;
- border-top: none !important;
-}
-
-.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label {
- border: 1px solid;
- padding: 5px 8px !important;
- margin: 0 2px;
- border-radius: var(--border-radius);
- border-color: var(--color-secondary-dark-1) !important;
-}
-
-.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label.basic.primary {
- background-color: var(--color-reaction-active-bg) !important;
- border-color: var(--color-primary-alpha-80) !important;
-}
-
-.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label.basic.primary:hover {
- background-color: var(--color-reaction-hover-bg) !important;
- border-color: var(--color-primary-alpha-80) !important;
-}
-
.repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply {
margin: 0;
}
@@ -1902,98 +1886,6 @@ td .commit-summary {
border-bottom: 1px solid var(--color-warning-border);
}
-.repository .segment.reactions.dropdown .menu,
-.repository .select-reaction.dropdown .menu {
- right: 0 !important;
- left: auto !important;
- min-width: 170px;
-}
-
-.repository .segment.reactions.dropdown .menu > .header,
-.repository .select-reaction.dropdown .menu > .header {
- margin: 0.75rem 0 0.5rem;
-}
-
-.repository .segment.reactions.dropdown .menu > .item,
-.repository .select-reaction.dropdown .menu > .item {
- float: left;
- margin: 4px;
- font-size: 20px;
- width: 34px;
- height: 34px;
- min-height: 0 !important;
- border-radius: var(--border-radius);
- display: flex !important;
- align-items: center;
- justify-content: center;
-}
-
-.repository .segment.reactions {
- padding: 0;
- display: flex;
- border: none !important;
- border-top: 1px solid var(--color-secondary) !important;
- width: 100% !important;
- max-width: 100% !important;
- margin: 0 !important;
- border-radius: 0 0 var(--border-radius) var(--border-radius);
-}
-
-.repository .segment.reactions .ui.label {
- max-height: 40px;
- padding: 8px 16px !important;
- display: flex !important;
- align-items: center;
- border: 0;
- border-right: 1px solid;
- border-radius: 0;
- margin: 0;
- font-size: 12px;
- font-weight: var(--font-weight-normal);
- border-color: var(--color-secondary) !important;
- background: var(--color-reaction-bg);
-}
-
-.repository .segment.reactions .ui.label:first-of-type {
- border-bottom-left-radius: 3px;
-}
-
-.repository .segment.reactions .ui.label.disabled {
- cursor: default;
- opacity: 1;
-}
-
-.repository .segment.reactions .ui.label.basic.primary {
- color: var(--color-primary) !important;
- background-color: var(--color-reaction-active-bg) !important;
- border-color: var(--color-secondary-dark-1) !important;
-}
-
-.repository .segment.reactions .ui.label.basic:hover {
- background-color: var(--color-reaction-hover-bg) !important;
-}
-
-.repository .segment.reactions .reaction-count {
- margin-left: 0.5rem;
-}
-
-.repository .segment.reactions .select-reaction {
- display: flex;
- align-items: center;
-}
-
-.repository .segment.reactions .select-reaction a {
- padding: 0 14px;
-}
-
-.repository .segment.reactions .select-reaction:not(.active) a {
- display: none;
-}
-
-.repository .segment.reactions:hover .select-reaction a {
- display: block;
-}
-
.repository .ui.fluid.action.input .ui.search.action.input {
flex: auto;
}
diff --git a/web_src/css/repo/reactions.css b/web_src/css/repo/reactions.css
new file mode 100644
index 0000000000000..8fe01af4f0676
--- /dev/null
+++ b/web_src/css/repo/reactions.css
@@ -0,0 +1,70 @@
+.bottom-reactions {
+ display: flex;
+ gap: 6px;
+ margin: 0 1em 1em;
+}
+
+.timeline-item .conversation-holder .bottom-reactions {
+ margin: 1em 0 0 36px;
+ padding-bottom: 8px;
+}
+
+.bottom-reactions .ui.label {
+ padding: 5px 8px;
+ font-weight: var(--font-weight-normal);
+}
+
+.bottom-reactions .ui.label.primary {
+ background-color: var(--color-reaction-active-bg) !important;
+}
+
+.bottom-reactions .ui.label:hover {
+ background-color: var(--color-reaction-hover-bg) !important;
+}
+
+.bottom-reactions .ui.label.disabled {
+ cursor: default;
+ opacity: 1;
+}
+
+.bottom-reactions .ui.label .reaction {
+ font-size: 16px;
+ display: flex;
+}
+
+.bottom-reactions .ui.label .reaction img {
+ height: 16px;
+ aspect-ratio: 1;
+}
+
+.bottom-reactions .reaction-count {
+ margin-left: 4px;
+}
+
+.ui.dropdown.select-reaction .menu {
+ min-width: 170px; /* item-outer-width * 4 */
+}
+
+.ui.dropdown.select-reaction .menu > .item {
+ float: left;
+ margin: 4px;
+ font-size: 20px;
+ width: 34px;
+ height: 34px;
+ border-radius: var(--border-radius);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.bottom-reactions .select-reaction {
+ padding: 0 10px;
+}
+
+.bottom-reactions .select-reaction:not(.active) {
+ visibility: hidden;
+}
+
+.bottom-reactions:hover .select-reaction {
+ visibility: visible;
+}
diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js
index 2def3db51a7b4..e507b89632af4 100644
--- a/web_src/js/features/comp/ReactionSelector.js
+++ b/web_src/js/features/comp/ReactionSelector.js
@@ -1,38 +1,36 @@
import $ from 'jquery';
import {POST} from '../../modules/fetch.js';
-export function initCompReactionSelector($parent) {
- $parent.find(`.select-reaction .item.reaction, .comment-reaction-button`).on('click', async function (e) {
- e.preventDefault();
+export function initCompReactionSelector() {
+ for (const container of document.querySelectorAll('.issue-content, .diff-file-body')) {
+ container.addEventListener('click', async (e) => {
+ // there are 2 places for the "reaction" buttons, one is the top-right reaction menu, one is the bottom of the comment
+ const target = e.target.closest('.comment-reaction-button');
+ if (!target) return;
+ e.preventDefault();
- if (this.classList.contains('disabled')) return;
+ if (target.classList.contains('disabled')) return;
- const actionUrl = this.closest('[data-action-url]')?.getAttribute('data-action-url');
- const reactionContent = this.getAttribute('data-reaction-content');
- const hasReacted = this.closest('.ui.segment.reactions')?.querySelector(`a[data-reaction-content="${reactionContent}"]`)?.getAttribute('data-has-reacted') === 'true';
+ const actionUrl = target.closest('[data-action-url]').getAttribute('data-action-url');
+ const reactionContent = target.getAttribute('data-reaction-content');
- const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
- data: new URLSearchParams({content: reactionContent}),
- });
+ const commentContainer = target.closest('.comment-container');
- const data = await res.json();
- if (data && (data.html || data.empty)) {
- const $content = $(this).closest('.content');
- let $react = $content.find('.segment.reactions');
- if ((!data.empty || data.html === '') && $react.length > 0) {
- $react.remove();
- }
- if (!data.empty) {
- const $attachments = $content.find('.segment.bottom:first');
- $react = $(data.html);
- if ($attachments.length > 0) {
- $react.insertBefore($attachments);
- } else {
- $react.appendTo($content);
- }
- $react.find('.dropdown').dropdown();
- initCompReactionSelector($react);
+ const bottomReactions = commentContainer.querySelector('.bottom-reactions'); // may not exist if there is no reaction
+ const bottomReactionBtn = bottomReactions?.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`);
+ const hasReacted = bottomReactionBtn?.getAttribute('data-has-reacted') === 'true';
+
+ const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
+ data: new URLSearchParams({content: reactionContent}),
+ });
+
+ const data = await res.json();
+ bottomReactions?.remove();
+ if (data.html) {
+ commentContainer.insertAdjacentHTML('beforeend', data.html);
+ const bottomReactionsDropdowns = commentContainer.querySelectorAll('.bottom-reactions .dropdown.select-reaction');
+ $(bottomReactionsDropdowns).dropdown(); // re-init the dropdown
}
- }
- });
+ });
+ }
}
diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index b2e8ec4866f98..00f74515df6a8 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -87,7 +87,6 @@ function initRepoDiffConversationForm() {
el.classList.add('tw-invisible');
}
$newConversationHolder.find('.dropdown').dropdown();
- initCompReactionSelector($newConversationHolder);
} catch (error) {
console.error('Error:', error);
showErrorToast(i18n.network_error);
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index e83de27e4cf42..18d98c891d066 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -393,7 +393,7 @@ export function initRepository() {
initRepoIssueDependencyDelete();
initRepoIssueCodeCommentCancel();
initRepoPullRequestUpdate();
- initCompReactionSelector($(document));
+ initCompReactionSelector();
initRepoPullRequestMergeForm();
initRepoPullRequestCommitStatus();