Gitea-John71/Gitea
2
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-10-04 04:24:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

enhance(webhook): add select all and deselect all buttons for custom events (#35980)

Browse Source 
Adds `Select All` and `Deselect All` buttons to the custom events
section of the webhook form. This is useful when you need all events but
one.

- The buttons toggle every event checkbox and keep the unsaved-changes
prompt working
- Fix the "Trigger On" radio spacing by removing a leftover Fomantic
checkbox margin

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Timur Moziev
2026-10-03 17:27:17 +03:00
committed by GitHub
parent ab1979bcfb
commit f65e01226a
8 changed files with 59 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web_src/css/modules/checkbox.css
-8
View File
@@ -88,10 +88,6 @@ input[type="checkbox"]:indeterminate::before {
.ui.checkbox label {
position: relative;
display: block;
}
.ui.checkbox label,
.ui.radio.checkbox label {
margin-left: 20px;
}
@@ -107,10 +103,6 @@ input[type="checkbox"]:indeterminate::before {
pointer-events: none;
}
.ui.radio.checkbox {
min-height: var(--checkbox-size);
}
/* "switch" styled checkbox */
.ui.toggle.checkbox {
web_src/css/modules/form.css
-7
View File
@@ -114,10 +114,6 @@ textarea:focus,
vertical-align: top;
}
.ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox {
margin-top: 0.6em;
}
.ui.form .field > .selection.dropdown {
min-width: 14em; /* matches the default min width */
width: 100%;
@@ -255,9 +251,6 @@ textarea:focus,
padding-left: 0.5em;
padding-right: 0.5em;
}
.ui.form .fields > .field:first-child {
border-left: none;
}
@media only screen and (max-width: 767.98px) {
.ui.form .fields {
web_src/css/repo.css
-10
View File
@@ -952,16 +952,6 @@
font-style: italic;
}
.repository.settings.webhook .events .column {
padding-bottom: 0;
}
.repository.settings.webhook .events .help {
font-size: 13px;
margin-left: 26px;
padding-top: 0;
}
.repository .repository-summary {
box-shadow: none;
}
web_src/js/features/comp/WebHookEditor.ts
+30 -26
View File
@@ -1,42 +1,46 @@
import {registerGlobalEventFunc, registerGlobalInitFunc} from '../../modules/observer.ts';
import {POST} from '../../modules/fetch.ts';
import {hideElem, showElem, toggleElem} from '../../utils/dom.ts';
import {queryElems, toggleElem} from '../../utils/dom.ts';
export function initCompWebHookEditor() {
if (!document.querySelectorAll('.new.webhook').length) {
return;
}
function initCompWebHookEditorForm(el: HTMLElement) {
const elCustomEvents = el.querySelector('.js-webhook-custom-events')!;
for (const input of document.querySelectorAll<HTMLInputElement>('.events.checkbox input')) {
input.addEventListener('change', function () {
if (this.checked) {
showElem('.events.fields');
}
// Trigger On: use custom events or not
queryElems<HTMLInputElement>(el, 'input[name=events]', (input) => input.addEventListener('change', () => {
if (!input.checked) return;
toggleElem(elCustomEvents, input.value === 'choose_events');
}));
// Select All / Deselect All custom events
queryElems(el, 'button[data-events-select-all]', (btn) => btn.addEventListener('click', () => {
const checked = btn.getAttribute('data-events-select-all') === 'true';
queryElems<HTMLInputElement>(elCustomEvents, 'input[type=checkbox]', (input) => {
input.checked = checked;
input.dispatchEvent(new Event('change', {bubbles: true})); // for the areYouSure dirty tracking
});
}
for (const input of document.querySelectorAll<HTMLInputElement>('.non-events.checkbox input')) {
input.addEventListener('change', function () {
if (this.checked) {
hideElem('.events.fields');
}
});
}
}));
// some webhooks (like Gitea) allow to set the request method (GET/POST), and it would toggle the "Content Type" field
const httpMethodInput = document.querySelector<HTMLInputElement>('#http_method');
const httpMethodInput = el.querySelector<HTMLInputElement>('#http_method');
if (httpMethodInput) {
const updateContentType = function () {
const updateContentType = () => {
const visible = httpMethodInput.value === 'POST';
toggleElem(document.querySelector('#content_type')!.closest('.field')!, visible);
toggleElem(el.querySelector('#content_type')!.closest('.field')!, visible);
};
updateContentType();
httpMethodInput.addEventListener('change', updateContentType);
}
}
// Test delivery
document.querySelector<HTMLButtonElement>('#test-delivery')?.addEventListener('click', async function () {
this.classList.add('is-loading', 'disabled');
await POST(this.getAttribute('data-link')!);
function initCompWebHookEditorHistory() {
registerGlobalEventFunc('click', 'onWebhookTestDeliveryClick', async (el) => {
el.classList.add('is-loading', 'disabled');
await POST(el.getAttribute('data-link')!);
setTimeout(() => window.location.reload(), 5000);
});
}
export function initCompWebHookEditor() {
registerGlobalInitFunc('initCompWebHookEditorForm', initCompWebHookEditorForm);
initCompWebHookEditorHistory();
}