diff --git a/package.json b/package.json index 5c7f576..a8d6b2c 100644 --- a/package.json +++ b/package.json @@ -3825,7 +3825,7 @@ "gitlens.showWelcomeOnInstall": { "type": "boolean", "default": true, - "markdownDescription": "Specifies whether to show the Welcome (Quick Setup) experience on first install", + "markdownDescription": "Specifies whether to show the Welcome experience on first install", "scope": "window", "order": 10 }, @@ -4744,7 +4744,7 @@ }, { "command": "gitlens.showWelcomePage", - "title": "Welcome (Quick Setup)", + "title": "Welcome", "category": "GitLens" }, { diff --git a/src/webviews/apps/shared/styles/normalize.scss b/src/webviews/apps/shared/styles/normalize.scss new file mode 100644 index 0000000..70a5aa7 --- /dev/null +++ b/src/webviews/apps/shared/styles/normalize.scss @@ -0,0 +1,24 @@ +html { + box-sizing: border-box; +} +*, +*::before, +*::after { + box-sizing: inherit; +} + +// avoids FOUC for elements not yet called with `define()` +:not(:defined) { + visibility: hidden; +} + +[hidden] { + display: none !important; +} + +html { + font-size: 62.5%; + text-size-adjust: 100%; + // -webkit-font-smoothing: antialiased; + // -moz-osx-font-smoothing: grayscale; +} diff --git a/src/webviews/apps/shared/styles/utils.scss b/src/webviews/apps/shared/styles/utils.scss new file mode 100644 index 0000000..62491be --- /dev/null +++ b/src/webviews/apps/shared/styles/utils.scss @@ -0,0 +1,4 @@ +@mixin focus() { + outline: 1px solid var(--vscode-focusBorder); + outline-offset: -1px; +} diff --git a/src/webviews/apps/welcome/components/card.ts b/src/webviews/apps/welcome/components/card.ts new file mode 100644 index 0000000..631d56f --- /dev/null +++ b/src/webviews/apps/welcome/components/card.ts @@ -0,0 +1,71 @@ +import { css, html, LitElement } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { focusOutline } from '../../shared/components/styles/lit/a11y.css'; +import { elementBase } from '../../shared/components/styles/lit/base.css'; + +@customElement('gk-card') +export class GKCard extends LitElement { + static override styles = [ + elementBase, + css` + :host { + display: block; + padding: 1.6rem; + background-color: var(--gk-card-background); + border-radius: var(--gk-card-radius); + } + + :host > a { + color: inherit; + text-decoration: none; + } + + :host([tabindex]:not([tabindex='-1'])) { + cursor: pointer; + } + + :host([tabindex]:not([tabindex='-1']):hover) { + background-color: var(--gk-card-hover-background); + } + + :host([tabindex]:not([tabindex='-1']):focus) { + ${focusOutline} + } + + .header { + } + + slot[name='header']::slotted(*) { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + + .content { + margin-top: 0.4rem; + } + + /* + slot:not([name])::slotted(:first-child) { + margin-top: 0; + } + slot:not([name])::slotted(:last-child) { + margin-bottom: 0; + } */ + `, + ]; + + @property() + href?: string; + + override render() { + const main = html` +
+ +
+
+ +
+ `; + return this.href != null ? html`${main}` : main; + } +} diff --git a/src/webviews/apps/welcome/components/gitlens-logo.ts b/src/webviews/apps/welcome/components/gitlens-logo.ts new file mode 100644 index 0000000..cadbba8 --- /dev/null +++ b/src/webviews/apps/welcome/components/gitlens-logo.ts @@ -0,0 +1,151 @@ +import { css, html, LitElement } from 'lit'; +import { customElement } from 'lit/decorators.js'; + +@customElement('gitlens-logo') +export class GitLensLogo extends LitElement { + static override styles = [ + css` + :host { + display: inline-block; + vertical-align: middle; + } + + :host-context(.vscode-high-contrast-light) .letters, + :host-context(.vscode-light) .letters { + fill: var(--color-foreground); + } + + svg { + vertical-align: middle; + } + `, + ]; + + override render() { + return html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; + } +} diff --git a/src/webviews/apps/welcome/components/gitlens-plus-logo.ts b/src/webviews/apps/welcome/components/gitlens-plus-logo.ts new file mode 100644 index 0000000..7b13f7d --- /dev/null +++ b/src/webviews/apps/welcome/components/gitlens-plus-logo.ts @@ -0,0 +1,337 @@ +import { css, html, LitElement } from 'lit'; +import { customElement } from 'lit/decorators.js'; + +@customElement('gitlens-plus-logo') +export class GitLensPlusLogo extends LitElement { + static override styles = [ + css` + :host { + display: inline-block; + vertical-align: middle; + } + + :host-context(.vscode-high-contrast-light) .logo-letters, + :host-context(.vscode-light) .logo-letters { + fill: var(--color-foreground); + } + + :host-context(.vscode-high-contrast-light) .tag-letters, + :host-context(.vscode-light) .tag-letters { + fill: var(--color-foreground); + } + + :host-context(.vscode-high-contrast-light) .logo-plus, + :host-context(.vscode-light) .logo-plus { + stroke: var(--color-background); + } + + :host-context(.vscode-high-contrast-light) .group0, + :host-context(.vscode-light) .group0 { + filter: url(#filter0_d_38_71181_2); + } + + :host-context(.vscode-high-contrast-light) .group1, + :host-context(.vscode-light) .group1 { + filter: url(#filter1_d_38_71181_2); + } + + :host-context(.vscode-high-contrast-light) .group2, + :host-context(.vscode-light) .group2 { + filter: url(#filter2_d_38_71181_2); + } + + svg { + vertical-align: middle; + } + `, + ]; + + override render() { + return html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; + } +} diff --git a/src/webviews/apps/welcome/welcome.html b/src/webviews/apps/welcome/welcome.html index 80adc15..6c759dd 100644 --- a/src/webviews/apps/welcome/welcome.html +++ b/src/webviews/apps/welcome/welcome.html @@ -4,7 +4,7 @@ - + - -
-
+
+

Git Supercharged

+

+ Version + Release notes -

- -

- GitLens supercharges Git inside VS Code and unlocks the untapped knowledge within each - repository. It helps you to visualize code authorship at a glance via Git blame annotations - and CodeLens, seamlessly navigate and explore Git repositories, - gain valuable insights via rich visualizations and powerful comparison commands, and so much - more. +

+
+
+
+

+ Supercharge Git and unlock untapped knowledge within your repository to better + understand, write, and review code. Focus, + collaborate, accelerate. +

+
+
+

Powerful Features

+

+ Features with a ✨ sparkle require a trial or subscription for use on privately hosted repos

-
+

+ and +

+

In-editor code annotations help you better understand how code changed and by whom

-
-
-

- Welcome to GitLens 13 -

-
- - Watch the GitLens Getting Started video - - See What's New in GitLens 13 - or read the - change log - Get Started Walkthrough - or learn about GitLens+ features -
+ + + + Eric Amodio, 3 minutes ago | 1 author (Eric Amodio) + + + + + 12 + function + gitlens + ( + code + : + string + ) + { + | + + You, 6 years ago via PR #1 • Supercharge Git + + + + -

Quick Setup

-

- GitLens is powerful, feature rich, and highly customizable to meet your - needs. Do you find CodeLens intrusive or the current line blame annotation distracting — - no problem, quickly turn them off or change how they behave using the options below. -

-

- For more options, use the interactive - GitLens settings editor -

-
+

Want more control?

+

+ Use the interactive +  GitLens Settings + editor to customize GitLens to meet your needs +

-
-
-
-
- - - - - -
-

- Adds an unobtrusive blame annotation at the end of the current line -

-
-
-
- - - - -
-
+

File Annotations

+

+ On-demand whole file annotations to see authorship, recent changes, and a heatmap + + + + + + + + + + + + + + + + +

+ + + + + + 12 + + + 13 + + + + + + + + EA + + + Hello GitLens + 6 yrs ago + + + + EA + + + Supercharged + 5 yrs ago + + + + + + + + function + gitlens + ( + code + : + string + ) + { + + + return + supercharged + ( + code + ) + ; + | + + + + -
-
-
-
- - - - - -
-

- Adds authorship CodeLens to the top of files and on code blocks -

-
-
-
- - - - +

Revision Navigation

+

+ Effortlessly explore the history of a file to see how the code evolved over time + + + + + + + + + + + + + + + + +

- - - + + + + + + - - - -
-
+ + + + + + + 12 + function + gitlens + ( + code + : + string + ) + { + + + 13 + return + supercharged + ( + code + ) + ; + + + + + 12 + function + gitlens + ( + code + : + string + ) + { + + + 13 + return + + super + DuperC + harged + + ( + code + ) + ; + | + + + + -
-
-
-
- - - - - -
-

- Adds a Git blame annotation about the current line to the status bar -

-
-
-
- - - -
-
+

Sidebar Views

+

Powerful views into Git that don't come with VS Code

+ -
-
-
-

- Views - - - -

-
+

Commit Graph ✨

+

+ The Commit Graph helps you easily visualize and keep track + of all work in progress
+

-

- GitLens views can be configured to be shown in different side bar layouts to best match your - workflow -

+ Illustration of the Commit Graph +

✨ Requires a trial or subscription to use this on privately hosted repos

+
+ + +
+

Get Started

+

+ GitLens is powerful, feature rich, and highly + customizable to meet your needs. Check out our tutorial video and walkthrough to + get started. +

+ +

Tutorial Video

+ + -
-
- - - - - -
- Example short date: - - -
+

Quick Access

+ + + -
-
- - - - - -
- Example time: - - -
-
-
- - - +

Resources

+ + + #{endOfBody}