Bläddra i källkod
Adds Working Changes tab to Commit/Graph Details
- Adds stage/unstage supportmain
Eric Amodio
1 år sedan
17 ändrade filer med 1727 tillägg och 944 borttagningar
Delad Vy
Diff Options
-
+2 -0CHANGELOG.md
-
+1 -1src/trackers/gitLineTracker.ts
-
+1 -0src/trackers/lineTracker.ts
-
+96 -7src/webviews/apps/commitDetails/commitDetails.scss
-
+48 -23src/webviews/apps/commitDetails/commitDetails.ts
-
+59 -674src/webviews/apps/commitDetails/components/commit-details-app.ts
-
+523 -0src/webviews/apps/commitDetails/components/gl-commit-details.ts
-
+235 -0src/webviews/apps/commitDetails/components/gl-details-base.ts
-
+67 -0src/webviews/apps/commitDetails/components/gl-wip-details.ts
-
+5 -4src/webviews/apps/shared/components/commit/commit-identity.ts
-
+52 -31src/webviews/apps/shared/components/list/file-change-list-item.ts
-
+0 -1src/webviews/apps/shared/components/list/list-container.ts
-
+2 -0src/webviews/apps/shared/components/list/list-item.ts
-
+237 -0src/webviews/apps/shared/components/status/git-status.ts
-
+348 -170src/webviews/commitDetails/commitDetailsWebview.ts
-
+49 -31src/webviews/commitDetails/protocol.ts
-
+2 -2src/webviews/commitDetails/registration.ts
+ 2
- 0
CHANGELOG.md
Visa fil
+ 1
- 1
src/trackers/gitLineTracker.ts
Visa fil
+ 1
- 0
src/trackers/lineTracker.ts
Visa fil
+ 96
- 7
src/webviews/apps/commitDetails/commitDetails.scss
Visa fil
+ 48
- 23
src/webviews/apps/commitDetails/commitDetails.ts
Visa fil
+ 59
- 674
src/webviews/apps/commitDetails/components/commit-details-app.ts
Visa fil
+ 523
- 0
src/webviews/apps/commitDetails/components/gl-commit-details.ts
Visa fil
| @ -0,0 +1,523 @@ | |||
| import { html, nothing } from 'lit'; | |||
| import { customElement, property, state } from 'lit/decorators.js'; | |||
| import { unsafeHTML } from 'lit/directives/unsafe-html.js'; | |||
| import { when } from 'lit/directives/when.js'; | |||
| import type { Autolink } from '../../../../annotations/autolinks'; | |||
| import type { IssueOrPullRequest } from '../../../../git/models/issue'; | |||
| import type { PullRequestShape } from '../../../../git/models/pullRequest'; | |||
| import type { Serialized } from '../../../../system/serialize'; | |||
| import type { State } from '../../../commitDetails/protocol'; | |||
| import { messageHeadlineSplitterToken } from '../../../commitDetails/protocol'; | |||
| import { uncommittedSha } from '../commitDetails'; | |||
| import { GlDetailsBase } from './gl-details-base'; | |||
| interface ExplainState { | |||
| cancelled?: boolean; | |||
| error?: { message: string }; | |||
| summary?: string; | |||
| } | |||
| @customElement('gl-commit-details') | |||
| export class GlCommitDetails extends GlDetailsBase { | |||
| @property({ type: Object }) | |||
| state?: Serialized<State>; | |||
| @state() | |||
| get isStash() { | |||
| return this.state?.commit?.stashNumber != null; | |||
| } | |||
| @state() | |||
| get shortSha() { | |||
| return this.state?.commit?.shortSha ?? ''; | |||
| } | |||
| @state() | |||
| explainBusy = false; | |||
| @property({ type: Object }) | |||
| explain?: ExplainState; | |||
| get navigation() { | |||
| if (this.state?.navigationStack == null) { | |||
| return { | |||
| back: false, | |||
| forward: false, | |||
| }; | |||
| } | |||
| const actions = { | |||
| back: true, | |||
| forward: true, | |||
| }; | |||
| if (this.state.navigationStack.count <= 1) { | |||
| actions.back = false; | |||
| actions.forward = false; | |||
| } else if (this.state.navigationStack.position === 0) { | |||
| actions.back = true; | |||
| actions.forward = false; | |||
| } else if (this.state.navigationStack.position === this.state.navigationStack.count - 1) { | |||
| actions.back = false; | |||
| actions.forward = true; | |||
| } | |||
| return actions; | |||
| } | |||
| override updated(changedProperties: Map<string, any>) { | |||
| if (changedProperties.has('explain')) { | |||
| this.explainBusy = false; | |||
| this.querySelector('[data-region="commit-explanation"]')?.scrollIntoView(); | |||
| } | |||
| } | |||
| private renderEmptyContent() { | |||
| return html` | |||
| <div class="section section--empty" id="empty"> | |||
| <p>Rich details for commits and stashes are shown as you navigate:</p> | |||
| <ul class="bulleted"> | |||
| <li>lines in the text editor</li> | |||
| <li> | |||
| commits in the <a href="command:gitlens.showGraph">Commit Graph</a>, | |||
| <a href="command:gitlens.showTimelineView">Visual File History</a>, or | |||
| <a href="command:gitlens.showCommitsView">Commits view</a> | |||
| </li> | |||
| <li>stashes in the <a href="command:gitlens.showStashesView">Stashes view</a></li> | |||
| </ul> | |||
| <p>Alternatively, show your work-in-progress, or search for or choose a commit</p> | |||
| <p class="button-container"> | |||
| <button class="button button--full" type="button" data-action="wip">Show Working Changes</button> | |||
| </p> | |||
| <p class="button-container"> | |||
| <span class="button-group"> | |||
| <button class="button button--full" type="button" data-action="pick-commit"> | |||
| Choose Commit... | |||
| </button> | |||
| <button | |||
| class="button" | |||
| type="button" | |||
| data-action="search-commit" | |||
| aria-label="Search for Commit" | |||
| title="Search for Commit" | |||
| > | |||
| <code-icon icon="search"></code-icon> | |||
| </button> | |||
| </span> | |||
| </p> | |||
| </div> | |||
| `; | |||
| } | |||
| private renderCommitMessage() { | |||
| if (this.state?.commit == null) return undefined; | |||
| const message = this.state.commit.message; | |||
| const index = message.indexOf(messageHeadlineSplitterToken); | |||
| return html` | |||
| <div class="section section--message"> | |||
| <div class="message-block"> | |||
| ${when( | |||
| index === -1, | |||
| () => | |||
| html`<p class="message-block__text scrollable" data-region="message"> | |||
| <strong>${unsafeHTML(message)}</strong> | |||
| </p>`, | |||
| () => | |||
| html`<p class="message-block__text scrollable" data-region="message"> | |||
| <strong>${unsafeHTML(message.substring(0, index))}</strong><br /><span | |||
| >${unsafeHTML(message.substring(index + 3))}</span | |||
| > | |||
| </p>`, | |||
| )} | |||
| </div> | |||
| </div> | |||
| `; | |||
| } | |||
| private renderAutoLinks() { | |||
| if (this.isUncommitted) return undefined; | |||
| const deduped = new Map< | |||
| string, | |||
| | { type: 'autolink'; value: Serialized<Autolink> } | |||
| | { type: 'issue'; value: Serialized<IssueOrPullRequest> } | |||
| | { type: 'pr'; value: Serialized<PullRequestShape> } | |||
| >(); | |||
| if (this.state?.commit?.autolinks != null) { | |||
| for (const autolink of this.state.commit.autolinks) { | |||
| deduped.set(autolink.id, { type: 'autolink', value: autolink }); | |||
| } | |||
| } | |||
| if (this.state?.autolinkedIssues != null) { | |||
| for (const issue of this.state.autolinkedIssues) { | |||
| deduped.set(issue.id, { type: 'issue', value: issue }); | |||
| } | |||
| } | |||
| if (this.state?.pullRequest != null) { | |||
| deduped.set(this.state.pullRequest.id, { type: 'pr', value: this.state.pullRequest }); | |||
| } | |||
| const autolinks: Serialized<Autolink>[] = []; | |||
| const issues: Serialized<IssueOrPullRequest>[] = []; | |||
| const prs: Serialized<PullRequestShape>[] = []; | |||
| for (const item of deduped.values()) { | |||
| switch (item.type) { | |||
| case 'autolink': | |||
| autolinks.push(item.value); | |||
| break; | |||
| case 'issue': | |||
| issues.push(item.value); | |||
| break; | |||
| case 'pr': | |||
| prs.push(item.value); | |||
| break; | |||
| } | |||
| } | |||
| return html` | |||
| <webview-pane | |||
| collapsable | |||
| ?expanded=${this.state?.preferences?.autolinksExpanded ?? true} | |||
| ?loading=${!this.state?.includeRichContent} | |||
| data-region="rich-pane" | |||
| > | |||
| <span slot="title">Autolinks</span> | |||
| <span slot="subtitle" data-region="autolink-count" | |||
| >${this.state?.includeRichContent || deduped.size ? `${deduped.size} found ` : ''}${this.state | |||
| ?.includeRichContent | |||
| ? '' | |||
| : '…'}</span | |||
| > | |||
| ${when( | |||
| this.state == null, | |||
| () => html` | |||
| <div class="section" data-region="autolinks"> | |||
| <section class="auto-link" aria-label="Custom Autolinks" data-region="custom-autolinks"> | |||
| <skeleton-loader lines="2"></skeleton-loader> | |||
| </section> | |||
| <section class="pull-request" aria-label="Pull request" data-region="pull-request"> | |||
| <skeleton-loader lines="2"></skeleton-loader> | |||
| </section> | |||
| <section class="issue" aria-label="Issue" data-region="issue"> | |||
| <skeleton-loader lines="2"></skeleton-loader> | |||
| </section> | |||
| </div> | |||
| `, | |||
| () => { | |||
| if (deduped.size === 0) { | |||
| return html` | |||
| <div class="section" data-region="rich-info"> | |||
| <p> | |||
| <code-icon icon="info"></code-icon> Use | |||
| <a href="#" data-action="autolink-settings" title="Configure autolinks" | |||
| >autolinks</a | |||
| > | |||
| to linkify external references, like Jira issues or Zendesk tickets, in commit | |||
| messages. | |||
| </p> | |||
| </div> | |||
| `; | |||
| } | |||
| return html` | |||
| <div class="section" data-region="autolinks"> | |||
| ${autolinks.length | |||
| ? html` | |||
| <section | |||
| class="auto-link" | |||
| aria-label="Custom Autolinks" | |||
| data-region="custom-autolinks" | |||
| > | |||
| ${autolinks.map(autolink => { | |||
| let name = autolink.description ?? autolink.title; | |||
| if (name === undefined) { | |||
| name = `Custom Autolink ${autolink.prefix}${autolink.id}`; | |||
| } | |||
| return html` | |||
| <issue-pull-request | |||
| type="autolink" | |||
| name="${name}" | |||
| url="${autolink.url}" | |||
| key="${autolink.prefix}${autolink.id}" | |||
| status="" | |||
| ></issue-pull-request> | |||
| `; | |||
| })} | |||
| </section> | |||
| ` | |||
| : undefined} | |||
| ${prs.length | |||
| ? html` | |||
| <section | |||
| class="pull-request" | |||
| aria-label="Pull request" | |||
| data-region="pull-request" | |||
| > | |||
| ${prs.map( | |||
| pr => html` | |||
| <issue-pull-request | |||
| type="pr" | |||
| name="${pr.title}" | |||
| url="${pr.url}" | |||
| key="#${pr.id}" | |||
| status="${pr.state}" | |||
| date=${pr.date} | |||
| dateFormat="${this.state!.preferences.dateFormat}" | |||
| ></issue-pull-request> | |||
| </section> | |||
| `, | |||
| )} | |||
| </section> | |||
| ` | |||
| : undefined} | |||
| ${issues.length | |||
| ? html` | |||
| <section class="issue" aria-label="Issue" data-region="issue"> | |||
| ${issues.map( | |||
| issue => html` | |||
| <issue-pull-request | |||
| type="issue" | |||
| name="${issue.title}" | |||
| url="${issue.url}" | |||
| key="${issue.id}" | |||
| status="${issue.state}" | |||
| date="${issue.closed ? issue.closedDate : issue.date}" | |||
| dateFormat="${this.state!.preferences.dateFormat}" | |||
| ></issue-pull-request> | |||
| `, | |||
| )} | |||
| </section> | |||
| ` | |||
| : undefined} | |||
| </div> | |||
| `; | |||
| }, | |||
| )} | |||
| </webview-pane> | |||
| `; | |||
| } | |||
| private renderExplainAi() { | |||
| // TODO: add loading and response states | |||
| return html` | |||
| <webview-pane collapsable data-region="explain-pane"> | |||
| <span slot="title">Explain (AI)</span> | |||
| <span slot="subtitle"><code-icon icon="beaker" size="12"></code-icon></span> | |||
| <action-nav slot="actions"> | |||
| <action-item data-action="switch-ai" label="Switch AI Model" icon="hubot"></action-item> | |||
| </action-nav> | |||
| <div class="section"> | |||
| <p>Let AI assist in understanding the changes made with this commit.</p> | |||
| <p class="button-container"> | |||
| <span class="button-group"> | |||
| <button | |||
| class="button button--full button--busy" | |||
| type="button" | |||
| data-action="explain-commit" | |||
| aria-busy="${this.explainBusy ? 'true' : nothing}" | |||
| @click=${this.onExplainChanges} | |||
| @keydown=${this.onExplainChanges} | |||
| > | |||
| <code-icon icon="loading" modifier="spin"></code-icon>Explain this Commit | |||
| </button> | |||
| </span> | |||
| </p> | |||
| ${when( | |||
| this.explain, | |||
| () => html` | |||
| <div | |||
| class="ai-content${this.explain?.error ? ' has-error' : ''}" | |||
| data-region="commit-explanation" | |||
| > | |||
| ${when( | |||
| this.explain?.error, | |||
| () => | |||
| html`<p class="ai-content__summary scrollable"> | |||
| ${this.explain!.error!.message ?? 'Error retrieving content'} | |||
| </p>`, | |||
| )} | |||
| ${when( | |||
| this.explain?.summary, | |||
| () => html`<p class="ai-content__summary scrollable">${this.explain!.summary}</p>`, | |||
| )} | |||
| </div> | |||
| `, | |||
| )} | |||
| </div> | |||
| </webview-pane> | |||
| `; | |||
| } | |||
| override render() { | |||
| if (this.state?.commit == null) { | |||
| return this.renderEmptyContent(); | |||
| } | |||
| const details = this.state.commit; | |||
| const pinLabel = this.state.pinned | |||
| ? 'Unpin this Commit\nRestores Automatic Following' | |||
| : 'Pin this Commit\nSuspends Automatic Following'; | |||
| return html` | |||
| <div class="top-details"> | |||
| <div class="top-details__top-menu"> | |||
| <div class="top-details__actionbar${this.state.pinned ? ' is-pinned' : ''}"> | |||
| <div class="top-details__actionbar-group"> | |||
| <a | |||
| class="commit-action${this.state.pinned ? ' is-active' : ''}" | |||
| href="#" | |||
| data-action="pin" | |||
| aria-label="${pinLabel}" | |||
| title="${pinLabel}" | |||
| ><code-icon | |||
| icon="${this.state.pinned ? 'gl-pinned-filled' : 'pin'}" | |||
| data-region="commit-pin" | |||
| ></code-icon | |||
| ></a> | |||
| <a | |||
| class="commit-action${this.navigation.back ? '' : ' is-disabled'}" | |||
| aria-disabled="${this.navigation.back ? nothing : 'true'}" | |||
| href="#" | |||
| data-action="back" | |||
| aria-label="Back" | |||
| title="Back" | |||
| ><code-icon icon="arrow-left" data-region="commit-back"></code-icon | |||
| ></a> | |||
| ${when( | |||
| this.navigation.forward, | |||
| () => html` | |||
| <a | |||
| class="commit-action" | |||
| href="#" | |||
| data-action="forward" | |||
| aria-label="Forward" | |||
| title="Forward" | |||
| ><code-icon icon="arrow-right" data-region="commit-forward"></code-icon | |||
| ></a> | |||
| `, | |||
| )} | |||
| ${when( | |||
| this.state.navigationStack?.hint, | |||
| () => html` | |||
| <a | |||
| class="commit-action commit-action--emphasis-low" | |||
| href="#" | |||
| title="View this Commit" | |||
| data-action="${this.state?.pinned ? 'forward' : 'back'}" | |||
| ><code-icon icon="git-commit"></code-icon | |||
| ><span data-region="commit-hint">${this.state!.navigationStack?.hint}</span></a | |||
| > | |||
| `, | |||
| )} | |||
| </div> | |||
| <div class="top-details__actionbar-group"> | |||
| ${when( | |||
| !this.isUncommitted, | |||
| () => html` | |||
| <a | |||
| class="commit-action" | |||
| href="#" | |||
| data-action="commit-actions" | |||
| data-action-type="sha" | |||
| aria-label="Copy SHA | |||
| [⌥] Pick Commit..." | |||
| title="Copy SHA | |||
| [⌥] Pick Commit..." | |||
| > | |||
| <code-icon icon="git-commit"></code-icon> | |||
| <span class="top-details__sha" data-region="shortsha">${this.shortSha}</span></a | |||
| > | |||
| `, | |||
| () => html` | |||
| <a | |||
| class="commit-action" | |||
| href="#" | |||
| data-action="commit-actions" | |||
| data-action-type="scm" | |||
| aria-label="Open SCM view" | |||
| title="Open SCM view" | |||
| ><code-icon icon="source-control"></code-icon | |||
| ></a> | |||
| `, | |||
| )} | |||
| <a | |||
| class="commit-action" | |||
| href="#" | |||
| data-action="commit-actions" | |||
| data-action-type="graph" | |||
| aria-label="Open in Commit Graph" | |||
| title="Open in Commit Graph" | |||
| ><code-icon icon="gl-graph"></code-icon | |||
| ></a> | |||
| ${when( | |||
| !this.isUncommitted, | |||
| () => html` | |||
| <a | |||
| class="commit-action" | |||
| href="#" | |||
| data-action="commit-actions" | |||
| data-action-type="more" | |||
| aria-label="Show Commit Actions" | |||
| title="Show Commit Actions" | |||
| ><code-icon icon="kebab-vertical"></code-icon | |||
| ></a> | |||
| `, | |||
| )} | |||
| </div> | |||
| </div> | |||
| ${when( | |||
| details != null && !this.isStash, | |||
| () => html` | |||
| <ul class="top-details__authors" aria-label="Authors"> | |||
| <li class="top-details__author" data-region="author"> | |||
| <commit-identity | |||
| name="${details.author.name}" | |||
| email="${details.author.email}" | |||
| date=${details.author.date} | |||
| dateFormat="${this.preferences?.dateFormat}" | |||
| avatarUrl="${details.author.avatar ?? ''}" | |||
| showAvatar="${this.preferences?.avatars ?? true}" | |||
| actionLabel="${details.sha === uncommittedSha ? 'modified' : 'committed'}" | |||
| ></commit-identity> | |||
| </li> | |||
| </ul> | |||
| `, | |||
| )} | |||
| </div> | |||
| </div> | |||
| ${this.renderCommitMessage()} ${this.renderAutoLinks()} | |||
| ${this.renderChangedFiles(this.isStash ? 'stash' : 'commit', this.renderCommitStats(details?.stats))} | |||
| ${this.renderExplainAi()} | |||
| `; | |||
| } | |||
| onExplainChanges(e: MouseEvent | KeyboardEvent) { | |||
| if (this.explainBusy === true || (e instanceof KeyboardEvent && e.key !== 'Enter')) { | |||
| e.preventDefault(); | |||
| e.stopPropagation(); | |||
| return; | |||
| } | |||
| this.explainBusy = true; | |||
| } | |||
| private renderCommitStats(stats?: NonNullable<NonNullable<typeof this.state>['commit']>['stats']) { | |||
| if (stats?.changedFiles == null) return undefined; | |||
| if (typeof stats.changedFiles === 'number') { | |||
| return html`<commit-stats added="?" modified="${stats.changedFiles}" removed="?"></commit-stats>`; | |||
| } | |||
| const { added, deleted, changed } = stats.changedFiles; | |||
| return html`<commit-stats added="${added}" modified="${changed}" removed="${deleted}"></commit-stats>`; | |||
| } | |||
| } | |||
+ 235
- 0
src/webviews/apps/commitDetails/components/gl-details-base.ts
Visa fil
| @ -0,0 +1,235 @@ | |||
| import type { TemplateResult } from 'lit'; | |||
| import { html, LitElement } from 'lit'; | |||
| import { property } from 'lit/decorators.js'; | |||
| import { ifDefined } from 'lit/directives/if-defined.js'; | |||
| import { when } from 'lit/directives/when.js'; | |||
| import type { HierarchicalItem } from '../../../../system/array'; | |||
| import { makeHierarchical } from '../../../../system/array'; | |||
| import type { Preferences, State } from '../../../commitDetails/protocol'; | |||
| type Files = Mutable<NonNullable<NonNullable<State['commit']>['files']>>; | |||
| type File = Files[0]; | |||
| type Mode = 'commit' | 'stash' | 'wip'; | |||
| export class GlDetailsBase extends LitElement { | |||
| @property({ type: Array }) | |||
| files?: Files; | |||
| @property({ type: Boolean }) | |||
| isUncommitted = false; | |||
| @property({ type: Object }) | |||
| preferences?: Preferences; | |||
| @property({ attribute: 'empty-text' }) | |||
| emptyText? = 'No Files'; | |||
| private renderFileList(mode: Mode, files: Files) { | |||
| let items; | |||
| let classes; | |||
| if (this.isUncommitted) { | |||
| items = []; | |||
| classes = `indentGuides-${this.preferences?.indentGuides}`; | |||
| const staged = files.filter(f => f.staged); | |||
| if (staged.length) { | |||
| items.push(html`<list-item tree branch hide-icon>Staged Changes</list-item>`); | |||
| for (const f of staged) { | |||
| items.push(this.renderFile(mode, f, 2, true)); | |||
| } | |||
| } | |||
| const unstaged = files.filter(f => !f.staged); | |||
| if (unstaged.length) { | |||
| items.push(html`<list-item tree branch hide-icon>Unstaged Changes</list-item>`); | |||
| for (const f of unstaged) { | |||
| items.push(this.renderFile(mode, f, 2, true)); | |||
| } | |||
| } | |||
| } else { | |||
| items = files.map(f => this.renderFile(mode, f)); | |||
| } | |||
| return html`<list-container class=${ifDefined(classes)}>${items}</list-container>`; | |||
| } | |||
| private renderFileTree(mode: Mode, files: Files) { | |||
| const compact = this.preferences?.files?.compact ?? true; | |||
| let items; | |||
| if (this.isUncommitted) { | |||
| items = []; | |||
| const staged = files.filter(f => f.staged); | |||
| if (staged.length) { | |||
| items.push(html`<list-item tree branch hide-icon>Staged Changes</list-item>`); | |||
| items.push(...this.renderFileSubtree(mode, staged, 1, compact)); | |||
| } | |||
| const unstaged = files.filter(f => !f.staged); | |||
| if (unstaged.length) { | |||
| items.push(html`<list-item tree branch hide-icon>Unstaged Changes</list-item>`); | |||
| items.push(...this.renderFileSubtree(mode, unstaged, 1, compact)); | |||
| } | |||
| } else { | |||
| items = this.renderFileSubtree(mode, files, 0, compact); | |||
| } | |||
| return html`<list-container class="indentGuides-${this.preferences?.indentGuides}">${items}</list-container>`; | |||
| } | |||
| private renderFileSubtree(mode: Mode, files: Files, rootLevel: number, compact: boolean) { | |||
| const tree = makeHierarchical( | |||
| files, | |||
| n => n.path.split('/'), | |||
| (...parts: string[]) => parts.join('/'), | |||
| compact, | |||
| ); | |||
| const flatTree = flattenHeirarchy(tree); | |||
| return flatTree.map(({ level, item }) => { | |||
| if (item.name === '') return undefined; | |||
| if (item.value == null) { | |||
| return html` | |||
| <list-item level="${rootLevel + level}" tree branch> | |||
| <code-icon slot="icon" icon="folder" title="Directory" aria-label="Directory"></code-icon> | |||
| ${item.name} | |||
| </list-item> | |||
| `; | |||
| } | |||
| return this.renderFile(mode, item.value, rootLevel + level, true); | |||
| }); | |||
| } | |||
| private renderFile(mode: Mode, file: File, level: number = 1, tree: boolean = false): TemplateResult<1> { | |||
| return html` | |||
| <file-change-list-item | |||
| ?tree=${tree} | |||
| level="${level}" | |||
| ?stash=${mode === 'stash'} | |||
| ?uncommitted=${this.isUncommitted} | |||
| ?readonly=${this.isUncommitted && mode !== 'wip'} | |||
| path="${file.path}" | |||
| repo="${file.repoPath}" | |||
| ?staged=${file.staged} | |||
| status="${file.status}" | |||
| ></file-change-list-item> | |||
| `; | |||
| } | |||
| protected renderChangedFiles(mode: Mode, subtitle?: TemplateResult<1>) { | |||
| const layout = this.preferences?.files?.layout ?? 'auto'; | |||
| let value = 'tree'; | |||
| let icon = 'list-tree'; | |||
| let label = 'View as Tree'; | |||
| let isTree = false; | |||
| if (this.preferences != null && this.files != null) { | |||
| if (layout === 'auto') { | |||
| isTree = this.files.length > (this.preferences.files?.threshold ?? 5); | |||
| } else { | |||
| isTree = layout === 'tree'; | |||
| } | |||
| switch (layout) { | |||
| case 'auto': | |||
| value = 'list'; | |||
| icon = 'gl-list-auto'; | |||
| label = 'View as List'; | |||
| break; | |||
| case 'list': | |||
| value = 'tree'; | |||
| icon = 'list-flat'; | |||
| label = 'View as Tree'; | |||
| break; | |||
| case 'tree': | |||
| value = 'auto'; | |||
| icon = 'list-tree'; | |||
| label = 'View as Auto'; | |||
| break; | |||
| } | |||
| } | |||
| return html` | |||
| <webview-pane collapsable expanded> | |||
| <span slot="title">Files changed </span> | |||
| <span slot="subtitle" data-region="stats">${subtitle}</span> | |||
| <action-nav slot="actions"> | |||
| <action-item | |||
| data-action="files-layout" | |||
| data-files-layout="${value}" | |||
| label="${label}" | |||
| icon="${icon}" | |||
| ></action-item> | |||
| </action-nav> | |||
| <div class="change-list" data-region="files"> | |||
| ${when( | |||
| this.files == null, | |||
| () => html` | |||
| <div class="section section--skeleton"> | |||
| <skeleton-loader></skeleton-loader> | |||
| </div> | |||
| <div class="section section--skeleton"> | |||
| <skeleton-loader></skeleton-loader> | |||
| </div> | |||
| <div class="section section--skeleton"> | |||
| <skeleton-loader></skeleton-loader> | |||
| </div> | |||
| `, | |||
| () => | |||
| when( | |||
| this.files!.length > 0, | |||
| () => | |||
| isTree | |||
| ? this.renderFileTree(mode, this.files!) | |||
| : this.renderFileList(mode, this.files!), | |||
| () => html`<div class="section"><p>${this.emptyText}</p></div>`, | |||
| ), | |||
| )} | |||
| </div> | |||
| </webview-pane> | |||
| `; | |||
| } | |||
| protected override createRenderRoot() { | |||
| return this; | |||
| } | |||
| } | |||
| function flattenHeirarchy<T>(item: HierarchicalItem<T>, level = 0): { level: number; item: HierarchicalItem<T> }[] { | |||
| const flattened: { level: number; item: HierarchicalItem<T> }[] = []; | |||
| if (item == null) return flattened; | |||
| flattened.push({ level: level, item: item }); | |||
| if (item.children != null) { | |||
| const children = Array.from(item.children.values()); | |||
| children.sort((a, b) => { | |||
| if (!a.value || !b.value) { | |||
| return (a.value ? 1 : -1) - (b.value ? 1 : -1); | |||
| } | |||
| if (a.relativePath < b.relativePath) { | |||
| return -1; | |||
| } | |||
| if (a.relativePath > b.relativePath) { | |||
| return 1; | |||
| } | |||
| return 0; | |||
| }); | |||
| children.forEach(child => { | |||
| flattened.push(...flattenHeirarchy(child, level + 1)); | |||
| }); | |||
| } | |||
| return flattened; | |||
| } | |||
+ 67
- 0
src/webviews/apps/commitDetails/components/gl-wip-details.ts
Visa fil
| @ -0,0 +1,67 @@ | |||
| import { html } from 'lit'; | |||
| import { customElement, property } from 'lit/decorators.js'; | |||
| import { when } from 'lit/directives/when.js'; | |||
| import { pluralize } from '../../../../system/string'; | |||
| import type { Wip } from '../../../commitDetails/protocol'; | |||
| import { GlDetailsBase } from './gl-details-base'; | |||
| @customElement('gl-wip-details') | |||
| export class GlWipDetails extends GlDetailsBase { | |||
| @property({ type: Object }) | |||
| wip?: Wip; | |||
| override render() { | |||
| return html` | |||
| <div class="top-details"> | |||
| <div class="top-details__top-menu"> | |||
| <div class="top-details__actionbar"> | |||
| <div class="top-details__actionbar-group"> | |||
| ${when( | |||
| this.wip?.changes == null || this.files == null, | |||
| () => 'Loading...', | |||
| () => | |||
| html`<span | |||
| >${pluralize('change', this.files!.length)} on | |||
| <span | |||
| class="top-details__actionbar--highlight" | |||
| title="${this.wip!.repositoryCount > 1 | |||
| ? `${this.wip!.changes!.repository.name}:${ | |||
| this.wip!.changes!.branchName | |||
| }` | |||
| : this.wip!.changes!.branchName}" | |||
| >${this.wip!.repositoryCount > 1 | |||
| ? `${this.wip!.changes!.repository.name}:${ | |||
| this.wip!.changes!.branchName | |||
| }` | |||
| : this.wip!.changes!.branchName}</span | |||
| ></span | |||
| >`, | |||
| )} | |||
| </div> | |||
| <div class="top-details__actionbar-group"> | |||
| <a | |||
| class="commit-action" | |||
| href="#" | |||
| data-action="commit-actions" | |||
| data-action-type="scm" | |||
| aria-label="Open SCM view" | |||
| title="Open SCM view" | |||
| ><code-icon icon="source-control"></code-icon | |||
| ></a> | |||
| <a | |||
| class="commit-action" | |||
| href="#" | |||
| data-action="commit-actions" | |||
| data-action-type="graph" | |||
| aria-label="Open in Commit Graph" | |||
| title="Open in Commit Graph" | |||
| ><code-icon icon="gl-graph"></code-icon | |||
| ></a> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| ${this.renderChangedFiles('wip')} | |||
| `; | |||
| } | |||
| } | |||
+ 5
- 4
src/webviews/apps/shared/components/commit/commit-identity.ts
Visa fil
+ 52
- 31
src/webviews/apps/shared/components/list/file-change-list-item.ts
Visa fil
+ 0
- 1
src/webviews/apps/shared/components/list/list-container.ts
Visa fil
+ 2
- 0
src/webviews/apps/shared/components/list/list-item.ts
Visa fil
+ 237
- 0
src/webviews/apps/shared/components/status/git-status.ts
Visa fil
| @ -0,0 +1,237 @@ | |||
| import type { PropertyValueMap } from 'lit'; | |||
| import { css, html, LitElement } from 'lit'; | |||
| import { customElement, property, state } from 'lit/decorators.js'; | |||
| import type { GitFileStatus } from '../../../../../git/models/file'; | |||
| // TODO: use the model version | |||
| const statusTextMap: Record<string, string> = { | |||
| '.': 'Unchanged', | |||
| '!': 'Ignored', | |||
| '?': 'Untracked', | |||
| A: 'Added', | |||
| D: 'Deleted', | |||
| M: 'Modified', | |||
| R: 'Renamed', | |||
| C: 'Copied', | |||
| AA: 'Conflict', | |||
| AU: 'Conflict', | |||
| UA: 'Conflict', | |||
| DD: 'Conflict', | |||
| DU: 'Conflict', | |||
| UD: 'Conflict', | |||
| UU: 'Conflict', | |||
| T: 'Modified', | |||
| U: 'Updated but Unmerged', | |||
| }; | |||
| @customElement('gl-git-status') | |||
| export class GlGitStatus extends LitElement { | |||
| static override styles = [ | |||
| css` | |||
| :host-context(.vscode-high-contrast), | |||
| :host-context(.vscode-dark) { | |||
| --gl-git-status-ignored: #969696; | |||
| --gl-git-status-untracked: #6c6c6c; | |||
| --gl-git-status-added: #388a34; | |||
| --gl-git-status-deleted: #9e121d; | |||
| --gl-git-status-modified: #1b80b2; | |||
| --gl-git-status-renamed: #c63; | |||
| --gl-git-status-copied: #692c77; | |||
| --gl-git-status-conflict: #7f4e7e; | |||
| --gl-git-status-unknown: #6c6c6c; | |||
| } | |||
| :host-context(.vscode-high-contrast-light), | |||
| :host-context(.vscode-light) { | |||
| --gl-git-status-ignored: #969696; | |||
| --gl-git-status-untracked: #6c6c6c; | |||
| --gl-git-status-added: #388a34; | |||
| --gl-git-status-deleted: #9e121d; | |||
| --gl-git-status-modified: #1b80b2; | |||
| --gl-git-status-renamed: #c63; | |||
| --gl-git-status-copied: #692c77; | |||
| --gl-git-status-conflict: #7f4e7e; | |||
| --gl-git-status-unknown: #6c6c6c; | |||
| } | |||
| :host { | |||
| display: inline-block; | |||
| width: 16px; | |||
| aspect-ratio: 1 / 1; | |||
| } | |||
| svg { | |||
| display: inline-block; | |||
| vertical-align: text-bottom; | |||
| } | |||
| `, | |||
| ]; | |||
| @property() | |||
| status?: GitFileStatus | 'T'; | |||
| @state() | |||
| get statusName() { | |||
| if (!this.status) return ''; | |||
| return statusTextMap[this.status]; | |||
| } | |||
| override updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void { | |||
| super.updated(changedProperties); | |||
| if (changedProperties.has('status')) { | |||
| if (this.statusName) { | |||
| this.setAttribute('title', this.statusName); | |||
| } else { | |||
| this.removeAttribute('title'); | |||
| } | |||
| } | |||
| } | |||
| renderIgnored() { | |||
| return html` | |||
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"> | |||
| <path | |||
| fill="#969696" | |||
| fill-rule="evenodd" | |||
| d="M7.5 15a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zM10 4l-6.01 6.01 1.06 1.061 6.01-6.01L10 4z" | |||
| clip-rule="evenodd" | |||
| /> | |||
| </svg> | |||
| `; | |||
| } | |||
| renderUntracked() { | |||
| return html` | |||
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"> | |||
| <path | |||
| fill="#6C6C6C" | |||
| fill-rule="evenodd" | |||
| d="M7.5 15a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm-3.942-3.942l7.5-7.5.884.884-.664.664c.95.655 1.65 1.524 2.222 2.394-1.15 1.75-2.824 3.5-6 3.5-.696 0-1.32-.084-1.882-.234l-1.176 1.176-.884-.884zm5.188-3.42l1.629-1.629c.634.393 1.147.913 1.594 1.491C10.99 8.767 9.692 9.75 7.5 9.75c-.287 0-.56-.017-.817-.05l.455-.454a1.5 1.5 0 0 0 1.608-1.608zM7.362 6.254L5.754 7.862a1.5 1.5 0 0 1 1.608-1.608zm.955-.955A6.595 6.595 0 0 0 7.5 5.25c-2.192 0-3.49.982-4.469 2.25.447.578.96 1.098 1.594 1.491l-.903.903C2.772 9.239 2.072 8.369 1.5 7.5 2.65 5.75 4.324 4 7.5 4c.696 0 1.32.084 1.882.234L8.317 5.299z" | |||
| clip-rule="evenodd" | |||
| /> | |||
| </svg> | |||
| `; | |||
| } | |||
| renderAdded() { | |||
| return html` | |||
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"> | |||
| <path | |||
| fill="#388A34" | |||
| fill-rule="evenodd" | |||
| d="M7.5 15a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm.75-6.75h3v-1.5h-3v-3h-1.5v3h-3v1.5h3v3h1.5v-3z" | |||
| clip-rule="evenodd" | |||
| /> | |||
| </svg> | |||
| `; | |||
| } | |||
| renderDeleted() { | |||
| return html` | |||
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"> | |||
| <path | |||
| fill="#9E121D" | |||
| fill-rule="evenodd" | |||
| d="M7.5 15a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm3.75-6.75v-1.5h-7.5v1.5h7.5z" | |||
| clip-rule="evenodd" | |||
| /> | |||
| </svg> | |||
| `; | |||
| } | |||
| renderModified() { | |||
| return html` | |||
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"> | |||
| <path | |||
| fill="#1B80B2" | |||
| fill-rule="evenodd" | |||
| d="M7.5 15a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm3.75-9.5V7h-3v2.5h-1.5V7h-3V5.5h3v-3h1.5v3h3zm0 5V12h-7.5v-1.5h7.5z" | |||
| clip-rule="evenodd" | |||
| /> | |||
| </svg> | |||
| `; | |||
| } | |||
| renderRenamed() { | |||
| return html` | |||
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"> | |||
| <path | |||
| fill="#C63" | |||
| fill-rule="evenodd" | |||
| d="M7.5 15a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zM9.25 4.5v1.25h1.25l1 1v2.5l-1 1H9.25v1.25H10v1.25H7V11.5h.75v-1.25H4l-1-1v-2.5l1-1h3.75V4.5H7V3.25h3V4.5h-.75zm-5 2.5h3.5v2h-3.5V7zm5 0v2h1V7h-1z" | |||
| clip-rule="evenodd" | |||
| /> | |||
| </svg> | |||
| `; | |||
| } | |||
| renderCopied() { | |||
| return html` | |||
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"> | |||
| <path | |||
| fill="#692C77" | |||
| fill-rule="evenodd" | |||
| d="M7.5 15a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zM6.964 3.75L5.893 4.813v.53h1.071v-.53h3.215v4.25h-.536v1.062h.536l1.071-1.063v-4.25L10.179 3.75H6.964zM3.75 6.938l1.071-1.063h3.215l1.071 1.063v4.25L8.036 12.25H4.82L3.75 11.187v-4.25zm1.071 0v4.25h3.215v-4.25H4.82z" | |||
| clip-rule="evenodd" | |||
| /> | |||
| </svg> | |||
| `; | |||
| } | |||
| renderConflict() { | |||
| return html` | |||
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"> | |||
| <path | |||
| fill="#7F4E7E" | |||
| fill-rule="evenodd" | |||
| d="M7.5 15a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm-4.03-4.53L6.44 7.5 3.47 4.53l1.06-1.06L7.5 6.44l2.97-2.97 1.06 1.06L8.56 7.5l2.97 2.97-1.06 1.06L7.5 8.56l-2.97 2.97-1.06-1.06z" | |||
| clip-rule="evenodd" | |||
| /> | |||
| </svg> | |||
| `; | |||
| } | |||
| renderUnknown() { | |||
| return html` | |||
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"> | |||
| <path | |||
| fill="#6C6C6C" | |||
| fill-rule="evenodd" | |||
| d="M7.5 15a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zM9.19 2.822c-.439-.215-.97-.322-1.596-.322-1.25 0-2.282.478-3.094 1.435l1.05.798c.275-.331.579-.574.91-.728.331-.154.66-.231.987-.231.415 0 .76.093 1.036.28.275.182.413.448.413.798 0 .275-.082.509-.245.7-.159.187-.36.364-.602.532a9.506 9.506 0 0 0-.728.56 2.66 2.66 0 0 0-.602.763c-.159.299-.238.679-.238 1.141v.483h1.498v-.413c0-.364.086-.663.259-.896a2.76 2.76 0 0 1 .637-.616c.252-.177.504-.362.756-.553.257-.196.471-.436.644-.721.173-.285.259-.651.259-1.099 0-.387-.114-.749-.343-1.085-.229-.34-.562-.616-1.001-.826zm-1.169 7.917a1.024 1.024 0 0 0-.763-.315c-.294 0-.544.105-.749.315-.2.205-.301.453-.301.742 0 .294.1.546.301.756.205.205.455.308.749.308.303 0 .558-.103.763-.308.205-.21.308-.462.308-.756 0-.29-.103-.537-.308-.742z" | |||
| clip-rule="evenodd" | |||
| /> | |||
| </svg> | |||
| `; | |||
| } | |||
| override render() { | |||
| switch (this.status) { | |||
| case '!': | |||
| return this.renderIgnored(); | |||
| case '?': | |||
| return this.renderUntracked(); | |||
| case 'A': | |||
| return this.renderAdded(); | |||
| case 'D': | |||
| return this.renderDeleted(); | |||
| case 'M': | |||
| case 'T': | |||
| case 'U': | |||
| return this.renderModified(); | |||
| case 'R': | |||
| return this.renderRenamed(); | |||
| case 'C': | |||
| return this.renderCopied(); | |||
| case 'AA': | |||
| case 'AU': | |||
| case 'UA': | |||
| case 'DD': | |||
| case 'DU': | |||
| case 'UD': | |||
| case 'UU': | |||
| return this.renderConflict(); | |||
| } | |||
| return this.renderUnknown(); | |||
| } | |||
| } | |||