Skip to content

Commit 8ec0b2a

Browse files
d13d13
committed
Adds accounts view to home
1 parent fa9bb25 commit 8ec0b2a

File tree

6 files changed

+318
-232
lines changed

6 files changed

+318
-232
lines changed

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

Lines changed: 77 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -21,75 +21,6 @@
2121
data-placement="#{placement}"
2222
data-vscode-context='{ "webview": "#{webviewId}", "webviewInstance": "#{webviewInstanceId}" }'
2323
>
24-
<div class="home__nav">
25-
<gl-promo class="promo-banner promo-banner--eyebrow" id="promo" type="link"></gl-promo>
26-
<nav class="inline-nav" id="links" aria-label="Help and Resources">
27-
<div class="inline-nav__group">
28-
<gl-tooltip hoist>
29-
<a
30-
class="inline-nav__link inline-nav__link--text"
31-
href="https://help.gitkraken.com/gitlens/gitlens-release-notes-current/"
32-
aria-label="What's New"
33-
><code-icon icon="megaphone"></code-icon><span>What's New</span></a
34-
>
35-
<span slot="content">What's New</span>
36-
</gl-tooltip>
37-
<gl-tooltip hoist>
38-
<a
39-
class="inline-nav__link inline-nav__link--text"
40-
href="https://help.gitkraken.com/gitlens/gitlens-home/"
41-
aria-label="Help Center"
42-
><code-icon icon="question"></code-icon><span>Help</span></a
43-
>
44-
<span slot="content">Help Center</span>
45-
</gl-tooltip>
46-
<gl-tooltip hoist>
47-
<a
48-
class="inline-nav__link inline-nav__link--text"
49-
href="https://github.com/gitkraken/vscode-gitlens/issues"
50-
aria-label="Feedback"
51-
><code-icon icon="feedback"></code-icon><span>Feedback</span></a
52-
>
53-
<span slot="content">Feedback</span>
54-
</gl-tooltip>
55-
</div>
56-
<div class="inline-nav__group">
57-
<gl-tooltip hoist>
58-
<a
59-
class="inline-nav__link"
60-
href="https://github.com/gitkraken/vscode-gitlens/discussions"
61-
aria-label="GitHub Discussions"
62-
><code-icon icon="comment-discussion"></code-icon
63-
></a>
64-
<span slot="content">GitHub Discussions</span>
65-
</gl-tooltip>
66-
<gl-tooltip hoist>
67-
<a
68-
class="inline-nav__link"
69-
href="https://github.com/gitkraken/vscode-gitlens"
70-
aria-label="GitHub Repo"
71-
><code-icon icon="github"></code-icon
72-
></a>
73-
<span slot="content">GitHub Repo</span>
74-
</gl-tooltip>
75-
<gl-tooltip hoist>
76-
<a class="inline-nav__link" href="https://twitter.com/gitlens" aria-label="@gitlens on Twitter"
77-
><code-icon icon="twitter"></code-icon
78-
></a>
79-
<span slot="content">@gitlens on Twitter</span>
80-
</gl-tooltip>
81-
<gl-tooltip hoist>
82-
<a
83-
class="inline-nav__link"
84-
href="https://gitkraken.com/gitlens?utm_source=gitlens-extension&utm_medium=in-app-links&utm_campaign=gitlens-logo-links"
85-
aria-label="GitLens Website"
86-
><code-icon icon="globe"></code-icon
87-
></a>
88-
<span slot="content">GitLens Website</span>
89-
</gl-tooltip>
90-
</div>
91-
</nav>
92-
</div>
9324
<header class="home__header" id="header" hidden>
9425
<div id="no-repo-alert" class="alert alert--info mb-0" aria-hidden="true" hidden>
9526
<h1 class="alert__title">No repository detected</h1>
@@ -483,6 +414,83 @@ <h2 class="nav-list__title t-eyebrow sticky">Companion Tools</h2>
483414
</nav>
484415
</main>
485416

417+
<footer class="home__footer">
418+
<account-content id="account-content">
419+
<div class="home__nav">
420+
<gl-promo class="promo-banner promo-banner--eyebrow" id="promo" type="link"></gl-promo>
421+
<nav class="inline-nav" id="links" aria-label="Help and Resources">
422+
<div class="inline-nav__group">
423+
<gl-tooltip hoist>
424+
<a
425+
class="inline-nav__link inline-nav__link--text"
426+
href="https://help.gitkraken.com/gitlens/gitlens-release-notes-current/"
427+
aria-label="What's New"
428+
><code-icon icon="megaphone"></code-icon><span>What's New</span></a
429+
>
430+
<span slot="content">What's New</span>
431+
</gl-tooltip>
432+
<gl-tooltip hoist>
433+
<a
434+
class="inline-nav__link inline-nav__link--text"
435+
href="https://help.gitkraken.com/gitlens/gitlens-home/"
436+
aria-label="Help Center"
437+
><code-icon icon="question"></code-icon><span>Help</span></a
438+
>
439+
<span slot="content">Help Center</span>
440+
</gl-tooltip>
441+
<gl-tooltip hoist>
442+
<a
443+
class="inline-nav__link inline-nav__link--text"
444+
href="https://github.com/gitkraken/vscode-gitlens/issues"
445+
aria-label="Feedback"
446+
><code-icon icon="feedback"></code-icon><span>Feedback</span></a
447+
>
448+
<span slot="content">Feedback</span>
449+
</gl-tooltip>
450+
</div>
451+
<div class="inline-nav__group">
452+
<gl-tooltip hoist>
453+
<a
454+
class="inline-nav__link"
455+
href="https://github.com/gitkraken/vscode-gitlens/discussions"
456+
aria-label="GitHub Discussions"
457+
><code-icon icon="comment-discussion"></code-icon
458+
></a>
459+
<span slot="content">GitHub Discussions</span>
460+
</gl-tooltip>
461+
<gl-tooltip hoist>
462+
<a
463+
class="inline-nav__link"
464+
href="https://github.com/gitkraken/vscode-gitlens"
465+
aria-label="GitHub Repo"
466+
><code-icon icon="github"></code-icon
467+
></a>
468+
<span slot="content">GitHub Repo</span>
469+
</gl-tooltip>
470+
<gl-tooltip hoist>
471+
<a
472+
class="inline-nav__link"
473+
href="https://twitter.com/gitlens"
474+
aria-label="@gitlens on Twitter"
475+
><code-icon icon="twitter"></code-icon
476+
></a>
477+
<span slot="content">@gitlens on Twitter</span>
478+
</gl-tooltip>
479+
<gl-tooltip hoist>
480+
<a
481+
class="inline-nav__link"
482+
href="https://gitkraken.com/gitlens?utm_source=gitlens-extension&utm_medium=in-app-links&utm_campaign=gitlens-logo-links"
483+
aria-label="GitLens Website"
484+
><code-icon icon="globe"></code-icon
485+
></a>
486+
<span slot="content">GitLens Website</span>
487+
</gl-tooltip>
488+
</div>
489+
</nav>
490+
</div>
491+
</account-content>
492+
</footer>
493+
486494
#{endOfBody}
487495
</body>
488496
</html>

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

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ body {
6464

6565
@include scrollbars.scrollableBase();
6666

67-
:focus {
67+
:focus-visible {
6868
@include utils.focus();
6969
}
7070

@@ -130,25 +130,16 @@ ul {
130130
&__main {
131131
flex: 1;
132132
overflow: auto;
133-
padding: 0.8rem 2rem 0.4rem;
134-
135-
background:
136-
linear-gradient(var(--color-view-background) 33%, var(--color-view-background)),
137-
linear-gradient(var(--color-view-background), var(--color-view-background) 66%) 0 100%,
138-
linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)),
139-
linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) 0 100%;
140-
background-color: var(--color-view-background);
141-
background-repeat: no-repeat;
142-
background-attachment: local, local, scroll, scroll;
143-
background-size:
144-
100% 12px,
145-
100% 12px,
146-
100% 6px,
147-
100% 6px;
133+
padding: 0.8rem 2rem;
134+
135+
> *:last-child {
136+
margin-bottom: 0;
137+
}
148138
}
149139
&__nav {
150140
flex: none;
151-
padding: 0 2rem;
141+
padding: 0;
142+
margin-block: 0.6rem -1rem;
152143
}
153144

154145
&__header:not([hidden]) + &__main [data-requires='repo'] {
@@ -162,6 +153,11 @@ ul {
162153
&__header[hidden] + &__main [data-requires='norepo'] {
163154
display: none;
164155
}
156+
157+
&__footer {
158+
flex: none;
159+
// padding: 0 2rem 0.8rem;
160+
}
165161
}
166162

167163
.centered {
@@ -490,3 +486,7 @@ gl-button.is-basic {
490486
.t-eyebrow.sticky {
491487
top: -8px;
492488
}
489+
490+
account-content {
491+
margin-bottom: 0;
492+
}

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
} from '../../home/protocol';
1313
import type { IpcMessage } from '../../protocol';
1414
import { ExecuteCommand } from '../../protocol';
15+
import type { AccountContent } from '../plus/account/components/account-content';
1516
import { App } from '../shared/appBase';
1617
import type { GlFeatureBadge } from '../shared/components/feature-badge';
1718
import type { GlPromo } from '../shared/components/promo';
@@ -21,6 +22,7 @@ import '../shared/components/code-icon';
2122
import '../shared/components/feature-badge';
2223
import '../shared/components/overlays/tooltip';
2324
import '../shared/components/promo';
25+
import '../plus/account/components/account-content';
2426

2527
export class HomeApp extends App<State> {
2628
constructor() {
@@ -67,20 +69,26 @@ export class HomeApp extends App<State> {
6769

6870
case DidChangeSubscription.is(msg):
6971
this.state.subscription = msg.params.subscription;
72+
this.state.avatar = msg.params.avatar;
73+
this.state.organizationsCount = msg.params.organizationsCount;
74+
this.state.timestamp = Date.now();
7075
this.setState(this.state);
7176
this.updatePromos();
7277
this.updateSourceAndSubscription();
78+
this.updateAccountSection();
7379

7480
break;
7581

7682
case DidChangeOrgSettings.is(msg):
7783
this.state.orgSettings = msg.params.orgSettings;
84+
this.state.timestamp = Date.now();
7885
this.setState(this.state);
7986
this.updateOrgSettings();
8087
break;
8188

8289
case DidChangeIntegrationsConnections.is(msg):
8390
this.state.hasAnyIntegrationConnected = msg.params.hasAnyIntegrationConnected;
91+
this.state.timestamp = Date.now();
8492
this.setState(this.state);
8593
this.updateIntegrations();
8694
break;
@@ -205,6 +213,17 @@ export class HomeApp extends App<State> {
205213
this.updateOrgSettings();
206214
this.updateCollapsedSections();
207215
this.updateIntegrations();
216+
this.updateAccountSection();
217+
}
218+
219+
private updateAccountSection() {
220+
const { subscription, avatar, organizationsCount } = this.state;
221+
222+
const $content = document.getElementById('account-content')! as AccountContent;
223+
224+
$content.image = avatar ?? '';
225+
$content.subscription = subscription;
226+
$content.organizationsCount = organizationsCount ?? 0;
208227
}
209228
}
210229

0 commit comments

Comments
 (0)