- 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 <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>tags/v1.20.0-rc0
@@ -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 |
@@ -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"> | |||
@@ -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> | |||
@@ -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> |
@@ -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"> | |||
@@ -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> | |||
@@ -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> |
@@ -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> |
@@ -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> | |||
@@ -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> | |||
@@ -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> |
@@ -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"> |
@@ -1,5 +1,10 @@ | |||
<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> | |||
@@ -7,3 +12,4 @@ | |||
{{if AllowedReactions}} | |||
{{template "repo/issue/view_content/add_reaction" dict "ctxData" $.ctxData "ActionURL" .ActionURL}} | |||
{{end}} | |||
</div> |
@@ -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; | |||
@@ -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; | |||
@@ -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); | |||
@@ -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; | |||
} |
@@ -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; | |||
@@ -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; | |||
} | |||
@@ -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, | |||
@@ -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 { | |||
@@ -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 { | |||
@@ -2211,6 +2212,9 @@ | |||
.repository .segment.reactions .select-reaction { | |||
display: flex; | |||
align-items: center; | |||
} | |||
.repository .segment.reactions .select-reaction a { | |||
padding: 0 14px; | |||
} | |||
@@ -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; | |||
@@ -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; | |||
@@ -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; |
@@ -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; | |||
@@ -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; |
@@ -1,53 +1,46 @@ | |||
import $ from 'jquery'; | |||
import {createTippy} from '../../modules/tippy.js'; | |||
const {csrfToken} = window.config; | |||
export function initCompReactionSelector(parent) { | |||
let selector = 'a.label'; | |||
if (!parent) { | |||
parent = $(document); | |||
selector = `.reactions ${selector}`; | |||
} | |||
for (const el of parent[0].querySelectorAll(selector)) { | |||
createTippy(el, {placement: 'bottom-start', content: el.getAttribute('data-title')}); | |||
} | |||
parent.find(`.select-reaction > .menu > .item, ${selector}`).on('click', function (e) { | |||
export function initCompReactionSelector($parent) { | |||
$parent.find(`.select-reaction .item.reaction, .comment-reaction-button`).on('click', async function (e) { | |||
e.preventDefault(); | |||
if ($(this).hasClass('disabled')) return; | |||
const actionURL = $(this).hasClass('item') ? $(this).closest('.select-reaction').data('action-url') : $(this).data('action-url'); | |||
const url = `${actionURL}/${$(this).hasClass('primary') ? 'unreact' : 'react'}`; | |||
$.ajax({ | |||
type: 'POST', | |||
url, | |||
data: { | |||
const actionUrl = $(this).closest('[data-action-url]').attr('data-action-url'); | |||
const reactionContent = $(this).attr('data-reaction-content'); | |||
const hasReacted = $(this).closest('.ui.segment.reactions').find(`a[data-reaction-content="${reactionContent}"]`).attr('data-has-reacted') === 'true'; | |||
const res = await fetch(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, { | |||
method: 'POST', | |||
headers: { | |||
'content-type': 'application/x-www-form-urlencoded', | |||
}, | |||
body: new URLSearchParams({ | |||
_csrf: csrfToken, | |||
content: $(this).attr('data-reaction-content'), | |||
content: reactionContent, | |||
}), | |||
}); | |||
const data = await res.json(); | |||
if (data && (data.html || data.empty)) { | |||
const content = $(this).closest('.content'); | |||
let react = content.find('.segment.reactions'); | |||
if ((!data.empty || data.html === '') && react.length > 0) { | |||
react.remove(); | |||
} | |||
}).done((resp) => { | |||
if (resp && (resp.html || resp.empty)) { | |||
const content = $(this).closest('.content'); | |||
let react = content.find('.segment.reactions'); | |||
if ((!resp.empty || resp.html === '') && react.length > 0) { | |||
react.remove(); | |||
} | |||
if (!resp.empty) { | |||
react = $('<div class="ui attached segment reactions"></div>'); | |||
const attachments = content.find('.segment.bottom:first'); | |||
if (attachments.length > 0) { | |||
react.insertBefore(attachments); | |||
} else { | |||
react.appendTo(content); | |||
} | |||
react.html(resp.html); | |||
react.find('.dropdown').dropdown(); | |||
initCompReactionSelector(react); | |||
if (!data.empty) { | |||
const attachments = content.find('.segment.bottom:first'); | |||
react = $(data.html); | |||
if (attachments.length > 0) { | |||
react.insertBefore(attachments); | |||
} else { | |||
react.appendTo(content); | |||
} | |||
react.find('.dropdown').dropdown(); | |||
initCompReactionSelector(react); | |||
} | |||
}); | |||
} | |||
}); | |||
} |
@@ -190,8 +190,6 @@ export function initRepoCodeView() { | |||
currentTarget.closest('tr').outerHTML = blob; | |||
}); | |||
$(document).on('click', '.copy-line-permalink', async (e) => { | |||
const success = await clippie(toAbsoluteUrl(e.currentTarget.getAttribute('data-url'))); | |||
if (!success) return; | |||
document.querySelector('.code-line-button')?._tippy?.hide(); | |||
await clippie(toAbsoluteUrl(e.currentTarget.getAttribute('data-url'))); | |||
}); | |||
} |
@@ -76,7 +76,7 @@ function showContentHistoryMenu(issueBaseUrl, $item, commentId) { | |||
const $headerLeft = $item.find('.comment-header-left'); | |||
const menuHtml = ` | |||
<div class="ui pointing dropdown top left content-history-menu" data-comment-id="${commentId}"> | |||
• <a>${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon gt-ml-1 gt-mt-1')}</a> | |||
• <a class="muted">${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon gt-ml-1 gt-mt-1')}</a> | |||
<div class="menu"> | |||
</div> | |||
</div>`; |
@@ -544,7 +544,7 @@ export function initRepository() { | |||
initRepoIssueDependencyDelete(); | |||
initRepoIssueCodeCommentCancel(); | |||
initRepoPullRequestUpdate(); | |||
initCompReactionSelector(); | |||
initCompReactionSelector($(document)); | |||
initRepoPullRequestMergeForm(); | |||
} |
@@ -58,10 +58,17 @@ function attachTooltip(target, content = null) { | |||
content = content ?? target.getAttribute('data-tooltip-content'); | |||
if (!content) return null; | |||
// when element has a clipboard target, we update the tooltip after copy | |||
// in which case it is undesirable to automatically hide it on click as | |||
// it would momentarily flash the tooltip out and in. | |||
const hasClipboardTarget = target.hasAttribute('data-clipboard-target'); | |||
const hideOnClick = !hasClipboardTarget; | |||
const props = { | |||
content, | |||
delay: 100, | |||
role: 'tooltip', | |||
hideOnClick, | |||
placement: target.getAttribute('data-tooltip-placement') || 'top-start', | |||
...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}), | |||
}; |