mirror of https://github.com/go-gitea/gitea
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>pull/24962/head^2
silverwind
1 year ago
committed by
GitHub
parent
2f149c5c9d
commit
595e8abd68
@ -1,53 +1,46 @@ |
|||||||
import $ from 'jquery'; |
import $ from 'jquery'; |
||||||
import {createTippy} from '../../modules/tippy.js'; |
|
||||||
|
|
||||||
const {csrfToken} = window.config; |
const {csrfToken} = window.config; |
||||||
|
|
||||||
export function initCompReactionSelector(parent) { |
export function initCompReactionSelector($parent) { |
||||||
let selector = 'a.label'; |
$parent.find(`.select-reaction .item.reaction, .comment-reaction-button`).on('click', async function (e) { |
||||||
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) { |
|
||||||
e.preventDefault(); |
e.preventDefault(); |
||||||
|
|
||||||
if ($(this).hasClass('disabled')) return; |
if ($(this).hasClass('disabled')) return; |
||||||
|
|
||||||
const actionURL = $(this).hasClass('item') ? $(this).closest('.select-reaction').data('action-url') : $(this).data('action-url'); |
const actionUrl = $(this).closest('[data-action-url]').attr('data-action-url'); |
||||||
const url = `${actionURL}/${$(this).hasClass('primary') ? 'unreact' : 'react'}`; |
const reactionContent = $(this).attr('data-reaction-content'); |
||||||
$.ajax({ |
const hasReacted = $(this).closest('.ui.segment.reactions').find(`a[data-reaction-content="${reactionContent}"]`).attr('data-has-reacted') === 'true'; |
||||||
type: 'POST', |
|
||||||
url, |
const res = await fetch(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, { |
||||||
data: { |
method: 'POST', |
||||||
|
headers: { |
||||||
|
'content-type': 'application/x-www-form-urlencoded', |
||||||
|
}, |
||||||
|
body: new URLSearchParams({ |
||||||
_csrf: csrfToken, |
_csrf: csrfToken, |
||||||
content: $(this).attr('data-reaction-content'), |
content: reactionContent, |
||||||
} |
}), |
||||||
}).done((resp) => { |
}); |
||||||
if (resp && (resp.html || resp.empty)) { |
|
||||||
|
const data = await res.json(); |
||||||
|
if (data && (data.html || data.empty)) { |
||||||
const content = $(this).closest('.content'); |
const content = $(this).closest('.content'); |
||||||
let react = content.find('.segment.reactions'); |
let react = content.find('.segment.reactions'); |
||||||
if ((!resp.empty || resp.html === '') && react.length > 0) { |
if ((!data.empty || data.html === '') && react.length > 0) { |
||||||
react.remove(); |
react.remove(); |
||||||
} |
} |
||||||
if (!resp.empty) { |
if (!data.empty) { |
||||||
react = $('<div class="ui attached segment reactions"></div>'); |
|
||||||
const attachments = content.find('.segment.bottom:first'); |
const attachments = content.find('.segment.bottom:first'); |
||||||
|
react = $(data.html); |
||||||
if (attachments.length > 0) { |
if (attachments.length > 0) { |
||||||
react.insertBefore(attachments); |
react.insertBefore(attachments); |
||||||
} else { |
} else { |
||||||
react.appendTo(content); |
react.appendTo(content); |
||||||
} |
} |
||||||
react.html(resp.html); |
|
||||||
react.find('.dropdown').dropdown(); |
react.find('.dropdown').dropdown(); |
||||||
initCompReactionSelector(react); |
initCompReactionSelector(react); |
||||||
} |
} |
||||||
} |
} |
||||||
}); |
}); |
||||||
}); |
|
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue