Enable `no-sizzle` lint rule, there was only one use in `initCompReactionSelector` and: - Remove all jQuery except the necessary fomantic dropdown init - Remove the recursion, instead bind event listeners to common parent container nodes --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>tags/v1.22.0-rc1
jquery/no-serialize: [2] | jquery/no-serialize: [2] | ||||
jquery/no-show: [2] | jquery/no-show: [2] | ||||
jquery/no-size: [2] | jquery/no-size: [2] | ||||
jquery/no-sizzle: [0] | |||||
jquery/no-sizzle: [2] | |||||
jquery/no-slide: [0] | jquery/no-slide: [0] | ||||
jquery/no-submit: [0] | jquery/no-submit: [0] | ||||
jquery/no-text: [0] | jquery/no-text: [0] | ||||
no-jquery/no-selector-prop: [2] | no-jquery/no-selector-prop: [2] | ||||
no-jquery/no-serialize: [2] | no-jquery/no-serialize: [2] | ||||
no-jquery/no-size: [2] | no-jquery/no-size: [2] | ||||
no-jquery/no-sizzle: [0] | |||||
no-jquery/no-sizzle: [2] | |||||
no-jquery/no-slide: [2] | no-jquery/no-slide: [2] | ||||
no-jquery/no-sub: [2] | no-jquery/no-sub: [2] | ||||
no-jquery/no-support: [2] | no-jquery/no-support: [2] |
} | } | ||||
html, err := ctx.RenderToHTML(tplReactions, map[string]any{ | html, err := ctx.RenderToHTML(tplReactions, map[string]any{ | ||||
"ctxData": ctx.Data, | |||||
"ActionURL": fmt.Sprintf("%s/issues/%d/reactions", ctx.Repo.RepoLink, issue.Index), | "ActionURL": fmt.Sprintf("%s/issues/%d/reactions", ctx.Repo.RepoLink, issue.Index), | ||||
"Reactions": issue.Reactions.GroupByType(), | "Reactions": issue.Reactions.GroupByType(), | ||||
}) | }) | ||||
} | } | ||||
html, err := ctx.RenderToHTML(tplReactions, map[string]any{ | html, err := ctx.RenderToHTML(tplReactions, map[string]any{ | ||||
"ctxData": ctx.Data, | |||||
"ActionURL": fmt.Sprintf("%s/comments/%d/reactions", ctx.Repo.RepoLink, comment.ID), | "ActionURL": fmt.Sprintf("%s/comments/%d/reactions", ctx.Repo.RepoLink, comment.ID), | ||||
"Reactions": comment.Reactions.GroupByType(), | "Reactions": comment.Reactions.GroupByType(), | ||||
}) | }) |
tmplCtx := NewTemplateContext(ctx) | tmplCtx := NewTemplateContext(ctx) | ||||
tmplCtx["Locale"] = ctx.Base.Locale | tmplCtx["Locale"] = ctx.Base.Locale | ||||
tmplCtx["AvatarUtils"] = templates.NewAvatarUtils(ctx) | tmplCtx["AvatarUtils"] = templates.NewAvatarUtils(ctx) | ||||
tmplCtx["RootData"] = ctx.Data | |||||
return tmplCtx | return tmplCtx | ||||
} | } | ||||
</div> | </div> | ||||
{{end}} | {{end}} | ||||
{{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))}} | {{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))}} | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
{{$reactions := .Reactions.GroupByType}} | {{$reactions := .Reactions.GroupByType}} | ||||
{{if $reactions}} | {{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}} | {{end}} | ||||
</div> | </div> | ||||
</div> | </div> |
<div class="comment-header-right actions tw-flex tw-items-center"> | <div class="comment-header-right actions tw-flex tw-items-center"> | ||||
{{template "repo/issue/view_content/show_role" dict "ShowRole" .Issue.ShowRole "IgnorePoster" true}} | {{template "repo/issue/view_content/show_role" dict "ShowRole" .Issue.ShowRole "IgnorePoster" true}} | ||||
{{if not $.Repository.IsArchived}} | {{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}} | {{end}} | ||||
{{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" .Issue "delete" false "issue" true "diff" false "IsCommentPoster" $.IsIssuePoster}} | {{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" .Issue "delete" false "issue" true "diff" false "IsCommentPoster" $.IsIssuePoster}} | ||||
</div> | </div> | ||||
</div> | </div> | ||||
{{$reactions := .Issue.Reactions.GroupByType}} | {{$reactions := .Issue.Reactions.GroupByType}} | ||||
{{if $reactions}} | {{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}} | {{end}} | ||||
</div> | </div> | ||||
</div> | </div> |
{{if .ctxData.IsSigned}} | |||||
{{if ctx.RootData.IsSigned}} | |||||
<div class="item action ui dropdown jump pointing top right select-reaction" data-action-url="{{.ActionURL}}"> | <div class="item action ui dropdown jump pointing top right select-reaction" data-action-url="{{.ActionURL}}"> | ||||
<a class="add-reaction muted"> | |||||
{{svg "octicon-smiley"}} | |||||
</a> | |||||
<div class="menu reactions-menu"> | |||||
<a class="muted">{{svg "octicon-smiley"}}</a> | |||||
<div class="menu"> | |||||
{{range $value := AllowedReactions}} | {{range $value := AllowedReactions}} | ||||
<a class="item reaction" data-tooltip-content="{{$value}}" aria-label="{{$value}}" data-reaction-content="{{$value}}">{{ReactionToEmoji $value}}</a> | |||||
<a class="item emoji comment-reaction-button" data-tooltip-content="{{$value}}" aria-label="{{$value}}" data-reaction-content="{{$value}}">{{ReactionToEmoji $value}}</a> | |||||
{{end}} | {{end}} | ||||
</div> | </div> | ||||
</div> | </div> |
<div class="comment-header-right actions tw-flex tw-items-center"> | <div class="comment-header-right actions tw-flex tw-items-center"> | ||||
{{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole}} | {{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole}} | ||||
{{if not $.Repository.IsArchived}} | {{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}} | {{end}} | ||||
{{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" . "delete" true "issue" true "diff" false "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}} | {{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" . "delete" true "issue" true "diff" false "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}} | ||||
</div> | </div> | ||||
</div> | </div> | ||||
{{$reactions := .Reactions.GroupByType}} | {{$reactions := .Reactions.GroupByType}} | ||||
{{if $reactions}} | {{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}} | {{end}} | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="comment-header-right actions tw-flex tw-items-center"> | <div class="comment-header-right actions tw-flex tw-items-center"> | ||||
{{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole}} | {{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole}} | ||||
{{if not $.Repository.IsArchived}} | {{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))}} | {{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" . "delete" false "issue" true "diff" false "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}} | ||||
{{end}} | {{end}} | ||||
</div> | </div> | ||||
</div> | </div> | ||||
{{$reactions := .Reactions.GroupByType}} | {{$reactions := .Reactions.GroupByType}} | ||||
{{if $reactions}} | {{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}} | {{end}} | ||||
</div> | </div> | ||||
</div> | </div> |
<div class="ui comments tw-mb-0"> | <div class="ui comments tw-mb-0"> | ||||
{{range .comments}} | {{range .comments}} | ||||
{{$createdSubStr:= TimeSinceUnix .CreatedUnix ctx.Locale}} | {{$createdSubStr:= TimeSinceUnix .CreatedUnix ctx.Locale}} | ||||
<div class="comment code-comment tw-pb-4" id="{{.HashTag}}"> | |||||
<div class="content"> | |||||
<div class="comment code-comment" id="{{.HashTag}}"> | |||||
<div class="content comment-container"> | |||||
<div class="header comment-header"> | <div class="header comment-header"> | ||||
<div class="comment-header-left tw-flex tw-items-center"> | <div class="comment-header-left tw-flex tw-items-center"> | ||||
{{if not .OriginalAuthor}} | {{if not .OriginalAuthor}} | ||||
<div class="comment-header-right actions tw-flex tw-items-center"> | <div class="comment-header-right actions tw-flex tw-items-center"> | ||||
{{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole}} | {{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole}} | ||||
{{if not $.Repository.IsArchived}} | {{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))}} | {{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" . "delete" true "issue" true "diff" true "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}} | ||||
{{end}} | {{end}} | ||||
</div> | </div> | ||||
</div> | </div> | ||||
{{$reactions := .Reactions.GroupByType}} | {{$reactions := .Reactions.GroupByType}} | ||||
{{if $reactions}} | {{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}} | {{end}} | ||||
</div> | </div> | ||||
</div> | </div> |
<div class="ui attached segment reactions" data-action-url="{{$.ActionURL}}"> | |||||
<div class="bottom-reactions" data-action-url="{{$.ActionURL}}"> | |||||
{{range $key, $value := .Reactions}} | {{range $key, $value := .Reactions}} | ||||
{{$hasReacted := $value.HasUser $.ctxData.SignedUserID}} | |||||
<a role="button" class="ui label basic{{if $hasReacted}} primary{{end}}{{if not $.ctxData.IsSigned}} disabled{{end}} comment-reaction-button" | |||||
{{$hasReacted := $value.HasUser ctx.RootData.SignedUserID}} | |||||
<a role="button" class="ui label basic{{if $hasReacted}} primary{{end}}{{if not ctx.RootData.IsSigned}} disabled{{end}} comment-reaction-button" | |||||
data-tooltip-content | data-tooltip-content | ||||
title="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{ctx.Locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}" | title="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{ctx.Locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}" | ||||
aria-label="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{ctx.Locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}" | aria-label="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{ctx.Locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}" | ||||
</a> | </a> | ||||
{{end}} | {{end}} | ||||
{{if AllowedReactions}} | {{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}} | {{end}} | ||||
</div> | </div> |
box-shadow: 0 0 0 1px var(--color-secondary) inset; | box-shadow: 0 0 0 1px var(--color-secondary) inset; | ||||
} | } | ||||
.emoji, | |||||
.reaction { | |||||
.emoji { | |||||
font-size: 1.25em; | font-size: 1.25em; | ||||
line-height: var(--line-height-default); | line-height: var(--line-height-default); | ||||
font-style: normal !important; | font-style: normal !important; | ||||
vertical-align: -0.075em; | vertical-align: -0.075em; | ||||
} | } | ||||
.emoji img, | |||||
.reaction img { | |||||
.emoji img { | |||||
border-width: 0 !important; | border-width: 0 !important; | ||||
margin: 0 !important; | margin: 0 !important; | ||||
width: 1em !important; | width: 1em !important; |
@import "./repo/linebutton.css"; | @import "./repo/linebutton.css"; | ||||
@import "./repo/wiki.css"; | @import "./repo/wiki.css"; | ||||
@import "./repo/header.css"; | @import "./repo/header.css"; | ||||
@import "./repo/reactions.css"; | |||||
@import "./editor/fileeditor.css"; | @import "./editor/fileeditor.css"; | ||||
@import "./editor/combomarkdowneditor.css"; | @import "./editor/combomarkdowneditor.css"; |
.ui.comments .comment { | .ui.comments .comment { | ||||
position: relative; | position: relative; | ||||
background: none; | background: none; | ||||
margin: 0.5em 0 0; | |||||
margin: 3px 0 0; | |||||
padding: 0.5em 0 0; | padding: 0.5em 0 0; | ||||
border: none; | border: none; | ||||
border-top: none; | border-top: none; |
.repository.view.issue .comment-list .ui.comments { | .repository.view.issue .comment-list .ui.comments { | ||||
max-width: 100%; | max-width: 100%; | ||||
display: flex; | |||||
flex-direction: column; | |||||
gap: 3px; | |||||
} | } | ||||
.repository.view.issue .comment-list .comment > .content > div:first-child { | .repository.view.issue .comment-list .comment > .content > div:first-child { | ||||
.repository.view.issue .comment-list .comment .comment-container { | .repository.view.issue .comment-list .comment .comment-container { | ||||
border: 1px solid var(--color-secondary); | border: 1px solid var(--color-secondary); | ||||
border-radius: var(--border-radius); | 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) { | @media (max-width: 767.98px) { | ||||
margin-left: 42px; | 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 { | .repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply { | ||||
margin: 0; | margin: 0; | ||||
} | } | ||||
border-bottom: 1px solid var(--color-warning-border); | 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 { | .repository .ui.fluid.action.input .ui.search.action.input { | ||||
flex: auto; | flex: auto; | ||||
} | } |
.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; | |||||
} |
import $ from 'jquery'; | import $ from 'jquery'; | ||||
import {POST} from '../../modules/fetch.js'; | 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 | |||||
} | } | ||||
} | |||||
}); | |||||
}); | |||||
} | |||||
} | } |
el.classList.add('tw-invisible'); | el.classList.add('tw-invisible'); | ||||
} | } | ||||
$newConversationHolder.find('.dropdown').dropdown(); | $newConversationHolder.find('.dropdown').dropdown(); | ||||
initCompReactionSelector($newConversationHolder); | |||||
} catch (error) { | } catch (error) { | ||||
console.error('Error:', error); | console.error('Error:', error); | ||||
showErrorToast(i18n.network_error); | showErrorToast(i18n.network_error); |
initRepoIssueDependencyDelete(); | initRepoIssueDependencyDelete(); | ||||
initRepoIssueCodeCommentCancel(); | initRepoIssueCodeCommentCancel(); | ||||
initRepoPullRequestUpdate(); | initRepoPullRequestUpdate(); | ||||
initCompReactionSelector($(document)); | |||||
initCompReactionSelector(); | |||||
initRepoPullRequestMergeForm(); | initRepoPullRequestMergeForm(); | ||||
initRepoPullRequestCommitStatus(); | initRepoPullRequestCommitStatus(); |