feat(server): avatar inside hash pill

GoogleChrome · Oct 29, 2019 · 5e3e71e · 5e3e71e
1 parent 4bcaa4e
commit 5e3e71e
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 29 deletions.
diff --git a/packages/server/src/ui/components/pill.css b/packages/server/src/ui/components/pill.css
@@ -7,7 +7,9 @@
 .pill {
   --pill-vertical-padding: calc((var(--pill-height) - var(--pill-content-height) - 2px) / 2);
 
-  display: inline-block;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
   height: var(--pill-height);
 
   margin: 0 var(--pill-spacing);
@@ -56,3 +58,9 @@
   height: var(--pill-content-height);
   line-height: var(--pill-content-height);
 }
+
+.pill__avatar {
+  border-radius: 100%;
+  margin-left: -5px;
+  margin-right: calc(var(--base-spacing) / 2);
+}
diff --git a/packages/server/src/ui/components/pill.jsx b/packages/server/src/ui/components/pill.jsx
@@ -4,13 +4,13 @@
  * 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 {h} from 'preact';
+import {h, Fragment} from 'preact';
 import clsx from 'clsx';
 import './pill.css';
 
-/** @param {{children: string|JSX.Element|JSX.Element[], className?: string, variant?: 'base'|'compare'|'master-branch'|'dev-branch', onClick?: () => void, solid?: boolean}} props */
+/** @param {{children: string|JSX.Element|JSX.Element[], className?: string, variant?: 'base'|'compare'|'master-branch'|'dev-branch', onClick?: () => void, solid?: boolean, avatar?: Pick<LHCI.ServerCommand.Build, 'avatarUrl'|'author'>}} props */
 export const Pill = props => {
-  const {children, variant = 'base'} = props;
+  const {children, avatar, variant = 'base'} = props;
   return (
     <div
       className={clsx('pill', props.className, `pill--${variant}`, {
@@ -19,6 +19,16 @@ export const Pill = props => {
       })}
       onClick={props.onClick}
     >
+      {avatar ? (
+        <img
+          className="pill__avatar"
+          title={avatar.author}
+          alt={avatar.author}
+          src={avatar.avatarUrl}
+        />
+      ) : (
+        <Fragment />
+      )}
       <span>{children}</span>
     </div>
   );

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
@@ -99,14 +99,6 @@
   font-family: var(--monospace-font-family);
 }
 
-.build-hash-selector__avatar {
-  width: var(--avatar-image-size);
-  height: var(--avatar-image-size);
-
-  border-radius: 100%;
-  margin: 0 var(--base-spacing);
-}
-
 .build-hash-selector__commit {
   flex-grow: 1;
   flex-shrink: 10;

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
@@ -102,10 +102,9 @@ const BuildLineItem = props => {
           withDevBranchArc={props.withDevBranchArc}
           withDevLine={props.withDevLine}
         />
-        <Pill variant={variant}>
+        <Pill variant={variant} avatar={build}>
           <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 />}

diff --git a/packages/server/src/ui/routes/project-dashboard/project-dashboard.css b/packages/server/src/ui/routes/project-dashboard/project-dashboard.css
@@ -16,6 +16,7 @@
 
 .dashboard__build-list {
   width: calc(100% - var(--base-spacing) * 2);
+  max-width: calc(100% - var(--base-spacing) * 2);
   margin-left: var(--base-spacing);
 }
 
@@ -40,19 +41,16 @@
   margin: 0 calc(var(--base-spacing) / 2);
 }
 
-.build-list__avatar img {
-  width: 36px;
-  height: 36px;
-  border-radius: 100%;
-}
-
 .build-list__commit,
 .build-list__branch {
   font-weight: var(--medium-font-weight);
 }
 
-.build-list__hash,
 .build-list__date {
   color: var(--secondary-text-color);
   white-space: nowrap;
 }
+
+.build-list__hash .pill {
+  width: fit-content;
+}
diff --git a/packages/server/src/ui/routes/project-dashboard/project-dashboard.jsx b/packages/server/src/ui/routes/project-dashboard/project-dashboard.jsx
@@ -15,6 +15,7 @@ import {Page} from '../../layout/page.jsx';
 import {ProjectGraphs} from './project-graphs.jsx';
 
 import './project-dashboard.css';
+import {Pill} from '../../components/pill';
 
 /** @param {{project: LHCI.ServerCommand.Project, builds: Array<LHCI.ServerCommand.Build>, runUrl?: string, branch?: string}} props */
 const ProjectDashboard_ = props => {
@@ -31,8 +32,8 @@ const ProjectDashboard_ = props => {
                 key={build.id}
                 onClick={() => route(`/app/projects/${project.id}/builds/${build.id}`)}
               >
-                <td className="build-list__avatar" data-tooltip={build.author}>
-                  <img src={build.avatarUrl} alt={build.author} />
+                <td className="build-list__hash" data-tooltip={build.author}>
+                  <Pill avatar={build}>{build.hash.slice(0, 8)}</Pill>
                 </td>
                 <td className="build-list__commit">{build.commitMessage}</td>
                 <td className="build-list__branch">
@@ -41,7 +42,6 @@ const ProjectDashboard_ = props => {
                     {build.branch}
                   </div>
                 </td>
-                <td className="build-list__hash">{build.hash.slice(0, 8)}</td>
                 <td className="build-list__date">
                   {new Date(build.runAt).toDateString().replace(/\w+ (.*) \d{4}/, '$1')}{' '}
                   {new Date(build.runAt).toLocaleTimeString().replace(/:\d{2} /, ' ')}

diff --git a/...d-test-js-project-dashboard-render-the-dashboard-should-look-correct-1-snap.png b/...d-test-js-project-dashboard-render-the-dashboard-should-look-correct-1-snap.png
diff --git a/packages/server/test/e2e/project-dashboard.test.js b/packages/server/test/e2e/project-dashboard.test.js
@@ -24,11 +24,11 @@ describe('Project dashboard', () => {
 
       expect(commits).toMatchInlineSnapshot(`
         Array [
-          "test: empty basecall_splitmaster824cbea4Oct 09 8:15 PM",
-          "test(unmatched-ancestor): a really really really really long messagecall_splitmissing_ancestorba5b0ad9Aug 09 8:13 PM",
-          "test(matched-ancestor): a really really really really really long messagecall_splitmaster5b0ad9f6Aug 09 6:55 PM",
-          "feat: improves TTIcall_splittest_1c1ea447bAug 09 6:15 PM",
-          "feat: regresses TTIcall_splittest_0aaa5b0a3Aug 09 3:15 PM",
+          "824cbea4test: empty basecall_splitmasterOct 09 8:15 PM",
+          "ba5b0ad9test(unmatched-ancestor): a really really really really long messagecall_splitmissing_ancestorAug 09 8:13 PM",
+          "5b0ad9f6test(matched-ancestor): a really really really really really long messagecall_splitmasterAug 09 6:55 PM",
+          "c1ea447bfeat: improves TTIcall_splittest_1Aug 09 6:15 PM",
+          "aaa5b0a3feat: regresses TTIcall_splittest_0Aug 09 3:15 PM",
         ]
       `);
     });