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 <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind
GitHub
parent
2f149c5c9d
commit
595e8abd68
15 changed files with 117 additions and 113 deletions
|
|
@ -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>
|
||||
{{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>
|
||||
{{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>
|
||||
{{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>
|
||||
{{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'),
|
||||
}
|
||||
}).done((resp) => {
|
||||
if (resp && (resp.html || resp.empty)) {
|
||||
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 ((!resp.empty || resp.html === '') && react.length > 0) {
|
||||
if ((!data.empty || data.html === '') && react.length > 0) {
|
||||
react.remove();
|
||||
}
|
||||
if (!resp.empty) {
|
||||
react = $('<div class="ui attached segment reactions"></div>');
|
||||
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.html(resp.html);
|
||||
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}} : {}),
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue