From b9dc1d3daa287392175626fb2f020269c5deeff0 Mon Sep 17 00:00:00 2001 From: Eric Amodio Date: Fri, 23 Dec 2022 00:20:00 -0500 Subject: [PATCH] Matches vscode alt modifier & dblclick behavior --- .../shared/components/commit/file-change-item.ts | 273 --------------------- .../components/list/file-change-list-item.ts | 48 ++-- .../apps/shared/components/list/list-container.ts | 44 ++-- .../apps/shared/components/list/list-item.ts | 32 ++- 4 files changed, 79 insertions(+), 318 deletions(-) delete mode 100644 src/webviews/apps/shared/components/commit/file-change-item.ts diff --git a/src/webviews/apps/shared/components/commit/file-change-item.ts b/src/webviews/apps/shared/components/commit/file-change-item.ts deleted file mode 100644 index da20e17..0000000 --- a/src/webviews/apps/shared/components/commit/file-change-item.ts +++ /dev/null @@ -1,273 +0,0 @@ -import { css, html, LitElement, nothing } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; -import type { FileShowOptions } from '../../../../commitDetails/protocol'; -import '../code-icon'; - -export interface FileChangeItemEventDetail { - path: string; - repoPath: string; - showOptions?: FileShowOptions; -} - -// TODO: use the model version -const statusTextMap: Record = { - '.': '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', -}; - -// TODO: use the model version -const statusCodiconsMap: Record = { - '.': undefined, - '!': 'diff-ignored', - '?': 'diff-added', - A: 'diff-added', - D: 'diff-removed', - M: 'diff-modified', - R: 'diff-renamed', - C: 'diff-added', - AA: 'warning', - AU: 'warning', - UA: 'warning', - DD: 'warning', - DU: 'warning', - UD: 'warning', - UU: 'warning', - T: 'diff-modified', - U: 'diff-modified', -}; - -@customElement('file-change-item') -export class FileChangeItem extends LitElement { - static override styles = css` - :host { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - font-size: var(--vscode-font-size); - line-height: 2rem; - color: var(--vscode-sideBar-foreground); - } - :host(:hover) { - color: var(--vscode-list-hoverForeground); - background-color: var(--vscode-list-hoverBackground); - } - - :host(:focus-within) { - outline: 1px solid var(--vscode-list-focusOutline); - outline-offset: -1px; - color: var(--vscode-list-activeSelectionForeground); - background-color: var(--vscode-list-activeSelectionBackground); - } - - * { - box-sizing: border-box; - } - - .change-list__link { - width: 100%; - color: inherit; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - text-decoration: none; - outline: none; - } - - .change-list__status { - margin-right: 0.6rem; - } - - .change-list__status-icon { - width: 16px; - aspect-ratio: 1; - vertical-align: text-bottom; - } - - .change-list__path { - opacity: 0.7; - margin-left: 0.3rem; - } - - .change-list__actions { - flex: none; - user-select: none; - display: flex; - align-items: center; - color: var(--vscode-icon-foreground); - } - - :host(:focus-within) .change-list__actions { - color: var(--vscode-list-activeSelectionIconForeground); - } - - :host(:not(:hover):not(:focus-within)) .change-list__actions { - display: none; - } - - .change-list__action { - display: inline-flex; - justify-content: center; - align-items: center; - width: 2rem; - height: 2rem; - border-radius: 0.25em; - color: inherit; - padding: 2px; - vertical-align: text-bottom; - text-decoration: none; - } - .change-list__action:focus { - outline: 1px solid var(--vscode-focusBorder); - outline-offset: -1px; - } - .change-list__action:hover { - background-color: var(--vscode-toolbar-hoverBackground); - } - .change-list__action:active { - background-color: var(--vscode-toolbar-activeBackground); - } - `; - - @property() - status = ''; - - @property() - path = ''; - - @property({ attribute: 'repo-path' }) - repoPath = ''; - - @property() - icon = ''; - - @property({ type: Boolean, reflect: true }) - stash = false; - - @property({ type: Boolean, reflect: true }) - uncommitted = false; - - @property({ type: Boolean, reflect: true }) - tree = false; - - private renderIcon() { - if (this.icon !== '') { - return html``; - } - - const statusIcon = (this.status !== '' && statusCodiconsMap[this.status]) ?? 'file'; - return html` `; - } - - override focus(options?: FocusOptions | undefined): void { - this.shadowRoot?.getElementById('item')?.focus(options); - } - - open(showOptions?: FileShowOptions): void { - this.onComparePrevious(undefined, showOptions); - } - - override render() { - const statusName = this.status !== '' ? statusTextMap[this.status] : ''; - const pathIndex = this.path.lastIndexOf('/'); - const fileName = pathIndex > -1 ? this.path.substring(pathIndex + 1) : this.path; - const filePath = !this.tree && pathIndex > -1 ? this.path.substring(0, pathIndex) : ''; - - return html` - - ${this.renderIcon()}${fileName} - ${!this.tree ? html`${filePath}` : nothing} - - - `; - } - - private onOpenFile(e: Event) { - e.preventDefault(); - this.fireEvent('file-open'); - } - - private onOpenFileOnRemote(e: Event) { - e.preventDefault(); - this.fireEvent('file-open-on-remote'); - } - - private onCompareWorking(e: Event) { - e.preventDefault(); - this.fireEvent('file-compare-working'); - } - - private onComparePrevious(e?: Event, showOptions?: FileShowOptions) { - e?.preventDefault(); - this.fireEvent('file-compare-previous', showOptions); - } - - private onMoreActions(e: Event) { - e.preventDefault(); - this.fireEvent('file-more-actions'); - } - - private fireEvent(eventName: string, showOptions?: FileShowOptions) { - const event = new CustomEvent(eventName, { - detail: { - path: this.path, - repoPath: this.repoPath, - showOptions: showOptions, - }, - bubbles: true, - composed: true, - }); - this.dispatchEvent(event); - } -} diff --git a/src/webviews/apps/shared/components/list/file-change-list-item.ts b/src/webviews/apps/shared/components/list/file-change-list-item.ts index 8e8867c..1c3a65b 100644 --- a/src/webviews/apps/shared/components/list/file-change-list-item.ts +++ b/src/webviews/apps/shared/components/list/file-change-list-item.ts @@ -1,10 +1,12 @@ import { attr, css, customElement, FASTElement, html, ref, volatile, when } from '@microsoft/fast-element'; import type { TextDocumentShowOptions } from 'vscode'; import { numberConverter } from '../converters/number-converter'; -import type { ListItem } from './list-item'; -import './list-item'; +import type { ListItem, ListItemSelectedEvent } from './list-item'; import '../code-icon'; +// Can only import types from 'vscode' +const BesideViewColumn = -2; /*ViewColumn.Beside*/ + export interface FileChangeListItemDetail { path: string; repoPath: string; @@ -20,7 +22,7 @@ const template = html` active="${x => x.active}" expanded="${x => x.expanded}" parentexpanded="${x => x.parentexpanded}" - @selected="${(x, c) => x.onComparePrevious(c.event)}" + @selected="${(x, c) => x.onComparePrevious(c.event as ListItemSelectedEvent)}" > ${x => x.statusName} ${x => x.fileName} @@ -28,7 +30,7 @@ const template = html` ` html` ` x => !x.stash, html``