report(flow): topbar (#13065)

GoogleChrome · Sep 16, 2021 · 92f1c2c · 92f1c2c
1 parent e77fef6
commit 92f1c2c
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 6 deletions.
diff --git a/flow-report/assets/styles.css b/flow-report/assets/styles.css
@@ -10,25 +10,66 @@
   --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;
   --sidebar-title-font-size: 16px;
   --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: var(--base-spacing);
+  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__logo {
+  display: flex;
+  margin-right: var(--half-base-spacing);
+}
+
+.Topbar__title {
+  font-size: var(--topbar-title-font-size);
+  font-weight: bold;
+}
 
 .Content {
+  grid-area: content;
   overflow-y: auto;
 }
 
@@ -51,11 +92,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 +298,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
@@ -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 (
     <FlowResultContext.Provider value={flowResult}>
       <ReportRendererProvider>
-        <div className="App">
+        <div className={classNames('App', {'App--collapsed': collapsed})}>
+          <Topbar onMenuClick={() => setCollapsed(c => !c)} />
           <Sidebar/>
           <Content/>
         </div>

diff --git a/flow-report/src/icons.tsx b/flow-report/src/icons.tsx
@@ -94,3 +94,14 @@ export const CpuIcon: FunctionComponent = () => {
     </svg>
   );
 };
+
+export const HamburgerIcon: FunctionComponent = () => {
+  return (
+    <svg viewBox="0 0 18 12" width="18" height="12" role="img">
+      <rect width="18" height="2"></rect>
+      <rect y="5" width="18" height="2"></rect>
+      <rect y="10" width="18" height="2"></rect>
+    </svg>
+  );
+};
+
diff --git a/flow-report/src/topbar.tsx b/flow-report/src/topbar.tsx
@@ -0,0 +1,60 @@
+/**
+ * @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';
+
+/* eslint-disable max-len */
+const Logo: FunctionComponent = () => {
+  return (
+    <svg height="24" width="24" viewBox="0 0 24 24" role="img">
+      <defs>
+        <linearGradient x1="57.456%" y1="13.086%" x2="18.259%" y2="72.322%" id="Topbar__logo--a">
+          <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
+          <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="Topbar__logo--b">
+          <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
+          <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="58.764%" y1="65.756%" x2="36.939%" y2="50.14%" id="Topbar__logo--c">
+          <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
+          <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="41.635%" y1="20.358%" x2="72.863%" y2="85.424%" id="Topbar__logo--d">
+          <stop stop-color="#FFF" stop-opacity=".1" offset="0%"/>
+          <stop stop-color="#FFF" stop-opacity="0" offset="100%"/>
+        </linearGradient>
+      </defs>
+      <g fill="none" fill-rule="evenodd">
+        <path d="M12 3l4.125 2.625v3.75H18v2.25h-1.688l1.5 9.375H6.188l1.5-9.375H6v-2.25h1.875V5.648L12 3zm2.201 9.938L9.54 14.633 9 18.028l5.625-2.062-.424-3.028zM12.005 5.67l-1.88 1.207v2.498h3.75V6.86l-1.87-1.19z" fill="#F44B21"/>
+        <path fill="#FFF" d="M14.201 12.938L9.54 14.633 9 18.028l5.625-2.062z"/>
+        <path d="M6 18c-2.042 0-3.95-.01-5.813 0l1.5-9.375h4.326L6 18z" fill="url(#Topbar__logo--a)" fill-rule="nonzero" transform="translate(6 3)"/>
+        <path fill="#FFF176" fill-rule="nonzero" d="M13.875 9.375v-2.56l-1.87-1.19-1.88 1.207v2.543z"/>
+        <path fill="url(#Topbar__logo--b)" fill-rule="nonzero" d="M0 6.375h6v2.25H0z" transform="translate(6 3)"/>
+        <path fill="url(#Topbar__logo--c)" fill-rule="nonzero" d="M6 6.375H1.875v-3.75L6 0z" transform="translate(6 3)"/>
+        <path fill="url(#Topbar__logo--d)" fill-rule="nonzero" d="M6 0l4.125 2.625v3.75H12v2.25h-1.688l1.5 9.375H.188l1.5-9.375H0v-2.25h1.875V2.648z" transform="translate(6 3)"/>
+      </g>
+    </svg>
+  );
+};
+/* eslint-enable max-len */
+
+export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLDivElement>}> =
+({onMenuClick}) => {
+  return (
+    <div className="Topbar">
+      <div className="Topbar__menu" onClick={onMenuClick} role="button">
+        <HamburgerIcon/>
+      </div>
+      <div className="Topbar__logo">
+        <Logo/>
+      </div>
+      <div className="Topbar__title">Lighthouse User Flow Report</div>
+    </div>
+  );
+};