From 525b7382d31079333dbffba625af1c0e177546db Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 30 Mar 2023 17:02:47 +0200 Subject: [PATCH] Convert issue list checkboxes to native (#23596) 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: Screenshot 2023-03-20 at 17 02 02 After, Firefox on macOS: Screenshot 2023-03-20 at 17 01 26 After, Chrome on macOS: Screenshot 2023-03-20 at 17 01 42 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. --- templates/repo/issue/list.tmpl | 4 +--- templates/shared/issuelist.tmpl | 6 ++---- web_src/css/helpers.css | 1 + web_src/css/shared/issuelist.css | 4 ---- web_src/js/features/common-issue.js | 22 ++++------------------ 5 files changed, 8 insertions(+), 29 deletions(-) diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl index 38ed3873ba..c8d186bbfb 100644 --- a/templates/repo/issue/list.tmpl +++ b/templates/repo/issue/list.tmpl @@ -29,9 +29,7 @@
{{if $.CanWriteIssuesOrPulls}} -
- -
+ {{end}} {{template "repo/issue/openclose" .}}
diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl index 24fa236bb4..35994fc435 100644 --- a/templates/shared/issuelist.tmpl +++ b/templates/shared/issuelist.tmpl @@ -2,11 +2,9 @@ {{$approvalCounts := .ApprovalCounts}} {{range .Issues}}
  • -
    +
    {{if $.CanWriteIssuesOrPulls}} -
    - -
    + {{end}}
    {{if .IsPull}} diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 34d2895a5f..e2d195822f 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -24,6 +24,7 @@ .gt-relative { position: relative !important; } .gt-overflow-x-scroll { overflow-x: scroll !important; } .gt-cursor-default { cursor: default !important; } +.gt-items-start { align-items: flex-start !important; } .gt-mono { font-family: var(--fonts-monospace) !important; diff --git a/web_src/css/shared/issuelist.css b/web_src/css/shared/issuelist.css index ebb1ca989b..26affd98a0 100644 --- a/web_src/css/shared/issuelist.css +++ b/web_src/css/shared/issuelist.css @@ -7,10 +7,6 @@ color: var(--color-primary) !important; } -.issue.list > .item .issue-checkbox { - margin-top: 1px; -} - .issue.list > .item .issue-item-icon svg { margin-right: 0.75rem; margin-top: 1px; diff --git a/web_src/js/features/common-issue.js b/web_src/js/features/common-issue.js index ebc851d676..25d41edde3 100644 --- a/web_src/js/features/common-issue.js +++ b/web_src/js/features/common-issue.js @@ -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'); - }); }