mirror of
https://github.com/desktop/desktop
synced 2024-09-19 08:02:22 +00:00
Merge pull request #12129 from desktop/hide-whitespace-fixes
This commit is contained in:
commit
924508b765
|
@ -6,6 +6,7 @@ import { getBoolean, setBoolean } from '../../lib/local-storage'
|
||||||
import { Popover, PopoverCaretPosition } from '../lib/popover'
|
import { Popover, PopoverCaretPosition } from '../lib/popover'
|
||||||
import { enableHideWhitespaceInDiffOption } from '../../lib/feature-flag'
|
import { enableHideWhitespaceInDiffOption } from '../../lib/feature-flag'
|
||||||
import { RepositorySectionTab } from '../../lib/app-state'
|
import { RepositorySectionTab } from '../../lib/app-state'
|
||||||
|
import { HideWhitespaceWarning } from './hide-whitespace-warning'
|
||||||
|
|
||||||
interface IDiffOptionsProps {
|
interface IDiffOptionsProps {
|
||||||
readonly sourceTab: RepositorySectionTab
|
readonly sourceTab: RepositorySectionTab
|
||||||
|
@ -163,6 +164,9 @@ export class DiffOptions extends React.Component<
|
||||||
__DARWIN__ ? 'Hide Whitespace Changes' : 'Hide whitespace changes'
|
__DARWIN__ ? 'Hide Whitespace Changes' : 'Hide whitespace changes'
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
{this.props.sourceTab === RepositorySectionTab.Changes && (
|
||||||
|
<p className="secondary-text">{HideWhitespaceWarning}</p>
|
||||||
|
)}
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
2
app/src/ui/diff/hide-whitespace-warning.ts
Normal file
2
app/src/ui/diff/hide-whitespace-warning.ts
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
export const HideWhitespaceWarning =
|
||||||
|
'Interacting with individual lines or hunks will be disabled while hiding whitespace.'
|
|
@ -246,12 +246,16 @@ export class Diff extends React.Component<IDiffProps, IDiffState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
private renderTextDiff(diff: ITextDiff) {
|
private renderTextDiff(diff: ITextDiff) {
|
||||||
|
const hideWhitespaceInDiff =
|
||||||
|
enableHideWhitespaceInDiffOption() && this.props.hideWhitespaceInDiff
|
||||||
|
|
||||||
if (enableExperimentalDiffViewer() || this.props.showSideBySideDiff) {
|
if (enableExperimentalDiffViewer() || this.props.showSideBySideDiff) {
|
||||||
return (
|
return (
|
||||||
<SideBySideDiff
|
<SideBySideDiff
|
||||||
repository={this.props.repository}
|
repository={this.props.repository}
|
||||||
file={this.props.file}
|
file={this.props.file}
|
||||||
diff={diff}
|
diff={diff}
|
||||||
|
hideWhitespaceInDiff={hideWhitespaceInDiff}
|
||||||
showSideBySideDiff={this.props.showSideBySideDiff}
|
showSideBySideDiff={this.props.showSideBySideDiff}
|
||||||
onIncludeChanged={this.props.onIncludeChanged}
|
onIncludeChanged={this.props.onIncludeChanged}
|
||||||
onDiscardChanges={this.props.onDiscardChanges}
|
onDiscardChanges={this.props.onDiscardChanges}
|
||||||
|
@ -262,9 +266,6 @@ export class Diff extends React.Component<IDiffProps, IDiffState> {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const hideWhitespaceInDiff =
|
|
||||||
enableHideWhitespaceInDiffOption() && this.props.hideWhitespaceInDiff
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TextDiff
|
<TextDiff
|
||||||
repository={this.props.repository}
|
repository={this.props.repository}
|
||||||
|
|
|
@ -14,6 +14,7 @@ import { narrowNoNewlineSymbol } from './text-diff'
|
||||||
import { shallowEquals, structuralEquals } from '../../lib/equality'
|
import { shallowEquals, structuralEquals } from '../../lib/equality'
|
||||||
import { DiffHunkExpansionType } from '../../models/diff'
|
import { DiffHunkExpansionType } from '../../models/diff'
|
||||||
import { DiffExpansionKind } from './text-diff-expansion'
|
import { DiffExpansionKind } from './text-diff-expansion'
|
||||||
|
import { HideWhitespaceWarning } from './hide-whitespace-warning'
|
||||||
|
|
||||||
interface ISideBySideDiffRowProps {
|
interface ISideBySideDiffRowProps {
|
||||||
/**
|
/**
|
||||||
|
@ -36,6 +37,9 @@ interface ISideBySideDiffRowProps {
|
||||||
*/
|
*/
|
||||||
readonly showSideBySideDiff: boolean
|
readonly showSideBySideDiff: boolean
|
||||||
|
|
||||||
|
/** Whether or not whitespace changes are hidden. */
|
||||||
|
readonly hideWhitespaceInDiff: boolean
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The index of the row in the displayed diff.
|
* The index of the row in the displayed diff.
|
||||||
*/
|
*/
|
||||||
|
@ -362,9 +366,13 @@ export class SideBySideDiffRow extends React.Component<
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const classes = classNames('hunk-handle', {
|
||||||
|
hoverable: !this.props.hideWhitespaceInDiff,
|
||||||
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="hunk-handle"
|
className={classes}
|
||||||
onMouseEnter={this.onMouseEnterHunk}
|
onMouseEnter={this.onMouseEnterHunk}
|
||||||
onMouseLeave={this.onMouseLeaveHunk}
|
onMouseLeave={this.onMouseLeaveHunk}
|
||||||
onClick={this.onClickHunk}
|
onClick={this.onClickHunk}
|
||||||
|
@ -399,8 +407,12 @@ export class SideBySideDiffRow extends React.Component<
|
||||||
<div
|
<div
|
||||||
className={classNames('line-number', 'selectable', {
|
className={classNames('line-number', 'selectable', {
|
||||||
'line-selected': isSelected,
|
'line-selected': isSelected,
|
||||||
|
hoverable: !this.props.hideWhitespaceInDiff,
|
||||||
hover: this.props.isHunkHovered,
|
hover: this.props.isHunkHovered,
|
||||||
})}
|
})}
|
||||||
|
title={
|
||||||
|
this.props.hideWhitespaceInDiff ? HideWhitespaceWarning : undefined
|
||||||
|
}
|
||||||
onMouseDown={this.onMouseDownLineNumber}
|
onMouseDown={this.onMouseDownLineNumber}
|
||||||
onContextMenu={this.onContextMenuLineNumber}
|
onContextMenu={this.onContextMenuLineNumber}
|
||||||
>
|
>
|
||||||
|
@ -473,7 +485,7 @@ export class SideBySideDiffRow extends React.Component<
|
||||||
}
|
}
|
||||||
|
|
||||||
private onMouseDownLineNumber = (evt: React.MouseEvent) => {
|
private onMouseDownLineNumber = (evt: React.MouseEvent) => {
|
||||||
if (evt.buttons === 2) {
|
if (evt.buttons === 2 || this.props.hideWhitespaceInDiff) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -486,6 +498,10 @@ export class SideBySideDiffRow extends React.Component<
|
||||||
}
|
}
|
||||||
|
|
||||||
private onMouseEnterLineNumber = (evt: React.MouseEvent) => {
|
private onMouseEnterLineNumber = (evt: React.MouseEvent) => {
|
||||||
|
if (this.props.hideWhitespaceInDiff) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
const data = this.getDiffData(evt.currentTarget)
|
const data = this.getDiffData(evt.currentTarget)
|
||||||
const column = this.getDiffColumn(evt.currentTarget)
|
const column = this.getDiffColumn(evt.currentTarget)
|
||||||
|
|
||||||
|
@ -495,12 +511,20 @@ export class SideBySideDiffRow extends React.Component<
|
||||||
}
|
}
|
||||||
|
|
||||||
private onMouseEnterHunk = () => {
|
private onMouseEnterHunk = () => {
|
||||||
|
if (this.props.hideWhitespaceInDiff) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
if ('hunkStartLine' in this.props.row) {
|
if ('hunkStartLine' in this.props.row) {
|
||||||
this.props.onMouseEnterHunk(this.props.row.hunkStartLine)
|
this.props.onMouseEnterHunk(this.props.row.hunkStartLine)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private onMouseLeaveHunk = () => {
|
private onMouseLeaveHunk = () => {
|
||||||
|
if (this.props.hideWhitespaceInDiff) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
if ('hunkStartLine' in this.props.row) {
|
if ('hunkStartLine' in this.props.row) {
|
||||||
this.props.onMouseLeaveHunk(this.props.row.hunkStartLine)
|
this.props.onMouseLeaveHunk(this.props.row.hunkStartLine)
|
||||||
}
|
}
|
||||||
|
@ -511,6 +535,10 @@ export class SideBySideDiffRow extends React.Component<
|
||||||
}
|
}
|
||||||
|
|
||||||
private onClickHunk = () => {
|
private onClickHunk = () => {
|
||||||
|
if (this.props.hideWhitespaceInDiff) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
// Since the hunk handler lies between the previous and the next columns,
|
// Since the hunk handler lies between the previous and the next columns,
|
||||||
// when clicking on it on modified lines we cannot know if we should
|
// when clicking on it on modified lines we cannot know if we should
|
||||||
// use the state of the previous or the next line to know whether we should
|
// use the state of the previous or the next line to know whether we should
|
||||||
|
@ -525,6 +553,10 @@ export class SideBySideDiffRow extends React.Component<
|
||||||
}
|
}
|
||||||
|
|
||||||
private onContextMenuLineNumber = (evt: React.MouseEvent) => {
|
private onContextMenuLineNumber = (evt: React.MouseEvent) => {
|
||||||
|
if (this.props.hideWhitespaceInDiff) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
const data = this.getDiffData(evt.currentTarget)
|
const data = this.getDiffData(evt.currentTarget)
|
||||||
if (data !== null && data.diffLineNumber !== null) {
|
if (data !== null && data.diffLineNumber !== null) {
|
||||||
this.props.onContextMenuLine(data.diffLineNumber)
|
this.props.onContextMenuLine(data.diffLineNumber)
|
||||||
|
@ -532,6 +564,10 @@ export class SideBySideDiffRow extends React.Component<
|
||||||
}
|
}
|
||||||
|
|
||||||
private onContextMenuHunk = () => {
|
private onContextMenuHunk = () => {
|
||||||
|
if (this.props.hideWhitespaceInDiff) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
if ('hunkStartLine' in this.props.row) {
|
if ('hunkStartLine' in this.props.row) {
|
||||||
this.props.onContextMenuHunk(this.props.row.hunkStartLine)
|
this.props.onContextMenuHunk(this.props.row.hunkStartLine)
|
||||||
}
|
}
|
||||||
|
|
|
@ -97,6 +97,9 @@ interface ISideBySideDiffProps {
|
||||||
diffSelection: DiffSelection
|
diffSelection: DiffSelection
|
||||||
) => void
|
) => void
|
||||||
|
|
||||||
|
/** Whether or not whitespace changes are hidden. */
|
||||||
|
readonly hideWhitespaceInDiff: boolean
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Whether we'll show a confirmation dialog when the user
|
* Whether we'll show a confirmation dialog when the user
|
||||||
* discards changes.
|
* discards changes.
|
||||||
|
@ -317,6 +320,7 @@ export class SideBySideDiff extends React.Component<
|
||||||
isDiffSelectable={canSelect(this.props.file)}
|
isDiffSelectable={canSelect(this.props.file)}
|
||||||
isHunkHovered={isHunkHovered}
|
isHunkHovered={isHunkHovered}
|
||||||
showSideBySideDiff={this.props.showSideBySideDiff}
|
showSideBySideDiff={this.props.showSideBySideDiff}
|
||||||
|
hideWhitespaceInDiff={this.props.hideWhitespaceInDiff}
|
||||||
onStartSelection={this.onStartSelection}
|
onStartSelection={this.onStartSelection}
|
||||||
onUpdateSelection={this.onUpdateSelection}
|
onUpdateSelection={this.onUpdateSelection}
|
||||||
onMouseEnterHunk={this.onMouseEnterHunk}
|
onMouseEnterHunk={this.onMouseEnterHunk}
|
||||||
|
@ -720,13 +724,17 @@ export class SideBySideDiff extends React.Component<
|
||||||
* @param diffLineNumber the line number the diff where the user clicked
|
* @param diffLineNumber the line number the diff where the user clicked
|
||||||
*/
|
*/
|
||||||
private onContextMenuLine = (diffLineNumber: number) => {
|
private onContextMenuLine = (diffLineNumber: number) => {
|
||||||
const { file } = this.props
|
const { file, hideWhitespaceInDiff } = this.props
|
||||||
const { diff } = this.state
|
const { diff } = this.state
|
||||||
|
|
||||||
if (!canSelect(file)) {
|
if (!canSelect(file)) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (hideWhitespaceInDiff) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
if (this.props.onDiscardChanges === undefined) {
|
if (this.props.onDiscardChanges === undefined) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
|
@ -52,6 +52,7 @@ import {
|
||||||
expandWholeTextDiff,
|
expandWholeTextDiff,
|
||||||
} from './text-diff-expansion'
|
} from './text-diff-expansion'
|
||||||
import { createOcticonElement } from '../octicons/octicon'
|
import { createOcticonElement } from '../octicons/octicon'
|
||||||
|
import { HideWhitespaceWarning } from './hide-whitespace-warning'
|
||||||
|
|
||||||
/** The longest line for which we'd try to calculate a line diff. */
|
/** The longest line for which we'd try to calculate a line diff. */
|
||||||
const MaxIntraLineDiffStringLength = 4096
|
const MaxIntraLineDiffStringLength = 4096
|
||||||
|
@ -1246,8 +1247,7 @@ export class TextDiff extends React.Component<ITextDiffProps, ITextDiffState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.props.hideWhitespaceInDiff) {
|
if (this.props.hideWhitespaceInDiff) {
|
||||||
marker.title =
|
marker.title = HideWhitespaceWarning
|
||||||
'Partial committing is not available while hiding whitespace changes'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const hunkExpandWholeHandle = marker.getElementsByClassName(
|
const hunkExpandWholeHandle = marker.getElementsByClassName(
|
||||||
|
|
|
@ -42,6 +42,10 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.secondary-text {
|
||||||
|
color: var(--text-secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
|
@ -74,7 +74,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.selectable {
|
&.selectable {
|
||||||
span {
|
&.hoverable span {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -83,7 +83,7 @@
|
||||||
color: var(--diff-selected-text-color);
|
color: var(--diff-selected-text-color);
|
||||||
border-color: var(--diff-selected-border-color);
|
border-color: var(--diff-selected-border-color);
|
||||||
|
|
||||||
&:hover,
|
&.hoverable:hover,
|
||||||
&.hover {
|
&.hover {
|
||||||
background: var(--diff-hover-background-color);
|
background: var(--diff-hover-background-color);
|
||||||
color: var(--diff-hover-text-color);
|
color: var(--diff-hover-text-color);
|
||||||
|
@ -111,7 +111,7 @@
|
||||||
padding: 4px 0;
|
padding: 4px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.selectable {
|
&.selectable.hoverable {
|
||||||
* {
|
* {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
@ -130,7 +130,10 @@
|
||||||
width: 20px;
|
width: 20px;
|
||||||
left: calc(50% - 10px);
|
left: calc(50% - 10px);
|
||||||
top: 0;
|
top: 0;
|
||||||
cursor: pointer;
|
|
||||||
|
&.hoverable {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
|
@ -177,7 +180,7 @@
|
||||||
border-color: var(--diff-delete-border-color);
|
border-color: var(--diff-delete-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectable:hover,
|
.selectable.hoverable:hover,
|
||||||
.selectable.hover {
|
.selectable.hover {
|
||||||
background: var(--diff-delete-hover-background-color);
|
background: var(--diff-delete-hover-background-color);
|
||||||
color: var(--diff-delete-hover-text-color);
|
color: var(--diff-delete-hover-text-color);
|
||||||
|
@ -194,7 +197,7 @@
|
||||||
border-color: var(--diff-add-border-color);
|
border-color: var(--diff-add-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectable:hover,
|
.selectable.hoverable:hover,
|
||||||
.selectable.hover {
|
.selectable.hover {
|
||||||
background: var(--diff-add-hover-background-color);
|
background: var(--diff-add-hover-background-color);
|
||||||
color: var(--diff-add-hover-text-color);
|
color: var(--diff-add-hover-text-color);
|
||||||
|
|
Loading…
Reference in a new issue