Skip to content

Commit 0352b99

Browse files
GiteaBotsilverwindwxiaoguang
authored
Rewrite and restyle reaction selector and enable no-sizzle eslint rule (#30453) (#30473)
Backport #30453 by @silverwind Enable `no-sizzle` lint rule, there was only one use in `initCompReactionSelector` which I have rewritten as follows: - Remove all jQuery except the necessary fomantic dropdown init - Remove the recursion, instead bind event listeners to common parent container nodes Did various tests, works with our without attachments, in diff view and in diff comments inside comment list. Additionally the style of reactions now matches between code comments and issue comments: <img width="275" alt="Screenshot 2024-04-13 at 14 58 10" src="https://github.com/go-gitea/gitea/assets/115237/9d08f188-8661-4dd9-bff4-cad6d6d09cab"> Co-authored-by: silverwind <[email protected]> Co-authored-by: wxiaoguang <[email protected]>
1 parent dd12861 commit 0352b99

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
@@ -317,7 +317,7 @@ rules:
317317
jquery/no-serialize: [2]
318318
jquery/no-show: [2]
319319
jquery/no-size: [2]
320-
jquery/no-sizzle: [0]
320+
jquery/no-sizzle: [2]
321321
jquery/no-slide: [0]
322322
jquery/no-submit: [0]
323323
jquery/no-text: [0]
@@ -469,7 +469,7 @@ rules:
469469
no-jquery/no-selector-prop: [2]
470470
no-jquery/no-serialize: [2]
471471
no-jquery/no-size: [2]
472-
no-jquery/no-sizzle: [0]
472+
no-jquery/no-sizzle: [2]
473473
no-jquery/no-slide: [2]
474474
no-jquery/no-sub: [2]
475475
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
@@ -102,6 +102,7 @@ func NewTemplateContextForWeb(ctx *Context) TemplateContext {
102102
tmplCtx := NewTemplateContext(ctx)
103103
tmplCtx["Locale"] = ctx.Base.Locale
104104
tmplCtx["AvatarUtils"] = templates.NewAvatarUtils(ctx)
105+
tmplCtx["RootData"] = ctx.Data
105106
return tmplCtx
106107
}
107108

‎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
@@ -1440,17 +1440,15 @@ table th[data-sortt-desc] .svg {
14401440
box-shadow: 0 0 0 1px var(--color-secondary) inset;
14411441
}
14421442

1443-
.emoji,
1444-
.reaction {
1443+
.emoji {
14451444
font-size: 1.25em;
14461445
line-height: var(--line-height-default);
14471446
font-style: normal !important;
14481447
font-weight: var(--font-weight-normal) !important;
14491448
vertical-align: -0.075em;
14501449
}
14511450

1452-
.emoji img,
1453-
.reaction img {
1451+
.emoji img {
14541452
border-width: 0 !important;
14551453
margin: 0 !important;
14561454
width: 1em !important;

‎web_src/css/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
@import "./repo/linebutton.css";
6161
@import "./repo/wiki.css";
6262
@import "./repo/header.css";
63+
@import "./repo/reactions.css";
6364

6465
@import "./editor/fileeditor.css";
6566
@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)