Skip to content

Commit cde257e

Browse files
d13eamodio
d13
authored and
eamodio
committed
Adds upgrade chip to home
1 parent d6a2a6b commit cde257e

File tree

2 files changed

+155
-76
lines changed

2 files changed

+155
-76
lines changed

‎src/webviews/apps/plus/shared/components/account-chip.ts‎

Lines changed: 153 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { consume } from '@lit/context';
22
import { css, html, LitElement, nothing } from 'lit';
3-
import { customElement, query, state } from 'lit/decorators.js';
3+
import { customElement, property, query, state } from 'lit/decorators.js';
44
import { when } from 'lit/directives/when.js';
55
import { urls } from '../../../../../constants';
66
import { proTrialLengthInDays, SubscriptionPlanId, SubscriptionState } from '../../../../../constants.subscription';
@@ -39,22 +39,39 @@ export class GLAccountChip extends LitElement {
3939
focusableBaseStyles,
4040
chipStyles,
4141
css`
42+
:host {
43+
display: inline-flex;
44+
align-items: center;
45+
gap: 0.8rem;
46+
}
47+
48+
:host-context(.vscode-dark),
49+
:host-context(.vscode-high-contrast) {
50+
--gl-account-chip-color: color-mix(in lab, var(--vscode-sideBar-background), #fff 10%);
51+
--gl-account-chip-media-color: color-mix(in lab, var(--vscode-sideBar-background), #fff 25%);
52+
--gl-account-account-media-color: color-mix(in lab, var(--vscode-sideBar-background), #fff 20%);
53+
}
54+
55+
:host-context(.vscode-light),
56+
:host-context(.vscode-high-contrast-light) {
57+
--gl-account-chip-color: color-mix(in lab, var(--vscode-sideBar-background), #000 7%);
58+
--gl-account-chip-media-color: color-mix(in lab, var(--vscode-sideBar-background), #000 18%);
59+
--gl-account-account-media-color: color-mix(in lab, var(--vscode-sideBar-background), #000 15%);
60+
}
61+
4262
.chip {
4363
padding-right: 0.6rem;
4464
4565
font-size: 1.1rem;
4666
font-weight: 400;
4767
text-transform: uppercase;
68+
line-height: 2rem;
69+
background-color: var(--gl-account-chip-color);
4870
}
4971
50-
:host-context(.vscode-dark) .chip,
51-
:host-context(.vscode-high-contrast) .chip {
52-
background-color: color-mix(in lab, var(--vscode-sideBar-background), #fff 10%);
53-
}
54-
55-
:host-context(.vscode-light) .chip,
56-
:host-context(.vscode-high-contrast-light) .chip {
57-
background-color: color-mix(in lab, var(--vscode-sideBar-background), #000 7%);
72+
.chip--outlined {
73+
background-color: transparent;
74+
border: 1px solid var(--gl-account-chip-color);
5875
}
5976
6077
.chip__media {
@@ -69,16 +86,14 @@ export class GLAccountChip extends LitElement {
6986
width: 1.6rem;
7087
aspect-ratio: 1 / 1;
7188
border-radius: 50%;
89+
background-color: var(--gl-account-chip-media-color);
7290
}
7391
74-
:host-context(.vscode-dark) img.chip__media,
75-
:host-context(.vscode-high-contrast) img.chip__media {
76-
background-color: color-mix(in lab, var(--vscode-sideBar-background), #fff 25%);
77-
}
78-
79-
:host-context(.vscode-light) img.chip__media,
80-
:host-context(.vscode-high-contrast-light) img.chip__media {
81-
background-color: color-mix(in lab, var(--vscode-sideBar-background), #000 18%);
92+
.chip-group {
93+
display: inline-flex;
94+
flex-direction: row;
95+
gap: 0.8rem;
96+
cursor: pointer;
8297
}
8398
8499
.account-org {
@@ -107,16 +122,7 @@ export class GLAccountChip extends LitElement {
107122
width: 2rem;
108123
aspect-ratio: 1 / 1;
109124
border-radius: 50%;
110-
}
111-
112-
:host-context(.vscode-dark) img.account__media,
113-
:host-context(.vscode-high-contrast) img.account__media {
114-
background-color: color-mix(in lab, var(--vscode-sideBar-background), #fff 20%);
115-
}
116-
117-
:host-context(.vscode-light) img.account__media,
118-
:host-context(.vscode-high-contrast-light) img.account__media {
119-
background-color: color-mix(in lab, var(--vscode-sideBar-background), #000 15%);
125+
background-color: var(--gl-account-account-media-color);
120126
}
121127
122128
.account__details {
@@ -222,9 +228,37 @@ export class GLAccountChip extends LitElement {
222228
border: none;
223229
border-top: 1px solid var(--color-foreground--25);
224230
}
231+
232+
.upgrade > * {
233+
margin-block: 0.8rem 0;
234+
}
235+
236+
.upgrade ul {
237+
padding-inline-start: 2rem;
238+
}
239+
240+
.upgrade gl-promo::part(text) {
241+
margin-block-start: 0;
242+
border-radius: 0.3rem;
243+
padding: 0.2rem 0.4rem;
244+
background-color: var(--gl-account-chip-color);
245+
}
246+
247+
.upgrade gl-promo:not([has-promo]) {
248+
display: none;
249+
}
225250
`,
226251
];
227252

253+
private _showUpgrade = false;
254+
@property({ type: Boolean, reflect: true, attribute: 'show-upgrade' })
255+
get showUpgrade() {
256+
return this._showUpgrade;
257+
}
258+
private set showUpgrade(value: boolean) {
259+
this._showUpgrade = value;
260+
}
261+
228262
@query('#chip')
229263
private _chip!: HTMLElement;
230264

@@ -295,58 +329,59 @@ export class GLAccountChip extends LitElement {
295329

296330
override render(): unknown {
297331
return html`<gl-popover placement="bottom" trigger="hover focus click" hoist>
298-
<span id="chip" slot="anchor" class="chip" tabindex="0">
299-
${this.accountAvatar
300-
? html`<img class="chip__media" src=${this.accountAvatar} />`
301-
: html`<code-icon class="chip__media" icon="gl-gitlens" size="16"></code-icon>`}
302-
<span>${this.planTier}</span>
303-
</span>
304-
<div slot="content" class="content" tabindex="-1">
305-
<div class="header">
306-
<span class="header__title">${this.planName}</span>
307-
<span class="header__actions">
308-
${this.hasAccount
309-
? html`<gl-button
310-
appearance="toolbar"
311-
href="${createCommandLink<Source>('gitlens.views.home.account.resync', {
312-
source: 'account',
313-
})}"
314-
tooltip="Synchronize Status"
315-
aria-label="Synchronize Status"
316-
><code-icon icon="sync"></code-icon
317-
></gl-button>
318-
<gl-button
332+
<span id="chip" slot="anchor" class="chip" tabindex="0">
333+
${this.accountAvatar
334+
? html`<img class="chip__media" src=${this.accountAvatar} />`
335+
: html`<code-icon class="chip__media" icon="gl-gitlens" size="16"></code-icon>`}
336+
<span>${this.planTier}</span>
337+
</span>
338+
<div slot="content" class="content" tabindex="-1">
339+
<div class="header">
340+
<span class="header__title">${this.planName}</span>
341+
<span class="header__actions">
342+
${this.hasAccount
343+
? html`<gl-button
344+
appearance="toolbar"
345+
href="${createCommandLink<Source>('gitlens.views.home.account.resync', {
346+
source: 'account',
347+
})}"
348+
tooltip="Synchronize Status"
349+
aria-label="Synchronize Status"
350+
><code-icon icon="sync"></code-icon
351+
></gl-button>
352+
<gl-button
353+
appearance="toolbar"
354+
href="${createCommandLink<Source>('gitlens.plus.manage', {
355+
source: 'account',
356+
})}"
357+
tooltip="Manage Account"
358+
aria-label="Manage Account"
359+
><code-icon icon="gear"></code-icon
360+
></gl-button>
361+
<gl-button
362+
appearance="toolbar"
363+
href="${createCommandLink<Source>('gitlens.plus.logout', {
364+
source: 'account',
365+
})}"
366+
tooltip="Sign Out"
367+
aria-label="Sign Out"
368+
><code-icon icon="sign-out"></code-icon
369+
></gl-button>`
370+
: html`<gl-button
319371
appearance="toolbar"
320-
href="${createCommandLink<Source>('gitlens.plus.manage', {
372+
href="${createCommandLink<Source>('gitlens.plus.login', {
321373
source: 'account',
322374
})}"
323-
tooltip="Manage Account"
324-
aria-label="Manage Account"
325-
><code-icon icon="gear"></code-icon
326-
></gl-button>
327-
<gl-button
328-
appearance="toolbar"
329-
href="${createCommandLink<Source>('gitlens.plus.logout', {
330-
source: 'account',
331-
})}"
332-
tooltip="Sign Out"
333-
aria-label="Sign Out"
334-
><code-icon icon="sign-out"></code-icon
335-
></gl-button>`
336-
: html`<gl-button
337-
appearance="toolbar"
338-
href="${createCommandLink<Source>('gitlens.plus.login', {
339-
source: 'account',
340-
})}"
341-
tooltip="Sign In"
342-
aria-label="Sign In"
343-
><code-icon icon="sign-in"></code-icon
344-
></gl-button>`}
345-
</span>
375+
tooltip="Sign In"
376+
aria-label="Sign In"
377+
><code-icon icon="sign-in"></code-icon
378+
></gl-button>`}
379+
</span>
380+
</div>
381+
${this.renderOrganization()} ${this.renderAccountState()}
346382
</div>
347-
${this.renderOrganization()} ${this.renderAccountState()}
348-
</div>
349-
</gl-popover>`;
383+
</gl-popover>
384+
${this.renderUpgradeContent()}`;
350385
}
351386

352387
show(): void {
@@ -543,6 +578,49 @@ export class GLAccountChip extends LitElement {
543578
</p>`;
544579
}
545580

581+
private renderUpgradeContent() {
582+
if (this.planTier !== 'Community' && this.planId !== SubscriptionPlanId.Pro) {
583+
this.showUpgrade = false;
584+
return nothing;
585+
}
586+
587+
this.showUpgrade = true;
588+
589+
return html`<gl-popover placement="bottom" trigger="hover focus click" hoist>
590+
<span slot="anchor" class="chip chip--outlined" tabindex="0">
591+
<span>Upgrade</span>
592+
</span>
593+
<div slot="content" class="content" tabindex="-1">
594+
<div class="header">
595+
<span class="header__title">Upgrade GitLens</span>
596+
</div>
597+
<div class="upgrade">
598+
<p>Unlock Pro features:</p>
599+
<ul>
600+
<li>Connect powerful integrations</li>
601+
<li>Start work on Issues assigned to you</li>
602+
<li>Leverage Git Worktrees in VS Code</li>
603+
<li>Monitor PRs and accelerate reviews</li>
604+
<li>Rich AI features</li>
605+
<li>Interactive Commit Graph</li>
606+
<li>Visual File and Folder History</li>
607+
</ul>
608+
${this.renderPromo()}
609+
<button-container>
610+
<gl-button
611+
full
612+
href="${createCommandLink<Source>('gitlens.plus.upgrade', {
613+
// needs to indicate upgrade menu
614+
source: 'account',
615+
})}"
616+
>Upgrade to Pro</gl-button
617+
>
618+
</button-container>
619+
</div>
620+
</div>
621+
</gl-popover>`;
622+
}
623+
546624
private renderPromo() {
547625
return html`<gl-promo
548626
.promoPromise=${this.promos.getApplicablePromo('account')}

‎src/webviews/apps/shared/components/promo.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ export class GlPromo extends LitElement {
101101
case 'info':
102102
if (content.info) {
103103
this.hasPromo = true;
104-
return html`<p class="promo">${unsafeHTML(content.info.html)}</p>`;
104+
return html`<p class="promo" part="text">${unsafeHTML(content.info.html)}</p>`;
105105
}
106106
break;
107107

@@ -110,6 +110,7 @@ export class GlPromo extends LitElement {
110110
this.hasPromo = true;
111111
return html`<a
112112
class="link"
113+
part="link"
113114
href="${this.getCommandUrl(promo)}"
114115
title="${ifDefined(content.link.title)}"
115116
>${unsafeHTML(content.link.html)}</a

0 commit comments

Comments
 (0)