feat: table styles (#2210)
* feat: table styles * feedback and tests * styleAs -> styleClass * Revert "styleAs -> styleClass" This reverts commit43eee33865
. * Revert "feedback and tests" This reverts commita1286167a3
. * Revert "feat: table styles" This reverts commitc04f675384
. * add styling based on item type * plumb through itemType * closure
This commit is contained in:
Родитель
3f22558aca
Коммит
401d0a7d6a
|
@ -95,6 +95,7 @@ class Audit {
|
|||
static makeV2TableHeaders(headings) {
|
||||
return headings.map(heading => ({
|
||||
type: 'text',
|
||||
itemType: heading.itemType,
|
||||
text: heading.text
|
||||
}));
|
||||
}
|
||||
|
|
|
@ -71,6 +71,12 @@ class UsesHTTP2Audit extends Audit {
|
|||
displayValue = `${resources.length} request was not handled over h2`;
|
||||
}
|
||||
|
||||
const headings = [
|
||||
{key: 'url', itemType: 'url', text: 'URL'},
|
||||
{key: 'protocol', itemType: 'text', text: 'Protocol'},
|
||||
];
|
||||
const details = Audit.makeV2TableDetails(headings, resources);
|
||||
|
||||
return {
|
||||
rawValue: resources.length === 0,
|
||||
displayValue: displayValue,
|
||||
|
@ -80,7 +86,8 @@ class UsesHTTP2Audit extends Audit {
|
|||
results: resources,
|
||||
tableHeadings: {url: 'URL', protocol: 'Protocol'}
|
||||
}
|
||||
}
|
||||
},
|
||||
details,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
|
@ -127,14 +127,17 @@ class DetailsRenderer {
|
|||
const theadTrElem = this._dom.createChildOf(theadElem, 'tr');
|
||||
|
||||
for (const heading of details.itemHeaders) {
|
||||
this._dom.createChildOf(theadTrElem, 'th').appendChild(this.render(heading));
|
||||
const itemType = heading.itemType || 'text';
|
||||
const classes = `lh-table-column--${itemType}`;
|
||||
this._dom.createChildOf(theadTrElem, 'th', classes).appendChild(this.render(heading));
|
||||
}
|
||||
|
||||
const tbodyElem = this._dom.createChildOf(tableElem, 'tbody');
|
||||
for (const row of details.items) {
|
||||
const rowElem = this._dom.createChildOf(tbodyElem, 'tr');
|
||||
for (const columnItem of row) {
|
||||
this._dom.createChildOf(rowElem, 'td').appendChild(this.render(columnItem));
|
||||
const classes = `lh-table-column--${columnItem.type}`;
|
||||
this._dom.createChildOf(rowElem, 'td', classes).appendChild(this.render(columnItem));
|
||||
}
|
||||
}
|
||||
return element;
|
||||
|
@ -212,11 +215,20 @@ DetailsRenderer.ListDetailsJSON; // eslint-disable-line no-unused-expressions
|
|||
*/
|
||||
DetailsRenderer.CardsDetailsJSON; // eslint-disable-line no-unused-expressions
|
||||
|
||||
/**
|
||||
* @typedef {{
|
||||
* type: string,
|
||||
* itemType: (string|undefined),
|
||||
* text: (string|undefined)
|
||||
* }}
|
||||
*/
|
||||
DetailsRenderer.TableHeaderJSON; // eslint-disable-line no-unused-expressions
|
||||
|
||||
/** @typedef {{
|
||||
* type: string,
|
||||
* header: ({text: string}|undefined),
|
||||
* items: !Array<!Array<!DetailsRenderer.DetailsJSON>>,
|
||||
* itemHeaders: !Array<!DetailsRenderer.DetailsJSON>
|
||||
* itemHeaders: !Array<!DetailsRenderer.TableHeaderJSON>
|
||||
* }}
|
||||
*/
|
||||
DetailsRenderer.TableDetailsJSON; // eslint-disable-line no-unused-expressions
|
||||
|
|
|
@ -38,6 +38,10 @@
|
|||
--lh-score-highlight-bg: #fafafa;
|
||||
--lh-score-icon-background-size: 24px;
|
||||
--lh-score-margin: calc(var(--default-padding) / 2);
|
||||
|
||||
--lh-table-header-bg: #ccc;
|
||||
--lh-table-higlight-bg: #fafafa;
|
||||
|
||||
--lh-sparkline-height: 10px;
|
||||
--lh-audit-score-width: 35px;
|
||||
--lh-category-score-width: 60px;
|
||||
|
@ -602,6 +606,38 @@ summary.lh-passed-audits-summary::-webkit-details-marker {
|
|||
|
||||
.lh-table {
|
||||
--image-preview-size: 24px;
|
||||
border: 1px solid var(--report-secondary-border-color);
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.lh-table thead {
|
||||
background: var(--lh-table-header-bg);
|
||||
}
|
||||
|
||||
.lh-table tbody tr:nth-child(even) {
|
||||
background-color: var(--lh-table-higlight-bg);
|
||||
}
|
||||
|
||||
.lh-table th,
|
||||
.lh-table td {
|
||||
padding: 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.lh-table-column--text {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.lh-table-column--thumbnail {
|
||||
width: calc(var(--image-preview-size) * 2);
|
||||
}
|
||||
|
||||
.lh-table-column--url {
|
||||
text-align: left;
|
||||
min-width: 250px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.lh-thumbnail {
|
||||
|
|
|
@ -122,5 +122,50 @@ describe('DetailsRenderer', () => {
|
|||
assert.ok(el.classList.contains('lh-code'));
|
||||
assert.equal(el.textContent, 'code snippet');
|
||||
});
|
||||
|
||||
it('renders thumbnails', () => {
|
||||
const el = renderer.render({
|
||||
type: 'thumbnail',
|
||||
url: 'http://example.com/my-image.jpg',
|
||||
mimeType: 'image/jpeg',
|
||||
});
|
||||
|
||||
assert.ok(el.localName === 'img');
|
||||
assert.ok(el.classList.contains('lh-thumbnail'));
|
||||
assert.equal(el.src, 'http://example.com/my-image.jpg');
|
||||
});
|
||||
|
||||
it('renders tables', () => {
|
||||
const el = renderer.render({
|
||||
type: 'table',
|
||||
header: 'View Items',
|
||||
itemHeaders: [
|
||||
{type: 'text', text: 'First'},
|
||||
{type: 'text', text: 'Second'},
|
||||
{type: 'text', text: 'Preview', itemType: 'thumbnail'},
|
||||
],
|
||||
items: [
|
||||
[
|
||||
{type: 'text', text: 'value A.1'},
|
||||
{type: 'text', text: 'value A.2'},
|
||||
{type: 'thumbnail', url: 'http://example.com/image.jpg', mimeType: 'image/jpeg'},
|
||||
],
|
||||
[
|
||||
{type: 'text', text: 'value B.1'},
|
||||
{type: 'text', text: 'value B.2'},
|
||||
{type: 'thumbnail', url: 'unknown'},
|
||||
],
|
||||
],
|
||||
});
|
||||
|
||||
assert.equal(el.localName, 'details');
|
||||
assert.ok(el.querySelector('table'), 'did not render table');
|
||||
assert.ok(el.querySelector('img'), 'did not render recursive items');
|
||||
assert.equal(el.querySelectorAll('th').length, 3, 'did not render header items');
|
||||
assert.equal(el.querySelectorAll('td').length, 6, 'did not render table cells');
|
||||
assert.equal(el.querySelectorAll('.lh-table-column--text').length, 6, '--text not set');
|
||||
assert.equal(el.querySelectorAll('.lh-table-column--thumbnail').length, 3,
|
||||
'--thumbnail not set');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Загрузка…
Ссылка в новой задаче