From 8d884fe123d7cad939cd61471cdaa51fa10f07e9 Mon Sep 17 00:00:00 2001
From: Keith Daulton <keith.daulton@gitkraken.com>
Date: Fri, 24 Mar 2023 14:55:10 -0400
Subject: [PATCH] Updates focus view rows

- converts participants label to an icon
- updates action links to buttons
- updates vertical alignment of table cells
---
 .../apps/plus/focus/components/issue-row.ts        | 46 +++++++++++++++++--
 .../apps/plus/focus/components/pull-request-row.ts | 52 +++++++++++++++++++---
 src/webviews/apps/plus/focus/focus.html            |  8 +++-
 3 files changed, 93 insertions(+), 13 deletions(-)

diff --git a/src/webviews/apps/plus/focus/components/issue-row.ts b/src/webviews/apps/plus/focus/components/issue-row.ts
index 424b48a..1f11120 100644
--- a/src/webviews/apps/plus/focus/components/issue-row.ts
+++ b/src/webviews/apps/plus/focus/components/issue-row.ts
@@ -27,7 +27,7 @@ const template = html<IssueRow>`
 				<span class="tag"><code-icon icon="repo"></code-icon>${x => x.issue!.repository.repo}</span>
 			</small>
 		</table-cell>
-		<table-cell>
+		<table-cell class="vcenter participants">
 			${when(
 				x => x.issue!.author != null,
 				html<IssueRow>`
@@ -44,9 +44,9 @@ const template = html<IssueRow>`
 				html<IssueRow>`<git-avatars :avatars="${x => x.issue!.assignees}"></git-avatars>`,
 			)}
 		</table-cell>
-		<table-cell>${x => x.issue!.commentsCount}</table-cell>
-		<table-cell>${x => x.issue!.thumbsUpCount}</table-cell>
-		<table-cell class="actions">
+		<table-cell class="vcenter">${x => x.issue!.commentsCount}</table-cell>
+		<table-cell class="vcenter">${x => x.issue!.thumbsUpCount}</table-cell>
+		<table-cell class="vcenter actions">
 			<a href="${x => x.issue!.url}" title="Open issue on remote"><code-icon icon="globe"></code-icon></a>
 		</table-cell>
 	</template>
@@ -81,6 +81,10 @@ const styles = css`
 		font-size: inherit;
 	}
 
+	.vcenter {
+		vertical-align: middle;
+	}
+
 	.tag {
 		display: inline-block;
 		padding: 0.1rem 0.2rem;
@@ -102,11 +106,45 @@ const styles = css`
 	.icon-only {
 	}
 
+	.participants {
+		white-space: nowrap;
+	}
+
 	.stats {
 	}
 
 	.actions {
 		text-align: right;
+		white-space: nowrap;
+	}
+
+	.actions a {
+		box-sizing: border-box;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		width: 3.2rem;
+		height: 3.2rem;
+		border-radius: 0.5rem;
+		color: inherit;
+		padding: 0.2rem;
+		vertical-align: text-bottom;
+		text-decoration: none;
+		cursor: pointer;
+	}
+	.actions a:focus {
+		outline: 1px solid var(--vscode-focusBorder);
+		outline-offset: -1px;
+	}
+	.actions a:hover {
+		background-color: var(--vscode-toolbar-hoverBackground);
+	}
+	.actions a:active {
+		background-color: var(--vscode-toolbar-activeBackground);
+	}
+
+	.actions a code-icon {
+		font-size: 1.6rem;
 	}
 
 	.stat-added {
diff --git a/src/webviews/apps/plus/focus/components/pull-request-row.ts b/src/webviews/apps/plus/focus/components/pull-request-row.ts
index 67923dd..f6eebc8 100644
--- a/src/webviews/apps/plus/focus/components/pull-request-row.ts
+++ b/src/webviews/apps/plus/focus/components/pull-request-row.ts
@@ -77,7 +77,7 @@ const template = html<PullRequestRow>`
 				)}
 			</small>
 		</table-cell>
-		<table-cell>
+		<table-cell class="vcenter participants">
 			${when(
 				x => x.pullRequest!.author != null,
 				html<PullRequestRow>`
@@ -94,20 +94,19 @@ const template = html<PullRequestRow>`
 				html<PullRequestRow>`<git-avatars :avatars="${x => x.pullRequest!.assignees}"></git-avatars>`,
 			)}
 		</table-cell>
-		<table-cell>${x => x.pullRequest!.comments}</table-cell>
-		<table-cell class="stats"
+		<table-cell class="vcenter">${x => x.pullRequest!.comments}</table-cell>
+		<table-cell class="vcenter stats"
 			><span class="stat-added">+${x => x.pullRequest!.additions}</span>
 			<span class="stat-deleted">-${x => x.pullRequest!.deletions}</span></table-cell
 		>
-		<table-cell class="actions">
+		<table-cell class="vcenter actions">
 			<a
 				href="#"
 				title="Open Worktree..."
 				aria-label="Open Worktree..."
 				@click="${(x, c) => x.onOpenWorktreeClick(c.event)}"
-				><code-icon icon="gl-worktrees-view"></code-icon
-			></a>
-			<a
+				><code-icon icon="gl-worktrees-view"></code-icon></a
+			><a
 				href="#"
 				title="Switch to Branch..."
 				aria-label="Switch to Branch..."
@@ -147,6 +146,10 @@ const styles = css`
 		font-size: inherit;
 	}
 
+	.vcenter {
+		vertical-align: middle;
+	}
+
 	.tag {
 		display: inline-block;
 		padding: 0.1rem 0.2rem;
@@ -168,11 +171,46 @@ const styles = css`
 	.icon-only {
 	}
 
+	.participants {
+		white-space: nowrap;
+	}
+
 	.stats {
 	}
 
 	.actions {
 		text-align: right;
+		white-space: nowrap;
+		width: 6.4rem;
+	}
+
+	.actions a {
+		box-sizing: border-box;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		width: 3.2rem;
+		height: 3.2rem;
+		border-radius: 0.5rem;
+		color: inherit;
+		padding: 0.2rem;
+		vertical-align: text-bottom;
+		text-decoration: none;
+		cursor: pointer;
+	}
+	.actions a:focus {
+		outline: 1px solid var(--vscode-focusBorder);
+		outline-offset: -1px;
+	}
+	.actions a:hover {
+		background-color: var(--vscode-toolbar-hoverBackground);
+	}
+	.actions a:active {
+		background-color: var(--vscode-toolbar-activeBackground);
+	}
+
+	.actions a code-icon {
+		font-size: 1.6rem;
 	}
 
 	.stat-added {
diff --git a/src/webviews/apps/plus/focus/focus.html b/src/webviews/apps/plus/focus/focus.html
index 0e2cb23..31696b9 100644
--- a/src/webviews/apps/plus/focus/focus.html
+++ b/src/webviews/apps/plus/focus/focus.html
@@ -47,7 +47,9 @@
 								<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-participants" header="column" pinned>Participants</table-cell>
+								<table-cell class="data-participants" header="column" pinned title="Participants">
+									<code-icon icon="organization"></code-icon>
+								</table-cell>
 								<table-cell class="data-comments" header="column" pinned title="Comments">
 									<code-icon icon="comment-discussion"></code-icon>
 								</table-cell>
@@ -92,7 +94,9 @@
 								<table-cell header="column" pinned>Title</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-participants" header="column" pinned>Participants</table-cell>
+								<table-cell class="data-participants" header="column" pinned title="Participants">
+									<code-icon icon="organization"></code-icon>
+								</table-cell>
 								<table-cell class="data-comments" header="column" pinned title="Comments">
 									<code-icon icon="comment-discussion"></code-icon>
 								</table-cell>