Adds avatar hover

Author: eamodio

src/webviews/apps/shared/components/commit/commit-identity.ts

@@ -1,14 +1,16 @@
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import { dateConverter } from '../converters/date-converter';
 import '../code-icon';
 import '../formatted-date';
+import '../overlays/tooltip';
 
 @customElement('commit-identity')
 export class CommitIdentity extends LitElement {
 	static override styles = css`
-		:host {
+		:host,
+		.author {
 			display: flex;
 			flex-direction: row;
 			align-items: center;
@@ -20,6 +22,19 @@ export class CommitIdentity extends LitElement {
 			text-decoration: none;
 		}
 
+		.author-hover {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			gap: 0.6rem;
+			margin: 0.6rem 0.2rem 0.2rem 0.2rem;
+		}
+
+		.author-hover img {
+			max-width: 64px;
+		}
+
 		.avatar {
 			width: 1.8rem;
 		}
@@ -74,23 +89,35 @@ export class CommitIdentity extends LitElement {
 	actionLabel?: string;
 
 	private renderAvatar() {
-		if (this.showAvatar && this.avatarUrl != null && this.avatarUrl.length > 0) {
+		if (this.showAvatar && this.avatarUrl?.length) {
 			return html`<img class="thumb" src="${this.avatarUrl}" alt="${this.name}" />`;
 		}
 		return html`<code-icon icon="person" size="18"></code-icon>`;
 	}
 
 	override render() {
 		return html`
-			${when(
-				this.url != null,
-				() =>
-					html`<a class="avatar" href="${this.url}">${this.renderAvatar()}</a
-						><a class="name" href="${this.url}">${this.name}</a>`,
-				() =>
-					html`<span class="avatar">${this.renderAvatar()}</span
-						><span class="name" href="${this.url}">${this.name}</span>`,
-			)}
+			<gl-tooltip>
+				${when(
+					this.url != null,
+					() =>
+						html`<a class="author" href="${this.url}"
+							><span class="avatar">${this.renderAvatar()}</span
+							><span class="name" href="${this.url}">${this.name}</span></a
+						>`,
+					() =>
+						html`<span class="author"
+							><span class="avatar">${this.renderAvatar()}</span
+							><span class="name" href="${this.url}">${this.name}</span></span
+						>`,
+				)}
+				<div class="author-hover" slot="content">
+					${this.avatarUrl?.length
+						? html`<img class="thumb" src="${this.avatarUrl}" alt="${this.name}" />`
+						: nothing}
+					<span>${this.name}</span>
+				</div>
+			</gl-tooltip>
 			<span class="date">
 				${this.actionLabel}
 				<formatted-date

src/webviews/apps/shared/components/formatted-date.ts

@@ -2,6 +2,7 @@ import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { formatDate, fromNow } from '../../../../system/date';
 import { dateConverter } from './converters/date-converter';
+import './overlays/tooltip';
 
 @customElement('formatted-date')
 export class FormattedDate extends LitElement {
@@ -16,8 +17,10 @@ export class FormattedDate extends LitElement {
 
 	override render() {
 		const formattedDate = formatDate(this.date, this.format ?? 'MMMM Do, YYYY h:mma');
-		return html`<time datetime="${this.date.toISOString()}" title="${formattedDate}"
-			>${this.dateStyle === 'relative' ? fromNow(this.date) : formattedDate}</time
+		return html`<gl-tooltip content="${formattedDate}"
+			><time datetime="${this.date.toISOString()}"
+				>${this.dateStyle === 'relative' ? fromNow(this.date) : formattedDate}</time
+			></gl-tooltip
 		>`;
 	}
 }