| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128 |
3x
3x
3x
3x
3x
3x
3x
3x
3x
2x
1x
1x
1x
1x
5x
| import React from 'react';
import { style } from 'app/styles';
import { ICommit } from 'app/interfaces';
import { Popup } from 'app/components/Popup';
import { DateTime } from 'app/components/DateTime';
import { CommitCard } from 'app/components/CommitCard';
export interface TimeplotPopupProps {
// This is the text or JSX that gets wrapped in a Toggle Button
commits: ICommit[];
startDate: Date;
endDate: Date;
left: number;
isOpen: boolean;
onClose: () => void;
onCommitSelected: (evt: object, commit: ICommit, single: boolean) => void;
onMouseEnter?: (evt: object) => void;
onMouseLeave?: (evt: object) => void;
style?: string | object;
}
export const TIMEPLOT_POPUP_WIDTH = 350;
const defaultPopupStyle = {
_extends: 'normalText',
position: 'absolute',
bottom: 130,
width: TIMEPLOT_POPUP_WIDTH,
right: 'initial',
border: 'solid 4px @colors.selectable',
padding: 0,
// at least 9 is required to get above monaco mini diff map
zIndex: 10,
};
const headerStyle = {
_extends: 'altPanel',
marginRight: 0,
// compensate for padding of panel to move this to the top, left & right edges
};
const footerStyle = {
_extends: ['altPanel', 'smallerText', 'flexColumn'],
marginRight: 0,
// compensate for padding of panel to move this to the bottom, left & right edges
};
const commitListStyle = {
_extends: 'panel',
maxHeight: 300,
minHeight: 50,
overflow: 'scroll',
marginRight: 0,
};
export const TimeplotPopup = (props: TimeplotPopupProps): JSX.Element => {
const {
commits,
startDate,
endDate,
isOpen,
onClose,
onMouseEnter,
onMouseLeave,
onCommitSelected,
} = props;
const popupStyle = {
left: props.left,
};
if (!(commits && startDate && endDate)) {
return null;
}
const commitsText =
commits.length === 1 ? 'was one commit' : `were ${commits.length} commits`;
const handleClick = (evt, commit) => {
onCommitSelected(evt, commit, false);
};
const handleDoubleClick = (evt, commit) => {
onCommitSelected(evt, commit, true);
};
return (
<Popup
style={style(defaultPopupStyle, popupStyle)}
isOpen={isOpen}
onClose={onClose}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
noBackdrop
>
<>
<div style={style(headerStyle)}>
<div style={style('largerText')}>There {commitsText} between</div>
<DateTime value={startDate} /> and <DateTime value={endDate} />
</div>
<div style={style(commitListStyle)}>
{commits.map((commit, index) => (
<CommitCard
key={index}
commit={commit}
onClick={handleClick}
onDoubleClick={handleDoubleClick}
hideCommitBody
hideFiles
/>
))}
</div>
<div style={style(footerStyle)}>
<div style={style('flexRow')}>
<div>Click to select left revision</div>
<div style={{ flexGrow: 1, textAlign: 'right' }}>
Shift+click to select range
</div>{' '}
</div>
<div style={style('flexRow', { marginTop: 5 })}>
<div> Click twice to select a single commit</div>
<div style={{ flexGrow: 1, textAlign: 'right' }}>
...or click and drag below
</div>
</div>
</div>
</>
</Popup>
);
};
|