Skip to content

Commit 71bc48d

Browse files
presleyppresleyp
authored
feat: tweak timeline design (#5144)
* Tweak timeline design * Extract timeline style into component
1 parent 6786ca2 commit 71bc48d

File tree

4 files changed

+67
-95
lines changed

4 files changed

+67
-95
lines changed

‎site/src/components/AuditLogRow/AuditLogRow.tsx

+5-39
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
import Collapse from "@material-ui/core/Collapse"
22
import { makeStyles } from "@material-ui/core/styles"
33
import TableCell from "@material-ui/core/TableCell"
4-
import TableRow from "@material-ui/core/TableRow"
54
import { AuditLog } from "api/typesGenerated"
65
import {
76
CloseDropdown,
87
OpenDropdown,
98
} from "components/DropdownArrows/DropdownArrows"
109
import { Pill } from "components/Pill/Pill"
1110
import { Stack } from "components/Stack/Stack"
11+
import { TimelineEntry } from "components/Timeline/TimelineEntry"
1212
import { UserAvatar } from "components/UserAvatar/UserAvatar"
1313
import { useState } from "react"
1414
import { PaletteIndex } from "theme/palettes"
1515
import userAgentParser from "ua-parser-js"
16-
import { combineClasses } from "util/combineClasses"
1716
import { AuditLogDiff } from "./AuditLogDiff"
1817

1918
export const readableActionMessage = (auditLog: AuditLog): string => {
@@ -71,19 +70,16 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
7170
}
7271

7372
return (
74-
<TableRow
73+
<TimelineEntry
7574
key={auditLog.id}
7675
data-testid={`audit-log-row-${auditLog.id}`}
77-
className={styles.auditLogRow}
76+
clickable={shouldDisplayDiff}
7877
>
7978
<TableCell className={styles.auditLogCell}>
8079
<Stack
8180
direction="row"
8281
alignItems="center"
83-
className={combineClasses({
84-
[styles.auditLogHeader]: true,
85-
[styles.clickable]: shouldDisplayDiff,
86-
})}
82+
className={styles.auditLogHeader}
8783
tabIndex={0}
8884
onClick={toggle}
8985
onKeyDown={(event) => {
@@ -167,7 +163,7 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
167163
</Collapse>
168164
)}
169165
</TableCell>
170-
</TableRow>
166+
</TimelineEntry>
171167
)
172168
}
173169

@@ -177,40 +173,10 @@ const useStyles = makeStyles((theme) => ({
177173
border: 0,
178174
},
179175

180-
auditLogRow: {
181-
position: "relative",
182-
183-
"&:focus": {
184-
outlineStyle: "solid",
185-
outlineOffset: -1,
186-
outlineWidth: 2,
187-
outlineColor: theme.palette.secondary.dark,
188-
},
189-
190-
"&:not(:last-child) td:before": {
191-
position: "absolute",
192-
top: 20,
193-
left: 50,
194-
display: "block",
195-
content: "''",
196-
height: "100%",
197-
width: 2,
198-
background: theme.palette.divider,
199-
},
200-
},
201-
202176
auditLogHeader: {
203177
padding: theme.spacing(2, 4),
204178
},
205179

206-
clickable: {
207-
cursor: "pointer",
208-
209-
"&:hover": {
210-
backgroundColor: theme.palette.action.hover,
211-
},
212-
},
213-
214180
auditLogHeaderInfo: {
215181
flex: 1,
216182
},

‎site/src/components/BuildsTable/BuildRow.tsx

+3-30
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { makeStyles } from "@material-ui/core/styles"
22
import TableCell from "@material-ui/core/TableCell"
3-
import TableRow from "@material-ui/core/TableRow"
43
import { WorkspaceBuild } from "api/typesGenerated"
54
import { Stack } from "components/Stack/Stack"
5+
import { TimelineEntry } from "components/Timeline/TimelineEntry"
66
import { useClickable } from "hooks/useClickable"
77
import { useTranslation } from "react-i18next"
88
import { useNavigate } from "react-router-dom"
@@ -27,12 +27,7 @@ export const BuildRow: React.FC<BuildRowProps> = ({ build }) => {
2727
)
2828

2929
return (
30-
<TableRow
31-
hover
32-
data-testid={`build-${build.id}`}
33-
className={styles.buildRow}
34-
{...clickableProps}
35-
>
30+
<TimelineEntry hover data-testid={`build-${build.id}`} {...clickableProps}>
3631
<TableCell className={styles.buildCell}>
3732
<Stack
3833
direction="row"
@@ -76,33 +71,11 @@ export const BuildRow: React.FC<BuildRowProps> = ({ build }) => {
7671
</Stack>
7772
</Stack>
7873
</TableCell>
79-
</TableRow>
74+
</TimelineEntry>
8075
)
8176
}
8277

8378
const useStyles = makeStyles((theme) => ({
84-
buildRow: {
85-
cursor: "pointer",
86-
87-
"&:focus": {
88-
outlineStyle: "solid",
89-
outlineOffset: -1,
90-
outlineWidth: 2,
91-
outlineColor: theme.palette.secondary.dark,
92-
},
93-
94-
"&:not(:last-child) td:before": {
95-
position: "absolute",
96-
top: 20,
97-
left: 50,
98-
display: "block",
99-
content: "''",
100-
height: "100%",
101-
width: 2,
102-
background: theme.palette.divider,
103-
},
104-
},
105-
10679
buildWrapper: {
10780
padding: theme.spacing(2, 4),
10881
},

‎site/src/components/Timeline/TimelineEntry.tsx

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { makeStyles } from "@material-ui/core/styles"
2+
import TableRow, { TableRowProps } from "@material-ui/core/TableRow"
3+
import { PropsWithChildren } from "react"
4+
import { combineClasses } from "util/combineClasses"
5+
6+
interface TimelineEntryProps {
7+
clickable?: boolean
8+
}
9+
10+
export const TimelineEntry = ({
11+
children,
12+
clickable = true,
13+
...props
14+
}: PropsWithChildren<TimelineEntryProps & TableRowProps>): JSX.Element => {
15+
const styles = useStyles()
16+
return (
17+
<TableRow
18+
className={combineClasses({
19+
[styles.timelineEntry]: true,
20+
[styles.clickable]: clickable,
21+
})}
22+
{...props}
23+
>
24+
{children}
25+
</TableRow>
26+
)
27+
}
28+
29+
const useStyles = makeStyles((theme) => ({
30+
clickable: {
31+
cursor: "pointer",
32+
33+
"&:hover": {
34+
backgroundColor: theme.palette.action.hover,
35+
},
36+
},
37+
38+
timelineEntry: {
39+
position: "relative",
40+
"&:focus": {
41+
outlineStyle: "solid",
42+
outlineOffset: -1,
43+
outlineWidth: 2,
44+
outlineColor: theme.palette.secondary.dark,
45+
},
46+
"& td:before": {
47+
position: "absolute",
48+
left: 50,
49+
display: "block",
50+
content: "''",
51+
height: "100%",
52+
width: 2,
53+
background: theme.palette.divider,
54+
},
55+
},
56+
}))

‎site/src/components/VersionsTable/VersionRow.tsx

+3-26
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { makeStyles } from "@material-ui/core/styles"
22
import TableCell from "@material-ui/core/TableCell"
3-
import TableRow from "@material-ui/core/TableRow"
43
import { TemplateVersion } from "api/typesGenerated"
54
import { Stack } from "components/Stack/Stack"
5+
import { TimelineEntry } from "components/Timeline/TimelineEntry"
66
import { UserAvatar } from "components/UserAvatar/UserAvatar"
77
import { useClickable } from "hooks/useClickable"
88
import { useTranslation } from "react-i18next"
@@ -21,11 +21,7 @@ export const VersionRow: React.FC<VersionRowProps> = ({ version }) => {
2121
})
2222

2323
return (
24-
<TableRow
25-
className={styles.versionRow}
26-
data-testid={`version-${version.id}`}
27-
{...clickableProps}
28-
>
24+
<TimelineEntry data-testid={`version-${version.id}`} {...clickableProps}>
2925
<TableCell className={styles.versionCell}>
3026
<Stack
3127
direction="row"
@@ -55,30 +51,11 @@ export const VersionRow: React.FC<VersionRowProps> = ({ version }) => {
5551
</Stack>
5652
</Stack>
5753
</TableCell>
58-
</TableRow>
54+
</TimelineEntry>
5955
)
6056
}
6157

6258
const useStyles = makeStyles((theme) => ({
63-
versionRow: {
64-
cursor: "pointer",
65-
66-
"&:hover": {
67-
backgroundColor: theme.palette.action.hover,
68-
},
69-
70-
"&:not(:last-child) td:before": {
71-
position: "absolute",
72-
top: 20,
73-
left: 50,
74-
display: "block",
75-
content: "''",
76-
height: "100%",
77-
width: 2,
78-
background: theme.palette.divider,
79-
},
80-
},
81-
8259
versionWrapper: {
8360
padding: theme.spacing(2, 4),
8461
},

0 commit comments

Comments
 (0)