From 345faa1d368969d1b2782f8ecfde3f321afc7239 Mon Sep 17 00:00:00 2001 From: Adam Raine Date: Wed, 15 Sep 2021 15:49:04 -0400 Subject: [PATCH 1/5] report(flow): topbar --- flow-report/assets/styles.css | 45 +++++++++++++++++++++++++++++++---- flow-report/src/app.tsx | 8 +++++-- flow-report/src/icons.tsx | 10 ++++++++ flow-report/src/topbar.tsx | 21 ++++++++++++++++ 4 files changed, 78 insertions(+), 6 deletions(-) create mode 100644 flow-report/src/topbar.tsx diff --git a/flow-report/assets/styles.css b/flow-report/assets/styles.css index 276969c6a837..596219b17835 100644 --- a/flow-report/assets/styles.css +++ b/flow-report/assets/styles.css @@ -10,6 +10,7 @@ --category-summary-font-size: 18px; --gather-mode-icon-size: 16px; --half-base-spacing: calc(var(--base-spacing) / 2); + --separator-color: var(--color-gray-300); --sidebar-flow-step-navigation-font-size: 14px; --sidebar-selected-bg-color: #DDEEFF; --sidebar-summary-font-size: 14px; @@ -17,18 +18,53 @@ --summary-flow-step-label-font-size: 16px; --summary-subtitle-font-size: 16px; --summary-title-font-size: 32px; + --topbar-title-font-size: 14px; } .App { display: grid; - grid-template-areas: "side report"; + grid-template-areas: + "topbar topbar" + "sidebar content"; grid-template-columns: min-content auto; + grid-template-rows: min-content auto; height: 100vh; max-width: 100vw; font-size: var(--app-font-size); } +.App--collapsed { + grid-template-columns: 0px auto; +} +.App--collapsed .Sidebar { + display: none; +} + +.Topbar { + grid-area: topbar; + display: flex; + align-items: center; + border-bottom: 1px solid var(--separator-color); +} + +.Topbar__menu { + padding: 18px; + cursor: pointer; + display: flex; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.Topbar__title { + font-size: var(--topbar-title-font-size); + font-weight: bold; +} .Content { + grid-area: content; overflow-y: auto; } @@ -51,11 +87,12 @@ .Separator { height: 1px; width: 100%; - background-color: var(--color-gray-300); + background-color: var(--separator-color); } .Sidebar { - border-right: 1px solid var(--color-gray-300); + grid-area: sidebar; + border-right: 1px solid var(--separator-color); } .Sidebar a { color: var(--color-gray-800); @@ -256,7 +293,7 @@ .SummaryFlowStep__divider--line { grid-column-end: span 5; height: 1px; - background-color: var(--color-gray-300); + background-color: var(--separator-color); } .SummaryCategory__null { diff --git a/flow-report/src/app.tsx b/flow-report/src/app.tsx index 5e56766a7709..b17ae1cadc3f 100644 --- a/flow-report/src/app.tsx +++ b/flow-report/src/app.tsx @@ -5,12 +5,14 @@ */ import {FunctionComponent} from 'preact'; +import {useState} from 'preact/hooks'; import {ReportRendererProvider} from './wrappers/report-renderer'; import {Sidebar} from './sidebar/sidebar'; import {Summary} from './summary/summary'; -import {FlowResultContext, useCurrentLhr} from './util'; +import {classNames, FlowResultContext, useCurrentLhr} from './util'; import {Report} from './wrappers/report'; +import {Topbar} from './topbar'; const Content: FunctionComponent = () => { const currentLhr = useCurrentLhr(); @@ -27,10 +29,12 @@ const Content: FunctionComponent = () => { }; export const App: FunctionComponent<{flowResult: LH.FlowResult}> = ({flowResult}) => { + const [collapsed, setCollapsed] = useState(false); return ( -
+
+ setCollapsed(c => !c)} />
diff --git a/flow-report/src/icons.tsx b/flow-report/src/icons.tsx index e06695e1116d..194ef458d84f 100644 --- a/flow-report/src/icons.tsx +++ b/flow-report/src/icons.tsx @@ -94,3 +94,13 @@ export const CpuIcon: FunctionComponent = () => { ); }; + +export const HamburgerIcon: FunctionComponent = () => { + return ( + + + + + + ); +}; diff --git a/flow-report/src/topbar.tsx b/flow-report/src/topbar.tsx new file mode 100644 index 000000000000..d8572a9ad999 --- /dev/null +++ b/flow-report/src/topbar.tsx @@ -0,0 +1,21 @@ +/** + * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved. + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. + */ + +import {FunctionComponent, JSX} from 'preact'; + +import {HamburgerIcon} from './icons'; + +export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler}> = +({onMenuClick}) => { + return ( +
+
+ +
+
Lighthouse Flow Report
+
+ ); +}; From 84c78692c09eb952a66568c13bcc30650701f19b Mon Sep 17 00:00:00 2001 From: Adam Raine Date: Wed, 15 Sep 2021 16:06:22 -0400 Subject: [PATCH 2/5] logo --- flow-report/assets/styles.css | 5 +++++ flow-report/src/icons.tsx | 34 ++++++++++++++++++++++++++++++++++ flow-report/src/topbar.tsx | 7 +++++-- 3 files changed, 44 insertions(+), 2 deletions(-) diff --git a/flow-report/assets/styles.css b/flow-report/assets/styles.css index 596219b17835..03480b6d1c49 100644 --- a/flow-report/assets/styles.css +++ b/flow-report/assets/styles.css @@ -58,6 +58,11 @@ user-select: none; } +.Topbar__logo { + display: flex; + margin-right: var(--half-base-spacing); +} + .Topbar__title { font-size: var(--topbar-title-font-size); font-weight: bold; diff --git a/flow-report/src/icons.tsx b/flow-report/src/icons.tsx index 194ef458d84f..6ea3e21db9a4 100644 --- a/flow-report/src/icons.tsx +++ b/flow-report/src/icons.tsx @@ -104,3 +104,37 @@ export const HamburgerIcon: FunctionComponent = () => { ); }; + +export const Logo: FunctionComponent = () => { + return ( + + ); +}; diff --git a/flow-report/src/topbar.tsx b/flow-report/src/topbar.tsx index d8572a9ad999..38d6db00159a 100644 --- a/flow-report/src/topbar.tsx +++ b/flow-report/src/topbar.tsx @@ -6,7 +6,7 @@ import {FunctionComponent, JSX} from 'preact'; -import {HamburgerIcon} from './icons'; +import {HamburgerIcon, Logo} from './icons'; export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler}> = ({onMenuClick}) => { @@ -15,7 +15,10 @@ export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler
-
Lighthouse Flow Report
+
+ +
+
Lighthouse User Flow Report
); }; From 5dce14d564bf876de949ef250c10831e5f26a801 Mon Sep 17 00:00:00 2001 From: Adam Raine Date: Thu, 16 Sep 2021 10:59:27 -0400 Subject: [PATCH 3/5] base --- flow-report/assets/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/flow-report/assets/styles.css b/flow-report/assets/styles.css index 03480b6d1c49..f8cbfe92fdbd 100644 --- a/flow-report/assets/styles.css +++ b/flow-report/assets/styles.css @@ -47,7 +47,7 @@ } .Topbar__menu { - padding: 18px; + padding: var(--base-spacing); cursor: pointer; display: flex; -webkit-touch-callout: none; From fe8968596fee5d34f38b5cb454fbae9198f92bef Mon Sep 17 00:00:00 2001 From: Adam Raine Date: Thu, 16 Sep 2021 11:18:28 -0400 Subject: [PATCH 4/5] no generic icon --- flow-report/src/icons.tsx | 33 --------------------------------- flow-report/src/topbar.tsx | 38 +++++++++++++++++++++++++++++++++++++- 2 files changed, 37 insertions(+), 34 deletions(-) diff --git a/flow-report/src/icons.tsx b/flow-report/src/icons.tsx index 6ea3e21db9a4..1ecc75398240 100644 --- a/flow-report/src/icons.tsx +++ b/flow-report/src/icons.tsx @@ -105,36 +105,3 @@ export const HamburgerIcon: FunctionComponent = () => { ); }; -export const Logo: FunctionComponent = () => { - return ( - - ); -}; diff --git a/flow-report/src/topbar.tsx b/flow-report/src/topbar.tsx index 38d6db00159a..6c7ea36af6d9 100644 --- a/flow-report/src/topbar.tsx +++ b/flow-report/src/topbar.tsx @@ -6,7 +6,43 @@ import {FunctionComponent, JSX} from 'preact'; -import {HamburgerIcon, Logo} from './icons'; +import {HamburgerIcon} from './icons'; + +/* eslint-disable max-len */ +const Logo: FunctionComponent = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; +/* eslint-enable max-len */ export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler}> = ({onMenuClick}) => { From 8e4fdea626eceef05770f840e857003d2f884d6c Mon Sep 17 00:00:00 2001 From: Adam Raine Date: Thu, 16 Sep 2021 11:19:41 -0400 Subject: [PATCH 5/5] role --- flow-report/src/topbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/flow-report/src/topbar.tsx b/flow-report/src/topbar.tsx index 6c7ea36af6d9..a3ec52d93bbe 100644 --- a/flow-report/src/topbar.tsx +++ b/flow-report/src/topbar.tsx @@ -11,7 +11,7 @@ import {HamburgerIcon} from './icons'; /* eslint-disable max-len */ const Logo: FunctionComponent = () => { return ( - +