Updates Focus view content

- adds preview badge to header - updates account messaging - updates remote overlay content
há 1 ano · 70fd4432f9
--- a/src/webviews/apps/plus/workspaces/components/plus-content.ts
+++ b/src/webviews/apps/plus/workspaces/components/plus-content.ts
@ -6,6 +6,7 @@ import { elementBase } from '../../../shared/components/styles/base';
 import '../../../shared/components/code-icon';

 const template = html<PlusContent>`
 	${when(x => x.state !== SubscriptionState.Free, html<PlusContent>` <hr class="divider" /> `)}
 	<div class="main">
 		${when(
 			x => x.state === SubscriptionState.Free,
@ -31,7 +32,7 @@ const template = html`
 				<h3>Extend Your GitLens Pro Trial</h3>
 				<p>
 					Your free 3-day GitLens Pro trial has ended, extend your trial to get an additional free 7-days of
 					GitLens+ features on private repos.
 					the Focus View and other GitLens+ features on private repos.
 				</p>
 				<p class="mb-1">
 					<vscode-button @click="${x => x.fireAction('command:gitlens.plus.loginOrSignUp')}"
@ -45,8 +46,8 @@ const template = html`
 			html<PlusContent>`
 				<h3>GitLens Pro Trial Expired</h3>
 				<p>
 					Your GitLens Pro trial has ended, please upgrade to GitLens Pro to continue to use GitLens+ features
 					on private repos.
 					Your GitLens Pro trial has ended, please upgrade to GitLens Pro to continue to use the Focus View
 					and other GitLens+ features on private repos.
 				</p>
 				<p class="mb-1">
 					<vscode-button @click="${x => x.fireAction('command:gitlens.plus.purchase')}"
@ -60,7 +61,8 @@ const template = html`
 			html<PlusContent>`
 				<h3>Please verify your email</h3>
 				<p class="alert__message">
 					Before you can also use GitLens+ features on private repos, please verify your email address.
 					Before you can also use the Focus View and other GitLens+ features on private repos, please verify
 					your email address.
 				</p>
 				<p class="mb-1">
 					<vscode-button @click="${x => x.fireAction('command:gitlens.plus.resendVerification')}"
@ -129,7 +131,7 @@ const styles = css`
 	}

 	.mb-1 {
 		margin-bottom: 0.4rem;
 		margin-bottom: 0.6rem;
 	}
 	.mb-0 {
 		margin-bottom: 0;
@ -143,6 +145,14 @@ const styles = css`
 	.secondary {
 		font-size: 1.4rem;
 	}

 	.divider {
 		display: block;
 		height: 0;
 		margin: 0.6rem;
 		border: none;
 		border-top: 0.1rem solid var(--vscode-menu-separatorBackground);
 	}
 `;

@customElement({ name: 'plus-content', template: template, styles: styles })
--- a/src/webviews/apps/plus/workspaces/workspaces.html
+++ b/src/webviews/apps/plus/workspaces/workspaces.html
@ -6,6 +6,7 @@

 	<body class="preload app">
 		<header class="app__header" id="header">
 			<span class="badge">Preview</span>
 			<account-badge id="account-badge"></account-badge>
 		</header>

@ -212,8 +213,8 @@
 			<div class="overlay__content">
 				<h2>Focus View ✨</h2>
 				<p>
 					This GitLens+ feature gives you a comprehensive list of all your most important work across your
 					connected GitHub repos:
 					This GitLens+ feature provides you with a comprehensive list of all your most important work across
 					your connected GitHub repos:
 				</p>
 				<ul>
 					<li>
@ -232,16 +233,41 @@

 		<div class="overlay" id="connect-overlay" hidden>
 			<div class="overlay__content">
 				<p>Your GitHub remotes are not connected.</p>
 				<h2>Focus View ✨</h2>
 				<p>
 					This GitLens+ feature provides you with a comprehensive list of all your most important work across
 					your connected GitHub repos:
 				</p>
 				<ul>
 					<li>
 						<strong>My Pull Requests:</strong> shows all GitHub PRs opened by you, assigned to you, or
 						awaiting your review.
 					</li>
 					<li>
 						<strong>My Issues:</strong> shows all issues created by you, assigned to you, or that mention
 						you.
 					</li>
 				</ul>

 				<div class="overlay__actions">
 					<hr class="divider" />
 					<h3>GitHub remotes are not connected</h3>

 					<p>
 						This enables access to Pull Requests and Issues in the Focus View as well as provide additional
 						information inside hovers and the Commit Details view, such as auto-linked issues and pull
 						requests and avatars.
 					</p>

 				<vscode-button data-action="command:gitlens.connectRemoteProvider">Connect Now</vscode-button>
 					<vscode-button data-action="command:gitlens.connectRemoteProvider">Connect to GitHub</vscode-button>
 				</div>
 			</div>
 		</div>

 		#{endOfBody}
 		<style nonce="#{cspNonce}">
 			:root {
 				--gl-plus-bg: url(#{webroot}/media/gitlens-backdrop.webp);
 				--gl-plus-bg: url(#{webroot}/media/gitlens-backdrop-opacity.webp);
 			}
 		</style>
 		<style nonce="#{cspNonce}">
--- a/src/webviews/apps/plus/workspaces/workspaces.scss
+++ b/src/webviews/apps/plus/workspaces/workspaces.scss
@ -92,7 +92,9 @@ code-icon {
 	font-size: inherit;
 }

 h2 {
 h2,
 h3,
 p {
 	margin-top: 0;
 }

@ -186,6 +188,7 @@ h2 {
 .workspace-section {
 	display: flex;
 	flex-direction: column;
 	gap: 0.8rem;

 	&__header {
 		flex: none;
@ -193,6 +196,11 @@ h2 {
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
 		padding: 0.4rem 0;

 		h2 {
 			margin: 0;
 		}
 	}

 	&__content {
@ -211,14 +219,24 @@ h2 {

 	&__header {
 		flex: none;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		padding: 0.4rem 2rem;
 		margin: {
 			left: -2rem;
 			right: -2rem;
 		}

 		text-align: right;
 		background-color: var(--background-05);
 	}

 	&__content {
 		position: relative;
 		flex: 1 1 auto;
 		display: flex;
 		flex-direction: row;
 		// display: flex;
 		// flex-direction: row;
 		overflow: hidden;
 		gap: 1rem;
 	}
@ -228,10 +246,11 @@ h2 {
 	}

 	&__main {
 		flex: 1 1 auto;
 		// flex: 1 1 auto;
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
 		height: 100%;
 	}
 	&__section {
 		min-height: 15rem;
@ -382,9 +401,11 @@ h2 {

 	&__content {
 		max-width: 600px;
 		background: var(--color-hover-background) no-repeat left top;
 		background: var(--background-05) no-repeat left top;
 		background-image: var(--gl-plus-bg);
 		border: 1px solid var(--color-hover-border);
 		background-position: left -20rem center;
 		background-size: 100%;
 		border: 1px solid var(--background-15);
 		border-radius: 0.4rem;
 		margin: 1rem;
 		padding: 1.2rem;
@ -397,4 +418,24 @@ h2 {
 			align-self: center !important;
 		}
 	}

 	&__actions {
 		text-align: center;
 		margin: 3rem 0;
 	}
 }

 .divider {
 	display: block;
 	height: 0;
 	margin: 0.6rem;
 	border: none;
 	border-top: 0.1rem solid var(--vscode-menu-separatorBackground);
 }

 .badge {
 	font-size: 1rem;
 	font-weight: 700;
 	text-transform: uppercase;
 	color: var(--color-foreground);
 }
--- a/src/webviews/apps/plus/workspaces/workspaces.ts
+++ b/src/webviews/apps/plus/workspaces/workspaces.ts
@ -196,13 +196,8 @@ export class WorkspacesApp extends App {
 			connectOverlay.setAttribute('hidden', 'true');
 		}

 		// const badgeEl = document.getElementById('account-badge')! as AccountBadge;
 		const badgeEl = document.createElement('account-badge') as AccountBadge;
 		const badgeEl = document.getElementById('account-badge')! as AccountBadge;
 		badgeEl.subscription = this.state.subscription;

 		const headerEl = document.getElementById('header')!;
 		headerEl.innerHTML = '';
 		headerEl.append(badgeEl);
 	}

 	onSelectTab(e: Event, callback?: (val?: string) => void) {