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

Reworks gate components

main
Eric Amodio 1 year ago
parent
fdc44e3dc8
commit
b46a6a8668
7 changed files with 239 additions and 194 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +26
    -6
      src/webviews/apps/plus/shared/components/feature-gate-plus-state.ts
  2. +4
    -4
      src/webviews/apps/plus/timeline/timeline.html
  3. +6
    -6
      src/webviews/apps/plus/timeline/timeline.ts
  4. +10
    -4
      src/webviews/apps/shared/components/button.ts
  5. +31
    -12
      src/webviews/apps/shared/components/feature-gate.ts

src/webviews/apps/plus/shared/components/plus-feature-gate.ts → src/webviews/apps/plus/shared/components/feature-gate-plus-state.ts View File

@ -4,8 +4,8 @@ import { SubscriptionState } from '../../../../../subscription';
import '../../../shared/components/button';
import { linkStyles } from './vscode.css';
@customElement('plus-feature-gate')
export class PlusFeatureGate extends LitElement {
@customElement('gk-feature-gate-plus-state')
export class FeatureGatePlusState extends LitElement {
static override styles = [
linkStyles,
css`
@ -13,28 +13,48 @@ export class PlusFeatureGate extends LitElement {
container-type: inline-size;
}
gk-button {
:host([appearance='welcome']) gk-button {
width: 100%;
max-width: 300px;
}
@container (max-width: 640px) {
gk-button {
@container (max-width: 600px) {
:host([appearance='welcome']) gk-button {
display: block;
margin-left: auto;
margin-right: auto;
}
}
:host([appearance='alert']) gk-button {
display: block;
margin-left: auto;
margin-right: auto;
}
:host-context([appearance='alert']) p:first-child {
margin-top: 0;
}
:host-context([appearance='alert']) p:last-child {
margin-bottom: 0;
}
`,
];
@property({ type: String })
appearance?: 'alert' | 'welcome';
@property({ type: Number })
@property({ attribute: false, type: Number })
state?: SubscriptionState;
override render() {
if (this.state == null) {
this.hidden = true;
return undefined;
}
this.hidden = false;
const appearance = (this.appearance ?? 'alert') === 'alert' ? 'alert' : nothing;
switch (this.state) {

+ 4
- 4
src/webviews/apps/plus/timeline/timeline.html View File

@ -10,12 +10,12 @@
</head>
<body class="preload" data-placement="#{placement}">
<plus-feature-welcome class="scrollable">;
<p>
<gk-feature-gate id="subscription-gate" class="scrollable";
><p slot="feature">
Visualize the evolution of a file, including when changes were made, how large they were, and who made
them.
</p>
</plus-feature-welcome>
</p></gk-feature-gate
>
<div class="container">
<progress-indicator id="spinner" position="top" active="true"></progress-indicator>
<section id="header" class="header">

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

@ -10,14 +10,14 @@ import {
import type { IpcMessage } from '../../../protocol';
import { onIpc } from '../../../protocol';
import { App } from '../../shared/appBase';
import type { FeatureGate } from '../../shared/components/feature-gate';
import { DOM } from '../../shared/dom';
import type { PlusFeatureWelcome } from '../shared/components/plus-feature-welcome';
import type { DataPointClickEvent } from './chart';
import { TimelineChart } from './chart';
import '../../shared/components/code-icon';
import '../../shared/components/progress';
import '../../shared/components/button';
import '../shared/components/plus-feature-welcome';
import '../../shared/components/feature-gate';
export class TimelineApp extends App<State> {
private _chart: TimelineChart | undefined;
@ -86,10 +86,10 @@ export class TimelineApp extends App {
}
private updateState(): void {
const $welcome = document.getElementsByTagName('plus-feature-welcome')?.[0] as PlusFeatureWelcome;
if ($welcome != null) {
$welcome.state = this.state.access.subscription.current.state;
$welcome.allowed = this.state.access.allowed === true || this.state.uri == null;
const $gate = document.getElementById('subscription-gate')! as FeatureGate;
if ($gate != null) {
$gate.state = this.state.access.subscription.current.state;
$gate.visible = this.state.access.allowed !== true && this.state.uri != null;
}
if (this._chart == null) {

+ 10
- 4
src/webviews/apps/shared/components/button.ts View File

@ -13,13 +13,14 @@ export class GKButton extends LitElement {
--button-background: var(--vscode-button-background);
--button-hover-background: var(--vscode-button-hoverBackground);
--button-padding: 0.4rem 1.1rem;
--button-line-height: 1.694;
--button-border: var(--vscode-button-border, transparent);
display: inline-block;
border: none;
font-family: inherit;
font-size: inherit;
line-height: 1.694;
line-height: var(--button-line-height);
text-align: center;
text-decoration: none;
user-select: none;
@ -68,7 +69,7 @@ export class GKButton extends LitElement {
--button-foreground: var(--vscode-foreground);
--button-hover-background: var(--vscode-toolbar-hoverBackground);
--button-padding: 0.45rem 0.4rem 0.14rem 0.4rem;
line-height: 1.64;
--button-line-height: 1.64;
}
:host([appearance='alert']) {
@ -76,8 +77,13 @@ export class GKButton extends LitElement {
--button-border: var(--color-alert-infoBorder);
--button-foreground: var(--color-button-foreground);
--button-hover-background: var(--color-alert-infoBorder);
--button-padding: 0.4rem;
line-height: 1.64;
--button-line-height: 1.64;
width: max-content;
}
:host([appearance='alert'][href]) > a {
display: block;
width: max-content;
}
`,
];

src/webviews/apps/plus/shared/components/plus-feature-welcome.ts → src/webviews/apps/shared/components/feature-gate.ts View File

@ -1,10 +1,10 @@
import { css, html, LitElement, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { isSubscriptionStatePaidOrTrial, SubscriptionState } from '../../../../../subscription';
import './plus-feature-gate';
import { isSubscriptionStatePaidOrTrial, SubscriptionState } from '../../../../subscription';
import '../../plus/shared/components/feature-gate-plus-state';
@customElement('plus-feature-welcome')
export class PlusFeatureWelcome extends LitElement {
@customElement('gk-feature-gate')
export class FeatureGate extends LitElement {
static override styles = css`
:host {
--background: var(--vscode-sideBar-background);
@ -32,6 +32,14 @@ export class PlusFeatureWelcome extends LitElement {
padding: 0 2rem;
}
::slotted(p) {
margin: revert !important;
}
::slotted(p:first-child) {
margin-top: 0 !important;
}
section {
--section-foreground: var(--foreground);
--section-background: var(--background);
@ -60,23 +68,29 @@ export class PlusFeatureWelcome extends LitElement {
max-width: 600px;
max-height: min-content;
margin: 0.2rem auto;
padding: 0 1.3rem;
padding: 1.3rem;
}
`;
@property({ type: Boolean })
allowed?: boolean;
:host-context(body[data-placement='editor']) section ::slotted(gk-button) {
display: block;
margin-left: auto;
margin-right: auto;
}
`;
@property({ type: Number })
@property({ attribute: false, type: Number })
state?: SubscriptionState;
@property({ type: Boolean })
visible?: boolean;
@property({ reflect: true })
get appearance() {
return (document.body.getAttribute('data-placement') ?? 'editor') === 'editor' ? 'alert' : 'welcome';
}
override render() {
if (this.allowed || this.state == null || isSubscriptionStatePaidOrTrial(this.state)) {
if (!this.visible || (this.state != null && isSubscriptionStatePaidOrTrial(this.state))) {
this.hidden = true;
return undefined;
}
@ -84,8 +98,13 @@ export class PlusFeatureWelcome extends LitElement {
this.hidden = false;
return html`
<section>
<slot hidden=${this.state === SubscriptionState.Free ? nothing : ''}></slot>
<plus-feature-gate appearance=${this.appearance} state=${this.state}></plus-feature-gate>
<slot>
<slot name="feature" hidden=${this.state === SubscriptionState.Free ? nothing : ''}></slot>
</slot>
<gk-feature-gate-plus-state
appearance=${this.appearance}
.state=${this.state}
></gk-feature-gate-plus-state>
</section>
`;
}

Write Preview
Loading…
Cancel
Save