From 2bcc4ccdc51885fc02e70a36b07cfb91e9814dc5 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Fri, 18 May 2018 10:36:58 -0700 Subject: [PATCH] report: animated chevrons (#5137) --- .../report/html/renderer/category-renderer.js | 22 +++-- lighthouse-core/report/html/report-styles.css | 80 +++++++++++-------- lighthouse-core/report/html/templates.html | 29 +++---- 3 files changed, 73 insertions(+), 58 deletions(-) diff --git a/lighthouse-core/report/html/renderer/category-renderer.js b/lighthouse-core/report/html/renderer/category-renderer.js index dd6e59972deb..ae110e4ad27a 100644 --- a/lighthouse-core/report/html/renderer/category-renderer.js +++ b/lighthouse-core/report/html/renderer/category-renderer.js @@ -71,9 +71,10 @@ class CategoryRenderer { elem.classList.add('lh-details'); header.appendChild(elem); } - this.dom.find('.lh-audit__index', auditEl).textContent = `${index + 1}`; + // Add chevron SVG to the end of the summary + this.dom.find('.lh-chevron-container', auditEl).appendChild(this._createChevron()); this._setRatingClass(auditEl, audit.result.score, scoreDisplayMode); if (audit.result.scoreDisplayMode === 'error') { @@ -91,7 +92,16 @@ class CategoryRenderer { } /** - * @param {Element} element DOM node to populate with values. + * @return {!HTMLElement} + */ + _createChevron() { + const chevronTmpl = this.dom.cloneTemplate('#tmpl-lh-chevron', this.templateContext); + const chevronEl = this.dom.find('.lh-chevron', chevronTmpl); + return chevronEl; + } + + /** + * @param {!Element} element DOM node to populate with values. * @param {number|null} score * @param {string} scoreDisplayMode * @return {Element} @@ -136,10 +146,10 @@ class CategoryRenderer { const summmaryEl = this.dom.createChildOf(groupEl, 'summary', 'lh-audit-group__summary'); const headerEl = this.dom.createChildOf(summmaryEl, 'div', 'lh-audit-group__header'); const itemCountEl = this.dom.createChildOf(summmaryEl, 'div', 'lh-audit-group__itemcount'); - this.dom.createChildOf(summmaryEl, 'div', - `lh-toggle-arrow ${expandable ? '' : ' lh-toggle-arrow-unexpandable'}`, { - title: 'Show audits', - }); + if (expandable) { + const chevronEl = summmaryEl.appendChild(this._createChevron()); + chevronEl.title = 'Show audits'; + } if (group.description) { const auditGroupDescription = this.dom.createElement('div', 'lh-audit-group__description'); diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index 1df37575d929..cda571201238 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -65,10 +65,10 @@ --lh-audit-hgap: 12px; --lh-audit-group-vpadding: 8px; --lh-section-vpadding: 12px; + --chevron-size: 12px; --pass-icon-url: url('data:image/svg+xml;utf8,check'); --average-icon-url: url('data:image/svg+xml;utf8,info'); --fail-icon-url: url('data:image/svg+xml;utf8,warn'); - --chevron-icon-url: url('data:image/svg+xml;utf8,'); --av-timer-icon-url: url('data:image/svg+xml;utf8,'); --photo-filter-icon-url: url('data:image/svg+xml;utf8,'); @@ -262,13 +262,13 @@ .lh-audit__display-text, .lh-audit__score-icon, .lh-load-opportunity__sparkline, -.lh-toggle-arrow { +.lh-chevron-container { margin: 0 var(--audit-item-gap); } .lh-audit__index { margin-left: 0; } -.lh-toggle-arrow { +.lh-chevron-container { margin-right: 0; } @@ -281,22 +281,6 @@ flex: 1; } -.lh-toggle-arrow { - background: var(--chevron-icon-url) no-repeat center center / 20px 20px; - width: 12px; - height: 18px; - flex: none; - transition: transform 150ms ease-in-out; - cursor: pointer; - border: none; - transform: rotateZ(90deg); - margin-top: calc((var(--body-line-height) - 12px) / 2); -} - -.lh-toggle-arrow-unexpandable { - visibility: hidden; -} - /* Expandable Details (Audit Groups, Audits) */ .lh-audit__header { display: flex; @@ -312,14 +296,6 @@ background-color: #F8F9FA; } - -.lh-audit-group[open] > .lh-audit-group__summary > .lh-toggle-arrow, -.lh-expandable-details[open] > .lh-expandable-details__summary > .lh-toggle-arrow, -.lh-expandable-details[open] > .lh-expandable-details__summary > div > .lh-toggle-arrow, -.lh-expandable-details[open] > .lh-expandable-details__summary > div > div > .lh-toggle-arrow { - transform: rotateZ(-90deg); -} - .lh-audit-group__summary::-webkit-details-marker, .lh-expandable-details__summary::-webkit-details-marker { display: none; @@ -603,10 +579,6 @@ margin: 0 10px; } -.lh-audit-group__summary .lh-toggle-arrow { - -} - .lh-audit-group__description { font-size: var(--body-font-size); color: var(--medium-75-gray); @@ -742,6 +714,7 @@ .lh-category:first-of-type { padding-top: calc(2 * var(--section-padding)); + border: none; } /* section hash link jump should preserve fixed header @@ -754,10 +727,6 @@ visibility: hidden; } -.lh-category:first-of-type { - border: none; -} - .lh-category-header { font-size: var(--header-font-size); min-height: var(--circle-size); @@ -921,6 +890,47 @@ summary.lh-passed-audits-summary { object-fit: contain; } +/* Chevron + https://codepen.io/paulirish/pen/LmzEmK + */ +.lh-chevron { + --chevron-angle: 42deg; + width: var(--chevron-size); + height: var(--chevron-size); + margin-top: calc((var(--body-line-height) - 12px) / 2); +} + +.lh-chevron__lines { + transition: transform 0.4s; + transform: translateY(var(--body-line-height)); +} +.lh-chevron__line { + stroke: var(--display-value-gray); + stroke-width: var(--chevron-size); + stroke-linecap: square; + transform-origin: 50%; + transform: rotate(var(--chevron-angle)); + transition: transform 300ms, stroke 300ms; +} + +.lh-audit-group > .lh-audit-group__summary > .lh-chevron .lh-chevron__line-right, +.lh-audit-group[open] > .lh-audit-group__summary > .lh-chevron .lh-chevron__line-left, +.lh-audit > .lh-expandable-details .lh-chevron__line-right, +.lh-audit > .lh-expandable-details[open] .lh-chevron__line-left { + transform: rotate(calc(var(--chevron-angle) * -1)); +} + +.lh-audit-group[open] > .lh-audit-group__summary > .lh-chevron .lh-chevron__line-right, +.lh-audit > .lh-expandable-details[open] .lh-chevron__line-right { + transform: rotate(var(--chevron-angle)); +} + +.lh-audit-group[open] > .lh-audit-group__summary > .lh-chevron .lh-chevron__lines, +.lh-audit > .lh-expandable-details[open] .lh-chevron__lines { + transform: translateY(calc(var(--chevron-size) * -1)); +} + + /* Tooltip */ .tooltip-boundary { diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html index 342727d60567..0fd860b97243 100644 --- a/lighthouse-core/report/html/templates.html +++ b/lighthouse-core/report/html/templates.html @@ -16,6 +16,16 @@ + + +