From 3d08728c955829869a203d652a927fd4cda26ae9 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 13 Apr 2024 02:34:19 +0200 Subject: [PATCH 01/17] Rewrite reaction selector and enable no-sizzle eslint rule --- .eslintrc.yaml | 4 +- web_src/js/features/comp/ReactionSelector.js | 63 +++++++++++--------- web_src/js/features/repo-diff.js | 2 +- web_src/js/features/repo-legacy.js | 2 +- 4 files changed, 39 insertions(+), 32 deletions(-) diff --git a/.eslintrc.yaml b/.eslintrc.yaml index 5fd0a245f2220..3e4c6ea50b722 100644 --- a/.eslintrc.yaml +++ b/.eslintrc.yaml @@ -318,7 +318,7 @@ rules: jquery/no-serialize: [2] jquery/no-show: [2] jquery/no-size: [2] - jquery/no-sizzle: [0] + jquery/no-sizzle: [2] jquery/no-slide: [0] jquery/no-submit: [0] jquery/no-text: [0] @@ -470,7 +470,7 @@ rules: no-jquery/no-selector-prop: [2] no-jquery/no-serialize: [2] no-jquery/no-size: [2] - no-jquery/no-sizzle: [0] + no-jquery/no-sizzle: [2] no-jquery/no-slide: [2] no-jquery/no-sub: [2] no-jquery/no-support: [2] diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js index 2def3db51a7b4..b7fd67c28a40e 100644 --- a/web_src/js/features/comp/ReactionSelector.js +++ b/web_src/js/features/comp/ReactionSelector.js @@ -1,38 +1,45 @@ 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() { + const containers = document.querySelectorAll('.comment-container, .code-comment'); + if (!containers.length) return; - if (this.classList.contains('disabled')) return; + for (const container of containers) { + container.addEventListener('click', async (e) => { + const item = e.target.matches('.item.reaction') ? e.target : e.target.closest('.item.reaction'); + const button = e.target.matches('.comment-reaction-button') ? e.target : e.target.closest('.comment-reaction-button'); + if (!item && !button) return; + e.preventDefault(); - 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 target = item || button; + if (target.classList.contains('disabled')) return; - const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, { - data: new URLSearchParams({content: reactionContent}), - }); + const actionUrl = target.closest('[data-action-url]')?.getAttribute('data-action-url'); + const reactionContent = target.getAttribute('data-reaction-content'); + const hasReacted = target.closest('.ui.segment.reactions')?.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`)?.getAttribute('data-has-reacted') === 'true'; + const content = target.closest('.content'); - 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); + const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, { + data: new URLSearchParams({content: reactionContent}), + }); + + const data = await res.json(); + if (data && (data.html || data.empty)) { + const reactions = content.querySelector('.segment.reactions'); + if ((!data.empty || data.html === '') && reactions) { + reactions.remove(); + } + if (!data.empty) { + const attachments = content.querySelector('.segment.bottom'); + if (attachments) { + attachments.insertAdjacentHTML('beforebegin', data.html); + } else { + content.insertAdjacentHTML('beforeend', data.html); + } + $(content.querySelectorAll('.segment.reactions .dropdown')).dropdown(); } - $react.find('.dropdown').dropdown(); - initCompReactionSelector($react); } - } - }); + }); + } } diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index b2e8ec4866f98..29f40271436b9 100644 --- a/web_src/js/features/repo-diff.js +++ b/web_src/js/features/repo-diff.js @@ -87,7 +87,7 @@ function initRepoDiffConversationForm() { el.classList.add('tw-invisible'); } $newConversationHolder.find('.dropdown').dropdown(); - initCompReactionSelector($newConversationHolder); + initCompReactionSelector(); } 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(); From d7f7aafd70e56eadef41d449519cb8cf7d90ff9a Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 13 Apr 2024 02:53:24 +0200 Subject: [PATCH 02/17] remove .ui --- web_src/js/features/comp/ReactionSelector.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js index b7fd67c28a40e..cce5d3162ba93 100644 --- a/web_src/js/features/comp/ReactionSelector.js +++ b/web_src/js/features/comp/ReactionSelector.js @@ -17,7 +17,7 @@ export function initCompReactionSelector() { const actionUrl = target.closest('[data-action-url]')?.getAttribute('data-action-url'); const reactionContent = target.getAttribute('data-reaction-content'); - const hasReacted = target.closest('.ui.segment.reactions')?.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`)?.getAttribute('data-has-reacted') === 'true'; + const hasReacted = target.closest('.segment.reactions')?.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`)?.getAttribute('data-has-reacted') === 'true'; const content = target.closest('.content'); const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, { From 56cf6b5bcc99f565b1e25e53ab392a9fc1236d62 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 13 Apr 2024 12:10:57 +0200 Subject: [PATCH 03/17] avoid necessary init by using higher-up parent --- web_src/js/features/comp/ReactionSelector.js | 3 +-- web_src/js/features/repo-diff.js | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js index cce5d3162ba93..793ab360d95c9 100644 --- a/web_src/js/features/comp/ReactionSelector.js +++ b/web_src/js/features/comp/ReactionSelector.js @@ -2,7 +2,7 @@ import $ from 'jquery'; import {POST} from '../../modules/fetch.js'; export function initCompReactionSelector() { - const containers = document.querySelectorAll('.comment-container, .code-comment'); + const containers = document.querySelectorAll('.comment-list, .diff-file-body'); if (!containers.length) return; for (const container of containers) { @@ -11,7 +11,6 @@ export function initCompReactionSelector() { const button = e.target.matches('.comment-reaction-button') ? e.target : e.target.closest('.comment-reaction-button'); if (!item && !button) return; e.preventDefault(); - const target = item || button; if (target.classList.contains('disabled')) return; diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index 29f40271436b9..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(); } catch (error) { console.error('Error:', error); showErrorToast(i18n.network_error); From 8b090f1ff6416c29ae513b880d5b3638b3281231 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 13 Apr 2024 12:12:57 +0200 Subject: [PATCH 04/17] whitespace --- web_src/js/features/comp/ReactionSelector.js | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js index 793ab360d95c9..d46fe28bf9df1 100644 --- a/web_src/js/features/comp/ReactionSelector.js +++ b/web_src/js/features/comp/ReactionSelector.js @@ -11,6 +11,7 @@ export function initCompReactionSelector() { const button = e.target.matches('.comment-reaction-button') ? e.target : e.target.closest('.comment-reaction-button'); if (!item && !button) return; e.preventDefault(); + const target = item || button; if (target.classList.contains('disabled')) return; From fbd25fa534a96d8b3b4e38dec20fde63c1df120f Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 13 Apr 2024 12:18:28 +0200 Subject: [PATCH 05/17] remove unneeded .matches --- web_src/js/features/comp/ReactionSelector.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js index d46fe28bf9df1..aa0db0e387cd6 100644 --- a/web_src/js/features/comp/ReactionSelector.js +++ b/web_src/js/features/comp/ReactionSelector.js @@ -7,8 +7,8 @@ export function initCompReactionSelector() { for (const container of containers) { container.addEventListener('click', async (e) => { - const item = e.target.matches('.item.reaction') ? e.target : e.target.closest('.item.reaction'); - const button = e.target.matches('.comment-reaction-button') ? e.target : e.target.closest('.comment-reaction-button'); + const item = e.target.closest('.item.reaction'); + const button = e.target.closest('.comment-reaction-button'); if (!item && !button) return; e.preventDefault(); From adf6d1cefe85676a1ad89475c5b6d0e3fa045597 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 13 Apr 2024 12:21:54 +0200 Subject: [PATCH 06/17] remove optional chaining --- web_src/js/features/comp/ReactionSelector.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js index aa0db0e387cd6..3a15e3216472a 100644 --- a/web_src/js/features/comp/ReactionSelector.js +++ b/web_src/js/features/comp/ReactionSelector.js @@ -15,9 +15,9 @@ export function initCompReactionSelector() { const target = item || button; if (target.classList.contains('disabled')) return; - const actionUrl = target.closest('[data-action-url]')?.getAttribute('data-action-url'); + const actionUrl = target.closest('[data-action-url]').getAttribute('data-action-url'); const reactionContent = target.getAttribute('data-reaction-content'); - const hasReacted = target.closest('.segment.reactions')?.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`)?.getAttribute('data-has-reacted') === 'true'; + const hasReacted = target.closest('.segment.reactions').querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`).getAttribute('data-has-reacted') === 'true'; const content = target.closest('.content'); const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, { From 456ea0f7fdbc7f2c7f2bf111577cd79822bf12c6 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 13 Apr 2024 12:22:39 +0200 Subject: [PATCH 07/17] simplify for loop --- web_src/js/features/comp/ReactionSelector.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js index 3a15e3216472a..c36107fce8880 100644 --- a/web_src/js/features/comp/ReactionSelector.js +++ b/web_src/js/features/comp/ReactionSelector.js @@ -2,10 +2,7 @@ import $ from 'jquery'; import {POST} from '../../modules/fetch.js'; export function initCompReactionSelector() { - const containers = document.querySelectorAll('.comment-list, .diff-file-body'); - if (!containers.length) return; - - for (const container of containers) { + for (const container of document.querySelectorAll('.comment-list, .diff-file-body')) { container.addEventListener('click', async (e) => { const item = e.target.closest('.item.reaction'); const button = e.target.closest('.comment-reaction-button'); From 6e00683937f2f2eb9f9f4394e584c0c4e63a696f Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 13 Apr 2024 12:49:33 +0200 Subject: [PATCH 08/17] fix all bugs --- web_src/js/features/comp/ReactionSelector.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js index c36107fce8880..b84056635fdd8 100644 --- a/web_src/js/features/comp/ReactionSelector.js +++ b/web_src/js/features/comp/ReactionSelector.js @@ -2,7 +2,7 @@ import $ from 'jquery'; import {POST} from '../../modules/fetch.js'; export function initCompReactionSelector() { - for (const container of document.querySelectorAll('.comment-list, .diff-file-body')) { + for (const container of document.querySelectorAll('.issue-content, .diff-file-body')) { container.addEventListener('click', async (e) => { const item = e.target.closest('.item.reaction'); const button = e.target.closest('.comment-reaction-button'); @@ -14,7 +14,14 @@ export function initCompReactionSelector() { const actionUrl = target.closest('[data-action-url]').getAttribute('data-action-url'); const reactionContent = target.getAttribute('data-reaction-content'); - const hasReacted = target.closest('.segment.reactions').querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`).getAttribute('data-has-reacted') === 'true'; + + const reactions = target.closest('.comment').querySelector('.segment.reactions'); + + let hasReacted = false; + if (reactions) { + const btn = reactions.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`); + hasReacted = Boolean(btn?.getAttribute('data-has-reacted') === 'true'); + } const content = target.closest('.content'); const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, { @@ -23,7 +30,6 @@ export function initCompReactionSelector() { const data = await res.json(); if (data && (data.html || data.empty)) { - const reactions = content.querySelector('.segment.reactions'); if ((!data.empty || data.html === '') && reactions) { reactions.remove(); } From 9c95a113f63e24f33e41f67a6fc29d4766b89ecc Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sat, 13 Apr 2024 19:31:17 +0800 Subject: [PATCH 09/17] refactor --- routers/web/repo/issue.go | 2 -- services/context/context.go | 1 + templates/repo/diff/comments.tmpl | 4 +-- templates/repo/issue/view_content.tmpl | 4 +-- .../repo/issue/view_content/add_reaction.tmpl | 10 +++--- .../repo/issue/view_content/comments.tmpl | 8 ++--- .../repo/issue/view_content/conversation.tmpl | 6 ++-- .../repo/issue/view_content/reactions.tmpl | 6 ++-- web_src/css/base.css | 6 ++-- web_src/css/repo.css | 20 +++-------- web_src/js/features/comp/ReactionSelector.js | 36 +++++++------------ 11 files changed, 37 insertions(+), 66 deletions(-) diff --git a/routers/web/repo/issue.go b/routers/web/repo/issue.go index e4f2e9a2bc24d..1364d7567661d 100644 --- a/routers/web/repo/issue.go +++ b/routers/web/repo/issue.go @@ -3318,7 +3318,6 @@ func ChangeIssueReaction(ctx *context.Context) { } html, err := ctx.RenderToHTML(tplReactions, map[string]any{ - "ctxData": ctx.Data, "ActionURL": fmt.Sprintf("%s/issues/%d/reactions", ctx.Repo.RepoLink, issue.Index), "Reactions": issue.Reactions.GroupByType(), }) @@ -3425,7 +3424,6 @@ func ChangeCommentReaction(ctx *context.Context) { } html, err := ctx.RenderToHTML(tplReactions, map[string]any{ - "ctxData": ctx.Data, "ActionURL": fmt.Sprintf("%s/comments/%d/reactions", ctx.Repo.RepoLink, comment.ID), "Reactions": comment.Reactions.GroupByType(), }) diff --git a/services/context/context.go b/services/context/context.go index 7ab48afb73de7..9d7787bf4b41c 100644 --- a/services/context/context.go +++ b/services/context/context.go @@ -101,6 +101,7 @@ func NewTemplateContextForWeb(ctx *Context) TemplateContext { tmplCtx := NewTemplateContext(ctx) tmplCtx["Locale"] = ctx.Base.Locale tmplCtx["AvatarUtils"] = templates.NewAvatarUtils(ctx) + tmplCtx["RootData"] = ctx.Data return tmplCtx } diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl index a9120465bdc4b..c7f4337182415 100644 --- a/templates/repo/diff/comments.tmpl +++ b/templates/repo/diff/comments.tmpl @@ -48,7 +48,7 @@ {{end}} {{end}} - {{template "repo/issue/view_content/add_reaction" dict "ctxData" $.root "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID)}} + {{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID)}} {{template "repo/issue/view_content/context_menu" dict "ctxData" $.root "item" . "delete" true "issue" false "diff" true "IsCommentPoster" (and $.root.IsSigned (eq $.root.SignedUserID .PosterID))}} @@ -68,7 +68,7 @@ {{$reactions := .Reactions.GroupByType}} {{if $reactions}} - {{template "repo/issue/view_content/reactions" dict "ctxData" $.root "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID) "Reactions" $reactions}} + {{template "repo/issue/view_content/reactions" dict "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID) "Reactions" $reactions}} {{end}} diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl index c65b79dea70b8..06d0586683be2 100644 --- a/templates/repo/issue/view_content.tmpl +++ b/templates/repo/issue/view_content.tmpl @@ -46,7 +46,7 @@
{{template "repo/issue/view_content/show_role" dict "ShowRole" .Issue.ShowRole "IgnorePoster" true}} {{if not $.Repository.IsArchived}} - {{template "repo/issue/view_content/add_reaction" dict "ctxData" $ "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index)}} + {{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index)}} {{end}} {{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" .Issue "delete" false "issue" true "diff" false "IsCommentPoster" $.IsIssuePoster}}
@@ -67,7 +67,7 @@ {{$reactions := .Issue.Reactions.GroupByType}} {{if $reactions}} - {{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions}} + {{template "repo/issue/view_content/reactions" dict "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions}} {{end}} diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl index 37931f287e3db..b69e599c26c17 100644 --- a/templates/repo/issue/view_content/add_reaction.tmpl +++ b/templates/repo/issue/view_content/add_reaction.tmpl @@ -1,11 +1,9 @@ -{{if .ctxData.IsSigned}} +{{if ctx.RootData.IsSigned}}
- - {{svg "octicon-smiley"}} - -
+ {{svg "octicon-smiley"}} +
{{range $value := AllowedReactions}} - {{ReactionToEmoji $value}} + {{ReactionToEmoji $value}} {{end}}
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl index f65dc6ee90c85..9dbd73442ab4b 100644 --- a/templates/repo/issue/view_content/comments.tmpl +++ b/templates/repo/issue/view_content/comments.tmpl @@ -53,7 +53,7 @@
{{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)}} {{end}} {{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" . "delete" true "issue" true "diff" false "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}}
@@ -74,7 +74,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}} @@ -427,7 +427,7 @@
{{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" false "issue" true "diff" false "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}} {{end}}
@@ -448,7 +448,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}} diff --git a/templates/repo/issue/view_content/conversation.tmpl b/templates/repo/issue/view_content/conversation.tmpl index 79e7cb498bca8..0224dcdb45d90 100644 --- a/templates/repo/issue/view_content/conversation.tmpl +++ b/templates/repo/issue/view_content/conversation.tmpl @@ -56,7 +56,7 @@ {{range .comments}} {{$createdSubStr:= TimeSinceUnix .CreatedUnix ctx.Locale}}
-
+
{{if not .OriginalAuthor}} @@ -82,7 +82,7 @@
{{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 @@
{{$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}}
diff --git a/templates/repo/issue/view_content/reactions.tmpl b/templates/repo/issue/view_content/reactions.tmpl index da6319667bf74..87cd37bc8280d 100644 --- a/templates/repo/issue/view_content/reactions.tmpl +++ b/templates/repo/issue/view_content/reactions.tmpl @@ -1,7 +1,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/repo.css b/web_src/css/repo.css index c579745238de6..050bf36cb1633 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1902,19 +1902,12 @@ 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; @@ -1978,20 +1971,15 @@ td .commit-summary { } .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 .select-reaction:not(.active) { + visibility: hidden; } -.repository .segment.reactions:hover .select-reaction a { - display: block; +.repository .segment.reactions:hover .select-reaction { + visibility: visible; } .repository .ui.fluid.action.input .ui.search.action.input { diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js index b84056635fdd8..7a670d46bc772 100644 --- a/web_src/js/features/comp/ReactionSelector.js +++ b/web_src/js/features/comp/ReactionSelector.js @@ -4,44 +4,32 @@ import {POST} from '../../modules/fetch.js'; export function initCompReactionSelector() { for (const container of document.querySelectorAll('.issue-content, .diff-file-body')) { container.addEventListener('click', async (e) => { - const item = e.target.closest('.item.reaction'); - const button = e.target.closest('.comment-reaction-button'); - if (!item && !button) return; + // 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(); - const target = item || button; if (target.classList.contains('disabled')) return; const actionUrl = target.closest('[data-action-url]').getAttribute('data-action-url'); const reactionContent = target.getAttribute('data-reaction-content'); - const reactions = target.closest('.comment').querySelector('.segment.reactions'); + const commentContainer = target.closest('.comment-container'); - let hasReacted = false; - if (reactions) { - const btn = reactions.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`); - hasReacted = Boolean(btn?.getAttribute('data-has-reacted') === 'true'); - } - const content = target.closest('.content'); + const bottomReactions = commentContainer.querySelector('.segment.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(); - if (data && (data.html || data.empty)) { - if ((!data.empty || data.html === '') && reactions) { - reactions.remove(); - } - if (!data.empty) { - const attachments = content.querySelector('.segment.bottom'); - if (attachments) { - attachments.insertAdjacentHTML('beforebegin', data.html); - } else { - content.insertAdjacentHTML('beforeend', data.html); - } - $(content.querySelectorAll('.segment.reactions .dropdown')).dropdown(); - } + bottomReactions?.remove(); + if (data.html) { + commentContainer.insertAdjacentHTML('beforeend', data.html); + const bottomReactionsDropdowns = commentContainer.querySelectorAll('.segment.reactions .dropdown.select-reaction'); + $(bottomReactionsDropdowns).dropdown(); // re-init the dropdown } }); } From 472e6bd7783c4b8a53f7f5db2d33ececfd96fb29 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sat, 13 Apr 2024 19:42:42 +0800 Subject: [PATCH 10/17] fix conversation-holder comment style --- web_src/css/repo.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 050bf36cb1633..3e5c79f2f1722 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -930,6 +930,10 @@ td .commit-summary { border-radius: var(--border-radius); } +.repository.view.issue .comment-list .conversation-holder .comment .comment-container { + border: none; +} + @media (max-width: 767.98px) { .repository.view.issue .comment-list .comment .content .form .button { width: 100%; From 921fadae271cdf453e1072f25ad9eb6f63eda052 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sat, 13 Apr 2024 20:08:43 +0800 Subject: [PATCH 11/17] fix emoji size --- templates/repo/issue/view_content/add_reaction.tmpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl index b69e599c26c17..6baded8fe9460 100644 --- a/templates/repo/issue/view_content/add_reaction.tmpl +++ b/templates/repo/issue/view_content/add_reaction.tmpl @@ -3,7 +3,7 @@ {{svg "octicon-smiley"}}
{{range $value := AllowedReactions}} - {{ReactionToEmoji $value}} + {{ReactionToEmoji $value}} {{end}}
From 23535a22a5bd4794601d82bab514954aa2d84827 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 13 Apr 2024 14:59:00 +0200 Subject: [PATCH 12/17] re-style --- web_src/css/index.css | 1 + web_src/css/repo.css | 104 --------------------------------- web_src/css/repo/reactions.css | 92 +++++++++++++++++++++++++++++ 3 files changed, 93 insertions(+), 104 deletions(-) create mode 100644 web_src/css/repo/reactions.css 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/repo.css b/web_src/css/repo.css index 3e5c79f2f1722..075abf09e59ff 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1046,30 +1046,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; } @@ -1906,86 +1882,6 @@ td .commit-summary { border-bottom: 1px solid var(--color-warning-border); } -.repository .select-reaction.dropdown .menu { - right: 0 !important; - left: auto !important; - min-width: 170px; -} - -.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 { - padding: 0 14px; -} - -.repository .segment.reactions .select-reaction:not(.active) { - visibility: hidden; -} - -.repository .segment.reactions:hover .select-reaction { - visibility: visible; -} - .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..bb4864bb4f6ee --- /dev/null +++ b/web_src/css/repo/reactions.css @@ -0,0 +1,92 @@ +.segment.reactions { + padding: 0; + display: flex; + border: none !important; + width: 100% !important; + max-width: 100% !important; + margin: 0 !important; + gap: 6px; + padding: 0 1em 1em 1em !important; + border-radius: 0 0 var(--border-radius) var(--border-radius); +} + +.comment-code-cloud .segment.reactions { + padding-top: 1em !important; + padding-bottom: 0 !important; +} + +.segment.reactions .ui.label { + border: 1px solid; + padding: 5px 8px !important; + display: flex !important; + align-items: center; + font-size: 12px; + border-radius: var(--border-radius); + background: var(--color-reaction-bg); + font-weight: var(--font-weight-normal); + border-color: var(--color-secondary-dark-1) !important; +} + +.segment.reactions .ui.label.disabled { + cursor: default; + opacity: 1; +} + +.segment.reactions .ui.label .reaction { + font-size: 16px !important; + display: flex; +} + +.segment.reactions .ui.label .reaction img { + height: 16px; + aspect-ratio: 1; +} + +.segment.reactions .ui.label.basic.primary { + color: var(--color-primary) !important; + background-color: var(--color-reaction-active-bg) !important; + border-color: var(--color-primary-alpha-80) !important; +} + +.segment.reactions .ui.label.basic:hover { + background-color: var(--color-reaction-hover-bg) !important; +} + +.segment.reactions .reaction-count { + margin-left: 4px; +} + +.select-reaction.dropdown .menu { + right: 0 !important; + left: auto !important; + min-width: 170px; +} + +.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; +} + +.segment.reactions .select-reaction { + padding: 0 10px; +} + +.segment.reactions .select-reaction a { + color: inherit; +} + +.segment.reactions .select-reaction:not(.active) { + visibility: hidden; +} + +.segment.reactions:hover .select-reaction { + visibility: visible; +} From cb755a444c0cf69545f082f931850cd038a773ee Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 13 Apr 2024 15:06:19 +0200 Subject: [PATCH 13/17] fix lint --- web_src/css/repo/reactions.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web_src/css/repo/reactions.css b/web_src/css/repo/reactions.css index bb4864bb4f6ee..5742b135be0e1 100644 --- a/web_src/css/repo/reactions.css +++ b/web_src/css/repo/reactions.css @@ -1,12 +1,11 @@ .segment.reactions { - padding: 0; display: flex; border: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; gap: 6px; - padding: 0 1em 1em 1em !important; + padding: 0 1em 1em !important; border-radius: 0 0 var(--border-radius) var(--border-radius); } From 37b004c8e68a0cf3e8756e8f01f7ab9de4e947f0 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 13 Apr 2024 15:20:40 +0200 Subject: [PATCH 14/17] fix selector to only target timeline item --- web_src/css/repo/reactions.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/repo/reactions.css b/web_src/css/repo/reactions.css index 5742b135be0e1..644b4874366ff 100644 --- a/web_src/css/repo/reactions.css +++ b/web_src/css/repo/reactions.css @@ -9,7 +9,7 @@ border-radius: 0 0 var(--border-radius) var(--border-radius); } -.comment-code-cloud .segment.reactions { +.timeline-item .conversation-holder .segment.reactions { padding-top: 1em !important; padding-bottom: 0 !important; } From 84b62cc5bc483166f534bdf08c85d5b4ca3c50f8 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sat, 13 Apr 2024 22:22:18 +0800 Subject: [PATCH 15/17] simplify styles --- .../repo/issue/view_content/reactions.tmpl | 2 +- web_src/css/repo.css | 1 + web_src/css/repo/reactions.css | 74 +++++++------------ web_src/js/features/comp/ReactionSelector.js | 4 +- 4 files changed, 30 insertions(+), 51 deletions(-) diff --git a/templates/repo/issue/view_content/reactions.tmpl b/templates/repo/issue/view_content/reactions.tmpl index 87cd37bc8280d..0011efe8b286f 100644 --- a/templates/repo/issue/view_content/reactions.tmpl +++ b/templates/repo/issue/view_content/reactions.tmpl @@ -1,4 +1,4 @@ -
+
{{range $key, $value := .Reactions}} {{$hasReacted := $value.HasUser ctx.RootData.SignedUserID}} .item { +.ui.dropdown.select-reaction .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; + display: flex; align-items: center; justify-content: center; } -.segment.reactions .select-reaction { +.bottom-reactions .select-reaction { padding: 0 10px; } -.segment.reactions .select-reaction a { - color: inherit; -} - -.segment.reactions .select-reaction:not(.active) { +.bottom-reactions .select-reaction:not(.active) { visibility: hidden; } -.segment.reactions:hover .select-reaction { +.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 7a670d46bc772..e507b89632af4 100644 --- a/web_src/js/features/comp/ReactionSelector.js +++ b/web_src/js/features/comp/ReactionSelector.js @@ -16,7 +16,7 @@ export function initCompReactionSelector() { const commentContainer = target.closest('.comment-container'); - const bottomReactions = commentContainer.querySelector('.segment.reactions'); // may not exist if there is no reaction + 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'; @@ -28,7 +28,7 @@ export function initCompReactionSelector() { bottomReactions?.remove(); if (data.html) { commentContainer.insertAdjacentHTML('beforeend', data.html); - const bottomReactionsDropdowns = commentContainer.querySelectorAll('.segment.reactions .dropdown.select-reaction'); + const bottomReactionsDropdowns = commentContainer.querySelectorAll('.bottom-reactions .dropdown.select-reaction'); $(bottomReactionsDropdowns).dropdown(); // re-init the dropdown } }); From 602c1b9fe43a0de2a0e31ef8c5eb0fafe9d5dfe1 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sat, 13 Apr 2024 22:38:46 +0800 Subject: [PATCH 16/17] remove pb-4 --- templates/repo/issue/view_content/conversation.tmpl | 2 +- web_src/css/repo/reactions.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/repo/issue/view_content/conversation.tmpl b/templates/repo/issue/view_content/conversation.tmpl index 0224dcdb45d90..ac32a2db5d2a2 100644 --- a/templates/repo/issue/view_content/conversation.tmpl +++ b/templates/repo/issue/view_content/conversation.tmpl @@ -55,7 +55,7 @@
{{range .comments}} {{$createdSubStr:= TimeSinceUnix .CreatedUnix ctx.Locale}} -
+
diff --git a/web_src/css/repo/reactions.css b/web_src/css/repo/reactions.css index 780e91235649b..e0a9586961616 100644 --- a/web_src/css/repo/reactions.css +++ b/web_src/css/repo/reactions.css @@ -5,7 +5,7 @@ } .timeline-item .conversation-holder .bottom-reactions { - margin: 1em 0 -1em 36px; /* because there is a bottom padding on parent: "comment code-comment tw-pb-4" */ + margin: 1em 0 0 36px; } .bottom-reactions .ui.label { From fc753e704ef0dd4c7b0f3d263f64b5abe7ed065a Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 13 Apr 2024 17:27:53 +0200 Subject: [PATCH 17/17] fix padding and tweak gap between comments --- web_src/css/modules/comment.css | 2 +- web_src/css/repo.css | 3 +++ web_src/css/repo/reactions.css | 1 + 3 files changed, 5 insertions(+), 1 deletion(-) 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 031d9248087b6..e60ef1affa09d 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 { diff --git a/web_src/css/repo/reactions.css b/web_src/css/repo/reactions.css index e0a9586961616..8fe01af4f0676 100644 --- a/web_src/css/repo/reactions.css +++ b/web_src/css/repo/reactions.css @@ -6,6 +6,7 @@ .timeline-item .conversation-holder .bottom-reactions { margin: 1em 0 0 36px; + padding-bottom: 8px; } .bottom-reactions .ui.label {