Update Focus view dates amd icons

- adds tooltip and coloration to dates
- updates size and color of status icons

src/webviews/apps/plus/workspaces/components/helpers.ts

@@ -0,0 +1,21 @@
+import { fromNow } from '../../../../../system/date';
+
+export function fromDateRange(date: Date, startDate = new Date()) {
+	const seconds = Math.floor((startDate.getTime() - date.getTime()) / 1000);
+	let status = 'ok';
+	if (Math.floor(seconds / 31536000) >= 1) {
+		status = 'danger';
+	} else if (Math.floor(seconds / 2592000) >= 1) {
+		status = 'danger';
+	} else if (Math.floor(seconds / 604800) >= 1) {
+		status = 'danger';
+	} else if (Math.floor(seconds / 86400) >= 1) {
+		status = 'warning';
+	}
+
+	return {
+		label: fromNow(date, true),
+		tooltip: fromNow(date),
+		status: status,
+	};
+}

src/webviews/apps/plus/workspaces/components/issue-row.ts

@@ -3,7 +3,7 @@ import type { IssueShape } from '../../../../../git/models/issue';
 import { fromNow } from '../../../../../system/date';
 import { focusOutline, srOnly } from '../../../shared/components/styles/a11y';
 import { elementBase } from '../../../shared/components/styles/base';
-
+import { fromDateRange } from './helpers';
 import '../../../shared/components/table/table-cell';
 import '../../../shared/components/avatars/avatar-item';
 import '../../../shared/components/avatars/avatar-stack';
@@ -16,7 +16,11 @@ const template = html`
 			${when(x => x.issue!.closed === true, html`<code-icon icon="pass"></code-icon>`)}
 			${when(x => x.issue!.closed !== true, html`<code-icon icon="issues"></code-icon>`)}
 		</table-cell>
-		<table-cell class="time">${x => x.lastUpdated}</table-cell>
+		<table-cell class="time"
+			><span class="${x => x.lastUpdatedClass}" title="${x => x.lastUpdatedLabel}"
+				>${x => x.lastUpdated}</span
+			></table-cell
+		>
 		<table-cell>
 			${x => x.issue!.title} <a href="${x => x.issue!.url}">#${x => x.issue!.id}</a><br />
 			<small>
@@ -83,6 +87,7 @@ const styles = css`
 	}
 
 	.status {
+		font-size: 1.6rem;
 	}
 
 	.time {
@@ -113,13 +118,13 @@ const styles = css`
 	}
 
 	.indicator-info {
-		color: var(--color-alert-infoBorder);
+		color: var(--vscode-problemsInfoIcon-foreground);
 	}
 	.indicator-warning {
-		color: var(--color-alert-warningBorder);
+		color: var(--vscode-problemsWarningIcon-foreground);
 	}
 	.indicator-error {
-		color: var(--color-alert-errorBorder);
+		color: var(--vscode-problemsErrorIcon-foreground);
 	}
 	.indicator-neutral {
 		color: var(--color-alert-neutralBorder);
@@ -158,8 +163,35 @@ export class IssueRow extends FASTElement {
 	public reasons?: string[];
 
 	@volatile
+	get lastUpdatedDate() {
+		return new Date(this.issue!.date);
+	}
+
+	@volatile
+	get lastUpdatedState() {
+		return fromDateRange(this.lastUpdatedDate);
+	}
+
+	@volatile
 	get lastUpdated() {
-		return fromNow(new Date(this.issue!.updatedDate), true);
+		return fromNow(this.lastUpdatedDate, true);
+	}
+
+	@volatile
+	get lastUpdatedLabel() {
+		return fromNow(this.lastUpdatedDate);
+	}
+
+	@volatile
+	get lastUpdatedClass() {
+		switch (this.lastUpdatedState.status) {
+			case 'danger':
+				return 'indicator-error';
+			case 'warning':
+				return 'indicator-warning';
+			default:
+				return '';
+		}
 	}
 
 	@volatile

src/webviews/apps/plus/workspaces/components/pull-request-row.ts

@@ -3,12 +3,12 @@ import type { PullRequestShape } from '../../../../../git/models/pullRequest';
 import { fromNow } from '../../../../../system/date';
 import { focusOutline, srOnly } from '../../../shared/components/styles/a11y';
 import { elementBase } from '../../../shared/components/styles/base';
-
 import '../../../shared/components/table/table-cell';
 import '../../../shared/components/avatars/avatar-item';
 import '../../../shared/components/avatars/avatar-stack';
 import '../../../shared/components/code-icon';
 import './git-avatars';
+import { fromDateRange } from './helpers';
 
 const template = html<PullRequestRow>`
 	<template role="row">
@@ -39,7 +39,11 @@ const template = html`
 			)}
 			${when(x => x.indicator === 'checks', html`<code-icon icon="error" title="checks failed"></code-icon>`)}
 		</table-cell>
-		<table-cell class="time">${x => x.lastUpdated}</table-cell>
+		<table-cell class="time"
+			><span class="${x => x.lastUpdatedClass}" title="${x => x.lastUpdatedLabel}"
+				>${x => x.lastUpdated}</span
+			></table-cell
+		>
 		<table-cell>
 			${x => x.pullRequest!.title} <a href="${x => x.pullRequest!.url}">#${x => x.pullRequest!.id}</a><br />
 			<small>
@@ -138,6 +142,7 @@ const styles = css`
 	}
 
 	.status {
+		font-size: 1.6rem;
 	}
 
 	.time {
@@ -168,13 +173,13 @@ const styles = css`
 	}
 
 	.indicator-info {
-		color: var(--color-alert-infoBorder);
+		color: var(--vscode-problemsInfoIcon-foreground);
 	}
 	.indicator-warning {
-		color: var(--color-alert-warningBorder);
+		color: var(--vscode-problemsWarningIcon-foreground);
 	}
 	.indicator-error {
-		color: var(--color-alert-errorBorder);
+		color: var(--vscode-problemsErrorIcon-foreground);
 	}
 	.indicator-neutral {
 		color: var(--color-alert-neutralBorder);
@@ -216,8 +221,35 @@ export class PullRequestRow extends FASTElement {
 	public checks?: boolean;
 
 	@volatile
+	get lastUpdatedDate() {
+		return new Date(this.pullRequest!.date);
+	}
+
+	@volatile
+	get lastUpdatedState() {
+		return fromDateRange(this.lastUpdatedDate);
+	}
+
+	@volatile
 	get lastUpdated() {
-		return fromNow(new Date(this.pullRequest!.date), true);
+		return fromNow(this.lastUpdatedDate, true);
+	}
+
+	@volatile
+	get lastUpdatedLabel() {
+		return fromNow(this.lastUpdatedDate);
+	}
+
+	@volatile
+	get lastUpdatedClass() {
+		switch (this.lastUpdatedState.status) {
+			case 'danger':
+				return 'indicator-error';
+			case 'warning':
+				return 'indicator-warning';
+			default:
+				return '';
+		}
 	}
 
 	@volatile

src/webviews/apps/plus/workspaces/workspaces.html

@@ -29,23 +29,23 @@
 					<div class="workspace-section__content">
 						<table-container id="pull-requests">
 							<table-row slot="head">
-								<table-cell class="pr-status" header="column" pinned title="PR status"
+								<table-cell class="data-status" header="column" pinned title="PR status"
 									><code-icon icon="git-pull-request"></code-icon
 								></table-cell>
-								<table-cell class="pr-time" header="column" pinned title="Last updated">
+								<table-cell class="data-time" header="column" pinned title="Last updated">
 									<code-icon icon="gl-clock"></code-icon>
 								</table-cell>
-								<table-cell class="pr-body" header="column" pinned>Pull Request</table-cell>
-								<table-cell class="pr-author" header="column" pinned>Author</table-cell>
-								<table-cell class="pr-assigned" header="column" pinned>Assigned</table-cell>
-								<table-cell class="pr-comments" header="column" pinned title="Comments">
+								<table-cell class="data-body" header="column" pinned>Pull Request</table-cell>
+								<table-cell class="data-author" header="column" pinned>Author</table-cell>
+								<table-cell class="data-assigned" header="column" pinned>Assigned</table-cell>
+								<table-cell class="data-comments" header="column" pinned title="Comments">
 									<code-icon icon="comment-discussion"></code-icon>
 								</table-cell>
-								<table-cell class="pr-stats" header="column" pinned title="Change stats">
+								<table-cell class="data-stats" header="column" pinned title="Change stats">
 									<code-icon icon="add"></code-icon>
 									<code-icon icon="dash"></code-icon>
 								</table-cell>
-								<table-cell class="pr-actions" header="column" pinned
+								<table-cell class="data-actions" header="column" pinned
 									><code-icon icon="blank" title="actions"></code-icon
 								></table-cell>
 							</table-row>
@@ -74,22 +74,22 @@
 					<div class="workspace-section__content">
 						<table-container id="issues">
 							<table-row slot="head">
-								<table-cell class="pr-status" header="column" pinned title="PR status">
+								<table-cell class="data-status" header="column" pinned title="PR status">
 									<code-icon icon="issues"></code-icon>
 								</table-cell>
-								<table-cell class="pr-time" header="column" pinned title="Last updated">
+								<table-cell class="data-time" header="column" pinned title="Last updated">
 									<code-icon icon="gl-clock"></code-icon>
 								</table-cell>
 								<table-cell header="column" pinned>Title</table-cell>
-								<table-cell class="pr-author" header="column" pinned>Author</table-cell>
-								<table-cell class="pr-assigned" header="column" pinned>Assigned</table-cell>
-								<table-cell class="pr-comments" header="column" pinned title="Comments">
+								<table-cell class="data-author" header="column" pinned>Author</table-cell>
+								<table-cell class="data-assigned" header="column" pinned>Assigned</table-cell>
+								<table-cell class="data-comments" header="column" pinned title="Comments">
 									<code-icon icon="comment-discussion"></code-icon>
 								</table-cell>
-								<table-cell class="pr-checks" header="column" pinned title="Thumbs up">
+								<table-cell class="data-checks" header="column" pinned title="Thumbs up">
 									<code-icon icon="thumbsup"></code-icon>
 								</table-cell>
-								<table-cell class="pr-actions" header="column" pinned
+								<table-cell class="data-actions" header="column" pinned
 									><code-icon icon="blank" title="actions"></code-icon
 								></table-cell>
 							</table-row>

src/webviews/apps/plus/workspaces/workspaces.scss

@@ -295,9 +295,9 @@ p {
 	color: var(--vscode-gitDecoration-modifiedResourceForeground);
 }
 
-.pr {
+.data {
 	&-status {
-		width: 5rem;
+		width: 5.8rem;
 	}
 	&-time {
 		width: 4rem;