diff --git a/src/webviews/apps/home/components/header-card.ts b/src/webviews/apps/home/components/header-card.ts index 5df0dc0..7dd7124 100644 --- a/src/webviews/apps/home/components/header-card.ts +++ b/src/webviews/apps/home/components/header-card.ts @@ -14,36 +14,31 @@ const template = html` ${when(x => x.name !== '', html`${x => x.name}`)}
` aria-valuenow="${x => x.progressNow}" aria-label="${x => x.progressNow} of ${x => x.progressMax} steps completed" > -
+
+ + ${when( + x => x.state === SubscriptionState.FreePreviewTrialExpired, + html`Extend Trial`, + )} + ${when( + x => x.state === SubscriptionState.FreePlusTrialExpired, + html`Upgrade to Pro`, + )} + ${when( + x => x.state === SubscriptionState.VerificationRequired, + html` + Verify Refresh + `, + )} + `; const styles = css` @@ -134,6 +141,7 @@ const styles = css` display: flex; flex-direction: row; justify-content: space-between; + align-items: center; flex-wrap: wrap; gap: 0 0.4rem; } @@ -172,6 +180,50 @@ const styles = css` .status { color: var(--color-foreground--75); } + + .repo-access { + font-size: 1.1em; + margin-right: 0.2rem; + cursor: help; + } + .repo-access:not(.is-pro) { + filter: grayscale(1) brightness(0.7); + } + + .actions { + position: absolute; + right: 1rem; + top: 0.8rem; + } + + .action { + display: inline-block; + padding: 0.2rem 0.6rem; + border-radius: 0.3rem; + color: var(--color-foreground--75); + } + .action.is-icon { + display: inline-flex; + justify-content: center; + align-items: center; + width: 2.2rem; + height: 2.2rem; + padding: 0; + } + .action:hover { + text-decoration: none; + color: var(--color-foreground); + } + + :host-context(.vscode-high-contrast) .action:hover, + :host-context(.vscode-dark) .action:hover { + background-color: var(--color-background--lighten-10); + } + + :host-context(.vscode-high-contrast-light) .action:hover, + :host-context(.vscode-light) .action:hover { + background-color: var(--color-background--darken-10); + } `; @customElement({ name: 'header-card', template: template, styles: styles }) @@ -232,21 +284,40 @@ export class HeaderCard extends FASTElement { get planName() { switch (this.state) { case SubscriptionState.Free: - return 'GitLens+ (Local & Public Repos)'; - case SubscriptionState.FreeInPreviewTrial: - case SubscriptionState.FreePlusInTrial: - return 'GitLens+ Pro Trial'; case SubscriptionState.FreePreviewTrialExpired: - return 'GitLens+ (Local & Public Repos)'; case SubscriptionState.FreePlusTrialExpired: - return 'GitLens+ (Local & Public Repos)'; + return 'GitLens Free'; + case SubscriptionState.FreeInPreviewTrial: + case SubscriptionState.FreePlusInTrial: + return `GitLens Pro (Trial ${this.daysRemaining})`; case SubscriptionState.VerificationRequired: - return 'GitLens+ (Unverified)'; + return `${this.plan} (Unverified)`; default: return this.plan; } } + get hasAccount() { + switch (this.state) { + case SubscriptionState.Free: + case SubscriptionState.FreePreviewTrialExpired: + case SubscriptionState.FreeInPreviewTrial: + return false; + } + return true; + } + + get isPro() { + switch (this.state) { + case SubscriptionState.Free: + case SubscriptionState.FreePreviewTrialExpired: + case SubscriptionState.FreePlusTrialExpired: + case SubscriptionState.VerificationRequired: + return false; + } + return true; + } + updateProgressWidth() { this.progressNode.style.width = this.progress; } diff --git a/src/webviews/apps/home/components/plus-content.ts b/src/webviews/apps/home/components/plus-content.ts index e6ac3f2..1a9cd8d 100644 --- a/src/webviews/apps/home/components/plus-content.ts +++ b/src/webviews/apps/home/components/plus-content.ts @@ -1,4 +1,4 @@ -import { attr, css, customElement, FASTElement, html, when } from '@microsoft/fast-element'; +import { attr, css, customElement, FASTElement, html, volatile, when } from '@microsoft/fast-element'; import { SubscriptionState } from '../../../../subscription'; import { pluralize } from '../../../../system/string'; import { numberConverter } from '../../shared/components/converters/number-converter'; @@ -9,11 +9,11 @@ const template = html` x => x.state === SubscriptionState.Free, html`

Adds all-new, completely optional, features that enhance your GitLens experience.

-

These features are free for local and public repos with no account required.

+

These features are free for local and public repos, no account required.

Try GitLens+ for private repositoriesTry GitLens+ Pro for private repos

@@ -24,29 +24,33 @@ const template = html` ${when( x => x.state === SubscriptionState.Paid, html` -

GitLens+ adds all-new, completely optional, features that enhance your current GitLens experience.

-

These features are free for local and public repos with no account required.

+

Welcome to ${x => x.planName}!

+

+ You have access to + GitLens+ features + on any repo. +

`, )} ${when( x => [SubscriptionState.FreeInPreviewTrial, SubscriptionState.FreePlusInTrial].includes(x.state), html` -

GitLens+ Trial

+

GitLens Pro Trial

You have ${x => x.daysRemaining} left in your - GitLens+ trial. Once - your trial ends, you'll need a paid plan to continue to use GitLens+ features on this and other private - repos. + GitLens Pro trial. + Once your trial ends, you'll continue to have access to GitLens+ features on local and public repos, + while private repo access will need GitLens Pro.

`, )} ${when( x => x.state === SubscriptionState.FreePreviewTrialExpired, html` -

Extend Your GitLens+ Trial

+

Extend Your GitLens Pro Trial

- Your free trial has ended, please sign in to extend your trial of GitLens+ features on private repos by - an additional 7-days. + Your free 3-day GitLens Pro trial has ended, extend your trial to get an additional 7-days of GitLens+ + features on private repos.

` ${when( x => x.state === SubscriptionState.FreePlusTrialExpired, html` -

GitLens+ Trial Expired

+

GitLens Pro Trial Expired

- Your free trial has ended, please upgrade your account to continue to use GitLens+ features, including - the Commit Graph, on this and other private repos. + Your GitLens Pro trial has ended, please upgrade to GitLens Pro to continue to use GitLens+ features on + private repos.

Upgrade Your AccountUpgrade to Pro

`, @@ -74,7 +78,9 @@ const template = html` x => x.state === SubscriptionState.VerificationRequired, html`

Please verify your email

-

Please verify the email for the account you created.

+

+ Before you can also use GitLens+ features on private repos, please verify your email address. +

Resend Verification Email

  • - Find GitLens features by opening the + Find many features by opening the Source Control Side Bar
    • -
  • Keep an eye out for feature updates and new components here.
    • +
  • Your central hub for the latest feature updates and support information
@@ -227,7 +227,10 @@

- +

@@ -246,15 +249,18 @@ alt="Commit Graph illustration" class="mb-1" /> -

+

The Commit Graph - helps you to easily visualize branch structure and commit history. Not only does it help you - verify your changes, but also easily see changes made by others and when. + helps you easily visualize and keep track of all work in progress. +

+

+ Use our rich search to find exactly what your looking.It's powerful filters can search by a + specific commit, message, author, a changed file or files, or even a specific code change.

@@ -267,7 +273,7 @@ alt="Visual File History illustration" class="mb-1" /> -

+

The +

+ Use it to quickly find when the most impactful changes were made to a file or who best to talk + to about file changes (and more). +

Introducing Worktrees @@ -288,13 +298,18 @@ alt="Worktrees illustration" class="mb-1" /> -

+

Worktrees - allow you to easily work on different branches of a repository simultaneously. + help you multitask quickly by allowing you to easily work on different branches of a repository + simultaneously. +

+

+ Avoid interrupting your work in progress when needing to checkout a PR. Simply create a worktree + and have both simultaneously.

diff --git a/src/webviews/apps/home/home.ts b/src/webviews/apps/home/home.ts index 956743a..37ed75d 100644 --- a/src/webviews/apps/home/home.ts +++ b/src/webviews/apps/home/home.ts @@ -165,6 +165,7 @@ export class HomeApp extends App { $plusContent.setAttribute('days', days.toString()); $plusContent.setAttribute('state', subscription.state.toString()); $plusContent.setAttribute('visibility', visibility); + $plusContent.setAttribute('plan', subscription.plan.effective.name); } }