fix(server): build hash selector design updates

GoogleChrome · Oct 29, 2019 · 4bcaa4e · 4bcaa4e
1 parent 2f0fb8e
commit 4bcaa4e
Show file tree

Hide file tree

Showing 6 changed files with 132 additions and 80 deletions.
diff --git a/packages/server/src/ui/app.css b/packages/server/src/ui/app.css
@@ -59,8 +59,8 @@
 
   --compare-color: var(--color-blue-500);
   --compare-highlight-color: var(--color-blue-100);
-  --dev-branch-color: var(--color-deep-orange-a200);
-  --master-branch-color: var(--color-deep-purple-400);
+  --dev-branch-color: var(--color-gray-600);
+  --master-branch-color: var(--color-gray-800);
 
   --base-font-family: 'Roboto', sans-serif;
   --base-font-weight: 400;

diff --git a/packages/server/src/ui/routes/build-view/build-hash-selector.css b/packages/server/src/ui/routes/build-view/build-hash-selector.css
@@ -27,28 +27,35 @@
   padding: 0;
 }
 
-.build-hash-selector__list li {
+.build-hash-selector__item {
+  position: relative;
+  height: var(--line-item-height);
+  width: 100%;
+  font-weight: var(--medium-font-weight);
+}
+
+.build-hash-selector__item > div.container {
   display: flex;
   flex-direction: row;
   align-items: center;
 
   height: var(--line-item-height);
   padding: calc(var(--base-spacing) / 2);
-  font-weight: var(--medium-font-weight);
-  border-radius: 5px;
 }
 
-.build-hash-selector__list li:hover {
+.build-hash-selector__item:hover,
+.build-hash-selector__item--selected {
   cursor: pointer;
   background: var(--compare-highlight-color);
 }
 
-.build-hash-selector--base li:hover {
+.build-hash-selector--base li:hover,
+.build-hash-selector--base .build-hash-selector__item--selected {
   cursor: pointer;
   background: var(--neutral-highlight-color);
 }
 
-.build-hash-selector__list li.build-hash-selector__label-li:hover {
+.build-hash-selector__item.build-hash-selector__label-li:hover {
   cursor: initial;
   background: none;
 }
@@ -58,6 +65,35 @@
   min-width: 90px;
 }
 
+.build-hash-selector__selection .pill--compare.pill--solid,
+.build-hash-selector__selection .pill--base.pill--solid {
+  text-transform: uppercase;
+  width: 90%;
+  text-align: center;
+  font-size: var(--subtext-font-size);
+}
+
+.build-hash-selector__selection .pill--compare.pill--solid {
+  background: var(--compare-color);
+  color: var(--inverted-text-color);
+}
+
+.build-hash-selector__selection .pill--base.pill--solid {
+  background: var(--neutral-color);
+  color: var(--inverted-text-color);
+}
+
+.build-hash-selector__selector-selection {
+  position: absolute;
+  right: calc(var(--base-spacing));
+  bottom: calc((var(--line-item-height) - 24px) / 2);
+  color: var(--compare-color);
+}
+
+.build-hash-selector--base .build-hash-selector__selector-selection {
+  color: var(--neutral-color);
+}
+
 .build-hash-selector__hash {
   color: var(--base-text-color);
   font-family: var(--monospace-font-family);
@@ -84,7 +120,7 @@
   white-space: nowrap;
 }
 
-.build-hash-selector__list li:hover .build-hash-selector__links {
+.build-hash-selector__item:hover .build-hash-selector__links {
   display: inline;
 }
 

diff --git a/packages/server/src/ui/routes/build-view/build-hash-selector.jsx b/packages/server/src/ui/routes/build-view/build-hash-selector.jsx
@@ -5,6 +5,7 @@
  */
 
 import {h, Fragment} from 'preact';
+import clsx from 'clsx';
 import * as _ from '@lhci/utils/src/lodash.js';
 import './build-hash-selector.css';
 import {useBranchBuilds} from '../../hooks/use-api-data';
@@ -31,19 +32,21 @@ const GitViz = props => {
 const LabelLineItem = props => {
   const variant = props.branch === 'master' ? 'master-branch' : 'dev-branch';
   return (
-    <li className="build-hash-selector__label-li">
-      <span className="build-hash-selector__selection" />
-      <GitViz
-        branch={props.branch}
-        withNode={false}
-        withDevBranchArc={false}
-        withDevLine={props.withDevLine}
-      />
-      <span
-        className={`build-hash-selector__branch-label build-hash-selector__branch-label--${variant}`}
-      >
-        {props.branch}
-      </span>
+    <li className="build-hash-selector__item build-hash-selector__label-li">
+      <div className="container">
+        <span className="build-hash-selector__selection" />
+        <GitViz
+          branch={props.branch}
+          withNode={false}
+          withDevBranchArc={false}
+          withDevLine={props.withDevLine}
+        />
+        <span
+          className={`build-hash-selector__branch-label build-hash-selector__branch-label--${variant}`}
+        >
+          {props.branch}
+        </span>
+      </div>
     </li>
   );
 };
@@ -53,10 +56,15 @@ const BuildLineItem = props => {
   const {build, compareBuild, baseBuild, selector} = props;
   const isCompareBranch = build.id === compareBuild.id;
   const isBaseBranch = build.id === (baseBuild && baseBuild.id);
+  const isSelected =
+    (selector === 'base' && isBaseBranch) || (selector === 'compare' && isCompareBranch);
   const variant = build.branch === 'master' ? 'master-branch' : 'dev-branch';
 
   return (
     <li
+      className={clsx('build-hash-selector__item', {
+        'build-hash-selector__item--selected': isSelected,
+      })}
       key={build.id}
       onClick={() => {
         if (isCompareBranch && selector === 'compare') return;
@@ -75,32 +83,39 @@ const BuildLineItem = props => {
         window.location.href = url.href;
       }}
     >
-      <span className="build-hash-selector__selection">
-        {isCompareBranch && (
-          <Pill variant="compare" solid>
-            compare
-          </Pill>
-        )}
-        {isBaseBranch && (
-          <Pill variant="base" solid>
-            base
-          </Pill>
-        )}
-      </span>
-      <GitViz
-        branch={build.branch}
-        withNode
-        withDevBranchArc={props.withDevBranchArc}
-        withDevLine={props.withDevLine}
-      />
-      <Pill variant={variant}>
-        <span className="build-hash-selector__hash">{build.hash.slice(0, 8)}</span>
-      </Pill>{' '}
-      <img className="build-hash-selector__avatar" alt={build.author} src={build.avatarUrl} />
-      <span className="build-hash-selector__commit">{build.commitMessage}</span>
-      <span className="build-hash-selector__links">
-        {build.externalBuildUrl ? <a href={build.externalBuildUrl}>View Build</a> : <Fragment />}
-      </span>
+      <div className="container">
+        <span className="build-hash-selector__selection">
+          {isCompareBranch && selector === 'base' && (
+            <Pill variant="compare" solid>
+              compare
+            </Pill>
+          )}
+          {isBaseBranch && selector === 'compare' && (
+            <Pill variant="base" solid>
+              base
+            </Pill>
+          )}
+        </span>
+        <GitViz
+          branch={build.branch}
+          withNode
+          withDevBranchArc={props.withDevBranchArc}
+          withDevLine={props.withDevLine}
+        />
+        <Pill variant={variant}>
+          <span className="build-hash-selector__hash">{build.hash.slice(0, 8)}</span>
+        </Pill>{' '}
+        <img className="build-hash-selector__avatar" alt={build.author} src={build.avatarUrl} />
+        <span className="build-hash-selector__commit">{build.commitMessage}</span>
+        <span className="build-hash-selector__links">
+          {build.externalBuildUrl ? <a href={build.externalBuildUrl}>View Build</a> : <Fragment />}
+        </span>
+      </div>
+      {isSelected ? (
+        <i className="material-icons build-hash-selector__selector-selection">check</i>
+      ) : (
+        <Fragment />
+      )}
     </li>
   );
 };
@@ -143,29 +158,27 @@ const BuildHashSelector_ = props => {
   }, [props.close]);
 
   return (
-    <div className="container">
-      <ul className={`build-hash-selector__list build-hash-selector--${props.selector}`}>
-        {builds.map((build, index) => (
-          <Fragment key={build.id}>
-            <BuildLineItem
-              key={build.id}
-              build={build}
-              compareBuild={props.build}
-              baseBuild={props.ancestorBuild}
-              selector={props.selector}
-              withDevLine={index <= indexOfFirstDev && props.build.branch !== 'master'}
-              withDevBranchArc={index === indexOfFirstDev + 1}
-            />
-            {index === indexOfFirstDev && build.branch !== 'master' ? (
-              <LabelLineItem branch={build.branch} withDevLine={true} />
-            ) : null}
-            {index === builds.length - 1 ? (
-              <LabelLineItem branch={build.branch} withDevLine={false} />
-            ) : null}
-          </Fragment>
-        ))}
-      </ul>
-    </div>
+    <ul className={`build-hash-selector__list build-hash-selector--${props.selector}`}>
+      {builds.map((build, index) => (
+        <Fragment key={build.id}>
+          <BuildLineItem
+            key={build.id}
+            build={build}
+            compareBuild={props.build}
+            baseBuild={props.ancestorBuild}
+            selector={props.selector}
+            withDevLine={index <= indexOfFirstDev && props.build.branch !== 'master'}
+            withDevBranchArc={index === indexOfFirstDev + 1}
+          />
+          {index === indexOfFirstDev && build.branch !== 'master' ? (
+            <LabelLineItem branch={build.branch} withDevLine={true} />
+          ) : null}
+          {index === builds.length - 1 ? (
+            <LabelLineItem branch={build.branch} withDevLine={false} />
+          ) : null}
+        </Fragment>
+      ))}
+    </ul>
   );
 };
 

diff --git a/packages/server/src/ui/routes/build-view/build-selector-pill.css b/packages/server/src/ui/routes/build-view/build-selector-pill.css
@@ -43,3 +43,11 @@
   font-weight: var(--medium-font-weight);
   padding-right: var(--pill-spacing);
 }
+
+.build-selector-pill--open {
+  border-width: 2px;
+}
+
+.build-selector-pill--dim {
+  opacity: 0.5;
+}
diff --git a/packages/server/src/ui/routes/build-view/build-selector-pill.jsx b/packages/server/src/ui/routes/build-view/build-selector-pill.jsx
@@ -26,13 +26,14 @@ const Selection = props => {
 };
 
 /**
- * @param {{build: LHCI.ServerCommand.Build | null, variant: 'base'|'compare', isOpen?: boolean, onClick?: () => void}} props
+ * @param {{build: LHCI.ServerCommand.Build | null, variant: 'base'|'compare', isOpen?: boolean, isDimmed?: boolean, onClick?: () => void}} props
  */
 export const BuildSelectorPill = props => {
   return (
     <div
       className={clsx(`build-selector-pill build-selector-pill--${props.variant}`, {
         'build-selector-pill--open': props.isOpen,
+        'build-selector-pill--dim': props.isDimmed,
       })}
       onClick={props.onClick}
     >

diff --git a/packages/server/src/ui/routes/build-view/build-view.jsx b/packages/server/src/ui/routes/build-view/build-view.jsx
@@ -185,23 +185,17 @@ const BuildView_ = props => {
     <Page
       header={
         <Fragment>
-          {openBuildHash === null ? (
-            <Fragment />
-          ) : (
-            <div className={`build-selector-header build-selector-header--${openBuildHash}`}>
-              <i className="material-icons">arrow_back</i>
-              <span>Select {_.startCase(openBuildHash)}</span>
-            </div>
-          )}
           <BuildSelectorPill
             build={props.ancestorBuild}
             variant="base"
+            isDimmed={openBuildHash === 'compare'}
             isOpen={openBuildHash === 'base'}
             onClick={() => setOpenBuild(openBuildHash === 'base' ? null : 'base')}
           />
           <BuildSelectorPill
             build={props.build}
             variant="compare"
+            isDimmed={openBuildHash === 'base'}
             isOpen={openBuildHash === 'compare'}
             onClick={() => setOpenBuild(openBuildHash === 'compare' ? null : 'compare')}
           />