diff --git a/src/webviews/apps/home/components/plus-banner.ts b/src/webviews/apps/home/components/plus-banner.ts index ce1cfb2..37186af 100644 --- a/src/webviews/apps/home/components/plus-banner.ts +++ b/src/webviews/apps/home/components/plus-banner.ts @@ -1,4 +1,4 @@ -import { attr, css, customElement, FASTElement, html, volatile, when } from '@microsoft/fast-element'; +import { attr, css, customElement, FASTElement, html, observable, volatile, when } from '@microsoft/fast-element'; import { SubscriptionState } from '../../../../subscription'; import { pluralize } from '../../../../system/string'; import { numberConverter } from '../../shared/components/converters/number-converter'; @@ -15,11 +15,16 @@ const template = html` that enhance your GitLens experience. -

- Try GitLens+ features on private repos -

+ ${when( + y => y.extensionEnabled, + html` +

+ Try GitLens+ features on private repos +

+ `, + )} `, )} ${when( @@ -43,11 +48,16 @@ const template = html` GitLens+ features on private repos.

-

- Upgrade to Pro -

+ ${when( + y => y.extensionEnabled, + html` +

+ Upgrade to Pro +

+ `, + )} `, )} ${when( @@ -70,11 +80,16 @@ const template = html` 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.

-

- Extend Pro Trial -

+ ${when( + y => y.extensionEnabled, + html` +

+ Extend Pro Trial +

+ `, + )} `, )} ${when( @@ -85,11 +100,16 @@ const template = html` Your GitLens Pro trial has ended, please upgrade to GitLens Pro to continue to use GitLens+ features on private repos.

-

- Upgrade to Pro -

+ ${when( + y => y.extensionEnabled, + html` +

+ Upgrade to Pro +

+ `, + )} `, )} ${when( @@ -117,7 +137,7 @@ const template = html` SubscriptionState.Free, SubscriptionState.FreePreviewTrialExpired, SubscriptionState.FreePlusTrialExpired, - ].includes(x.state), + ].includes(x.state) && x.extensionEnabled, html`

${when( @@ -131,6 +151,14 @@ const template = html`

`, )} + ${when( + x => !x.extensionEnabled, + html` +

+ To use GitLens+, open a folder containing a git repository or clone from a URL from the Explorer. +

+ `, + )} `; const styles = css` @@ -201,6 +229,9 @@ export class PlusBanner extends FASTElement { @attr({ mode: 'boolean' }) plus = true; + @observable + extensionEnabled = true; + get daysRemaining() { if (this.days < 1) { return 'less than one day'; diff --git a/src/webviews/apps/home/home.html b/src/webviews/apps/home/home.html index 8f83717..4fb09e3 100644 --- a/src/webviews/apps/home/home.html +++ b/src/webviews/apps/home/home.html @@ -65,6 +65,25 @@
+
@@ -115,16 +134,10 @@ views. Learn more in the Feature Walkthrough.

diff --git a/src/webviews/apps/home/home.scss b/src/webviews/apps/home/home.scss index e4a3e7f..f1b4683 100644 --- a/src/webviews/apps/home/home.scss +++ b/src/webviews/apps/home/home.scss @@ -133,6 +133,10 @@ body { flex: none; padding: 0 2rem; position: relative; + + [aria-hidden='false'] + header-card { + display: none; + } } &__main { flex: 1; @@ -271,6 +275,10 @@ ul { text-align: center; } +.one-line { + white-space: nowrap; +} + .foreground { color: var(--color-view-foreground); } @@ -374,6 +382,21 @@ ul { font-size: 1.2rem; margin: 0.4rem 0 0; } + + &--info { + background-color: var(--color-alert-infoBackground); + border-left-color: var(--color-alert-infoBorder); + } + + &--warning { + background-color: var(--color-alert-warningBackground); + border-left-color: var(--color-alert-warningBorder); + } + + &--danger { + background-color: var(--color-alert-errorBackground); + border-left-color: var(--color-alert-errorBorder); + } } .activitybar-banner { diff --git a/src/webviews/apps/home/home.ts b/src/webviews/apps/home/home.ts index ee3698e..9a92ea2 100644 --- a/src/webviews/apps/home/home.ts +++ b/src/webviews/apps/home/home.ts @@ -244,10 +244,13 @@ export class HomeApp extends App { private updateNoRepo() { const { extensionEnabled } = this.state; - const $el = document.getElementById('no-repo'); - if ($el) { - $el.setAttribute('aria-hidden', extensionEnabled ? 'true' : 'false'); - } + const value = extensionEnabled ? 'true' : 'false'; + + let $el = document.getElementById('no-repo'); + $el?.setAttribute('aria-hidden', value); + + $el = document.getElementById('no-repo-alert'); + $el?.setAttribute('aria-hidden', value); } private updateLayout() { @@ -270,6 +273,7 @@ export class HomeApp extends App { $plusContent.setAttribute('visibility', visibility); $plusContent.setAttribute('plan', subscription.plan.effective.name); $plusContent.setAttribute('plus', plusEnabled.toString()); + ($plusContent as PlusBanner).extensionEnabled = this.state.extensionEnabled; } $plusContent = document.getElementById('plus-content');