From b4394c46cbb8a5ed1c5758d8513ea4bfd575e0ee Mon Sep 17 00:00:00 2001 From: Keith Daulton Date: Wed, 13 Nov 2024 17:33:15 -0500 Subject: [PATCH] Updates home spacing and layout --- .../apps/plus/home/components/active-work.ts | 70 +++--- .../plus/home/components/branch-section.ts | 234 ++++++++---------- .../apps/plus/home/components/launchpad.ts | 3 +- .../apps/plus/home/components/overview.ts | 77 +++--- 4 files changed, 185 insertions(+), 199 deletions(-) diff --git a/src/webviews/apps/plus/home/components/active-work.ts b/src/webviews/apps/plus/home/components/active-work.ts index 06375a139e4ec..dc32a5fc2a54e 100644 --- a/src/webviews/apps/plus/home/components/active-work.ts +++ b/src/webviews/apps/plus/home/components/active-work.ts @@ -8,7 +8,7 @@ import type { GitTrackingState } from '../../../../../git/models/branch'; import { createWebviewCommandLink } from '../../../../../system/webview'; import type { GetOverviewBranch, State } from '../../../../home/protocol'; import { stateContext } from '../../../home/context'; -import { branchCardStyles, createCommandLink, sectionHeadingStyles } from './branch-section'; +import { branchCardStyles, createCommandLink } from './branch-section'; import type { Overview, OverviewState } from './overviewState'; import { overviewStateContext } from './overviewState'; import '../../../shared/components/button'; @@ -27,22 +27,16 @@ export const activeWorkTagName = 'gl-active-work'; export class GlActiveWork extends SignalWatcher(LitElement) { static override styles = [ branchCardStyles, - sectionHeadingStyles, css` :host { display: block; margin-bottom: 2.4rem; - } - .is-end { - margin-block-end: 0; + color: var(--vscode-foreground); } .section-heading-action { --button-padding: 0.1rem 0.2rem 0; margin-block: -1rem; } - .heading-icon { - color: var(--color-foreground--50); - } `, ]; @@ -76,8 +70,10 @@ export class GlActiveWork extends SignalWatcher(LitElement) { private renderPending() { if (this._overviewState.state == null) { return html` -

- + + + + `; } return this.renderComplete(this._overviewState.state, true); @@ -89,12 +85,14 @@ export class GlActiveWork extends SignalWatcher(LitElement) { if (!activeBranches) return html`None`; return html` -

- ${overview!.repository.name} + + ${overview!.repository.name} ${when( this._homeState.repositories.openCount > 1, () => - html``, )} -

- ${activeBranches.map(branch => this.renderRepoBranchCard(branch, repo.path, isFetching))} + ${activeBranches.map(branch => this.renderRepoBranchCard(branch, repo.path, isFetching))} + `; } @@ -114,23 +112,29 @@ export class GlActiveWork extends SignalWatcher(LitElement) { const { name, pr, state, workingTreeState, upstream } = branch; return html` -

- - - - ${name} -

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

- - - - ${pr.title} - #${pr.id} -

`; - })} - ${when(workingTreeState, () => this.renderStatus(workingTreeState, state))} +
+
+

+ + + + ${name} +

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

+ + + + ${pr.title} + #${pr.id} +

+
`; + })} + ${when(workingTreeState, () => this.renderStatus(workingTreeState, state))} +
${this.renderActions(branch, repo)} `; @@ -312,7 +316,7 @@ export class GlActiveWork extends SignalWatcher(LitElement) { // } if (rendered.length) { - return html`

${rendered}

`; + return html`

${rendered}

`; } return nothing; diff --git a/src/webviews/apps/plus/home/components/branch-section.ts b/src/webviews/apps/plus/home/components/branch-section.ts index fa515fa3b649d..05d57107f7f06 100644 --- a/src/webviews/apps/plus/home/components/branch-section.ts +++ b/src/webviews/apps/plus/home/components/branch-section.ts @@ -77,33 +77,35 @@ export class GlBranchSection extends LitElement { } export const branchCardStyles = css` - .pill { - display: inline-flex; - align-items: center; - /* gap: 0.4rem; */ - padding-block: 0.1rem; - padding-inline: 0.6rem 0.4rem; - margin-left: 0.4rem; - border-radius: 0.4rem; - border: 1px solid color-mix(in lab, var(--vscode-sideBar-foreground, var(--vscode-foreground)) 100%, #000 10%); - /* background-color: var(--vscode-gitDecoration-untrackedResourceForeground); */ - } - .branch-item { position: relative; } - .branch-item__main { + .branch-item__container { + display: flex; + flex-direction: column; + gap: 0.8rem; + } + .branch-item__container > * { + margin-block: 0; + } + + .branch-item__section { display: flex; - /* flex-direction: column; */ - /* align-items: center; */ + flex-direction: column; gap: 0.4rem; - margin-block-end: 0; + } + .branch-item__section > * { + margin-block: 0; + } + + .branch-item__section--details { + font-size: 0.9em; + color: var(--vscode-descriptionForeground); } .branch-item__icon { - margin-right: 0.4rem; - color: var(--color-foreground--50); + color: var(--vscode-descriptionForeground); } .branch-item__name { @@ -123,60 +125,27 @@ export const branchCardStyles = css` text-decoration: underline; } - .branch-item__details { - display: flex; - flex-direction: column; - gap: 0.4rem; - /* align-items: center; */ - font-size: 0.9em; - color: var(--vscode-descriptionForeground); - margin-block-end: 0; - } - .branch-item__details > * { - margin-block: 0; - } - - .branch-item__main + .branch-item__main, - .branch-item__main + .branch-item__details, - .branch-item__details + .branch-item__details { - margin-block-start: 0.8rem; - } - - .branch-item__upstream, - .branch-item__pr-status, - .branch-item__commit-count { - display: flex; - align-items: center; - margin-right: 1.6rem; - } - - .branch-item__upstream code-icon, - .branch-item__pr-status code-icon, - .branch-item__commit-count code-icon { - margin-right: 0.4rem; - } - - .branch-item__more-actions { - margin-left: auto; - } - .branch-item__grouping { display: inline-flex; align-items: center; - gap: 0.2rem; + gap: 0.6rem; max-width: 100%; + margin-block: 0; } - .test1 { - display: flex; - align-items: center; - gap: 0.4rem; + .branch-item__grouping--secondary { + gap: 0.3rem; + font-size: 0.9em; + color: var(--vscode-descriptionForeground); + } + .branch-item__grouping--secondary .branch-item__name { + font-weight: normal; } - .test1 .branch-item__grouping { - flex-grow: 1; - overflow: hidden; - margin-inline-start: auto; + .branch-item__changes { + display: flex; + align-items: center; + gap: 1rem; } .branch-item__actions { @@ -190,6 +159,10 @@ export const branchCardStyles = css` .branch-item:not(:focus-within):not(:hover) .branch-item__actions { display: none; } + + .pill { + --gl-pill-border: color-mix(in srgb, transparent 80%, var(--color-foreground)); + } `; @customElement('gl-branch-card') @@ -210,43 +183,64 @@ export class GlBranchCard extends LitElement { } override render() { - const { name, pr, opened: active, timestamp: date, state, workingTreeState } = this.branch; + const { name, pr, opened: active, timestamp: date } = this.branch; return html` -

- ${this.renderIcon(this.branch)} - ${when( - pr, - pr => - html`${pr.title} #${pr.id}`, - () => html`${name}`, - )} -

-
-

- ${this.renderAvatars(this.branch)} ${this.renderStatus(workingTreeState, state)} +

+
+

+ ${this.renderIcon(this.branch)} + ${when( + pr, + pr => + html`${pr.title} #${pr.id}`, + () => html`${name}`, + )} +

+ ${this.renderPrBranch(this.branch)} +
+
+ ${this.renderChanges(this.branch)} ${when( - pr, - () => html` - ${this.renderIcon(this.branch, true)}${name} - `, + date, + () => + html`

+ +

`, )} -

- ${when( - date, - () => - html``, - )} +
${this.renderActions()} `; } + private renderPrBranch(branch: OverviewBranch) { + if (!branch.pr) { + return nothing; + } + return html` +

+ ${this.renderIcon(branch, true)}${branch.name} +

+ `; + } + + private renderChanges(branch: OverviewBranch) { + const { state, workingTreeState } = branch; + + const wip = this.renderWip(workingTreeState); + const tracking = this.renderTracking(state); + const avatars = this.renderAvatars(branch); + if (wip || tracking || avatars) { + return html`

${wip}${tracking}${avatars}

`; + } + + return nothing; + } + private renderIcon(branch: OverviewBranch, noPr?: boolean) { if (branch.pr && !noPr) { return html``; @@ -269,7 +263,7 @@ export class GlBranchCard extends LitElement { } if (contributors.length === 0) { - return nothing; + return undefined; } return html``; } - private renderStatus( - workingTreeState: { added: number; changed: number; deleted: number } | undefined, - state: GitTrackingState | undefined, - ) { - const rendered = []; + private renderWip(workingTreeState: { added: number; changed: number; deleted: number } | undefined) { if (workingTreeState?.added || workingTreeState?.changed || workingTreeState?.deleted) { - // if (workingTreeState.added) { - // rendered.push(html`${workingTreeState.added}`); - // } - // if (workingTreeState.changed) { - // rendered.push(html`${workingTreeState.changed}`); - // } - // if (workingTreeState.deleted) { - // rendered.push(html`${workingTreeState.deleted}`); - // } - - rendered.push( - html``, - ); + return html``; } + return undefined; + } + + private renderTracking(state: GitTrackingState | undefined) { if (state?.ahead || state?.behind) { // if (state.ahead) { // rendered.push(html`${state.ahead}`); @@ -310,22 +292,16 @@ export class GlBranchCard extends LitElement { // if (state.behind) { // rendered.push(html`${state.behind}`); // } - rendered.push( - html``, - ); - } - - if (rendered.length) { - // return html`${rendered}`; - return rendered; + return html``; } - return nothing; + return undefined; } private renderActions() { diff --git a/src/webviews/apps/plus/home/components/launchpad.ts b/src/webviews/apps/plus/home/components/launchpad.ts index 369adc4f5ba8a..f1d6f7162a13e 100644 --- a/src/webviews/apps/plus/home/components/launchpad.ts +++ b/src/webviews/apps/plus/home/components/launchpad.ts @@ -34,9 +34,8 @@ export class GlLaunchpad extends SignalWatcher(LitElement) { css` :host { display: block; - font-family: var(--vscode-font-family); - color: var(--vscode-foreground); margin-bottom: 2.4rem; + color: var(--vscode-foreground); } .summary { margin-bottom: 1rem; diff --git a/src/webviews/apps/plus/home/components/overview.ts b/src/webviews/apps/plus/home/components/overview.ts index 85bade0993396..212dc6c22e9b7 100644 --- a/src/webviews/apps/plus/home/components/overview.ts +++ b/src/webviews/apps/plus/home/components/overview.ts @@ -2,15 +2,16 @@ 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 { when } from 'lit/directives/when.js'; import type { GetOverviewResponse, OverviewRecentThreshold, State } from '../../../../home/protocol'; import { SetOverviewFilter } from '../../../../home/protocol'; import { stateContext } from '../../../home/context'; import { ipcContext } from '../../../shared/context'; import type { HostIpc } from '../../../shared/ipc'; -import { sectionHeadingStyles } from './branch-section'; import type { OverviewState } from './overviewState'; import { overviewStateContext } from './overviewState'; import '../../../shared/components/skeleton-loader'; +import './branch-section'; import './branch-threshold-filter'; type Overview = GetOverviewResponse; @@ -20,13 +21,10 @@ export const overviewTagName = 'gl-overview'; @customElement(overviewTagName) export class GlOverview extends SignalWatcher(LitElement) { static override styles = [ - sectionHeadingStyles, css` :host { display: block; margin-bottom: 2.4rem; - } - .repository { color: var(--vscode-foreground); } `, @@ -62,8 +60,10 @@ export class GlOverview extends SignalWatcher(LitElement) { private renderPending() { if (this._overviewState.state == null) { return html` -

- + + + + `; } return this.renderComplete(this._overviewState.state, true); @@ -86,35 +86,42 @@ export class GlOverview extends SignalWatcher(LitElement) { if (overview == null) return nothing; const { repository } = overview; return html` -
- - - - -
+ ${when( + repository.branches.recent.length > 0, + () => html` + + + + `, + )} + ${when( + repository.branches.stale.length > 0, + () => html` + + `, + )} `; } }