Skip to content

Commit 44e264b

Browse files
d13d13
committed
Adds getting started content for home and welcome
1 parent ccb3a19 commit 44e264b

File tree

8 files changed

+322
-24
lines changed

8 files changed

+322
-24
lines changed

‎src/constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -867,6 +867,7 @@ export type GlobalStorage = {
867867
preVersion: string;
868868
'views:welcome:visible': boolean;
869869
'confirm:draft:storage': boolean;
870+
'home:sections:collapsed': string[];
870871
} & { [key in `confirm:ai:tos:${AIProviders}`]: boolean } & {
871872
[key in `provider:authentication:skip:${string}`]: boolean;
872873
} & { [key in `gk:${string}:checkin`]: Stored<StoredGKCheckInResponse> } & {

‎src/webviews/apps/home/home.html‎

Lines changed: 42 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,9 @@ <h1 class="alert__title">No repository detected</h1>
9494
To use GitLens, open a folder containing a git repository or clone from a URL from the Explorer.
9595
</p>
9696
<p class="centered">
97-
<gl-button data-action="command:workbench.view.explorer">Open a Folder or Repository</gl-button>
97+
<gl-button class="is-basic" data-action="command:workbench.view.explorer"
98+
>Open a Folder or Repository</gl-button
99+
>
98100
</p>
99101
<p class="mb-0">
100102
If you have opened a folder with a repository, please let us know by
@@ -112,7 +114,9 @@ <h1 class="alert__title">Unsafe repository</h1>
112114
not being owned by the current user.
113115
</p>
114116
<p class="centered">
115-
<gl-button data-action="command:workbench.view.scm">Manage in Source Control</gl-button>
117+
<gl-button class="is-basic" data-action="command:workbench.view.scm"
118+
>Manage in Source Control</gl-button
119+
>
116120
</p>
117121
</div>
118122
</div>
@@ -121,7 +125,9 @@ <h1 class="alert__title">Untrusted workspace</h1>
121125
<div class="alert__description">
122126
<p>Unable to open repositories in Restricted Mode.</p>
123127
<p class="centered">
124-
<gl-button data-action="command:workbench.trust.manage">Manage Workspace Trust</gl-button>
128+
<gl-button class="is-basic" data-action="command:workbench.trust.manage"
129+
>Manage Workspace Trust</gl-button
130+
>
125131
</p>
126132
</div>
127133
</div>
@@ -149,6 +155,39 @@ <h1 class="alert__title">Untrusted workspace</h1>
149155
50% off GitLens Pro (plus entire GitKraken suite) all for only $4/month
150156
</a>
151157
</div>
158+
<div id="section-walkthrough" class="alert">
159+
<h1 class="alert__title">Get Started with GitLens</h1>
160+
<div class="alert__description">
161+
<p>Explore all of the powerful features in GitLens</p>
162+
<p class="button-container">
163+
<span class="button-group button-group--single">
164+
<gl-button appearance="secondary" full data-action="command:gitlens.getStarted"
165+
><code-icon icon="info"></code-icon> Open Walkthrough</gl-button
166+
>
167+
<gl-button
168+
appearance="secondary"
169+
density="compact"
170+
href="https://www.youtube.com/watch?v=UQPb73Zz9qk"
171+
title="Watch the GitLens Tutorial video"
172+
aria-label="Watch the GitLens Tutorial video"
173+
><code-icon icon="vm-running"></code-icon
174+
></gl-button>
175+
</span>
176+
</p>
177+
</div>
178+
<a href="#" class="alert__close" data-section-toggle="walkthrough">
179+
<code-icon
180+
icon="chevron-down"
181+
title="Collapse walkthrough section"
182+
aria-label="Collapse walkthrough section"
183+
></code-icon>
184+
<code-icon
185+
icon="chevron-right"
186+
title="Expand walkthrough section"
187+
aria-label="Expand walkthrough section"
188+
></code-icon>
189+
</a>
190+
</div>
152191
<nav class="nav-list">
153192
<h2 class="nav-list__title t-eyebrow">Popular views</h2>
154193
<a

‎src/webviews/apps/home/home.scss‎

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -314,6 +314,7 @@ ul {
314314
}
315315

316316
.alert {
317+
position: relative;
317318
padding: 0.8rem 1.2rem;
318319
line-height: 1.2;
319320
margin-bottom: 1.2rem;
@@ -331,6 +332,19 @@ ul {
331332
margin: 0.4rem 0 0;
332333
}
333334

335+
&__close {
336+
position: absolute;
337+
top: 0.8rem;
338+
right: 0.8rem;
339+
color: inherit;
340+
}
341+
342+
&.is-collapsed &__description,
343+
&.is-collapsed &__close code-icon:first-child,
344+
&:not(.is-collapsed) &__close code-icon:last-child {
345+
display: none;
346+
}
347+
334348
&--info {
335349
background-color: var(--color-alert-infoBackground);
336350
border-left-color: var(--color-alert-infoBorder);
@@ -347,7 +361,7 @@ ul {
347361
}
348362
}
349363

350-
gl-button {
364+
gl-button.is-basic {
351365
max-width: 300px;
352366
width: 100%;
353367

@@ -470,3 +484,39 @@ gl-button {
470484
padding: 0 2rem;
471485
}
472486
}
487+
488+
.button-container {
489+
margin: 1rem auto 0;
490+
text-align: left;
491+
max-width: 30rem;
492+
transition: max-width 0.2s ease-out;
493+
}
494+
495+
@media (min-width: 640px) {
496+
.button-container {
497+
max-width: 100%;
498+
}
499+
}
500+
501+
.button-group {
502+
display: inline-flex;
503+
gap: 0.1rem;
504+
505+
&--single {
506+
width: 100%;
507+
max-width: 30rem;
508+
}
509+
510+
gl-button {
511+
margin-top: 0;
512+
513+
&:not(:first-child) {
514+
border-top-left-radius: 0;
515+
border-bottom-left-radius: 0;
516+
}
517+
&:not(:last-child) {
518+
border-top-right-radius: 0;
519+
border-bottom-right-radius: 0;
520+
}
521+
}
522+
}

‎src/webviews/apps/home/home.ts‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@
22
import './home.scss';
33
import type { Disposable } from 'vscode';
44
import type { State } from '../../home/protocol';
5-
import { DidChangeOrgSettingsType, DidChangeRepositoriesType, DidChangeSubscriptionType } from '../../home/protocol';
5+
import {
6+
CollapseSectionCommandType,
7+
DidChangeOrgSettingsType,
8+
DidChangeRepositoriesType,
9+
DidChangeSubscriptionType,
10+
} from '../../home/protocol';
611
import type { IpcMessage } from '../../protocol';
712
import { ExecuteCommandType, onIpc } from '../../protocol';
813
import { App } from '../shared/appBase';
@@ -33,6 +38,9 @@ export class HomeApp extends App<State> {
3338
disposables.push(
3439
DOM.on('[data-action]', 'click', (e, target: HTMLElement) => this.onDataActionClicked(e, target)),
3540
DOM.on('[data-requires="repo"]', 'click', (e, target: HTMLElement) => this.onRepoFeatureClicked(e, target)),
41+
DOM.on('[data-section-toggle]', 'click', (e, target: HTMLElement) =>
42+
this.onSectionToggleClicked(e, target),
43+
),
3644
);
3745

3846
return disposables;
@@ -89,6 +97,19 @@ export class HomeApp extends App<State> {
8997
}
9098
}
9199

100+
private onSectionToggleClicked(_e: MouseEvent, _target: HTMLElement) {
101+
// const section = target.dataset.sectionToggle;
102+
// if (section === 'walkthrough') {
103+
this.state.walkthroughCollapsed = !this.state.walkthroughCollapsed;
104+
this.setState(this.state);
105+
this.updateCollapsedSections(this.state.walkthroughCollapsed);
106+
this.sendCommand(CollapseSectionCommandType, {
107+
section: 'walkthrough',
108+
collapsed: this.state.walkthroughCollapsed,
109+
});
110+
// }
111+
}
112+
92113
private updateNoRepo() {
93114
const {
94115
repositories: { openCount, hasUnsafe, trusted },
@@ -129,10 +150,15 @@ export class HomeApp extends App<State> {
129150
setElementVisibility('org-settings-drafts', drafts);
130151
}
131152

153+
private updateCollapsedSections(toggle = this.state.walkthroughCollapsed) {
154+
document.getElementById('section-walkthrough')!.classList.toggle('is-collapsed', toggle);
155+
}
156+
132157
private updateState() {
133158
this.updateNoRepo();
134159
this.updatePromos();
135160
this.updateOrgSettings();
161+
this.updateCollapsedSections();
136162
}
137163
}
138164

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

Lines changed: 41 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,30 @@ <h1 class="welcome__brand"><gitlens-logo></gitlens-logo> <small>Git Supercharged
7474
</div>
7575
</section>
7676
<section class="welcome__section">
77-
<h2>Powerful Features</h2>
77+
<div class="h-show-small">
78+
<h2>Get Started</h2>
79+
<p>
80+
GitLens is <strong>powerful</strong>, <strong>feature rich</strong>, and highly
81+
<strong>customizable</strong> to meet your needs. Check out our tutorial video and walkthrough
82+
to get started.
83+
</p>
84+
<p class="button-container">
85+
<span class="button-group button-group--single">
86+
<gl-button appearance="secondary" full href="command:gitlens.getStarted"
87+
><code-icon icon="info"></code-icon> Get Started Walkthrough</gl-button
88+
>
89+
</span>
90+
</p>
91+
92+
<h2>Tutorial Video</h2>
93+
<p class="button-container">
94+
<span class="button-group button-group--single">
95+
<video-button></video-button>
96+
</span>
97+
</p>
98+
</div>
99+
100+
<h2 class="h-large-mt-0">Powerful Features</h2>
78101
<div class="welcome__gates">
79102
<p>All features are free to use on all repos, <strong>except</strong> for features,</p>
80103
<p>
@@ -442,22 +465,24 @@ <h3><code-icon icon="beaker" size="20"></code-icon> GitKraken Labs</h3>
442465
</section>
443466

444467
<section class="welcome__section welcome__section-bar">
445-
<h2>Get Started</h2>
446-
<p>
447-
GitLens is <strong>powerful</strong>, <strong>feature rich</strong>, and highly
448-
<strong>customizable</strong> to meet your needs. Check out our tutorial video and walkthrough to
449-
get started.
450-
</p>
468+
<div class="h-show-large">
469+
<h2>Get Started</h2>
470+
<p>
471+
GitLens is <strong>powerful</strong>, <strong>feature rich</strong>, and highly
472+
<strong>customizable</strong> to meet your needs. Check out our tutorial video and walkthrough
473+
to get started.
474+
</p>
475+
<p>
476+
<gl-button appearance="secondary" full href="command:gitlens.getStarted"
477+
><code-icon icon="info"></code-icon> Get Started Walkthrough</gl-button
478+
>
479+
</p>
451480

452-
<h2>Tutorial Video</h2>
453-
<nav class="welcome__starting-nav" aria-label="Getting started links">
454-
<video-button></video-button>
455-
<span
456-
><gl-button appearance="secondary" href="command:gitlens.getStarted"
457-
>Get Started Walkthrough</gl-button
458-
></span
459-
>
460-
</nav>
481+
<h2>Tutorial Video</h2>
482+
<nav class="welcome__starting-nav" aria-label="Getting started links">
483+
<video-button></video-button>
484+
</nav>
485+
</div>
461486

462487
<div id="try-pro">
463488
<h2>Try Pro ✨</h2>

0 commit comments

Comments
 (0)