[IMP] runbot: improve has_pr button

Previously the has_pr button was a literal href which meant you couldn't
do both a search with the has_pr checked in a singular action.

Now the has_pr button acts as a checkbox (the real checkbox is hidden)
and basic support for keyboard controls has been added (tab, space and
enter).
This commit is contained in:
William Braeckman 2025-01-02 11:06:02 +01:00
parent 998163ee03
commit 6075d7ec48
3 changed files with 48 additions and 5 deletions

View File

@ -418,3 +418,9 @@ body, .table {
code {
white-space: pre-wrap;
}
input:checked + label.o_runbot_hidden_checkbox, input + label.o_runbot_hidden_checkbox:hover {
color: var(--bs-btn-active-color);
background-color: var(--bs-btn-active-bg);
border-color: var(--bs-btn-active-border-color);
}

View File

@ -37,3 +37,42 @@ function copyToClipboard(text) {
}
navigator.clipboard.writeText(text);
}
/**
* Shamelessly stolen from owl's code, execute a function when the DOM is ready.
*
* @param {*} fn function to call when the DOM is ready.
* @returns {Promise} Promise that can be awaited for after DOM is ready.
*/
function whenReady(fn) {
return new Promise(function (resolve) {
if (document.readyState !== "loading") {
resolve(true);
} else {
document.addEventListener("DOMContentLoaded", resolve, false);
}
}).then(fn || function () { });
}
// Hidden checkbox with keyboard support
whenReady(() => {
Array.from(
document.querySelectorAll('label.o_runbot_hidden_checkbox')
).filter(
(label) => !!label.control
).forEach(
(label) => {
label.addEventListener(
'keydown', (event) => {
const { key } = event;
if (key === ' ') {
label.control.checked = !label.control.checked;
event.preventDefault();
} else if (key === 'Enter') {
label.closest('form').submit();
}
}
);
}
);
})

View File

@ -7,12 +7,10 @@
<form class="form-inline my-2 my-lg-0" role="search" t-att-action="qu(search='')" method="get">
<div class="input-group md-form form-sm form-2 ps-0">
<input class="form-control my-0 py-1" type="text" placeholder="Search" aria-label="Search" name="search" t-att-value="search"/>
<a t-if="has_pr" class="btn btn-primary active input-group-text" title="All" t-att-href="qu(has_pr=None)">
<input type="checkbox" class="d-none" name="has_pr" id="has_pr" t-att-checked="'' if has_pr else None"/>
<label class="btn btn-outline-primary input-group-text o_runbot_hidden_checkbox" title="Toggle PR State" for="has_pr" tabindex="0">
<i class="fa fa-github text-grey"/>
</a>
<a t-else="" class="btn input-group-text" title="Open pull requests" t-att-href="qu(has_pr=1)">
<i class="fa fa-github text-grey"/>
</a>
</label>
<button type='submit' class="input-group-text">
<i class="fa fa-search text-grey"/>
</button>