Skip to content
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

Jump to bottom

Improve and fix bugs surrounding reactions #24760

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 23 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
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
6 changes: 3 additions & 3 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,13 @@
{{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">
silverwind marked this conversation as resolved.
Show resolved Hide resolved
{{svg "octicon-smiley"}}
</a>
<div class="menu">
<div class="header">{{.ctxData.locale.Tr "repo.pick_reaction"}}</div>
<div class="header reactions-header">{{.ctxData.locale.Tr "repo.pick_reaction"}}</div>
<div class="divider"></div>
{{range $value := AllowedReactions}}
<a class="item reaction" data-tooltip-content="{{$value}}" data-reaction-content="{{$value}}">{{ReactionToEmoji $value}}</a>
<a class="item reaction" title="{{$value}}" aria-label="{{$value}}" data-reaction-content="{{$value}}">{{ReactionToEmoji $value}}</a>
silverwind marked this conversation as resolved.
Show resolved Hide resolved
{{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>
silverwind marked this conversation as resolved.
Show resolved Hide resolved
<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"
silverwind marked this conversation as resolved.
Show resolved Hide resolved
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>
16 changes: 13 additions & 3 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 Down Expand Up @@ -894,6 +894,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 +1064,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 {
silverwind marked this conversation as resolved.
Show resolved Hide resolved
box-shadow: 1px 1px 0 0 var(--color-secondary);
}

.ui.comments .comment .text {
margin: 0;
}
Expand Down
54 changes: 25 additions & 29 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 Down Expand Up @@ -2129,11 +2129,15 @@
background: var(--color-secondary);
}

.reactions-header {
background: none !important; /* conflict from .repository .diff-file-box .header in files tab emoji dropdown */
}

.repository .segment.reactions.dropdown .menu,
.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 +2148,17 @@
.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: 19px;
width: 30px;
height: 30px;
min-height: 0 !important;
left: 5px;
top: -2px;
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,23 +2169,28 @@
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;
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 @@ -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 Down
4 changes: 2 additions & 2 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 Down
10 changes: 0 additions & 10 deletions web_src/js/features/common-global.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,16 +98,6 @@ export function initGlobalCommon() {
},
onHide() {
this._tippy?.enable();

// hide all tippy elements of items after a while. eg: use Enter to click "Copy Link" in the Issue Context Menu
setTimeout(() => {
const $dropdown = $(this);
if ($dropdown.dropdown('is hidden')) {
$(this).find('.menu > .item').each((_, item) => {
item._tippy?.hide();
});
}
}, 2000);
},
});

Expand Down
Loading