mirror of
https://github.com/go-gitea/gitea
synced 2024-08-21 09:45:01 +02:00
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: <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:
parent
964a057a76
commit
525b7382d3
|
@ -29,9 +29,7 @@
|
||||||
<div id="issue-filters" class="ui stackable grid">
|
<div id="issue-filters" class="ui stackable grid">
|
||||||
<div class="six wide column">
|
<div class="six wide column">
|
||||||
{{if $.CanWriteIssuesOrPulls}}
|
{{if $.CanWriteIssuesOrPulls}}
|
||||||
<div class="ui checkbox issue-checkbox-all gt-vm">
|
<input type="checkbox" autocomplete="off" class="issue-checkbox-all gt-vm gt-mr-4" title="{{.locale.Tr "repo.issues.action_check_all"}}">
|
||||||
<input type="checkbox" title="{{.locale.Tr "repo.issues.action_check_all"}}">
|
|
||||||
</div>
|
|
||||||
{{end}}
|
{{end}}
|
||||||
{{template "repo/issue/openclose" .}}
|
{{template "repo/issue/openclose" .}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,11 +2,9 @@
|
||||||
{{$approvalCounts := .ApprovalCounts}}
|
{{$approvalCounts := .ApprovalCounts}}
|
||||||
{{range .Issues}}
|
{{range .Issues}}
|
||||||
<li class="item gt-df gt-py-3">
|
<li class="item gt-df gt-py-3">
|
||||||
<div class="issue-item-left gt-df">
|
<div class="issue-item-left gt-df gt-items-start">
|
||||||
{{if $.CanWriteIssuesOrPulls}}
|
{{if $.CanWriteIssuesOrPulls}}
|
||||||
<div class="ui checkbox issue-checkbox">
|
<input type="checkbox" autocomplete="off" class="issue-checkbox gt-mt-2 gt-mr-4" data-issue-id={{.ID}} aria-label="{{$.locale.Tr "repo.issues.action_check"}} "{{.Title}}"">
|
||||||
<input type="checkbox" data-issue-id={{.ID}} title="{{$.locale.Tr "repo.issues.action_check"}} «{{.Title}}»">
|
|
||||||
</div>
|
|
||||||
{{end}}
|
{{end}}
|
||||||
<div class="issue-item-icon">
|
<div class="issue-item-icon">
|
||||||
{{if .IsPull}}
|
{{if .IsPull}}
|
||||||
|
|
|
@ -24,6 +24,7 @@
|
||||||
.gt-relative { position: relative !important; }
|
.gt-relative { position: relative !important; }
|
||||||
.gt-overflow-x-scroll { overflow-x: scroll !important; }
|
.gt-overflow-x-scroll { overflow-x: scroll !important; }
|
||||||
.gt-cursor-default { cursor: default !important; }
|
.gt-cursor-default { cursor: default !important; }
|
||||||
|
.gt-items-start { align-items: flex-start !important; }
|
||||||
|
|
||||||
.gt-mono {
|
.gt-mono {
|
||||||
font-family: var(--fonts-monospace) !important;
|
font-family: var(--fonts-monospace) !important;
|
||||||
|
|
|
@ -7,10 +7,6 @@
|
||||||
color: var(--color-primary) !important;
|
color: var(--color-primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.issue.list > .item .issue-checkbox {
|
|
||||||
margin-top: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.issue.list > .item .issue-item-icon svg {
|
.issue.list > .item .issue-item-icon svg {
|
||||||
margin-right: 0.75rem;
|
margin-right: 0.75rem;
|
||||||
margin-top: 1px;
|
margin-top: 1px;
|
||||||
|
|
|
@ -3,9 +3,8 @@ import {updateIssuesMeta} from './repo-issue.js';
|
||||||
import {toggleElem} from '../utils/dom.js';
|
import {toggleElem} from '../utils/dom.js';
|
||||||
|
|
||||||
export function initCommonIssue() {
|
export function initCommonIssue() {
|
||||||
const $issueSelectAllWrapper = $('.issue-checkbox-all');
|
const $issueSelectAll = $('.issue-checkbox-all');
|
||||||
const $issueSelectAll = $('.issue-checkbox-all input');
|
const $issueCheckboxes = $('.issue-checkbox');
|
||||||
const $issueCheckboxes = $('.issue-checkbox input');
|
|
||||||
|
|
||||||
const syncIssueSelectionState = () => {
|
const syncIssueSelectionState = () => {
|
||||||
const $checked = $issueCheckboxes.filter(':checked');
|
const $checked = $issueCheckboxes.filter(':checked');
|
||||||
|
@ -23,7 +22,7 @@ export function initCommonIssue() {
|
||||||
toggleElem($('#issue-filters'), !anyChecked);
|
toggleElem($('#issue-filters'), !anyChecked);
|
||||||
toggleElem($('#issue-actions'), anyChecked);
|
toggleElem($('#issue-actions'), anyChecked);
|
||||||
// there are two panels but only one select-all checkbox, so move the checkbox to the visible panel
|
// 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);
|
$issueCheckboxes.on('change', syncIssueSelectionState);
|
||||||
|
@ -38,7 +37,7 @@ export function initCommonIssue() {
|
||||||
let action = this.getAttribute('data-action');
|
let action = this.getAttribute('data-action');
|
||||||
let elementId = this.getAttribute('data-element-id');
|
let elementId = this.getAttribute('data-element-id');
|
||||||
const url = this.getAttribute('data-url');
|
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');
|
return el.getAttribute('data-issue-id');
|
||||||
}).get().join(',');
|
}).get().join(',');
|
||||||
if (elementId === '0' && url.slice(-9) === '/assignee') {
|
if (elementId === '0' && url.slice(-9) === '/assignee') {
|
||||||
|
@ -54,20 +53,7 @@ export function initCommonIssue() {
|
||||||
issueIDs,
|
issueIDs,
|
||||||
elementId
|
elementId
|
||||||
).then(() => {
|
).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();
|
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');
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue