diff --git a/src/webviews/apps/home/components/preview-banner.ts b/src/webviews/apps/home/components/preview-banner.ts index edde5782b74ce..8a501394d2033 100644 --- a/src/webviews/apps/home/components/preview-banner.ts +++ b/src/webviews/apps/home/components/preview-banner.ts @@ -66,28 +66,18 @@ export class GlPreviewBanner extends LitElement { private _button!: HTMLButtonElement; override render() { - if (this._state.previewEnabled === true) { + if (this._state.previewEnabled !== true) { return html` - -

Welcome to the new Home View!

-

- We're reinventing GitLens' Home to be a more helpful daily workflow tool. We'll continue to - refine this view and welcome your - feedback. + + +

+ Switch to the new Home View!
+ We're reimagining GitLens' Home to be a more helpful daily workflow tool. We'll continue to + refine this view and welcome your feedback.

- - this.togglePreview()} full - > Revert to Old Home View - - this.onClose()} - > -
+ `; } @@ -96,21 +86,31 @@ export class GlPreviewBanner extends LitElement { } return html` - - -

- Switch to the new Home View!
- We're reinventing GitLens' Home to be a more helpful daily workflow tool. We'll continue to refine - this view and welcome your feedback. + +

Welcome to the new Home View!

+

+ We're reimagining GitLens' Home to be a more helpful daily workflow tool. We'll continue to refine + this view and welcome your + feedback.

-
+ + this.togglePreview(true)} full + > Revert to Old Home View + + this.onClose()} + > + `; } - private togglePreview() { + private togglePreview(dismiss = false) { this._ipc.sendCommand(TogglePreviewEnabledCommand); + + if (dismiss) { + this.onClose(); + } } private onClose() { diff --git a/src/webviews/apps/plus/home/components/active-work.ts b/src/webviews/apps/plus/home/components/active-work.ts index 6752e01711a99..06375a139e4ec 100644 --- a/src/webviews/apps/plus/home/components/active-work.ts +++ b/src/webviews/apps/plus/home/components/active-work.ts @@ -2,6 +2,7 @@ import { consume } from '@lit/context'; import { SignalWatcher } from '@lit-labs/signals'; import { css, html, LitElement, nothing } from 'lit'; import { customElement, state } from 'lit/decorators.js'; +import { ifDefined } from 'lit/directives/if-defined.js'; import { when } from 'lit/directives/when.js'; import type { GitTrackingState } from '../../../../../git/models/branch'; import { createWebviewCommandLink } from '../../../../../system/webview'; @@ -79,10 +80,10 @@ export class GlActiveWork extends SignalWatcher(LitElement) { `; } - return this.renderComplete(this._overviewState.state); + return this.renderComplete(this._overviewState.state, true); } - private renderComplete(overview: Overview) { + private renderComplete(overview: Overview, isFetching = false) { const repo = overview?.repository; const activeBranches = repo?.branches?.active; if (!activeBranches) return html`None`; @@ -95,6 +96,8 @@ export class GlActiveWork extends SignalWatcher(LitElement) { () => html``, )} - ${activeBranches.map(branch => this.renderRepoBranchCard(branch, repo.path))} + ${activeBranches.map(branch => this.renderRepoBranchCard(branch, repo.path, isFetching))} `; } - private renderRepoBranchCard(branch: GetOverviewBranch, repo: string) { + private renderRepoBranchCard(branch: GetOverviewBranch, repo: string, isFetching: boolean) { const { name, pr, state, workingTreeState, upstream } = branch; return html` @@ -117,7 +120,7 @@ export class GlActiveWork extends SignalWatcher(LitElement) { ${name}

- ${when(state, () => this.renderBranchStateActions(state, upstream))} + ${when(state, () => this.renderBranchStateActions(state, upstream, isFetching))} ${when(pr, pr => { return html`

@@ -179,14 +182,22 @@ export class GlActiveWork extends SignalWatcher(LitElement) { return html`${actions}`; } - private renderBranchStateActions(state?: GitTrackingState, upstream?: { name: string; missing: boolean }) { + private renderBranchStateActions( + state?: GitTrackingState, + upstream?: { name: string; missing: boolean }, + isFetching?: boolean, + ) { if (upstream?.missing !== false) { + const publishTooltip = upstream?.name ? `Publish branch to ${upstream.name}` : 'Publish branch'; return html`

Publish Branch @@ -201,6 +212,8 @@ export class GlActiveWork extends SignalWatcher(LitElement) { return html`
- ${this.label} + ${this.label}${when(!this.isFetching, () => html` (${this.branches.length})`)} ${this.branches.map( branch => html``, diff --git a/src/webviews/apps/plus/home/components/branch-threshold-filter.ts b/src/webviews/apps/plus/home/components/branch-threshold-filter.ts index 1d0cf3c901eb1..ec7523d3e820b 100644 --- a/src/webviews/apps/plus/home/components/branch-threshold-filter.ts +++ b/src/webviews/apps/plus/home/components/branch-threshold-filter.ts @@ -11,19 +11,22 @@ export const selectStyles = css` background: none; outline: none; border: none; - cursor: pointer; - color: var(--color-foreground--50); text-decoration: none !important; font-weight: 500; + color: var(--color-foreground--25); } .select option { color: var(--vscode-foreground); background-color: var(--vscode-dropdown-background); } - .select:focus { + .select:not(:disabled) { + cursor: pointer; + color: var(--color-foreground--50); + } + .select:not(:disabled):focus { outline: 1px solid var(--color-focus-border); } - .select:hover { + .select:not(:disabled):hover { color: var(--vscode-foreground); text-decoration: underline !important; } @@ -32,6 +35,7 @@ export const selectStyles = css` export abstract class GlObjectSelect extends GlElement { static override readonly styles = [selectStyles]; + @property({ type: Boolean }) disabled: boolean = false; @property({ type: String }) value?: V; @property({ type: Array }) options?: T[]; @@ -44,7 +48,7 @@ export abstract class GlObjectSelect extends return; } return html` - this.onChange?.(e)}> ${repeat(this.options, item => { const value = this.getValue(item); const label = this.getLabel(item); diff --git a/src/webviews/apps/plus/home/components/launchpad.ts b/src/webviews/apps/plus/home/components/launchpad.ts index db9adcb535cc9..4097cdda96296 100644 --- a/src/webviews/apps/plus/home/components/launchpad.ts +++ b/src/webviews/apps/plus/home/components/launchpad.ts @@ -148,6 +148,20 @@ export class GlLaunchpad extends SignalWatcher(LitElement) { } private renderSummaryResult() { + if (this._homeState.hasAnyIntegrationConnected === false) { + return html``; + } + return this._summaryState.render({ pending: () => this.renderPending(), complete: summary => this.renderSummary(summary), diff --git a/src/webviews/apps/plus/home/components/overview.ts b/src/webviews/apps/plus/home/components/overview.ts index d59e11a45f5c1..85bade0993396 100644 --- a/src/webviews/apps/plus/home/components/overview.ts +++ b/src/webviews/apps/plus/home/components/overview.ts @@ -66,7 +66,7 @@ export class GlOverview extends SignalWatcher(LitElement) { `; } - return this.renderComplete(this._overviewState.state); + return this.renderComplete(this._overviewState.state, true); } @consume({ context: ipcContext }) @@ -82,13 +82,14 @@ export class GlOverview extends SignalWatcher(LitElement) { }); } - private renderComplete(overview: Overview) { + private renderComplete(overview: Overview, isFetching = false) { if (overview == null) return nothing; const { repository } = overview; return html`
@@ -103,6 +104,7 @@ export class GlOverview extends SignalWatcher(LitElement) { value: OverviewRecentThreshold; label: string; }[]} + .disabled=${isFetching} .value=${this._overviewState.filter.recent?.threshold} > diff --git a/src/webviews/apps/shared/components/button.ts b/src/webviews/apps/shared/components/button.ts index 8a6d1e5b46400..4e24377a5dcbd 100644 --- a/src/webviews/apps/shared/components/button.ts +++ b/src/webviews/apps/shared/components/button.ts @@ -150,6 +150,7 @@ export class GlButton extends LitElement { gl-tooltip { height: 100%; + width: 100%; display: inline-flex; align-items: center; justify-content: center; diff --git a/src/webviews/apps/shared/components/overlays/tooltip.ts b/src/webviews/apps/shared/components/overlays/tooltip.ts index 55e80d3ccdd50..d2e05d78ac34f 100644 --- a/src/webviews/apps/shared/components/overlays/tooltip.ts +++ b/src/webviews/apps/shared/components/overlays/tooltip.ts @@ -82,6 +82,9 @@ export class GlTooltip extends LitElement { }); const target: any = this.shadowRoot?.querySelector('sl-tooltip')?.shadowRoot; + // TODO: sometimes sl-tooltip might not be upgraded yet, need to look at watching for the upgrade + if (!target) return; + this.observer.observe(target, { attributes: true, attributeFilter: ['data-current-placement'], diff --git a/src/webviews/home/homeWebview.ts b/src/webviews/home/homeWebview.ts index 66c5ecadc672a..7451daa8db3c5 100644 --- a/src/webviews/home/homeWebview.ts +++ b/src/webviews/home/homeWebview.ts @@ -469,7 +469,17 @@ export class HomeWebviewProvider implements WebviewProvider this.onWipChanged(repo)), repo.onDidChange(e => { - if (e.changed(RepositoryChange.Index, RepositoryChangeComparisonMode.Any)) { + if ( + e.changed( + RepositoryChange.Unknown, + RepositoryChange.Index, + RepositoryChange.Status, + RepositoryChange.Remotes, + RepositoryChange.Config, + RepositoryChange.Heads, + RepositoryChangeComparisonMode.Any, + ) + ) { this.onWipChanged(repo); } }),