Skip to content

Improve and fix bugs surrounding reactions #24760

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 33 commits into from
May 28, 2023
Merged

Improve and fix bugs surrounding reactions #24760

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
1d3b2a9
Improve and fix bug surrounding reactions
silverwind May 16, 2023
4f76950
remove tooltip in popup, use hover color
silverwind May 16, 2023
cb79e73
add active color and tweak hover and active colors
silverwind May 16, 2023
00ac319
more color tweaks
silverwind May 16, 2023
2167ac6
fix reaction row deletion bug, convert to fetch
silverwind May 19, 2023
202cf69
remove wrapper and restore old shitty css
silverwind May 20, 2023
f52ac71
css tweak
silverwind May 20, 2023
15b9cb9
tweak size
silverwind May 20, 2023
145a561
fix selector, add comment
silverwind May 20, 2023
33361de
expand comment
silverwind May 20, 2023
81047dc
fix dropdown width, add back title
silverwind May 21, 2023
e51920f
add aria-label
silverwind May 21, 2023
5fe0a59
use muted links for emoji dropdown
silverwind May 22, 2023
d7af8e0
unify comment header muting
silverwind May 22, 2023
1773a6a
refactor & simplify
wxiaoguang May 23, 2023
68fe6a8
make hideOnClick=true for tooltip
wxiaoguang May 23, 2023
57d0281
Merge branch 'main' into reaction
silverwind May 27, 2023
6009b63
disable hideOnClick when element has data-clipboard-target
silverwind May 27, 2023
4cea5c2
simplify
silverwind May 27, 2023
d923949
fix border radiuses
silverwind May 27, 2023
520892b
fix double segment.reaction
silverwind May 27, 2023
591ffb0
fix unreact from dropdown menu
silverwind May 27, 2023
09981f1
Merge branch 'main' into reaction
GiteaBot May 27, 2023
a998593
revert "hide tooltip after menu gets hidden"
wxiaoguang May 27, 2023
3441eed
Merge branch 'main' into reaction
GiteaBot May 27, 2023
78094fb
remove header
silverwind May 27, 2023
cb83236
tweaks to edited menu
silverwind May 27, 2023
d4ccf6e
restore data-tooltip-content
silverwind May 27, 2023
26ec23a
reaction color tweaks
silverwind May 27, 2023
aaa5636
border tweak
silverwind May 27, 2023
cb2ce4e
Merge branch 'main' into reaction
silverwind May 27, 2023
8a91a4c
Fix misspell
silverwind May 27, 2023
3ab817c
Merge branch 'main' into reaction
GiteaBot May 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion options/locale/locale_en-US.ini
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -965,7 +965,6 @@ mirror_password_help = Change the username to erase a stored password.
watchers = Watchers
stargazers = Stargazers
forks = Forks
pick_reaction = Pick your reaction
reactions_more = and %d more
unit_disabled = The site administrator has disabled this repository section.
language_other = Other
Expand Down
6 changes: 2 additions & 4 deletions templates/repo/diff/comments.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
{{svg (MigrationIcon $.root.Repository.GetOriginalURLHostname)}}
{{.OriginalAuthor}}
</span>
<span class="text grey">
<span class="text grey muted-links">
{{$.root.locale.Tr "repo.issues.commented_at" (.HashTag|Escape) $createdStr | Safe}}
</span>
<span class="text migrate">
Expand All @@ -24,7 +24,7 @@
{{end}}
</span>
{{else}}
<span class="text grey">
<span class="text grey muted-links">
{{template "shared/user/namelink" .Poster}}
{{$.root.locale.Tr "repo.issues.commented_at" (.HashTag|Escape) $createdStr | Safe}}
</span>
Expand Down Expand Up @@ -59,9 +59,7 @@
</div>
{{$reactions := .Reactions.GroupByType}}
{{if $reactions}}
<div class="ui attached segment reactions">
{{template "repo/issue/view_content/reactions" dict "ctxData" $.root "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID) "Reactions" $reactions}}
</div>
{{end}}
</div>
</div>
Expand Down
8 changes: 3 additions & 5 deletions templates/repo/issue/view_content.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
{{svg (MigrationIcon .Repository.GetOriginalURLHostname)}}
{{.Issue.OriginalAuthor}}
</span>
<span class="text grey">
<span class="text grey muted-links">
{{.locale.Tr "repo.issues.commented_at" (.Issue.HashTag|Escape) $createdStr | Safe}}
</span>
<span class="text migrate">
Expand All @@ -37,7 +37,7 @@
<a class="inline-timeline-avatar" href="{{.Issue.Poster.HomeLink}}">
{{avatar $.Context .Issue.Poster 24}}
</a>
<span class="text grey">
<span class="text grey muted-links">
{{template "shared/user/authorlink" .Issue.Poster}}
{{.locale.Tr "repo.issues.commented_at" (.Issue.HashTag|Escape) $createdStr | Safe}}
</span>
Expand Down Expand Up @@ -78,9 +78,7 @@
</div>
{{$reactions := .Issue.Reactions.GroupByType}}
{{if $reactions}}
<div class="ui attached segment reactions" role="note">
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions}}
</div>
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions}}
{{end}}
</div>
</div>
Expand Down
8 changes: 3 additions & 5 deletions templates/repo/issue/view_content/add_reaction.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
{{if .ctxData.IsSigned}}
<div class="item action ui dropdown jump pointing top right select-reaction" data-action-url="{{.ActionURL}}">
<a class="add-reaction">
<a class="add-reaction muted">
{{svg "octicon-smiley"}}
</a>
<div class="menu">
<div class="header">{{.ctxData.locale.Tr "repo.pick_reaction"}}</div>
<div class="divider"></div>
<div class="menu reactions-menu">
{{range $value := AllowedReactions}}
<a class="item reaction" data-tooltip-content="{{$value}}" data-reaction-content="{{$value}}">{{ReactionToEmoji $value}}</a>
<a class="item reaction" data-tooltip-content="{{$value}}" aria-label="{{$value}}" data-reaction-content="{{$value}}">{{ReactionToEmoji $value}}</a>
{{end}}
</div>
</div>
Expand Down
12 changes: 3 additions & 9 deletions templates/repo/issue/view_content/comments.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,7 @@
</div>
{{$reactions := .Reactions.GroupByType}}
{{if $reactions}}
<div class="ui attached segment reactions" role="note">
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
</div>
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
{{end}}
</div>
</div>
Expand Down Expand Up @@ -471,9 +469,7 @@
</div>
{{$reactions := .Reactions.GroupByType}}
{{if $reactions}}
<div class="ui attached segment reactions">
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
</div>
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
{{end}}
</div>
</div>
Expand Down Expand Up @@ -595,9 +591,7 @@
</div>
{{$reactions := .Reactions.GroupByType}}
{{if $reactions}}
<div class="ui attached segment reactions">
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
</div>
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
{{end}}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/issue/view_content/context_menu.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{{if .ctxData.IsSigned}}
<div class="item action ui dropdown jump pointing top right context-dropdown">
<a class="context-menu">
<a class="context-menu muted">
{{svg "octicon-kebab-horizontal"}}
</a>
<div class="menu">
Expand Down
8 changes: 7 additions & 1 deletion templates/repo/issue/view_content/reactions.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
<div class="ui attached segment reactions" data-action-url="{{$.ActionURL}}">
{{range $key, $value := .Reactions}}
<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}}">
{{$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"
data-tooltip-content="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{$.ctxData.locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}"
data-tooltip-placement="bottom-start"
data-reaction-content="{{$key}}" data-has-reacted="{{$hasReacted}}">
<span class="reaction">{{ReactionToEmoji $key}}</span>
<span class="reaction-count">{{len $value}}</span>
</a>
{{end}}
{{if AllowedReactions}}
{{template "repo/issue/view_content/add_reaction" dict "ctxData" $.ctxData "ActionURL" .ActionURL}}
{{end}}
</div>
19 changes: 15 additions & 4 deletions web_src/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,8 +165,8 @@
--color-light: #00000006;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #0000001d;
--color-hover: #0000000c;
--color-active: #00000014;
--color-hover: #00000014;
--color-active: #0000001e;
--color-menu: #ffffff;
--color-card: #ffffff;
--color-markup-table-row: #00000008;
Expand All @@ -184,7 +184,8 @@
--color-project-board-light-label: #a6aab5;
--color-caret: var(--color-text-dark);
--color-reaction-bg: #0000000a;
--color-reaction-active-bg: var(--color-primary-alpha-20);
--color-reaction-hover-bg: var(--color-primary-light-5);
--color-reaction-active-bg: var(--color-primary-light-6);
--color-tooltip-text: #ffffff;
--color-tooltip-bg: #000000f0;
--color-header-bar: #ffffff;
Expand Down Expand Up @@ -894,6 +895,11 @@ a.label,
background: var(--color-hover);
}

.ui.dropdown .menu > .item:active {
color: var(--color-text);
background: var(--color-active);
}

.ui.dropdown .menu .active.item {
color: var(--color-text);
background: var(--color-active);
Expand Down Expand Up @@ -1059,10 +1065,15 @@ a.label,
}

.ui.pointing.dropdown > .menu:not(.hidden)::after {
background: var(--color-box-body);
background: var(--color-menu);
box-shadow: -1px -1px 0 0 var(--color-secondary);
}

.ui.pointing.upward.dropdown .menu::after,
.ui.top.pointing.upward.dropdown .menu::after {
box-shadow: 1px 1px 0 0 var(--color-secondary);
}

.ui.comments .comment .text {
margin: 0;
}
Expand Down
69 changes: 35 additions & 34 deletions web_src/css/repo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1085,7 +1085,7 @@

.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label {
border: 1px solid;
padding: 6px 10px !important;
padding: 5px 8px !important;
margin: 0 2px;
border-radius: var(--border-radius);
border-color: var(--color-secondary-dark-1) !important;
Expand All @@ -1096,6 +1096,11 @@
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;
}
Expand Down Expand Up @@ -2133,7 +2138,7 @@
.repository .select-reaction.dropdown .menu {
right: 0 !important;
left: auto !important;
min-width: 15em;
min-width: 170px;
}

.repository .segment.reactions.dropdown .menu > .header,
Expand All @@ -2144,25 +2149,15 @@
.repository .segment.reactions.dropdown .menu > .item,
.repository .select-reaction.dropdown .menu > .item {
float: left;
padding: 0.25rem !important;
margin: 0.25rem;
font-size: 1.5em;
width: 39px;
left: 13px;
margin: 4px;
font-size: 20px;
width: 34px;
height: 34px;
min-height: 0 !important;
border-radius: 6px;
display: flex;
justify-content: center;
display: flex !important;
align-items: center;
}

.repository .segment.reactions.dropdown .menu > .item img.emoji,
.repository .select-reaction.dropdown .menu > .item img.emoji {
margin-right: 0;
}

.repository .segment.reactions.dropdown .menu > .item:hover,
.repository .select-reaction.dropdown .menu > .item:hover {
background: var(--color-primary);
justify-content: center;
}

.repository .segment.reactions {
Expand All @@ -2173,35 +2168,41 @@
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: 10px 18px !important;
padding: 8px 16px !important;
display: flex !important;
align-items: center;
border: 0;
border-right: 1px solid;
border-radius: 0;
margin: 0;
font-size: 14px;
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 {
.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.primary {
background-color: var(--color-reaction-active-bg) !important;
border-color: var(--color-secondary) !important;
.repository .segment.reactions .ui.label.basic:hover {
background-color: var(--color-reaction-hover-bg) !important;
}

.repository .segment.reactions .reaction-count {
Expand All @@ -2211,6 +2212,9 @@
.repository .segment.reactions .select-reaction {
display: flex;
align-items: center;
}

.repository .segment.reactions .select-reaction a {
padding: 0 14px;
}

Expand Down Expand Up @@ -2469,7 +2473,7 @@
padding: 0.5rem 1rem;
margin: 0 !important;
position: relative;
color: var(--color-text-light-2);
color: var(--color-text);
min-height: 41px;
background-color: var(--color-box-header);
display: flex;
Expand Down Expand Up @@ -2516,14 +2520,6 @@
left: 7px;
}

.comment-header a {
color: var(--color-text);
}

.comment-header a:hover {
color: var(--color-primary);
}

.comment-header .actions a {
margin-right: 0 !important;
padding: 0.5rem !important;
Expand All @@ -2534,6 +2530,11 @@
margin-left: 0.25rem;
}

.content-history-menu .octicon-triangle-down {
position: relative;
top: 1.5px;
}

.comment-body {
background: var(--color-box-body);
border: none !important;
Expand Down
7 changes: 4 additions & 3 deletions web_src/css/themes/theme-arc-green.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,8 +152,8 @@
--color-light: #00000028;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #ffffff28;
--color-hover: #ffffff10;
--color-active: #ffffff16;
--color-hover: #ffffff19;
--color-active: #ffffff24;
--color-menu: #2e323e;
--color-card: #2e323e;
--color-markup-table-row: #ffffff06;
Expand All @@ -170,7 +170,8 @@
--color-project-board-bg: var(--color-secondary-light-2);
--color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */
--color-reaction-bg: #ffffff12;
--color-reaction-active-bg: var(--color-primary-alpha-40);
--color-reaction-hover-bg: var(--color-primary-light-4);
--color-reaction-active-bg: var(--color-primary-light-5);
--color-tooltip-text: #ffffff;
--color-tooltip-bg: #000000f0;
--color-header-bar: #2e323e;
Expand Down
Loading