tdsds.com/gitea
1
1
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2025-07-22 18:28:37 +00:00
Code Releases Activity

Rewrite and restyle reaction selector and enable no-sizzle eslint rule (#30453) (#30473)

Browse Source 
Backport #30453 by @silverwind

Enable `no-sizzle` lint rule, there was only one use in
`initCompReactionSelector` which I have rewritten as follows:

- Remove all jQuery except the necessary fomantic dropdown init
- Remove the recursion, instead bind event listeners to common parent
container nodes

Did various tests, works with our without attachments, in diff view and
in diff comments inside comment list.

Additionally the style of reactions now matches between code comments
and issue comments:

<img width="275" alt="Screenshot 2024-04-13 at 14 58 10"
src="https://github.com/go-gitea/gitea/assets/115237/9d08f188-8661-4dd9-bff4-cad6d6d09cab">

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Giteabot
2024-04-14 19:58:48 +08:00
committed by GitHub
parent dd12861011
commit 0352b99221
17 changed files with 134 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
web_src/css/repo.css
View File

@@ -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;
}