Implement CSS-only input toggling, refactor related forms
UX/Translation changes: - new teams: remove redundant tooltips that don't add meaningful information - move general information to table fieldset - new teams: rename "general" to "custom" access for clarity - new teams: show labels beside options on mobile Accessibility: - semantic form elements allow easier navigation (fieldset, mostly) - improve better labelling of new teams table - fix accessibility scan issues - TODO: the parts that "disable" form elements were not yet touched and are not really accessible to screenreaders Technical: - replace two JavaScript solutions with one CSS standard - implement a simpler grid (.simple-grid) - simplify markup - remove some webhook settings specific CSS Testing: - check more form content for accessibility issues - but exclude tooltips from the scan :( - reuse existing form tests from previous PR
This commit is contained in:
parent
c20c534b90
commit
83d2b3b7fa
12 changed files with 210 additions and 310 deletions
|
@ -1,27 +1,11 @@
|
|||
import {POST} from '../../modules/fetch.js';
|
||||
import {hideElem, showElem, toggleElem} from '../../utils/dom.js';
|
||||
import {toggleElem} from '../../utils/dom.js';
|
||||
|
||||
export function initCompWebHookEditor() {
|
||||
if (!document.querySelectorAll('.new.webhook').length) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (const input of document.querySelectorAll('label.events input')) {
|
||||
input.addEventListener('change', function () {
|
||||
if (this.checked) {
|
||||
showElem('.events.fields');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
for (const input of document.querySelectorAll('label.non-events 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.getElementById('http_method');
|
||||
if (httpMethodInput) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue