Feature: Make entire row collapsible (#656)

This commit is contained in:
Jim Brännlund 2023-04-15 11:23:04 +02:00 committed by GitHub
parent 60c81d8781
commit a5da6fc143
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 8 additions and 7 deletions

View File

@ -193,12 +193,13 @@ div.media {
cursor: pointer;
}
.col-result {
.collapsible td:not(.col-links) {
cursor: pointer;
&:hover::after {
@include rowToggle;
}
}
.col-result.collapser {
&:hover::after {
content: ' (hide details)';

View File

@ -29,7 +29,7 @@
</template>
<template id="template_results-table__tbody">
<tbody class="results-table-row">
<tr>
<tr class="collapsible">
<td class="col-result"></td>
<td class="col-name"></td>
<td class="col-duration"></td>

View File

@ -168,10 +168,10 @@ div.media {
display: none;
}
.col-result {
.collapsible td:not(.col-links) {
cursor: pointer;
}
.col-result:hover::after {
.collapsible td:not(.col-links):hover::after {
color: #bbb;
font-style: italic;
cursor: pointer;

View File

@ -85,9 +85,9 @@ const dom = {
const resultBody = templateResult.content.cloneNode(true)
resultBody.querySelector('tbody').classList.add(resultLower)
resultBody.querySelector('tbody').id = testId
resultBody.querySelector('.collapsible').dataset.id = id
resultBody.querySelector('.col-result').innerText = result
resultBody.querySelector('.col-result').classList.add(`${collapsed ? 'expander' : 'collapser'}`)
resultBody.querySelector('.col-result').dataset.id = id
resultBody.querySelector('.col-name').innerText = testId
const formattedDuration = duration < 1 ? formatDuration(duration).ms : formatDuration(duration).formatted

View File

@ -65,9 +65,9 @@ const renderContent = (tests) => {
redraw()
})
})
findAll('.col-result').forEach((elem) => {
findAll('.collapsible td:not(.col-links').forEach((elem) => {
elem.addEventListener('click', ({ target }) => {
manager.toggleCollapsedItem(target.dataset.id)
manager.toggleCollapsedItem(target.parentElement.dataset.id)
redraw()
})
})