mirror of
https://github.com/desktop/desktop
synced 2024-10-30 17:25:09 +00:00
Merge pull request #17535 from desktop/commit-summary-expansion-history-file-list-header
Commit Summary Expansion: Add history file list header
This commit is contained in:
commit
c0d31ee9ff
3 changed files with 36 additions and 93 deletions
|
@ -13,7 +13,6 @@ import { Tokenizer, TokenResult } from '../../lib/text-token-parser'
|
|||
import { wrapRichTextCommitMessage } from '../../lib/wrap-rich-text-commit-message'
|
||||
import { IChangesetData } from '../../lib/git'
|
||||
import { TooltippedContent } from '../lib/tooltipped-content'
|
||||
import { AppFileStatusKind } from '../../models/status'
|
||||
import uniqWith from 'lodash/uniqWith'
|
||||
import { LinkButton } from '../lib/link-button'
|
||||
import { UnreachableCommitsTab } from './unreachable-commits-dialog'
|
||||
|
@ -484,7 +483,6 @@ export class ExpandableCommitSummary extends React.Component<
|
|||
<ul className="commit-summary-meta">
|
||||
{this.renderAuthors()}
|
||||
{this.renderCommitRef()}
|
||||
{this.renderChangedFilesDescription()}
|
||||
{this.renderLinesChanged()}
|
||||
{this.renderTags()}
|
||||
</ul>
|
||||
|
@ -496,89 +494,6 @@ export class ExpandableCommitSummary extends React.Component<
|
|||
)
|
||||
}
|
||||
|
||||
private renderChangedFilesDescription = () => {
|
||||
const fileCount = this.props.changesetData.files.length
|
||||
const filesPlural = fileCount === 1 ? 'file' : 'files'
|
||||
const filesShortDescription = `${fileCount} changed ${filesPlural}`
|
||||
|
||||
let filesAdded = 0
|
||||
let filesModified = 0
|
||||
let filesRemoved = 0
|
||||
let filesRenamed = 0
|
||||
for (const file of this.props.changesetData.files) {
|
||||
switch (file.status.kind) {
|
||||
case AppFileStatusKind.New:
|
||||
filesAdded += 1
|
||||
break
|
||||
case AppFileStatusKind.Modified:
|
||||
filesModified += 1
|
||||
break
|
||||
case AppFileStatusKind.Deleted:
|
||||
filesRemoved += 1
|
||||
break
|
||||
case AppFileStatusKind.Renamed:
|
||||
filesRenamed += 1
|
||||
}
|
||||
}
|
||||
|
||||
const hasFileDescription =
|
||||
filesAdded + filesModified + filesRemoved + filesRenamed > 0
|
||||
|
||||
const filesLongDescription = (
|
||||
<>
|
||||
{filesAdded > 0 ? (
|
||||
<span>
|
||||
<Octicon
|
||||
className="files-added-icon"
|
||||
symbol={OcticonSymbol.diffAdded}
|
||||
/>
|
||||
{filesAdded} added
|
||||
</span>
|
||||
) : null}
|
||||
{filesModified > 0 ? (
|
||||
<span>
|
||||
<Octicon
|
||||
className="files-modified-icon"
|
||||
symbol={OcticonSymbol.diffModified}
|
||||
/>
|
||||
{filesModified} modified
|
||||
</span>
|
||||
) : null}
|
||||
{filesRemoved > 0 ? (
|
||||
<span>
|
||||
<Octicon
|
||||
className="files-deleted-icon"
|
||||
symbol={OcticonSymbol.diffRemoved}
|
||||
/>
|
||||
{filesRemoved} deleted
|
||||
</span>
|
||||
) : null}
|
||||
{filesRenamed > 0 ? (
|
||||
<span>
|
||||
<Octicon
|
||||
className="files-renamed-icon"
|
||||
symbol={OcticonSymbol.diffRenamed}
|
||||
/>
|
||||
{filesRenamed} renamed
|
||||
</span>
|
||||
) : null}
|
||||
</>
|
||||
)
|
||||
|
||||
return (
|
||||
<TooltippedContent
|
||||
className="commit-summary-meta-item without-truncation"
|
||||
tooltipClassName="changed-files-description-tooltip"
|
||||
tooltip={
|
||||
fileCount > 0 && hasFileDescription ? filesLongDescription : undefined
|
||||
}
|
||||
>
|
||||
<Octicon symbol={OcticonSymbol.diff} />
|
||||
{filesShortDescription}
|
||||
</TooltippedContent>
|
||||
)
|
||||
}
|
||||
|
||||
private renderLinesChanged() {
|
||||
const linesAdded = this.props.changesetData.linesAdded
|
||||
const linesDeleted = this.props.changesetData.linesDeleted
|
||||
|
|
|
@ -297,14 +297,31 @@ export class SelectedCommits extends React.Component<
|
|||
const availableWidth = clamp(this.props.commitSummaryWidth) - 1
|
||||
|
||||
return (
|
||||
<FileList
|
||||
files={files}
|
||||
onSelectedFileChanged={this.onFileSelected}
|
||||
selectedFile={this.props.selectedFile}
|
||||
availableWidth={availableWidth}
|
||||
onContextMenu={this.onContextMenu}
|
||||
onRowDoubleClick={this.onRowDoubleClick}
|
||||
/>
|
||||
<>
|
||||
{this.renderFileHeader()}
|
||||
<FileList
|
||||
files={files}
|
||||
onSelectedFileChanged={this.onFileSelected}
|
||||
selectedFile={this.props.selectedFile}
|
||||
availableWidth={availableWidth}
|
||||
onContextMenu={this.onContextMenu}
|
||||
onRowDoubleClick={this.onRowDoubleClick}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
private renderFileHeader() {
|
||||
if (!enableCommitDetailsHeaderExpansion()) {
|
||||
return null
|
||||
}
|
||||
|
||||
const fileCount = this.props.changesetData.files.length
|
||||
const filesPlural = fileCount === 1 ? 'file' : 'files'
|
||||
return (
|
||||
<div className="file-list-header">
|
||||
{fileCount} changed {filesPlural}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -11,4 +11,15 @@
|
|||
// look right alongside blank diff
|
||||
border-right: var(--base-border);
|
||||
}
|
||||
|
||||
.file-list-header {
|
||||
background: var(--box-alt-background-color);
|
||||
border-bottom: 1px solid var(--box-border-color);
|
||||
border-right: var(--base-border);
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 var(--spacing);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue