wlxsp
/
test1
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Updates Focus view content 

- adds preview badge to header
- updates account messaging
- updates remote overlay content
main
Keith Daulton 1 year ago
committed by Keith Daulton
parent
c8a7097600
commit
70fd4432f9
4 changed files with 94 additions and 22 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +15
    -5
      src/webviews/apps/plus/workspaces/components/plus-content.ts
  2. +31
    -5
      src/webviews/apps/plus/workspaces/workspaces.html
  3. +47
    -6
      src/webviews/apps/plus/workspaces/workspaces.scss
  4. +1
    -6
      src/webviews/apps/plus/workspaces/workspaces.ts

+ 15
- 5
src/webviews/apps/plus/workspaces/components/plus-content.ts View File

@ -6,6 +6,7 @@ import { elementBase } from '../../../shared/components/styles/base';
import '../../../shared/components/code-icon'; import '../../../shared/components/code-icon';
const template = html<PlusContent>` const template = html<PlusContent>`
${when(x => x.state !== SubscriptionState.Free, html<PlusContent>` <hr class="divider" /> `)}
<div class="main"> <div class="main">
${when( ${when(
x => x.state === SubscriptionState.Free, x => x.state === SubscriptionState.Free,
@ -31,7 +32,7 @@ const template = html`
<h3>Extend Your GitLens Pro Trial</h3> <h3>Extend Your GitLens Pro Trial</h3>
<p> <p>
Your free 3-day GitLens Pro trial has ended, extend your trial to get an additional free 7-days of Your free 3-day GitLens Pro trial has ended, extend your trial to get an additional free 7-days of
GitLens+ features on private repos.
the Focus View and other GitLens+ features on private repos.
</p> </p>
<p class="mb-1"> <p class="mb-1">
<vscode-button @click="${x => x.fireAction('command:gitlens.plus.loginOrSignUp')}" <vscode-button @click="${x => x.fireAction('command:gitlens.plus.loginOrSignUp')}"
@ -45,8 +46,8 @@ const template = html`
html<PlusContent>` html<PlusContent>`
<h3>GitLens Pro Trial Expired</h3> <h3>GitLens Pro Trial Expired</h3>
<p> <p>
Your GitLens Pro trial has ended, please upgrade to GitLens Pro to continue to use GitLens+ features
on private repos.
Your GitLens Pro trial has ended, please upgrade to GitLens Pro to continue to use the Focus View
and other GitLens+ features on private repos.
</p> </p>
<p class="mb-1"> <p class="mb-1">
<vscode-button @click="${x => x.fireAction('command:gitlens.plus.purchase')}" <vscode-button @click="${x => x.fireAction('command:gitlens.plus.purchase')}"
@ -60,7 +61,8 @@ const template = html`
html<PlusContent>` html<PlusContent>`
<h3>Please verify your email</h3> <h3>Please verify your email</h3>
<p class="alert__message"> <p class="alert__message">
Before you can also use GitLens+ features on private repos, please verify your email address.
Before you can also use the Focus View and other GitLens+ features on private repos, please verify
your email address.
</p> </p>
<p class="mb-1"> <p class="mb-1">
<vscode-button @click="${x => x.fireAction('command:gitlens.plus.resendVerification')}" <vscode-button @click="${x => x.fireAction('command:gitlens.plus.resendVerification')}"
@ -129,7 +131,7 @@ const styles = css`
} }
.mb-1 { .mb-1 {
margin-bottom: 0.4rem;
margin-bottom: 0.6rem;
} }
.mb-0 { .mb-0 {
margin-bottom: 0; margin-bottom: 0;
@ -143,6 +145,14 @@ const styles = css`
.secondary { .secondary {
font-size: 1.4rem; font-size: 1.4rem;
} }
.divider {
display: block;
height: 0;
margin: 0.6rem;
border: none;
border-top: 0.1rem solid var(--vscode-menu-separatorBackground);
}
`; `;
@customElement({ name: 'plus-content', template: template, styles: styles }) @customElement({ name: 'plus-content', template: template, styles: styles })

+ 31
- 5
src/webviews/apps/plus/workspaces/workspaces.html View File

@ -6,6 +6,7 @@
<body class="preload app"> <body class="preload app">
<header class="app__header" id="header"> <header class="app__header" id="header">
<span class="badge">Preview</span>
<account-badge id="account-badge"></account-badge> <account-badge id="account-badge"></account-badge>
</header> </header>
@ -212,8 +213,8 @@
<div class="overlay__content"> <div class="overlay__content">
<h2>Focus View ✨</h2> <h2>Focus View ✨</h2>
<p> <p>
This GitLens+ feature gives you a comprehensive list of all your most important work across your
connected GitHub repos:
This GitLens+ feature provides you with a comprehensive list of all your most important work across
your connected GitHub repos:
</p> </p>
<ul> <ul>
<li> <li>
@ -232,16 +233,41 @@
<div class="overlay" id="connect-overlay" hidden> <div class="overlay" id="connect-overlay" hidden>
<div class="overlay__content"> <div class="overlay__content">
<p>Your GitHub remotes are not connected.</p>
<h2>Focus View ✨</h2>
<p>
This GitLens+ feature provides you with a comprehensive list of all your most important work across
your connected GitHub repos:
</p>
<ul>
<li>
<strong>My Pull Requests:</strong> shows all GitHub PRs opened by you, assigned to you, or
awaiting your review.
</li>
<li>
<strong>My Issues:</strong> shows all issues created by you, assigned to you, or that mention
you.
</li>
</ul>
<div class="overlay__actions">
<hr class="divider" />
<h3>GitHub remotes are not connected</h3>
<p>
This enables access to Pull Requests and Issues in the Focus View as well as provide additional
information inside hovers and the Commit Details view, such as auto-linked issues and pull
requests and avatars.
</p>
<vscode-button data-action="command:gitlens.connectRemoteProvider">Connect Now</vscode-button>
<vscode-button data-action="command:gitlens.connectRemoteProvider">Connect to GitHub</vscode-button>
</div>
</div> </div>
</div> </div>
#{endOfBody} #{endOfBody}
<style nonce="#{cspNonce}"> <style nonce="#{cspNonce}">
:root { :root {
--gl-plus-bg: url(#{webroot}/media/gitlens-backdrop.webp);
--gl-plus-bg: url(#{webroot}/media/gitlens-backdrop-opacity.webp);
} }
</style> </style>
<style nonce="#{cspNonce}"> <style nonce="#{cspNonce}">

+ 47
- 6
src/webviews/apps/plus/workspaces/workspaces.scss View File

@ -92,7 +92,9 @@ code-icon {
font-size: inherit; font-size: inherit;
} }
h2 {
h2,
h3,
p {
margin-top: 0; margin-top: 0;
} }
@ -186,6 +188,7 @@ h2 {
.workspace-section { .workspace-section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.8rem;
&__header { &__header {
flex: none; flex: none;
@ -193,6 +196,11 @@ h2 {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0.4rem 0;
h2 {
margin: 0;
}
} }
&__content { &__content {
@ -211,14 +219,24 @@ h2 {
&__header { &__header {
flex: none; flex: none;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.4rem 2rem;
margin: {
left: -2rem;
right: -2rem;
}
text-align: right; text-align: right;
background-color: var(--background-05);
} }
&__content { &__content {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
display: flex;
flex-direction: row;
// display: flex;
// flex-direction: row;
overflow: hidden; overflow: hidden;
gap: 1rem; gap: 1rem;
} }
@ -228,10 +246,11 @@ h2 {
} }
&__main { &__main {
flex: 1 1 auto;
// flex: 1 1 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
height: 100%;
} }
&__section { &__section {
min-height: 15rem; min-height: 15rem;
@ -382,9 +401,11 @@ h2 {
&__content { &__content {
max-width: 600px; max-width: 600px;
background: var(--color-hover-background) no-repeat left top;
background: var(--background-05) no-repeat left top;
background-image: var(--gl-plus-bg); background-image: var(--gl-plus-bg);
border: 1px solid var(--color-hover-border);
background-position: left -20rem center;
background-size: 100%;
border: 1px solid var(--background-15);
border-radius: 0.4rem; border-radius: 0.4rem;
margin: 1rem; margin: 1rem;
padding: 1.2rem; padding: 1.2rem;
@ -397,4 +418,24 @@ h2 {
align-self: center !important; align-self: center !important;
} }
} }
&__actions {
text-align: center;
margin: 3rem 0;
}
}
.divider {
display: block;
height: 0;
margin: 0.6rem;
border: none;
border-top: 0.1rem solid var(--vscode-menu-separatorBackground);
}
.badge {
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
color: var(--color-foreground);
} }

+ 1
- 6
src/webviews/apps/plus/workspaces/workspaces.ts View File

@ -196,13 +196,8 @@ export class WorkspacesApp extends App {
connectOverlay.setAttribute('hidden', 'true'); connectOverlay.setAttribute('hidden', 'true');
} }
// const badgeEl = document.getElementById('account-badge')! as AccountBadge;
const badgeEl = document.createElement('account-badge') as AccountBadge;
const badgeEl = document.getElementById('account-badge')! as AccountBadge;
badgeEl.subscription = this.state.subscription; badgeEl.subscription = this.state.subscription;
const headerEl = document.getElementById('header')!;
headerEl.innerHTML = '';
headerEl.append(badgeEl);
} }
onSelectTab(e: Event, callback?: (val?: string) => void) { onSelectTab(e: Event, callback?: (val?: string) => void) {

Write Preview
Loading…
Cancel
Save