nune/gitea
nune/gitea
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

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

Browse source 
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 2024-04-14 12:44:11 +02:00 • committed by GitHub
parent 6999a88fd9
commit 4b1063f3db
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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;
}