Skip to content

Commit 457494f

Browse files
d13eamodio
d13
authored and
eamodio
committed
Updates finish and commit as a sticky footer
1 parent 3e428fc commit 457494f

File tree

1 file changed

+146
-134
lines changed

1 file changed

+146
-134
lines changed

‎src/webviews/apps/plus/composer/components/commits-panel.ts‎

Lines changed: 146 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -32,20 +32,23 @@ export class CommitsPanel extends LitElement {
3232
composerItemContentStyles,
3333
css`
3434
:host {
35+
display: block;
36+
height: 100%;
37+
overflow: hidden;
38+
}
39+
40+
.container {
3541
display: flex;
3642
flex-direction: column;
3743
gap: 0.8rem;
3844
height: 100%;
39-
overflow: hidden;
45+
overflow: hidden auto;
4046
}
4147
4248
.working-section {
43-
flex: 1;
44-
overflow-y: auto;
4549
display: flex;
4650
flex-direction: column;
4751
gap: 1.6rem;
48-
padding-block-end: 0.8rem;
4952
}
5053
5154
.commits-list {
@@ -129,7 +132,11 @@ export class CommitsPanel extends LitElement {
129132
130133
/* Finish & Commit section styles */
131134
.finish-commit {
132-
flex: none;
135+
position: sticky;
136+
bottom: 0;
137+
z-index: 600;
138+
background-color: var(--color-background);
139+
padding-block-start: 0.8rem;
133140
}
134141
135142
.finish-commit__header {
@@ -1138,12 +1145,81 @@ export class CommitsPanel extends LitElement {
11381145
// Handle no changes state
11391146
if (!this.hasChanges) {
11401147
return html`
1141-
<div class="working-section scrollable">
1148+
<div class="container scrollable">
1149+
<div class="working-section">
1150+
<div class="commits-list">
1151+
<h3 class="commits-header">Draft Commits</h3>
1152+
<p class="no-changes-message">
1153+
When working directory changes are present, draft commits will appear here.
1154+
</p>
1155+
1156+
<!-- Base commit (informational only) -->
1157+
<div class="composer-item is-base">
1158+
<div class="composer-item__commit"></div>
1159+
<div class="composer-item__content">
1160+
<div class="composer-item__header">${this.baseCommit?.message || 'HEAD'}</div>
1161+
<div class="composer-item__body">
1162+
<span class="repo-name">${this.baseCommit?.repoName || 'Repository'}</span>
1163+
<span>/</span>
1164+
<span class="branch-name">${this.baseCommit?.branchName || 'main'}</span>
1165+
</div>
1166+
</div>
1167+
</div>
1168+
</div>
1169+
</div>
1170+
</div>
1171+
`;
1172+
}
1173+
1174+
return html`
1175+
<div class="container scrollable">
1176+
<div class="working-section">
1177+
<!-- Auto-Compose container at top when not used yet -->
1178+
${when(!this.hasUsedAutoCompose, () => this.renderAutoComposeContainer())}
11421179
<div class="commits-list">
1180+
${this.hasUsedAutoCompose
1181+
? this.renderCompositionSummarySection()
1182+
: this.renderUnassignedSection()}
1183+
11431184
<h3 class="commits-header">Draft Commits</h3>
1144-
<p class="no-changes-message">
1145-
When working directory changes are present, draft commits will appear here.
1146-
</p>
1185+
1186+
<!-- Drop zone for creating new commits (only visible when dragging hunks in interactive mode) -->
1187+
${when(
1188+
!this.isPreviewMode && this.shouldShowNewCommitZone,
1189+
() => html`
1190+
<div class="new-commit-drop-zone">
1191+
<div class="drop-zone-content">
1192+
<code-icon icon="plus"></code-icon>
1193+
<span>Drop hunks here to create new commit</span>
1194+
</div>
1195+
</div>
1196+
`,
1197+
)}
1198+
1199+
<div class="commits-only">
1200+
${repeat(
1201+
this.commits.slice().reverse(), // Reverse order - bottom to top
1202+
commit => commit.id,
1203+
(commit, i) => {
1204+
const changes = getCommitChanges(commit, this.hunks);
1205+
return html`
1206+
<gl-commit-item
1207+
.commitId=${commit.id}
1208+
.message=${commit.message}
1209+
.fileCount=${getFileCountForCommit(commit, this.hunks)}
1210+
.additions=${changes.additions}
1211+
.deletions=${changes.deletions}
1212+
.selected=${this.selectedCommitId === commit.id}
1213+
.multiSelected=${this.selectedCommitIds.has(commit.id)}
1214+
.isPreviewMode=${this.isPreviewMode}
1215+
?first=${i === 0}
1216+
@click=${(e: MouseEvent) =>
1217+
this.dispatchCommitSelect(commit.id, e.shiftKey)}
1218+
></gl-commit-item>
1219+
`;
1220+
},
1221+
)}
1222+
</div>
11471223
11481224
<!-- Base commit (informational only) -->
11491225
<div class="composer-item is-base">
@@ -1157,144 +1233,80 @@ export class CommitsPanel extends LitElement {
11571233
</div>
11581234
</div>
11591235
</div>
1160-
</div>
1161-
</div>
1162-
`;
1163-
}
1164-
1165-
return html`
1166-
<div class="working-section scrollable">
1167-
<!-- Auto-Compose container at top when not used yet -->
1168-
${when(!this.hasUsedAutoCompose, () => this.renderAutoComposeContainer())}
1169-
<div class="commits-list">
1170-
${this.hasUsedAutoCompose ? this.renderCompositionSummarySection() : this.renderUnassignedSection()}
11711236
1172-
<h3 class="commits-header">Draft Commits</h3>
1173-
1174-
<!-- Drop zone for creating new commits (only visible when dragging hunks in interactive mode) -->
1175-
${when(
1176-
!this.isPreviewMode && this.shouldShowNewCommitZone,
1177-
() => html`
1178-
<div class="new-commit-drop-zone">
1179-
<div class="drop-zone-content">
1180-
<code-icon icon="plus"></code-icon>
1181-
<span>Drop hunks here to create new commit</span>
1237+
<!-- Drop zone for unassigning hunks (hidden when not dragging or in AI preview mode) -->
1238+
${when(
1239+
!this.isPreviewMode && this.shouldShowUnassignZone,
1240+
() => html`
1241+
<div class="unassign-drop-zone">
1242+
<div class="drop-zone-content">
1243+
<code-icon icon="trash"></code-icon>
1244+
<span>Drop hunks here to unassign</span>
1245+
</div>
11821246
</div>
1183-
</div>
1184-
`,
1185-
)}
1186-
1187-
<div class="commits-only">
1188-
${repeat(
1189-
this.commits.slice().reverse(), // Reverse order - bottom to top
1190-
commit => commit.id,
1191-
(commit, i) => {
1192-
const changes = getCommitChanges(commit, this.hunks);
1193-
return html`
1194-
<gl-commit-item
1195-
.commitId=${commit.id}
1196-
.message=${commit.message}
1197-
.fileCount=${getFileCountForCommit(commit, this.hunks)}
1198-
.additions=${changes.additions}
1199-
.deletions=${changes.deletions}
1200-
.selected=${this.selectedCommitId === commit.id}
1201-
.multiSelected=${this.selectedCommitIds.has(commit.id)}
1202-
.isPreviewMode=${this.isPreviewMode}
1203-
?first=${i === 0}
1204-
@click=${(e: MouseEvent) => this.dispatchCommitSelect(commit.id, e.shiftKey)}
1205-
></gl-commit-item>
1206-
`;
1207-
},
1247+
`,
12081248
)}
12091249
</div>
1250+
<!-- Auto-Compose container in original position when already used -->
1251+
${when(this.hasUsedAutoCompose, () => this.renderAutoComposeContainer())}
1252+
</div>
12101253
1211-
<!-- Base commit (informational only) -->
1212-
<div class="composer-item is-base">
1213-
<div class="composer-item__commit"></div>
1214-
<div class="composer-item__content">
1215-
<div class="composer-item__header">${this.baseCommit?.message || 'HEAD'}</div>
1216-
<div class="composer-item__body">
1217-
<span class="repo-name">${this.baseCommit?.repoName || 'Repository'}</span>
1218-
<span>/</span>
1219-
<span class="branch-name">${this.baseCommit?.branchName || 'main'}</span>
1220-
</div>
1221-
</div>
1222-
</div>
1223-
1224-
<!-- Drop zone for unassigning hunks (hidden when not dragging or in AI preview mode) -->
1254+
<!-- Finish & Commit section -->
1255+
<div class="finish-commit">
12251256
${when(
1226-
!this.isPreviewMode && this.shouldShowUnassignZone,
1257+
this.selectedCommitIds.size > 1 && !this.isPreviewMode,
12271258
() => html`
1228-
<div class="unassign-drop-zone">
1229-
<div class="drop-zone-content">
1230-
<code-icon icon="trash"></code-icon>
1231-
<span>Drop hunks here to unassign</span>
1232-
</div>
1233-
</div>
1259+
<h3 class="finish-commit__header">Finish & Commit</h3>
1260+
<p class="finish-commit__description">
1261+
New commits will be added to your current branch and a stash will be created with your
1262+
original changes.
1263+
</p>
1264+
<button-container layout="editor">
1265+
<gl-button
1266+
full
1267+
appearance="secondary"
1268+
?disabled=${this.generating || this.committing}
1269+
@click=${this.dispatchCombineCommits}
1270+
>
1271+
Combine ${this.selectedCommitIds.size} Commits
1272+
</gl-button>
1273+
</button-container>
1274+
1275+
<!-- Cancel button -->
1276+
<button-container layout="editor" class="cancel-button-container">
1277+
<gl-button full appearance="secondary" @click=${this.handleCancel}> Cancel </gl-button>
1278+
</button-container>
12341279
`,
1235-
)}
1236-
</div>
1237-
<!-- Auto-Compose container in original position when already used -->
1238-
${when(this.hasUsedAutoCompose, () => this.renderAutoComposeContainer())}
1239-
</div>
1240-
1241-
<!-- Finish & Commit section -->
1242-
<div class="finish-commit">
1243-
${when(
1244-
this.selectedCommitIds.size > 1 && !this.isPreviewMode,
1245-
() => html`
1246-
<h3 class="finish-commit__header">Finish & Commit</h3>
1247-
<p class="finish-commit__description">
1248-
New commits will be added to your current branch and a stash will be created with your
1249-
original changes.
1250-
</p>
1251-
<button-container layout="editor">
1252-
<gl-button
1253-
full
1254-
appearance="secondary"
1255-
?disabled=${this.generating || this.committing}
1256-
@click=${this.dispatchCombineCommits}
1257-
>
1258-
Combine ${this.selectedCommitIds.size} Commits
1259-
</gl-button>
1260-
</button-container>
1261-
1262-
<!-- Cancel button -->
1263-
<button-container layout="editor" class="cancel-button-container">
1264-
<gl-button full appearance="secondary" @click=${this.handleCancel}> Cancel </gl-button>
1265-
</button-container>
1266-
`,
1267-
() => html`
1268-
<div class="finish-commit-header">
1269-
<h3>Finish & Commit</h3>
1270-
<p class="finish-commit-subtext">
1280+
() => html`
1281+
<h3 class="finish-commit__header">Finish & Commit</h3>
1282+
<p class="finish-commit__description">
12711283
${this.isReadyToCommit
12721284
? 'New commits will be added to your current branch.'
12731285
: 'Commit the changes in this draft.'}
12741286
</p>
1275-
</div>
12761287
1277-
<!-- Single Create Commits button -->
1278-
<button-container layout="editor">
1279-
<gl-button
1280-
full
1281-
.appearance=${!this.isReadyToCommit ? 'secondary' : undefined}
1282-
?disabled=${this.commits.length === 0 || this.generating || this.committing}
1283-
@click=${this.handleCreateCommitsClick}
1284-
>
1285-
<code-icon icon=${this.committing ? 'loading~spin' : ''} slot="prefix"></code-icon>
1286-
${this.committing
1287-
? 'Committing...'
1288-
: `Create ${this.commits.length} ${this.commits.length === 1 ? 'Commit' : 'Commits'}`}
1289-
</gl-button>
1290-
</button-container>
1291-
1292-
<!-- Cancel button (always shown) -->
1293-
<button-container layout="editor" class="cancel-button-container">
1294-
<gl-button full appearance="secondary" @click=${this.handleCancel}> Cancel </gl-button>
1295-
</button-container>
1296-
`,
1297-
)}
1288+
<!-- Single Create Commits button -->
1289+
<button-container layout="editor">
1290+
<gl-button
1291+
full
1292+
.appearance=${!this.isReadyToCommit ? 'secondary' : undefined}
1293+
?disabled=${this.commits.length === 0 || this.generating || this.committing}
1294+
@click=${this.handleCreateCommitsClick}
1295+
>
1296+
<code-icon icon=${this.committing ? 'loading~spin' : ''} slot="prefix"></code-icon>
1297+
${this.committing
1298+
? 'Committing...'
1299+
: `Create ${this.commits.length} ${this.commits.length === 1 ? 'Commit' : 'Commits'}`}
1300+
</gl-button>
1301+
</button-container>
1302+
1303+
<!-- Cancel button (always shown) -->
1304+
<button-container layout="editor" class="cancel-button-container">
1305+
<gl-button full appearance="secondary" @click=${this.handleCancel}> Cancel </gl-button>
1306+
</button-container>
1307+
`,
1308+
)}
1309+
</div>
12981310
</div>
12991311
`;
13001312
}

0 commit comments

Comments
 (0)