diff --git a/src/webviews/apps/plus/workspaces/components/helpers.ts b/src/webviews/apps/plus/workspaces/components/helpers.ts new file mode 100644 index 0000000..b505a43 --- /dev/null +++ b/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, + }; +} diff --git a/src/webviews/apps/plus/workspaces/components/issue-row.ts b/src/webviews/apps/plus/workspaces/components/issue-row.ts index db9ee66..a4446d0 100644 --- a/src/webviews/apps/plus/workspaces/components/issue-row.ts +++ b/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``)} ${when(x => x.issue!.closed !== true, html``)} - ${x => x.lastUpdated} + ${x => x.lastUpdated} ${x => x.issue!.title} #${x => x.issue!.id}
@@ -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 diff --git a/src/webviews/apps/plus/workspaces/components/pull-request-row.ts b/src/webviews/apps/plus/workspaces/components/pull-request-row.ts index 52476f7..7ca9d9e 100644 --- a/src/webviews/apps/plus/workspaces/components/pull-request-row.ts +++ b/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`