From 595e8abd686c7d555ff94668fb46604b92025956 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 28 May 2023 03:34:18 +0200 Subject: 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 Screenshot 2023-05-17 at 00 03 42 Screenshot 2023-05-17 at 00 11 14 Screenshot 2023-05-17 at 00 29 30 Screenshot 2023-05-17 at 00 29 54 Screenshot 2023-05-17 at 00 12 20 --------- Co-authored-by: wxiaoguang Co-authored-by: Giteabot --- web_src/js/features/comp/ReactionSelector.js | 71 +++++++++++++--------------- web_src/js/features/repo-code.js | 4 +- web_src/js/features/repo-issue-content.js | 2 +- web_src/js/features/repo-legacy.js | 2 +- 4 files changed, 35 insertions(+), 44 deletions(-) (limited to 'web_src/js/features') diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js index 33ceb73c7c..336634a582 100644 --- a/web_src/js/features/comp/ReactionSelector.js +++ b/web_src/js/features/comp/ReactionSelector.js @@ -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 = $('
'); - 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); } - }); + } }); } diff --git a/web_src/js/features/repo-code.js b/web_src/js/features/repo-code.js index 73eccaf193..26d8e22472 100644 --- a/web_src/js/features/repo-code.js +++ b/web_src/js/features/repo-code.js @@ -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'))); }); } diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js index 87295573e8..792a11c5ab 100644 --- a/web_src/js/features/repo-issue-content.js +++ b/web_src/js/features/repo-issue-content.js @@ -76,7 +76,7 @@ function showContentHistoryMenu(issueBaseUrl, $item, commentId) { const $headerLeft = $item.find('.comment-header-left'); const menuHtml = `
- • ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon gt-ml-1 gt-mt-1')} + • ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon gt-ml-1 gt-mt-1')}
`; diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js index 2804844d81..f23ff45470 100644 --- a/web_src/js/features/repo-legacy.js +++ b/web_src/js/features/repo-legacy.js @@ -544,7 +544,7 @@ export function initRepository() { initRepoIssueDependencyDelete(); initRepoIssueCodeCommentCancel(); initRepoPullRequestUpdate(); - initCompReactionSelector(); + initCompReactionSelector($(document)); initRepoPullRequestMergeForm(); } -- cgit v1.2.3