web/forgejo
10
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Convert issue list checkboxes to native (#23596)

Browse source 
Use native instead of fomantic checkboxes in issue list. Benefits
include no more JS pop-in on load and perfect a11y.

Before, with JS pop-in:

<img width="92" alt="Screenshot 2023-03-20 at 17 02 02"
src="https://user-images.githubusercontent.com/115237/226398955-99029a1c-1150-449c-821b-e4165e7446a8.png">

After, Firefox on macOS:

<img width="126" alt="Screenshot 2023-03-20 at 17 01 26"
src="https://user-images.githubusercontent.com/115237/226399018-58df2c32-c2b2-4c78-b7df-7b76523abe21.png">

After, Chrome on macOS:

<img width="79" alt="Screenshot 2023-03-20 at 17 01 42"
src="https://user-images.githubusercontent.com/115237/226399074-947e6279-8dc3-42c2-90b5-b106c471b23d.png">

I opted to not do styling yet but I see that the inconsistency between
browsers may already be reason enough on doing it. I think if we style
them, there should be one global style, including markdown ones which
currently have custom styling.
This commit is contained in:
silverwind 2023-03-30 17:02:47 +02:00 • committed by GitHub
parent 964a057a76
commit 525b7382d3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 8 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

22
web_src/js/features/common-issue.js
View file

@ -3,9 +3,8 @@ import {updateIssuesMeta} from './repo-issue.js';
import {toggleElem} from '../utils/dom.js';
export function initCommonIssue() {
const $issueSelectAllWrapper = $('.issue-checkbox-all');
const $issueSelectAll = $('.issue-checkbox-all input');
const $issueCheckboxes = $('.issue-checkbox input');
const $issueSelectAll = $('.issue-checkbox-all');
const $issueCheckboxes = $('.issue-checkbox');
const syncIssueSelectionState = () => {
const $checked = $issueCheckboxes.filter(':checked');
@ -23,7 +22,7 @@ export function initCommonIssue() {
toggleElem($('#issue-filters'), !anyChecked);
toggleElem($('#issue-actions'), anyChecked);
// there are two panels but only one select-all checkbox, so move the checkbox to the visible panel
$('#issue-filters, #issue-actions').filter(':visible').find('.column:first').prepend($issueSelectAllWrapper);
$('#issue-filters, #issue-actions').filter(':visible').find('.column:first').prepend($issueSelectAll);
};
$issueCheckboxes.on('change', syncIssueSelectionState);
@ -38,7 +37,7 @@ export function initCommonIssue() {
let action = this.getAttribute('data-action');
let elementId = this.getAttribute('data-element-id');
const url = this.getAttribute('data-url');
const issueIDs = $('.issue-checkbox').children('input:checked').map((_, el) => {
const issueIDs = $('.issue-checkbox:checked').map((_, el) => {
return el.getAttribute('data-issue-id');
}).get().join(',');
if (elementId === '0' && url.slice(-9) === '/assignee') {
@ -54,20 +53,7 @@ export function initCommonIssue() {
issueIDs,
elementId
).then(() => {
// NOTICE: This reset of checkbox state targets Firefox caching behaviour, as the
// checkboxes stay checked after reload
if (action === 'close' || action === 'open') {
// uncheck all checkboxes
$('.issue-checkbox input[type="checkbox"]').each((_, e) => { e.checked = false });
}
window.location.reload();
});
});
// NOTICE: This event trigger targets Firefox caching behaviour, as the checkboxes stay
// checked after reload trigger checked event, if checkboxes are checked on load
$('.issue-checkbox input[type="checkbox"]:checked').first().each((_, e) => {
e.checked = false;
$(e).trigger('click');
});
}