Skip to content

Commit 4b1063f

Browse files
silverwindwxiaoguangGiteaBot
authored
Rewrite and restyle reaction selector and enable no-sizzle eslint rule (#30453)
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 <[email protected]> Co-authored-by: Giteabot <[email protected]>
1 parent 6999a88 commit 4b1063f

File tree

17 files changed

+133
-178
lines changed

17 files changed

+133
-178
lines changed

‎.eslintrc.yaml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -318,7 +318,7 @@ rules:
318318
jquery/no-serialize: [2]
319319
jquery/no-show: [2]
320320
jquery/no-size: [2]
321-
jquery/no-sizzle: [0]
321+
jquery/no-sizzle: [2]
322322
jquery/no-slide: [0]
323323
jquery/no-submit: [0]
324324
jquery/no-text: [0]
@@ -470,7 +470,7 @@ rules:
470470
no-jquery/no-selector-prop: [2]
471471
no-jquery/no-serialize: [2]
472472
no-jquery/no-size: [2]
473-
no-jquery/no-sizzle: [0]
473+
no-jquery/no-sizzle: [2]
474474
no-jquery/no-slide: [2]
475475
no-jquery/no-sub: [2]
476476
no-jquery/no-support: [2]

‎routers/web/repo/issue.go

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3318,7 +3318,6 @@ func ChangeIssueReaction(ctx *context.Context) {
33183318
}
33193319

33203320
html, err := ctx.RenderToHTML(tplReactions, map[string]any{
3321-
"ctxData": ctx.Data,
33223321
"ActionURL": fmt.Sprintf("%s/issues/%d/reactions", ctx.Repo.RepoLink, issue.Index),
33233322
"Reactions": issue.Reactions.GroupByType(),
33243323
})
@@ -3425,7 +3424,6 @@ func ChangeCommentReaction(ctx *context.Context) {
34253424
}
34263425

34273426
html, err := ctx.RenderToHTML(tplReactions, map[string]any{
3428-
"ctxData": ctx.Data,
34293427
"ActionURL": fmt.Sprintf("%s/comments/%d/reactions", ctx.Repo.RepoLink, comment.ID),
34303428
"Reactions": comment.Reactions.GroupByType(),
34313429
})

‎services/context/context.go

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ func NewTemplateContextForWeb(ctx *Context) TemplateContext {
101101
tmplCtx := NewTemplateContext(ctx)
102102
tmplCtx["Locale"] = ctx.Base.Locale
103103
tmplCtx["AvatarUtils"] = templates.NewAvatarUtils(ctx)
104+
tmplCtx["RootData"] = ctx.Data
104105
return tmplCtx
105106
}
106107

‎templates/repo/diff/comments.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
</div>
4949
{{end}}
5050
{{end}}
51-
{{template "repo/issue/view_content/add_reaction" dict "ctxData" $.root "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID)}}
51+
{{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID)}}
5252
{{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))}}
5353
</div>
5454
</div>
@@ -68,7 +68,7 @@
6868
</div>
6969
{{$reactions := .Reactions.GroupByType}}
7070
{{if $reactions}}
71-
{{template "repo/issue/view_content/reactions" dict "ctxData" $.root "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID) "Reactions" $reactions}}
71+
{{template "repo/issue/view_content/reactions" dict "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID) "Reactions" $reactions}}
7272
{{end}}
7373
</div>
7474
</div>

‎templates/repo/issue/view_content.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
<div class="comment-header-right actions tw-flex tw-items-center">
4747
{{template "repo/issue/view_content/show_role" dict "ShowRole" .Issue.ShowRole "IgnorePoster" true}}
4848
{{if not $.Repository.IsArchived}}
49-
{{template "repo/issue/view_content/add_reaction" dict "ctxData" $ "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index)}}
49+
{{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index)}}
5050
{{end}}
5151
{{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" .Issue "delete" false "issue" true "diff" false "IsCommentPoster" $.IsIssuePoster}}
5252
</div>
@@ -67,7 +67,7 @@
6767
</div>
6868
{{$reactions := .Issue.Reactions.GroupByType}}
6969
{{if $reactions}}
70-
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions}}
70+
{{template "repo/issue/view_content/reactions" dict "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions}}
7171
{{end}}
7272
</div>
7373
</div>

‎templates/repo/issue/view_content/add_reaction.tmpl

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
{{if .ctxData.IsSigned}}
1+
{{if ctx.RootData.IsSigned}}
22
<div class="item action ui dropdown jump pointing top right select-reaction" data-action-url="{{.ActionURL}}">
3-
<a class="add-reaction muted">
4-
{{svg "octicon-smiley"}}
5-
</a>
6-
<div class="menu reactions-menu">
3+
<a class="muted">{{svg "octicon-smiley"}}</a>
4+
<div class="menu">
75
{{range $value := AllowedReactions}}
8-
<a class="item reaction" data-tooltip-content="{{$value}}" aria-label="{{$value}}" data-reaction-content="{{$value}}">{{ReactionToEmoji $value}}</a>
6+
<a class="item emoji comment-reaction-button" data-tooltip-content="{{$value}}" aria-label="{{$value}}" data-reaction-content="{{$value}}">{{ReactionToEmoji $value}}</a>
97
{{end}}
108
</div>
119
</div>

‎templates/repo/issue/view_content/comments.tmpl

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
<div class="comment-header-right actions tw-flex tw-items-center">
5454
{{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole}}
5555
{{if not $.Repository.IsArchived}}
56-
{{template "repo/issue/view_content/add_reaction" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
56+
{{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
5757
{{end}}
5858
{{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" . "delete" true "issue" true "diff" false "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}}
5959
</div>
@@ -74,7 +74,7 @@
7474
</div>
7575
{{$reactions := .Reactions.GroupByType}}
7676
{{if $reactions}}
77-
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
77+
{{template "repo/issue/view_content/reactions" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
7878
{{end}}
7979
</div>
8080
</div>
@@ -427,7 +427,7 @@
427427
<div class="comment-header-right actions tw-flex tw-items-center">
428428
{{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole}}
429429
{{if not $.Repository.IsArchived}}
430-
{{template "repo/issue/view_content/add_reaction" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
430+
{{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
431431
{{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" . "delete" false "issue" true "diff" false "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}}
432432
{{end}}
433433
</div>
@@ -448,7 +448,7 @@
448448
</div>
449449
{{$reactions := .Reactions.GroupByType}}
450450
{{if $reactions}}
451-
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
451+
{{template "repo/issue/view_content/reactions" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
452452
{{end}}
453453
</div>
454454
</div>

‎templates/repo/issue/view_content/conversation.tmpl

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@
5555
<div class="ui comments tw-mb-0">
5656
{{range .comments}}
5757
{{$createdSubStr:= TimeSinceUnix .CreatedUnix ctx.Locale}}
58-
<div class="comment code-comment tw-pb-4" id="{{.HashTag}}">
59-
<div class="content">
58+
<div class="comment code-comment" id="{{.HashTag}}">
59+
<div class="content comment-container">
6060
<div class="header comment-header">
6161
<div class="comment-header-left tw-flex tw-items-center">
6262
{{if not .OriginalAuthor}}
@@ -82,7 +82,7 @@
8282
<div class="comment-header-right actions tw-flex tw-items-center">
8383
{{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole}}
8484
{{if not $.Repository.IsArchived}}
85-
{{template "repo/issue/view_content/add_reaction" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
85+
{{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
8686
{{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" . "delete" true "issue" true "diff" true "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}}
8787
{{end}}
8888
</div>
@@ -103,7 +103,7 @@
103103
</div>
104104
{{$reactions := .Reactions.GroupByType}}
105105
{{if $reactions}}
106-
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
106+
{{template "repo/issue/view_content/reactions" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
107107
{{end}}
108108
</div>
109109
</div>

‎templates/repo/issue/view_content/reactions.tmpl

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<div class="ui attached segment reactions" data-action-url="{{$.ActionURL}}">
1+
<div class="bottom-reactions" data-action-url="{{$.ActionURL}}">
22
{{range $key, $value := .Reactions}}
3-
{{$hasReacted := $value.HasUser $.ctxData.SignedUserID}}
4-
<a role="button" class="ui label basic{{if $hasReacted}} primary{{end}}{{if not $.ctxData.IsSigned}} disabled{{end}} comment-reaction-button"
3+
{{$hasReacted := $value.HasUser ctx.RootData.SignedUserID}}
4+
<a role="button" class="ui label basic{{if $hasReacted}} primary{{end}}{{if not ctx.RootData.IsSigned}} disabled{{end}} comment-reaction-button"
55
data-tooltip-content
66
title="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{ctx.Locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}"
77
aria-label="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{ctx.Locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}"
@@ -12,6 +12,6 @@
1212
</a>
1313
{{end}}
1414
{{if AllowedReactions}}
15-
{{template "repo/issue/view_content/add_reaction" dict "ctxData" $.ctxData "ActionURL" .ActionURL}}
15+
{{template "repo/issue/view_content/add_reaction" dict "ActionURL" .ActionURL}}
1616
{{end}}
1717
</div>

‎web_src/css/base.css

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1366,17 +1366,15 @@ table th[data-sortt-desc] .svg {
13661366
box-shadow: 0 0 0 1px var(--color-secondary) inset;
13671367
}
13681368

1369-
.emoji,
1370-
.reaction {
1369+
.emoji {
13711370
font-size: 1.25em;
13721371
line-height: var(--line-height-default);
13731372
font-style: normal !important;
13741373
font-weight: var(--font-weight-normal) !important;
13751374
vertical-align: -0.075em;
13761375
}
13771376

1378-
.emoji img,
1379-
.reaction img {
1377+
.emoji img {
13801378
border-width: 0 !important;
13811379
margin: 0 !important;
13821380
width: 1em !important;

‎web_src/css/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
@import "./repo/linebutton.css";
6363
@import "./repo/wiki.css";
6464
@import "./repo/header.css";
65+
@import "./repo/reactions.css";
6566

6667
@import "./editor/fileeditor.css";
6768
@import "./editor/combomarkdowneditor.css";

‎web_src/css/modules/comment.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
.ui.comments .comment {
1717
position: relative;
1818
background: none;
19-
margin: 0.5em 0 0;
19+
margin: 3px 0 0;
2020
padding: 0.5em 0 0;
2121
border: none;
2222
border-top: none;

‎web_src/css/repo.css

Lines changed: 8 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -913,6 +913,9 @@ td .commit-summary {
913913

914914
.repository.view.issue .comment-list .ui.comments {
915915
max-width: 100%;
916+
display: flex;
917+
flex-direction: column;
918+
gap: 3px;
916919
}
917920

918921
.repository.view.issue .comment-list .comment > .content > div:first-child {
@@ -928,6 +931,11 @@ td .commit-summary {
928931
.repository.view.issue .comment-list .comment .comment-container {
929932
border: 1px solid var(--color-secondary);
930933
border-radius: var(--border-radius);
934+
background: var(--color-box-body);
935+
}
936+
937+
.repository.view.issue .comment-list .conversation-holder .comment .comment-container {
938+
border: none;
931939
}
932940

933941
@media (max-width: 767.98px) {
@@ -1042,30 +1050,6 @@ td .commit-summary {
10421050
margin-left: 42px;
10431051
}
10441052

1045-
.repository.view.issue .comment-list .comment-code-cloud .segment.reactions {
1046-
margin-top: 16px !important;
1047-
margin-bottom: -8px !important;
1048-
border-top: none !important;
1049-
}
1050-
1051-
.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label {
1052-
border: 1px solid;
1053-
padding: 5px 8px !important;
1054-
margin: 0 2px;
1055-
border-radius: var(--border-radius);
1056-
border-color: var(--color-secondary-dark-1) !important;
1057-
}
1058-
1059-
.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label.basic.primary {
1060-
background-color: var(--color-reaction-active-bg) !important;
1061-
border-color: var(--color-primary-alpha-80) !important;
1062-
}
1063-
1064-
.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label.basic.primary:hover {
1065-
background-color: var(--color-reaction-hover-bg) !important;
1066-
border-color: var(--color-primary-alpha-80) !important;
1067-
}
1068-
10691053
.repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply {
10701054
margin: 0;
10711055
}
@@ -1902,98 +1886,6 @@ td .commit-summary {
19021886
border-bottom: 1px solid var(--color-warning-border);
19031887
}
19041888

1905-
.repository .segment.reactions.dropdown .menu,
1906-
.repository .select-reaction.dropdown .menu {
1907-
right: 0 !important;
1908-
left: auto !important;
1909-
min-width: 170px;
1910-
}
1911-
1912-
.repository .segment.reactions.dropdown .menu > .header,
1913-
.repository .select-reaction.dropdown .menu > .header {
1914-
margin: 0.75rem 0 0.5rem;
1915-
}
1916-
1917-
.repository .segment.reactions.dropdown .menu > .item,
1918-
.repository .select-reaction.dropdown .menu > .item {
1919-
float: left;
1920-
margin: 4px;
1921-
font-size: 20px;
1922-
width: 34px;
1923-
height: 34px;
1924-
min-height: 0 !important;
1925-
border-radius: var(--border-radius);
1926-
display: flex !important;
1927-
align-items: center;
1928-
justify-content: center;
1929-
}
1930-
1931-
.repository .segment.reactions {
1932-
padding: 0;
1933-
display: flex;
1934-
border: none !important;
1935-
border-top: 1px solid var(--color-secondary) !important;
1936-
width: 100% !important;
1937-
max-width: 100% !important;
1938-
margin: 0 !important;
1939-
border-radius: 0 0 var(--border-radius) var(--border-radius);
1940-
}
1941-
1942-
.repository .segment.reactions .ui.label {
1943-
max-height: 40px;
1944-
padding: 8px 16px !important;
1945-
display: flex !important;
1946-
align-items: center;
1947-
border: 0;
1948-
border-right: 1px solid;
1949-
border-radius: 0;
1950-
margin: 0;
1951-
font-size: 12px;
1952-
font-weight: var(--font-weight-normal);
1953-
border-color: var(--color-secondary) !important;
1954-
background: var(--color-reaction-bg);
1955-
}
1956-
1957-
.repository .segment.reactions .ui.label:first-of-type {
1958-
border-bottom-left-radius: 3px;
1959-
}
1960-
1961-
.repository .segment.reactions .ui.label.disabled {
1962-
cursor: default;
1963-
opacity: 1;
1964-
}
1965-
1966-
.repository .segment.reactions .ui.label.basic.primary {
1967-
color: var(--color-primary) !important;
1968-
background-color: var(--color-reaction-active-bg) !important;
1969-
border-color: var(--color-secondary-dark-1) !important;
1970-
}
1971-
1972-
.repository .segment.reactions .ui.label.basic:hover {
1973-
background-color: var(--color-reaction-hover-bg) !important;
1974-
}
1975-
1976-
.repository .segment.reactions .reaction-count {
1977-
margin-left: 0.5rem;
1978-
}
1979-
1980-
.repository .segment.reactions .select-reaction {
1981-
display: flex;
1982-
align-items: center;
1983-
}
1984-
1985-
.repository .segment.reactions .select-reaction a {
1986-
padding: 0 14px;
1987-
}
1988-
1989-
.repository .segment.reactions .select-reaction:not(.active) a {
1990-
display: none;
1991-
}
1992-
1993-
.repository .segment.reactions:hover .select-reaction a {
1994-
display: block;
1995-
}
1996-
19971889
.repository .ui.fluid.action.input .ui.search.action.input {
19981890
flex: auto;
19991891
}

0 commit comments

Comments
 (0)