Skip to content

Commit

Permalink
Updates branch card layouts on home
Browse files Browse the repository at this point in the history
  • Loading branch information
d13 committed Dec 17, 2024
1 parent fbb7e61 commit 99e9b87
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 74 deletions.
2 changes: 1 addition & 1 deletion src/webviews/apps/home/home.css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const homeStyles = css`
.home__main {
flex: 1;
overflow: auto;
padding: 0.8rem 2rem;
padding: 0.8rem 1.2rem;
}
.home__main > *:last-child {
margin-bottom: 0;
Expand Down
13 changes: 9 additions & 4 deletions src/webviews/apps/plus/home/components/active-work.ts
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
?disabled=${isFetching}
class="section-heading-action"
appearance="toolbar"
tooltip="Fetch"
tooltip="Fetch All"
href=${createCommandLink('gitlens.home.fetch', undefined)}
><code-icon icon="repo-fetch"></code-icon
></gl-button>
Expand Down Expand Up @@ -220,12 +220,17 @@ export class GlActiveBranchCard extends GlBranchCardBase {
}

override render() {
return html`${this.renderBranchItem(this.renderBranchStateActions())} ${this.renderPrItem()}
${this.renderAutolinksItem()} `;
return html`
${this.renderBranchIndicator()}${this.renderBranchItem(
this.renderBranchStateActions(),
)}${this.renderPrItem()}${this.renderAutolinksItem()}
`;
}

private renderBranchStateActions() {
const { state, upstream } = this.branch;
const { state, upstream, mergeStatus, rebaseStatus } = this.branch;
if (mergeStatus != null || rebaseStatus != null) return undefined;

const isFetching = this.busy;

if (upstream?.missing !== false) {
Expand Down
51 changes: 31 additions & 20 deletions src/webviews/apps/plus/home/components/branch-card.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import type { TemplateResult } from 'lit';
import { css, html, LitElement, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { when } from 'lit/directives/when.js';
import type { Commands } from '../../../../../constants.commands';
import { createCommandLink } from '../../../../../system/commands';
Expand Down Expand Up @@ -50,6 +49,15 @@ export const branchCardStyles = css`
color: var(--vscode-descriptionForeground);
}
.branch-item__actions {
display: flex;
align-items: center;
gap: 0.8rem;
flex-direction: row;
justify-content: flex-end;
font-size: 0.9em;
}
.branch-item__icon {
color: var(--vscode-descriptionForeground);
}
Expand Down Expand Up @@ -92,8 +100,14 @@ export const branchCardStyles = css`
display: flex;
align-items: center;
gap: 1rem;
justify-content: flex-end;
}
.branch-item__changes formatted-date {
margin-inline-end: auto;
}
/*
.branch-item__actions {
position: absolute;
right: 0.4rem;
Expand All @@ -105,6 +119,7 @@ export const branchCardStyles = css`
.branch-item:not(:focus-within):not(:hover) .branch-item__actions {
${srOnlyStyles}
}
*/
.pill {
--gl-pill-border: color-mix(in srgb, transparent 80%, var(--color-foreground));
Expand Down Expand Up @@ -259,6 +274,7 @@ export abstract class GlBranchCardBase extends GlElement {

return html`<gl-avatar-list
.avatars=${avatars.map(a => ({ name: a.name, src: a.avatarUrl }))}
max="1"
></gl-avatar-list>`;
}

Expand All @@ -280,8 +296,7 @@ export abstract class GlBranchCardBase extends GlElement {
const actions = this.getActions?.();
if (!actions?.length) return nothing;

// class="branch-item__actions"
return html`<action-nav slot="actions">${actions}</action-nav>`;
return html`<div class="branch-item__actions" slot="actions"><action-nav>${actions}</action-nav></div>`;
}

protected createCommandLink(command: Commands) {
Expand All @@ -299,10 +314,11 @@ export abstract class GlBranchCardBase extends GlElement {

protected renderBranchItem(actionsSection?: TemplateResult | NothingType) {
const wip = this.renderWip();
const tracking = this.branch.opened ? undefined : this.renderTracking();
const tracking = this.renderTracking();
const avatars = this.renderAvatars();
const indicator = this.renderBranchIndicator?.();
const indicator = this.branch.opened ? undefined : this.renderBranchIndicator?.();
const conflict = this.renderPotentialMergeConflicts();
const timestamp = this.renderTimestamp();

return html`
<gl-work-item
Expand All @@ -322,10 +338,12 @@ export abstract class GlBranchCardBase extends GlElement {
</div>
<div class="branch-item__section branch-item__section--details" slot="context">
${when(
indicator || wip || tracking || avatars,
() => html`<p class="branch-item__changes">${indicator}${wip}${tracking}${avatars}</p>`,
timestamp || indicator || wip || tracking || avatars,
() =>
html`<p class="branch-item__changes">
${timestamp}${indicator}${wip}${tracking}${avatars}
</p>`,
)}
${this.renderTimestamp()}
</div>
${actionsSection ?? nothing}
</gl-work-item>
Expand All @@ -345,15 +363,15 @@ export abstract class GlBranchCardBase extends GlElement {
<a href=${this.branch.pr.url} class="branch-item__name">${this.branch.pr.title}</a>
<span class="branch-item__identifier">#${this.branch.pr.id}</span>
</p>
${this.branch.pr.launchpad != null
? html`<p>
<span class="branch-item__category">${this.branch.pr.launchpad.category}</span>
</p>`
: nothing}
</div>
</gl-work-item>
`;
}
// ${this.branch.pr.launchpad != null
// ? html`<p>
// <span class="branch-item__category">${this.branch.pr.launchpad.category}</span>
// </p>`
// : nothing}

protected renderPotentialMergeConflicts() {
if (!this.branch.target?.potentialMergeConflicts) return nothing;
Expand Down Expand Up @@ -494,12 +512,6 @@ export class GlWorkUnit extends LitElement {
max-height: 0;
}
.work-item-indicator {
display: block;
margin: -0.8rem 0 0.4rem -1.2rem;
width: calc(100% + 2.4rem);
}
gl-card::part(base) {
margin-block-end: 0;
}
Expand Down Expand Up @@ -529,7 +541,6 @@ export class GlWorkUnit extends LitElement {

private renderContent() {
return html`
<slot class="work-item-indicator" name="indicator"></slot>
<div class="work-item">
<header class="work-item__main">
<slot></slot>
Expand Down
83 changes: 34 additions & 49 deletions src/webviews/apps/plus/home/components/merge-rebase-status.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,20 @@ export class GlMergeConflictWarning extends LitElement {
static override styles = [
css`
.status {
display: inline-flex;
display: flex;
align-items: center;
gap: 0.6rem;
max-width: 100%;
margin-block: 0;
background-color: var(--vscode-gitlens-decorations\\.statusMergingOrRebasingForegroundColor);
color: #000;
border-radius: 0.3rem;
padding: 0.1rem 0.4rem;
}
.icon {
color: var(--vscode-gitlens-decorations\\.statusMergingOrRebasingForegroundColor);
}
:host([conflicts]) .icon {
color: var(--vscode-gitlens-decorations\\.statusMergingOrRebasingConflictForegroundColor);
:host([conflicts]) .status {
background-color: var(--vscode-gitlens-decorations\\.statusMergingOrRebasingConflictForegroundColor);
color: #fff;
}
.label {
Expand All @@ -33,6 +34,11 @@ export class GlMergeConflictWarning extends LitElement {
text-overflow: ellipsis;
}
.icon,
.steps {
flex: none;
}
.md-code {
background: var(--vscode-textCodeBlock-background);
border-radius: 3px;
Expand All @@ -55,56 +61,35 @@ export class GlMergeConflictWarning extends LitElement {
if (this.merge == null && this.rebase == null) return nothing;

return html`
<gl-tooltip>
<span class="status">
<code-icon icon="warning" class="icon"></code-icon>
<span class="label">
${when(
this.merge != null,
() => html`Merge in progress`,
() => html`Rebase in progress`,
)}
</span>
</span>
<span slot="content">
${when(
this.merge != null,
() => this.renderMergeTooltip(),
() => this.renderRebaseTooltip(),
)}
</span>
</gl-tooltip>
<span class="status">
<code-icon icon="warning" class="icon"></code-icon>
${when(
this.merge != null,
() => this.renderMerge(),
() => this.renderRebase(),
)}
</span>
`;
}

private renderMergeTooltip() {
return html`${this.conflicts ? 'Resolve conflicts before merging' : 'Merging'}
${this.merge!.incoming != null
? html`<span class="md-code"
>${getReferenceLabel(this.merge!.incoming, { expand: false, icon: false })}</span
> `
: ''}into
<span class="md-code">${getReferenceLabel(this.merge!.current, { expand: false, icon: false })}</span>`;
private renderMerge() {
return html`<span class="label"
>${this.conflicts ? 'Resolve conflicts before merging' : 'Merging'} into
${getReferenceLabel(this.merge!.current, { expand: false, icon: false })}</span
>`;
}

private renderRebaseTooltip() {
private renderRebase() {
const started = this.rebase!.steps.total > 0;
return html`${this.conflicts
? 'Resolve conflicts to continue rebasing'
: started
? 'Rebasing'
: 'Pending rebase of'}
${this.rebase!.incoming != null
? html`<span class="md-code"
>${getReferenceLabel(this.rebase!.incoming, { expand: false, icon: false })}</span
> `
: ''}
onto
<span class="md-code"
>${getReferenceLabel(this.rebase!.current ?? this.rebase!.onto, {
return html`<span class="label"
>${this.conflicts ? 'Resolve conflicts to continue rebasing' : started ? 'Rebasing' : 'Pending rebase'}
onto
${getReferenceLabel(this.rebase!.current ?? this.rebase!.onto, {
expand: false,
icon: false,
})}</span
>${started ? ` (${this.rebase!.steps.current.number}/${this.rebase!.steps.total})` : ''}`;
>${started
? html`<span class="steps">(${this.rebase!.steps.current.number}/${this.rebase!.steps.total})</span>`
: nothing}`;
}
}
1 change: 1 addition & 0 deletions src/webviews/apps/shared/components/commit/commit-stats.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export class CommitStats extends LitElement {
align-items: center;
gap: 1rem;
white-space: nowrap;
font-size: 1rem;
}
:host([symbol='icons']) {
Expand Down

0 comments on commit 99e9b87

Please sign in to comment.