* feat: table styles

* feedback and tests

* styleAs -> styleClass

* Revert "styleAs -> styleClass"

This reverts commit 43eee33865.

* Revert "feedback and tests"

This reverts commit a1286167a3.

* Revert "feat: table styles"

This reverts commit c04f675384.

* add styling based on item type

* plumb through itemType

* closure
This commit is contained in:
Patrick Hulce 2017-05-10 15:57:29 -07:00 коммит произвёл GitHub
Родитель 3f22558aca
Коммит 401d0a7d6a
5 изменённых файлов: 105 добавлений и 4 удалений

Просмотреть файл

@ -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');
});
});
});