Skip to content

Commit 3cbff15

Browse files
sergeibbbsergeibbb
committed
Add interactive features carousel to Welcome view
(#4769, PLG-138)
1 parent c6386f2 commit 3cbff15

File tree

4 files changed

+227
-2
lines changed

4 files changed

+227
-2
lines changed

‎src/webviews/apps/media/feature-timeline.svg‎

Lines changed: 48 additions & 0 deletions
Loading

‎src/webviews/apps/welcome/components/features-carousel.ts‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import { css, html, LitElement } from 'lit';
2+
import { customElement, queryAssignedElements, state } from 'lit/decorators.js';
3+
import '../../shared/components/button';
4+
import '../../shared/components/code-icon';
5+
6+
declare global {
7+
interface HTMLElementTagNameMap {
8+
'gl-features-carousel': GlFeaturesCarousel;
9+
'gl-feature-card': GlFeatureCard;
10+
}
11+
}
12+
13+
@customElement('gl-features-carousel')
14+
export class GlFeaturesCarousel extends LitElement {
15+
static override styles = [
16+
css`
17+
:host {
18+
display: block;
19+
width: 100%;
20+
}
21+
22+
.carousel {
23+
display: flex;
24+
align-items: center;
25+
gap: 1rem;
26+
justify-content: center;
27+
}
28+
29+
.content {
30+
flex: 1;
31+
max-width: 520px;
32+
min-height: 160px;
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
}
37+
38+
.button {
39+
flex-shrink: 0;
40+
}
41+
42+
::slotted(*) {
43+
display: none;
44+
}
45+
46+
::slotted([data-active]) {
47+
display: flex;
48+
width: 100%;
49+
}
50+
`,
51+
];
52+
53+
@queryAssignedElements({ flatten: true })
54+
private cards!: HTMLElement[];
55+
56+
@state()
57+
private currentIndex = 0;
58+
59+
override firstUpdated(): void {
60+
this.updateActiveCard();
61+
}
62+
63+
private updateActiveCard(): void {
64+
this.cards.forEach((card, index) => {
65+
if (index === this.currentIndex) {
66+
card.setAttribute('data-active', '');
67+
} else {
68+
card.removeAttribute('data-active');
69+
}
70+
});
71+
}
72+
73+
private handlePrevious(): void {
74+
if (this.cards.length === 0) return;
75+
this.currentIndex = (this.currentIndex - 1 + this.cards.length) % this.cards.length;
76+
this.updateActiveCard();
77+
}
78+
79+
private handleNext(): void {
80+
if (this.cards.length === 0) return;
81+
this.currentIndex = (this.currentIndex + 1) % this.cards.length;
82+
this.updateActiveCard();
83+
}
84+
85+
private handleSlotChange(): void {
86+
this.currentIndex = 0;
87+
this.updateActiveCard();
88+
}
89+
90+
override render(): unknown {
91+
return html`
92+
<div class="carousel">
93+
<gl-button
94+
class="button"
95+
appearance="input"
96+
@click=${this.handlePrevious}
97+
aria-label="Previous feature"
98+
>
99+
<code-icon icon="chevron-left" size="20"></code-icon>
100+
</gl-button>
101+
102+
<div class="content">
103+
<slot @slotchange=${this.handleSlotChange}></slot>
104+
</div>
105+
106+
<gl-button class="button" appearance="input" @click=${this.handleNext} aria-label="Next feature">
107+
<code-icon icon="chevron-right" size="20"></code-icon>
108+
</gl-button>
109+
</div>
110+
`;
111+
}
112+
}
113+
114+
@customElement('gl-feature-card')
115+
export class GlFeatureCard extends LitElement {
116+
static override styles = [
117+
css`
118+
:host {
119+
display: flex;
120+
}
121+
122+
.image {
123+
}
124+
.content {
125+
}
126+
::slotted(img) {
127+
}
128+
129+
::slotted(h1) {
130+
}
131+
132+
::slotted(p) {
133+
}
134+
`,
135+
];
136+
137+
override render(): unknown {
138+
return html`
139+
<div class="image">
140+
<slot name="image"></slot>
141+
</div>
142+
<div class="content">
143+
<slot></slot>
144+
</div>
145+
`;
146+
}
147+
}

‎src/webviews/apps/welcome/welcome.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@
2121
data-placement="#{placement}"
2222
data-vscode-context='{ "webview": "#{webviewId}", "webviewInstance": "#{webviewInstanceId}" }'
2323
>
24-
<gl-welcome-app name="WelcomeView" placement="#{placement}" bootstrap="#{state}"></gl-welcome-app>
24+
<gl-welcome-app
25+
name="WelcomeView"
26+
placement="#{placement}"
27+
bootstrap="#{state}"
28+
webroot="#{webroot}"
29+
></gl-welcome-app>
2530
</body>
2631
</html>

‎src/webviews/apps/welcome/welcome.ts‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*global*/
22
import './welcome.scss';
33
import { html } from 'lit';
4-
import { customElement } from 'lit/decorators.js';
4+
import { customElement, property } from 'lit/decorators.js';
55
import type { State } from '../../welcome/protocol';
66
import { GlAppHost } from '../shared/appHost';
77
import { scrollableBase } from '../shared/components/styles/lit/base.css';
@@ -10,6 +10,7 @@ import type { HostIpc } from '../shared/ipc';
1010
import { WelcomeStateProvider } from './stateProvider';
1111
import '../shared/components/gitlens-logo';
1212
import { welcomeStyles } from './welcome.css';
13+
import './components/features-carousel';
1314

1415
@customElement('gl-welcome-app')
1516
export class GlWelcomeApp extends GlAppHost<State> {
@@ -23,6 +24,9 @@ export class GlWelcomeApp extends GlAppHost<State> {
2324
return new WelcomeStateProvider(this, bootstrap, ipc, logger);
2425
}
2526

27+
@property({ type: String })
28+
webroot?: string;
29+
2630
override render(): unknown {
2731
return html`
2832
<div class="welcome scrollable">
@@ -38,6 +42,27 @@ export class GlWelcomeApp extends GlAppHost<State> {
3842
<p>With <span class="welcome__accent">PRO</span> subscription you get more</p>
3943
</div>
4044
45+
<div class="welcome__section">
46+
<gl-features-carousel>
47+
<gl-feature-card>
48+
<img slot="image" src="${this.webroot ?? ''}/media/feature-graph.webp" alt="Commit Graph" />
49+
<h1>Commit Graph</h1>
50+
<p>Visualize your repository's history and interact with commits</p>
51+
<p><a href="command:gitlens.showGraph">Open Commit Graph</a></p>
52+
</gl-feature-card>
53+
<gl-feature-card>
54+
<img
55+
slot="image"
56+
src="${this.webroot ?? ''}/media/feature-timeline.webp"
57+
alt="Visual File History"
58+
/>
59+
<h1>Visual File History</h1>
60+
<p>Track changes to any file over time</p>
61+
<p><a href="command:gitlens.showTimelineView">Open Visual File History</a></p>
62+
</gl-feature-card>
63+
</gl-features-carousel>
64+
</div>
65+
4166
<div>
4267
<h2>✨ Key Features</h2>
4368
<ul>

0 commit comments

Comments
 (0)