Skip to content

Commit 595e8ab

Browse files
silverwindwxiaoguangGiteaBot
authored
Improve and fix bugs surrounding reactions (#24760)
- Slightly decrease size of reaction buttons - Remove tooltip inside menu, it's obvious by the picture alone - Fix top menu triangle - Use `display: grid` to align icons in menu - Use regular tooltip for reaction users - Fix bug that deleted the reaction bar on clicking already reacted reaction in dropdown <img width="490" alt="Screenshot 2023-05-17 at 00 03 42" src="https://github.com/go-gitea/gitea/assets/115237/61588b37-facb-4829-b75b-e1cb5dda8ca4"> <img width="67" alt="Screenshot 2023-05-17 at 00 11 14" src="https://github.com/go-gitea/gitea/assets/115237/29605589-3b5f-40c6-8ad4-09923094bb8e"> <img width="211" alt="Screenshot 2023-05-17 at 00 29 30" src="https://github.com/go-gitea/gitea/assets/115237/7d2725da-6a3d-4e42-a351-53647f79f762"> <img width="210" alt="Screenshot 2023-05-17 at 00 29 54" src="https://github.com/go-gitea/gitea/assets/115237/b50f8364-033c-4445-ba25-61a814bb2d92"> <img width="892" alt="Screenshot 2023-05-17 at 00 12 20" src="https://github.com/go-gitea/gitea/assets/115237/30a46424-406a-46e5-b4de-47172eb8679d"> --------- Co-authored-by: wxiaoguang <[email protected]> Co-authored-by: Giteabot <[email protected]>
1 parent 2f149c5 commit 595e8ab

File tree

15 files changed

+115
-111
lines changed

15 files changed

+115
-111
lines changed

‎options/locale/locale_en-US.ini

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -965,7 +965,6 @@ mirror_password_help = Change the username to erase a stored password.
965965
watchers = Watchers
966966
stargazers = Stargazers
967967
forks = Forks
968-
pick_reaction = Pick your reaction
969968
reactions_more = and %d more
970969
unit_disabled = The site administrator has disabled this repository section.
971970
language_other = Other

‎templates/repo/diff/comments.tmpl

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
{{svg (MigrationIcon $.root.Repository.GetOriginalURLHostname)}}
1616
{{.OriginalAuthor}}
1717
</span>
18-
<span class="text grey">
18+
<span class="text grey muted-links">
1919
{{$.root.locale.Tr "repo.issues.commented_at" (.HashTag|Escape) $createdStr | Safe}}
2020
</span>
2121
<span class="text migrate">
@@ -24,7 +24,7 @@
2424
{{end}}
2525
</span>
2626
{{else}}
27-
<span class="text grey">
27+
<span class="text grey muted-links">
2828
{{template "shared/user/namelink" .Poster}}
2929
{{$.root.locale.Tr "repo.issues.commented_at" (.HashTag|Escape) $createdStr | Safe}}
3030
</span>
@@ -59,9 +59,7 @@
5959
</div>
6060
{{$reactions := .Reactions.GroupByType}}
6161
{{if $reactions}}
62-
<div class="ui attached segment reactions">
6362
{{template "repo/issue/view_content/reactions" dict "ctxData" $.root "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID) "Reactions" $reactions}}
64-
</div>
6563
{{end}}
6664
</div>
6765
</div>

‎templates/repo/issue/view_content.tmpl

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
{{svg (MigrationIcon .Repository.GetOriginalURLHostname)}}
2828
{{.Issue.OriginalAuthor}}
2929
</span>
30-
<span class="text grey">
30+
<span class="text grey muted-links">
3131
{{.locale.Tr "repo.issues.commented_at" (.Issue.HashTag|Escape) $createdStr | Safe}}
3232
</span>
3333
<span class="text migrate">
@@ -37,7 +37,7 @@
3737
<a class="inline-timeline-avatar" href="{{.Issue.Poster.HomeLink}}">
3838
{{avatar $.Context .Issue.Poster 24}}
3939
</a>
40-
<span class="text grey">
40+
<span class="text grey muted-links">
4141
{{template "shared/user/authorlink" .Issue.Poster}}
4242
{{.locale.Tr "repo.issues.commented_at" (.Issue.HashTag|Escape) $createdStr | Safe}}
4343
</span>
@@ -78,9 +78,7 @@
7878
</div>
7979
{{$reactions := .Issue.Reactions.GroupByType}}
8080
{{if $reactions}}
81-
<div class="ui attached segment reactions" role="note">
82-
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions}}
83-
</div>
81+
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions}}
8482
{{end}}
8583
</div>
8684
</div>

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
{{if .ctxData.IsSigned}}
22
<div class="item action ui dropdown jump pointing top right select-reaction" data-action-url="{{.ActionURL}}">
3-
<a class="add-reaction">
3+
<a class="add-reaction muted">
44
{{svg "octicon-smiley"}}
55
</a>
6-
<div class="menu">
7-
<div class="header">{{.ctxData.locale.Tr "repo.pick_reaction"}}</div>
8-
<div class="divider"></div>
6+
<div class="menu reactions-menu">
97
{{range $value := AllowedReactions}}
10-
<a class="item reaction" data-tooltip-content="{{$value}}" data-reaction-content="{{$value}}">{{ReactionToEmoji $value}}</a>
8+
<a class="item reaction" data-tooltip-content="{{$value}}" aria-label="{{$value}}" data-reaction-content="{{$value}}">{{ReactionToEmoji $value}}</a>
119
{{end}}
1210
</div>
1311
</div>

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -87,9 +87,7 @@
8787
</div>
8888
{{$reactions := .Reactions.GroupByType}}
8989
{{if $reactions}}
90-
<div class="ui attached segment reactions" role="note">
91-
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
92-
</div>
90+
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
9391
{{end}}
9492
</div>
9593
</div>
@@ -471,9 +469,7 @@
471469
</div>
472470
{{$reactions := .Reactions.GroupByType}}
473471
{{if $reactions}}
474-
<div class="ui attached segment reactions">
475-
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
476-
</div>
472+
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
477473
{{end}}
478474
</div>
479475
</div>
@@ -595,9 +591,7 @@
595591
</div>
596592
{{$reactions := .Reactions.GroupByType}}
597593
{{if $reactions}}
598-
<div class="ui attached segment reactions">
599-
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
600-
</div>
594+
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
601595
{{end}}
602596
</div>
603597
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{{if .ctxData.IsSigned}}
22
<div class="item action ui dropdown jump pointing top right context-dropdown">
3-
<a class="context-menu">
3+
<a class="context-menu muted">
44
{{svg "octicon-kebab-horizontal"}}
55
</a>
66
<div class="menu">

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1+
<div class="ui attached segment reactions" data-action-url="{{$.ActionURL}}">
12
{{range $key, $value := .Reactions}}
2-
<a class="ui label basic{{if $value.HasUser $.ctxData.SignedUserID}} primary{{end}}{{if not $.ctxData.IsSigned}} disabled{{end}}" data-title="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{$.ctxData.locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}" data-reaction-content="{{$key}}" data-action-url="{{$.ActionURL}}">
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"
5+
data-tooltip-content="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{$.ctxData.locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}"
6+
data-tooltip-placement="bottom-start"
7+
data-reaction-content="{{$key}}" data-has-reacted="{{$hasReacted}}">
38
<span class="reaction">{{ReactionToEmoji $key}}</span>
49
<span class="reaction-count">{{len $value}}</span>
510
</a>
611
{{end}}
712
{{if AllowedReactions}}
813
{{template "repo/issue/view_content/add_reaction" dict "ctxData" $.ctxData "ActionURL" .ActionURL}}
914
{{end}}
15+
</div>

‎web_src/css/base.css

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -165,8 +165,8 @@
165165
--color-light: #00000006;
166166
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
167167
--color-light-border: #0000001d;
168-
--color-hover: #0000000c;
169-
--color-active: #00000014;
168+
--color-hover: #00000014;
169+
--color-active: #0000001e;
170170
--color-menu: #ffffff;
171171
--color-card: #ffffff;
172172
--color-markup-table-row: #00000008;
@@ -184,7 +184,8 @@
184184
--color-project-board-light-label: #a6aab5;
185185
--color-caret: var(--color-text-dark);
186186
--color-reaction-bg: #0000000a;
187-
--color-reaction-active-bg: var(--color-primary-alpha-20);
187+
--color-reaction-hover-bg: var(--color-primary-light-5);
188+
--color-reaction-active-bg: var(--color-primary-light-6);
188189
--color-tooltip-text: #ffffff;
189190
--color-tooltip-bg: #000000f0;
190191
--color-header-bar: #ffffff;
@@ -894,6 +895,11 @@ a.label,
894895
background: var(--color-hover);
895896
}
896897

898+
.ui.dropdown .menu > .item:active {
899+
color: var(--color-text);
900+
background: var(--color-active);
901+
}
902+
897903
.ui.dropdown .menu .active.item {
898904
color: var(--color-text);
899905
background: var(--color-active);
@@ -1059,10 +1065,15 @@ a.label,
10591065
}
10601066

10611067
.ui.pointing.dropdown > .menu:not(.hidden)::after {
1062-
background: var(--color-box-body);
1068+
background: var(--color-menu);
10631069
box-shadow: -1px -1px 0 0 var(--color-secondary);
10641070
}
10651071

1072+
.ui.pointing.upward.dropdown .menu::after,
1073+
.ui.top.pointing.upward.dropdown .menu::after {
1074+
box-shadow: 1px 1px 0 0 var(--color-secondary);
1075+
}
1076+
10661077
.ui.comments .comment .text {
10671078
margin: 0;
10681079
}

‎web_src/css/repo.css

Lines changed: 35 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1085,7 +1085,7 @@
10851085

10861086
.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label {
10871087
border: 1px solid;
1088-
padding: 6px 10px !important;
1088+
padding: 5px 8px !important;
10891089
margin: 0 2px;
10901090
border-radius: var(--border-radius);
10911091
border-color: var(--color-secondary-dark-1) !important;
@@ -1096,6 +1096,11 @@
10961096
border-color: var(--color-primary-alpha-80) !important;
10971097
}
10981098

1099+
.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label.basic.primary:hover {
1100+
background-color: var(--color-reaction-hover-bg) !important;
1101+
border-color: var(--color-primary-alpha-80) !important;
1102+
}
1103+
10991104
.repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply {
11001105
margin: 0;
11011106
}
@@ -2133,7 +2138,7 @@
21332138
.repository .select-reaction.dropdown .menu {
21342139
right: 0 !important;
21352140
left: auto !important;
2136-
min-width: 15em;
2141+
min-width: 170px;
21372142
}
21382143

21392144
.repository .segment.reactions.dropdown .menu > .header,
@@ -2144,25 +2149,15 @@
21442149
.repository .segment.reactions.dropdown .menu > .item,
21452150
.repository .select-reaction.dropdown .menu > .item {
21462151
float: left;
2147-
padding: 0.25rem !important;
2148-
margin: 0.25rem;
2149-
font-size: 1.5em;
2150-
width: 39px;
2151-
left: 13px;
2152+
margin: 4px;
2153+
font-size: 20px;
2154+
width: 34px;
2155+
height: 34px;
2156+
min-height: 0 !important;
21522157
border-radius: 6px;
2153-
display: flex;
2154-
justify-content: center;
2158+
display: flex !important;
21552159
align-items: center;
2156-
}
2157-
2158-
.repository .segment.reactions.dropdown .menu > .item img.emoji,
2159-
.repository .select-reaction.dropdown .menu > .item img.emoji {
2160-
margin-right: 0;
2161-
}
2162-
2163-
.repository .segment.reactions.dropdown .menu > .item:hover,
2164-
.repository .select-reaction.dropdown .menu > .item:hover {
2165-
background: var(--color-primary);
2160+
justify-content: center;
21662161
}
21672162

21682163
.repository .segment.reactions {
@@ -2173,35 +2168,41 @@
21732168
width: 100% !important;
21742169
max-width: 100% !important;
21752170
margin: 0 !important;
2171+
border-radius: 0 0 var(--border-radius) var(--border-radius);
21762172
}
21772173

21782174
.repository .segment.reactions .ui.label {
21792175
max-height: 40px;
2180-
padding: 10px 18px !important;
2176+
padding: 8px 16px !important;
21812177
display: flex !important;
21822178
align-items: center;
21832179
border: 0;
21842180
border-right: 1px solid;
21852181
border-radius: 0;
21862182
margin: 0;
2187-
font-size: 14px;
2183+
font-size: 12px;
21882184
font-weight: var(--font-weight-normal);
21892185
border-color: var(--color-secondary) !important;
21902186
background: var(--color-reaction-bg);
21912187
}
21922188

2189+
.repository .segment.reactions .ui.label:first-of-type {
2190+
border-bottom-left-radius: 3px;
2191+
}
2192+
21932193
.repository .segment.reactions .ui.label.disabled {
21942194
cursor: default;
21952195
opacity: 1;
21962196
}
21972197

2198-
.repository .segment.reactions .ui.label.basic {
2198+
.repository .segment.reactions .ui.label.basic.primary {
21992199
color: var(--color-primary) !important;
2200+
background-color: var(--color-reaction-active-bg) !important;
2201+
border-color: var(--color-secondary-dark-1) !important;
22002202
}
22012203

2202-
.repository .segment.reactions .ui.label.basic.primary {
2203-
background-color: var(--color-reaction-active-bg) !important;
2204-
border-color: var(--color-secondary) !important;
2204+
.repository .segment.reactions .ui.label.basic:hover {
2205+
background-color: var(--color-reaction-hover-bg) !important;
22052206
}
22062207

22072208
.repository .segment.reactions .reaction-count {
@@ -2211,6 +2212,9 @@
22112212
.repository .segment.reactions .select-reaction {
22122213
display: flex;
22132214
align-items: center;
2215+
}
2216+
2217+
.repository .segment.reactions .select-reaction a {
22142218
padding: 0 14px;
22152219
}
22162220

@@ -2469,7 +2473,7 @@
24692473
padding: 0.5rem 1rem;
24702474
margin: 0 !important;
24712475
position: relative;
2472-
color: var(--color-text-light-2);
2476+
color: var(--color-text);
24732477
min-height: 41px;
24742478
background-color: var(--color-box-header);
24752479
display: flex;
@@ -2516,14 +2520,6 @@
25162520
left: 7px;
25172521
}
25182522

2519-
.comment-header a {
2520-
color: var(--color-text);
2521-
}
2522-
2523-
.comment-header a:hover {
2524-
color: var(--color-primary);
2525-
}
2526-
25272523
.comment-header .actions a {
25282524
margin-right: 0 !important;
25292525
padding: 0.5rem !important;
@@ -2534,6 +2530,11 @@
25342530
margin-left: 0.25rem;
25352531
}
25362532

2533+
.content-history-menu .octicon-triangle-down {
2534+
position: relative;
2535+
top: 1.5px;
2536+
}
2537+
25372538
.comment-body {
25382539
background: var(--color-box-body);
25392540
border: none !important;

‎web_src/css/themes/theme-arc-green.css

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -152,8 +152,8 @@
152152
--color-light: #00000028;
153153
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
154154
--color-light-border: #ffffff28;
155-
--color-hover: #ffffff10;
156-
--color-active: #ffffff16;
155+
--color-hover: #ffffff19;
156+
--color-active: #ffffff24;
157157
--color-menu: #2e323e;
158158
--color-card: #2e323e;
159159
--color-markup-table-row: #ffffff06;
@@ -170,7 +170,8 @@
170170
--color-project-board-bg: var(--color-secondary-light-2);
171171
--color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */
172172
--color-reaction-bg: #ffffff12;
173-
--color-reaction-active-bg: var(--color-primary-alpha-40);
173+
--color-reaction-hover-bg: var(--color-primary-light-4);
174+
--color-reaction-active-bg: var(--color-primary-light-5);
174175
--color-tooltip-text: #ffffff;
175176
--color-tooltip-bg: #000000f0;
176177
--color-header-bar: #2e323e;

0 commit comments

Comments
 (0)