Skip to content

Commit

Permalink
Update Focus view dates amd icons
Browse files Browse the repository at this point in the history 
- adds tooltip and coloration to dates
- updates size and color of status icons
  • Loading branch information
@d13
d13 committed Feb 23, 2023
1 parent 70fd443 commit ec5dedb
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 29 deletions.
21 changes: 21 additions & 0 deletions src/webviews/apps/plus/workspaces/components/helpers.ts
View file
@@ -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,
};
}
44 changes: 38 additions & 6 deletions src/webviews/apps/plus/workspaces/components/issue-row.ts
View file
Expand Up @@ -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';
Expand All @@ -16,7 +16,11 @@ const template = html<IssueRow>`
${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>
Expand Down Expand Up @@ -83,6 +87,7 @@ const styles = css`
}
.status {
font-size: 1.6rem;
}
.time {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -157,9 +162,36 @@ export class IssueRow extends FASTElement {
@observable
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
Expand Down
44 changes: 38 additions & 6 deletions src/webviews/apps/plus/workspaces/components/pull-request-row.ts
View file
Expand Up @@ -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">
Expand Down Expand Up @@ -39,7 +39,11 @@ const template = html<PullRequestRow>`
)}
${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>
Expand Down Expand Up @@ -138,6 +142,7 @@ const styles = css`
}
.status {
font-size: 1.6rem;
}
.time {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -215,9 +220,36 @@ export class PullRequestRow extends FASTElement {
@observable
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
Expand Down
30 changes: 15 additions & 15 deletions src/webviews/apps/plus/workspaces/workspaces.html
View file
Expand Up @@ -29,23 +29,23 @@ <h2>My Pull Requests</h2>
<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>
Expand Down Expand Up @@ -74,22 +74,22 @@ <h2>My Issues</h2>
<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>
Expand Down
4 changes: 2 additions & 2 deletions src/webviews/apps/plus/workspaces/workspaces.scss
View file
Expand Up @@ -295,9 +295,9 @@ p {
color: var(--vscode-gitDecoration-modifiedResourceForeground);
}

.pr {
.data {
&-status {
width: 5rem;
width: 5.8rem;
}
&-time {
width: 4rem;
Expand Down

0 comments on commit ec5dedb

Please sign in to comment.