mirror of
https://github.com/go-gitea/gitea
synced 2025-07-03 09:07:19 +00:00
Rewrite and restyle reaction selector and enable no-sizzle eslint rule (#30453)
Enable `no-sizzle` lint rule, there was only one use in `initCompReactionSelector` and: - Remove all jQuery except the necessary fomantic dropdown init - Remove the recursion, instead bind event listeners to common parent container nodes --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind
GitHub
@ -1366,8 +1366,7 @@ table th[data-sortt-desc] .svg {
|
||||
box-shadow: 0 0 0 1px var(--color-secondary) inset;
|
||||
}
|
||||
|
||||
.emoji,
|
||||
.reaction {
|
||||
.emoji {
|
||||
font-size: 1.25em;
|
||||
line-height: var(--line-height-default);
|
||||
font-style: normal !important;
|
||||
@ -1375,8 +1374,7 @@ table th[data-sortt-desc] .svg {
|
||||
vertical-align: -0.075em;
|
||||
}
|
||||
|
||||
.emoji img,
|
||||
.reaction img {
|
||||
.emoji img {
|
||||
border-width: 0 !important;
|
||||
margin: 0 !important;
|
||||
width: 1em !important;
|
||||
|
||||
@ -62,6 +62,7 @@
|
||||
@import "./repo/linebutton.css";
|
||||
@import "./repo/wiki.css";
|
||||
@import "./repo/header.css";
|
||||
@import "./repo/reactions.css";
|
||||
|
||||
@import "./editor/fileeditor.css";
|
||||
@import "./editor/combomarkdowneditor.css";
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
.ui.comments .comment {
|
||||
position: relative;
|
||||
background: none;
|
||||
margin: 0.5em 0 0;
|
||||
margin: 3px 0 0;
|
||||
padding: 0.5em 0 0;
|
||||
border: none;
|
||||
border-top: none;
|
||||
|
||||
@ -913,6 +913,9 @@ td .commit-summary {
|
||||
|
||||
.repository.view.issue .comment-list .ui.comments {
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .comment > .content > div:first-child {
|
||||
@ -928,6 +931,11 @@ td .commit-summary {
|
||||
.repository.view.issue .comment-list .comment .comment-container {
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--color-box-body);
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .conversation-holder .comment .comment-container {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
@ -1042,30 +1050,6 @@ td .commit-summary {
|
||||
margin-left: 42px;
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .comment-code-cloud .segment.reactions {
|
||||
margin-top: 16px !important;
|
||||
margin-bottom: -8px !important;
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label {
|
||||
border: 1px solid;
|
||||
padding: 5px 8px !important;
|
||||
margin: 0 2px;
|
||||
border-radius: var(--border-radius);
|
||||
border-color: var(--color-secondary-dark-1) !important;
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label.basic.primary {
|
||||
background-color: var(--color-reaction-active-bg) !important;
|
||||
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;
|
||||
}
|
||||
@ -1902,98 +1886,6 @@ td .commit-summary {
|
||||
border-bottom: 1px solid var(--color-warning-border);
|
||||
}
|
||||
|
||||
.repository .segment.reactions.dropdown .menu,
|
||||
.repository .select-reaction.dropdown .menu {
|
||||
right: 0 !important;
|
||||
left: auto !important;
|
||||
min-width: 170px;
|
||||
}
|
||||
|
||||
.repository .segment.reactions.dropdown .menu > .header,
|
||||
.repository .select-reaction.dropdown .menu > .header {
|
||||
margin: 0.75rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.repository .segment.reactions.dropdown .menu > .item,
|
||||
.repository .select-reaction.dropdown .menu > .item {
|
||||
float: left;
|
||||
margin: 4px;
|
||||
font-size: 20px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
min-height: 0 !important;
|
||||
border-radius: var(--border-radius);
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.repository .segment.reactions {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
border: none !important;
|
||||
border-top: 1px solid var(--color-secondary) !important;
|
||||
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: 8px 16px !important;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
border: 0;
|
||||
border-right: 1px solid;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
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.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:hover {
|
||||
background-color: var(--color-reaction-hover-bg) !important;
|
||||
}
|
||||
|
||||
.repository .segment.reactions .reaction-count {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.repository .segment.reactions .select-reaction {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.repository .segment.reactions .select-reaction a {
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.repository .segment.reactions .select-reaction:not(.active) a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.repository .segment.reactions:hover .select-reaction a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.repository .ui.fluid.action.input .ui.search.action.input {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
70
web_src/css/repo/reactions.css
Normal file
70
web_src/css/repo/reactions.css
Normal file
@ -0,0 +1,70 @@
|
||||
.bottom-reactions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin: 0 1em 1em;
|
||||
}
|
||||
|
||||
.timeline-item .conversation-holder .bottom-reactions {
|
||||
margin: 1em 0 0 36px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.bottom-reactions .ui.label {
|
||||
padding: 5px 8px;
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
.bottom-reactions .ui.label.primary {
|
||||
background-color: var(--color-reaction-active-bg) !important;
|
||||
}
|
||||
|
||||
.bottom-reactions .ui.label:hover {
|
||||
background-color: var(--color-reaction-hover-bg) !important;
|
||||
}
|
||||
|
||||
.bottom-reactions .ui.label.disabled {
|
||||
cursor: default;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.bottom-reactions .ui.label .reaction {
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bottom-reactions .ui.label .reaction img {
|
||||
height: 16px;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.bottom-reactions .reaction-count {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.ui.dropdown.select-reaction .menu {
|
||||
min-width: 170px; /* item-outer-width * 4 */
|
||||
}
|
||||
|
||||
.ui.dropdown.select-reaction .menu > .item {
|
||||
float: left;
|
||||
margin: 4px;
|
||||
font-size: 20px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: var(--border-radius);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bottom-reactions .select-reaction {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.bottom-reactions .select-reaction:not(.active) {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.bottom-reactions:hover .select-reaction {
|
||||
visibility: visible;
|
||||
}
|
||||
@ -1,38 +1,36 @@
|
||||
import $ from 'jquery';
|
||||
import {POST} from '../../modules/fetch.js';
|
||||
|
||||
export function initCompReactionSelector($parent) {
|
||||
$parent.find(`.select-reaction .item.reaction, .comment-reaction-button`).on('click', async function (e) {
|
||||
e.preventDefault();
|
||||
export function initCompReactionSelector() {
|
||||
for (const container of document.querySelectorAll('.issue-content, .diff-file-body')) {
|
||||
container.addEventListener('click', async (e) => {
|
||||
// there are 2 places for the "reaction" buttons, one is the top-right reaction menu, one is the bottom of the comment
|
||||
const target = e.target.closest('.comment-reaction-button');
|
||||
if (!target) return;
|
||||
e.preventDefault();
|
||||
|
||||
if (this.classList.contains('disabled')) return;
|
||||
if (target.classList.contains('disabled')) return;
|
||||
|
||||
const actionUrl = this.closest('[data-action-url]')?.getAttribute('data-action-url');
|
||||
const reactionContent = this.getAttribute('data-reaction-content');
|
||||
const hasReacted = this.closest('.ui.segment.reactions')?.querySelector(`a[data-reaction-content="${reactionContent}"]`)?.getAttribute('data-has-reacted') === 'true';
|
||||
const actionUrl = target.closest('[data-action-url]').getAttribute('data-action-url');
|
||||
const reactionContent = target.getAttribute('data-reaction-content');
|
||||
|
||||
const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
|
||||
data: new URLSearchParams({content: reactionContent}),
|
||||
const commentContainer = target.closest('.comment-container');
|
||||
|
||||
const bottomReactions = commentContainer.querySelector('.bottom-reactions'); // may not exist if there is no reaction
|
||||
const bottomReactionBtn = bottomReactions?.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`);
|
||||
const hasReacted = bottomReactionBtn?.getAttribute('data-has-reacted') === 'true';
|
||||
|
||||
const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
|
||||
data: new URLSearchParams({content: reactionContent}),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
bottomReactions?.remove();
|
||||
if (data.html) {
|
||||
commentContainer.insertAdjacentHTML('beforeend', data.html);
|
||||
const bottomReactionsDropdowns = commentContainer.querySelectorAll('.bottom-reactions .dropdown.select-reaction');
|
||||
$(bottomReactionsDropdowns).dropdown(); // re-init the dropdown
|
||||
}
|
||||
});
|
||||
|
||||
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();
|
||||
}
|
||||
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);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -87,7 +87,6 @@ function initRepoDiffConversationForm() {
|
||||
el.classList.add('tw-invisible');
|
||||
}
|
||||
$newConversationHolder.find('.dropdown').dropdown();
|
||||
initCompReactionSelector($newConversationHolder);
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
showErrorToast(i18n.network_error);
|
||||
|
||||
@ -393,7 +393,7 @@ export function initRepository() {
|
||||
initRepoIssueDependencyDelete();
|
||||
initRepoIssueCodeCommentCancel();
|
||||
initRepoPullRequestUpdate();
|
||||
initCompReactionSelector($(document));
|
||||
initCompReactionSelector();
|
||||
|
||||
initRepoPullRequestMergeForm();
|
||||
initRepoPullRequestCommitStatus();
|
||||
|
||||
Reference in New Issue
Block a user