development/github-desktop
development/github-desktop
1
0
Fork 0
mirror of https://github.com/desktop/desktop synced 2024-09-13 21:31:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'development' into releases/3.2.9-beta1

Browse source
This commit is contained in:
tidy-dev 2023-08-16 11:19:08 -04:00
parent fab031cc56 a57c238ab5
commit d96efeb7ff
5 changed files with 74 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/src/ui/diff/side-by-side-diff-row.tsx
View file

@ -17,8 +17,8 @@ import { DiffHunkExpansionType } from '../../models/diff'
import { DiffExpansionKind } from './text-diff-expansion'
import { PopoverAnchorPosition } from '../lib/popover'
import { WhitespaceHintPopover } from './whitespace-hint-popover'
import { TooltippedContent } from '../lib/tooltipped-content'
import { TooltipDirection } from '../lib/tooltip'
import { Button } from '../lib/button'
interface ISideBySideDiffRowProps {
/**
@ -400,10 +400,11 @@ export class SideBySideDiffRow extends React.Component<
return (
<div
className="hunk-expansion-handle"
onContextMenu={this.props.onContextMenuExpandHunk}
style={{ width: this.lineGutterWidth }}
>
<span></span>
<button onContextMenu={this.props.onContextMenuExpandHunk}>
<span></span>
</button>
</div>
)
}
@ -414,19 +415,18 @@ export class SideBySideDiffRow extends React.Component<
)
return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
<div
className="hunk-expansion-handle selectable hoverable"
onClick={elementInfo.handler}
style={{ width: this.lineGutterWidth }}
onContextMenu={this.props.onContextMenuExpandHunk}
>
<TooltippedContent
direction={TooltipDirection.SOUTH}
<Button
onClick={elementInfo.handler}
onContextMenu={this.props.onContextMenuExpandHunk}
tooltip={elementInfo.title}
toolTipDirection={TooltipDirection.SOUTH}
>
<Octicon symbol={elementInfo.icon} />
</TooltippedContent>
</Button>
</div>
)
}

18
app/src/ui/diff/text-diff.tsx
View file

@ -1119,8 +1119,8 @@ export class TextDiff extends React.Component<ITextDiffProps, ITextDiffState> {
marker.appendChild(hunkHandle)
if (this.canExpandDiff()) {
const hunkExpandUpHandle = document.createElement('div')
hunkExpandUpHandle.classList.add('hunk-expand-up-handle')
const hunkExpandUpHandle = document.createElement('button')
hunkExpandUpHandle.classList.add('hunk-expander', 'hunk-expand-up-handle')
hunkExpandUpHandle.title = 'Expand Up'
hunkExpandUpHandle.addEventListener(
'click',
@ -1132,8 +1132,11 @@ export class TextDiff extends React.Component<ITextDiffProps, ITextDiffState> {
createOcticonElement(OcticonSymbol.foldUp, 'hunk-expand-icon')
)
const hunkExpandDownHandle = document.createElement('div')
hunkExpandDownHandle.classList.add('hunk-expand-down-handle')
const hunkExpandDownHandle = document.createElement('button')
hunkExpandDownHandle.classList.add(
'hunk-expander',
'hunk-expand-down-handle'
)
hunkExpandDownHandle.title = 'Expand Down'
hunkExpandDownHandle.addEventListener(
'click',
@ -1145,8 +1148,11 @@ export class TextDiff extends React.Component<ITextDiffProps, ITextDiffState> {
createOcticonElement(OcticonSymbol.foldDown, 'hunk-expand-icon')
)
const hunkExpandWholeHandle = document.createElement('div')
hunkExpandWholeHandle.classList.add('hunk-expand-whole-handle')
const hunkExpandWholeHandle = document.createElement('button')
hunkExpandWholeHandle.classList.add(
'hunk-expander',
'hunk-expand-whole-handle'
)
hunkExpandWholeHandle.title = 'Expand whole'
hunkExpandWholeHandle.addEventListener(
'click',

7
app/src/ui/lib/button.tsx
View file

@ -138,6 +138,9 @@ export interface IButtonProps {
/** Whether the input field should auto focus when mounted. */
readonly autoFocus?: boolean
/** Specify the direction of the tooltip */
readonly toolTipDirection?: TooltipDirection
}
/**
@ -199,9 +202,9 @@ export class Button extends React.Component<IButtonProps, {}> {
{tooltip && (
<Tooltip
target={this.innerButtonRef}
direction={TooltipDirection.NORTH}
direction={this.props.toolTipDirection ?? TooltipDirection.NORTH}
// Show the tooltip immediately on hover if the button is disabled
delay={disabled && tooltip ? 0 : undefined}
delay={disabled ? 0 : undefined}
onlyWhenOverflowed={this.props.onlyShowTooltipWhenOverflowed}
>
{tooltip}

46
app/styles/ui/_diff.scss
View file

@ -130,31 +130,37 @@
top: 0;
}
.hunk-expand-up-handle {
position: absolute;
height: 50%;
width: 100%;
right: 0;
bottom: 0;
text-align: center;
}
.hunk-expander {
overflow: inherit;
text-overflow: inherit;
white-space: inherit;
font-family: inherit;
font-size: inherit;
padding: inherit;
border: none;
height: inherit;
color: inherit;
background-color: inherit;
.hunk-expand-down-handle {
position: absolute;
height: 50%;
width: 100%;
right: 0;
top: 0;
width: 100%;
text-align: center;
}
.hunk-expand-whole-handle {
position: absolute;
height: 100%;
width: 100%;
right: 0;
bottom: 0;
text-align: center;
&.hunk-expand-up-handle {
height: 50%;
bottom: 0;
}
&.hunk-expand-down-handle {
height: 50%;
top: 0;
}
&.hunk-expand-whole-handle {
height: 100%;
bottom: 0;
}
}
&:not(.includeable) {

32
app/styles/ui/_side-by-side-diff.scss
View file

@ -108,6 +108,28 @@
}
.row .hunk-expansion-handle {
button {
overflow: inherit;
text-overflow: inherit;
white-space: inherit;
font-family: inherit;
font-size: inherit;
border: none;
height: inherit;
color: inherit;
background-color: inherit;
width: calc(100% - 2px);
height: calc(100% - var(--spacing));
padding: 0px;
padding-top: 4px;
padding-bottom: 1px;
margin: 1px;
display: flex;
align-items: center;
justify-content: center;
outline-offset: 0;
}
width: var(--width-line-number);
flex-shrink: 0;
background: var(--diff-hunk-background-color);
@ -115,16 +137,6 @@
display: flex;
box-sizing: content-box;
span {
width: 100%;
height: 100%;
padding: 0 var(--spacing-half);
display: flex;
align-items: center;
justify-content: center;
padding: 4px 0;
}
&.selectable.hoverable {
* {
cursor: pointer;