Skip to content

Commit 00bc496

Browse files
d13d13
committed
Fixes #4488 reduce action lines in Inspect Overview tab
1 parent 55ace8c commit 00bc496

File tree

1 file changed

+81
-79
lines changed

1 file changed

+81
-79
lines changed

‎src/webviews/apps/commitDetails/components/gl-wip-details.ts

Lines changed: 81 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import type { File } from './gl-details-base';
1313
import { GlDetailsBase } from './gl-details-base';
1414
import type { GenerateState } from './gl-inspect-patch';
1515
import '../../shared/components/button';
16+
import '../../shared/components/button-container';
1617
import '../../shared/components/code-icon';
1718
import '../../shared/components/panes/pane-group';
1819
import '../../shared/components/pills/tracking';
@@ -127,41 +128,33 @@ export class GlWipDetails extends GlDetailsBase {
127128

128129
if (this.preferences?.aiEnabled && this.orgSettings?.ai) {
129130
return html`<div class="section section--actions">
130-
<p class="button-container">
131-
<span class="button-group button-group--single">
132-
<gl-button
133-
full
134-
.href=${createCommandLink('gitlens.ai.generateCommits', {
135-
repoPath: this.wip?.repo.path,
136-
source: { source: 'inspect' },
137-
} as GenerateCommitsCommandArgs)}
138-
tooltip="Generate Commits with AI (Preview) — organize working changes into meaningful commits"
139-
.tooltipPlacement=${'top'}
140-
>Commit with AI (Preview)<code-icon icon="sparkle" slot="prefix"></code-icon
141-
></gl-button>
142-
</span>
143-
</p>
144-
<p class="button-container">
145-
<span class="button-group button-group--single">
146-
<gl-button appearance="secondary" full href="command:workbench.view.scm"
147-
>Commit via SCM <code-icon rotate="45" icon="arrow-up" slot="prefix"></code-icon
148-
></gl-button>
149-
</span>
150-
</p>
131+
<button-container>
132+
<gl-button
133+
full
134+
.href=${createCommandLink('gitlens.ai.generateCommits', {
135+
repoPath: this.wip?.repo.path,
136+
source: { source: 'inspect' },
137+
} as GenerateCommitsCommandArgs)}
138+
tooltip="Generate Commits with AI (Preview) — organize working changes into meaningful commits"
139+
.tooltipPlacement=${'top'}
140+
>Commit with AI (Preview)<code-icon icon="sparkle" slot="prefix"></code-icon
141+
></gl-button>
142+
<gl-button appearance="secondary" href="command:workbench.view.scm" tooltip="Commit via SCM"
143+
><code-icon rotate="45" icon="arrow-up"></code-icon
144+
></gl-button>
145+
</button-container>
151146
</div>`;
152147
}
153148
return html`<div class="section section--actions">
154-
<p class="button-container">
155-
<span class="button-group button-group--single">
156-
<gl-button full href="command:workbench.view.scm"
157-
>Commit via SCM <code-icon rotate="45" icon="arrow-up" slot="suffix"></code-icon
158-
></gl-button>
159-
</span>
160-
</p>
149+
<button-container>
150+
<gl-button full href="command:workbench.view.scm"
151+
>Commit via SCM <code-icon rotate="45" icon="arrow-up" slot="suffix"></code-icon
152+
></gl-button>
153+
</button-container>
161154
</div>`;
162155
}
163156

164-
private renderSecondaryAction() {
157+
private renderSecondaryAction(hasPrimary = true) {
165158
if (!this.draftsEnabled || this.inReview) return undefined;
166159

167160
let label = 'Share as Cloud Patch';
@@ -185,59 +178,68 @@ export class GlWipDetails extends GlDetailsBase {
185178
action = 'end-patch-review';
186179
}
187180

188-
return html`<p class="button-container">
189-
<span class="button-group button-group--single">
181+
if ((this.wip?.changes?.files.length ?? 0) === 0) {
182+
return html`
190183
<gl-button
184+
?full=${!hasPrimary}
191185
appearance="secondary"
192-
full
193186
data-action="${action}"
194187
@click=${() => this.onToggleReviewMode(!this.inReview)}
188+
.tooltip=${hasPrimary ? label : undefined}
195189
>
196-
<code-icon icon="gl-code-suggestion" slot="prefix"></code-icon>${label}
197-
</gl-button>
198-
<gl-button
199-
appearance="secondary"
200-
density="compact"
201-
data-action="create-patch"
202-
tooltip="Share as Cloud Patch"
203-
@click=${() => this.onDataActionClick('create-patch')}
204-
>
205-
<code-icon icon="gl-cloud-patch-share"></code-icon>
190+
<code-icon icon="gl-code-suggestion" .slot=${!hasPrimary ? 'prefix' : nothing}></code-icon
191+
>${!hasPrimary ? label : nothing}
206192
</gl-button>
207-
</span>
208-
</p>`;
209-
}
210-
211-
if ((this.wip?.changes?.files.length ?? 0) === 0) return undefined;
193+
`;
194+
}
212195

213-
return html`<p class="button-container">
214-
<span class="button-group button-group--single">
196+
return html`
215197
<gl-button
198+
?full=${!hasPrimary}
216199
appearance="secondary"
217-
full
218200
data-action="${action}"
219-
@click=${() => this.onDataActionClick(action)}
201+
.tooltip=${hasPrimary ? label : undefined}
202+
@click=${() => this.onToggleReviewMode(!this.inReview)}
220203
>
221-
<code-icon icon="gl-cloud-patch-share" slot="prefix"></code-icon>${label}
204+
<code-icon icon="gl-code-suggestion" .slot=${!hasPrimary ? 'prefix' : nothing}></code-icon
205+
>${!hasPrimary ? label : nothing}
222206
</gl-button>
223-
</span>
224-
</p>`;
207+
<gl-button
208+
appearance="secondary"
209+
density="compact"
210+
data-action="create-patch"
211+
tooltip="Share as Cloud Patch"
212+
@click=${() => this.onDataActionClick('create-patch')}
213+
>
214+
<code-icon icon="gl-cloud-patch-share"></code-icon>
215+
</gl-button>
216+
`;
217+
}
218+
219+
if ((this.wip?.changes?.files.length ?? 0) === 0) return undefined;
220+
221+
return html`
222+
<gl-button
223+
?full=${!hasPrimary}
224+
appearance="secondary"
225+
data-action="${action}"
226+
.tooltip=${hasPrimary ? label : undefined}
227+
@click=${() => this.onDataActionClick(action)}
228+
>
229+
<code-icon icon="gl-cloud-patch-share" .slot=${!hasPrimary ? 'prefix' : nothing}></code-icon
230+
>${!hasPrimary ? label : nothing}
231+
</gl-button>
232+
`;
225233
}
226234

227235
private renderPrimaryAction() {
228236
const canShare = this.draftsEnabled;
229237
if (this.isUnpublished && canShare) {
230-
return html`<p class="button-container">
231-
<span class="button-group button-group--single">
232-
<gl-button
233-
full
234-
data-action="publish-branch"
235-
@click=${() => this.onDataActionClick('publish-branch')}
236-
>
237-
<code-icon icon="cloud-upload" slot="prefix"></code-icon> Publish Branch
238-
</gl-button>
239-
</span>
240-
</p>`;
238+
return html`
239+
<gl-button full data-action="publish-branch" @click=${() => this.onDataActionClick('publish-branch')}>
240+
<code-icon icon="cloud-upload" slot="prefix"></code-icon> Publish Branch
241+
</gl-button>
242+
`;
241243
}
242244

243245
if ((!this.isUnpublished && !canShare) || this.branchState == null) return undefined;
@@ -248,26 +250,26 @@ export class GlWipDetails extends GlDetailsBase {
248250
const fetchLabel = behind > 0 ? 'Pull' : ahead > 0 ? 'Push' : 'Fetch';
249251
const fetchIcon = behind > 0 ? 'repo-pull' : ahead > 0 ? 'repo-push' : 'repo-fetch';
250252

251-
return html`<p class="button-container">
252-
<span class="button-group button-group--single">
253-
<gl-button
254-
full
255-
data-action="${fetchLabel.toLowerCase()}"
256-
@click=${() => this.onDataActionClick(fetchLabel.toLowerCase())}
257-
>
258-
<code-icon icon="${fetchIcon}" slot="prefix"></code-icon> ${fetchLabel}
259-
<gl-tracking-pill .ahead=${ahead} .behind=${behind} slot="suffix"></gl-tracking-pill>
260-
</gl-button>
261-
</span>
262-
</p>`;
253+
return html`
254+
<gl-button
255+
full
256+
data-action="${fetchLabel.toLowerCase()}"
257+
@click=${() => this.onDataActionClick(fetchLabel.toLowerCase())}
258+
>
259+
<code-icon icon="${fetchIcon}" slot="prefix"></code-icon> ${fetchLabel}
260+
<gl-tracking-pill .ahead=${ahead} .behind=${behind} slot="suffix"></gl-tracking-pill>
261+
</gl-button>
262+
`;
263263
}
264264

265265
private renderActions() {
266266
const primaryAction = this.renderPrimaryAction();
267-
const secondaryAction = this.renderSecondaryAction();
267+
const secondaryAction = this.renderSecondaryAction(primaryAction != null);
268268
if (primaryAction == null && secondaryAction == null) return nothing;
269269

270-
return html`<div class="section section--actions">${primaryAction}${secondaryAction}</div>`;
270+
return html`<div class="section section--actions">
271+
<button-container>${primaryAction}${secondaryAction}</button-container>
272+
</div>`;
271273
}
272274

273275
private renderSuggestedChanges() {

0 commit comments

Comments
 (0)