Skip to content

feat(replays): Improved Breadcrumb Signifiers and Functionality #36396

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ryan953 merged 7 commits into from
Jul 13, 2022
Merged

feat(replays): Improved Breadcrumb Signifiers and Functionality #36396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c7a8b99
style: new breadcrumbs styles
jesus4497 Jul 6, 2022
b2f611a
style: improve breacrumbs style
jesus4497 Jul 6, 2022
4764957
style: improve breadcrumb styles
jesus4497 Jul 7, 2022
e93b8ed
style: small change to the connecting line
jesus4497 Jul 7, 2022
596872c
style: improve crumb styles
jesus4497 Jul 13, 2022
b0704d5
style: update comment
jesus4497 Jul 13, 2022
5d05675
style: more improvements
jesus4497 Jul 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion static/app/components/replays/playerRelativeTime.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const PlayerRelativeTime = ({relativeTime, timestamp}: Props) => {

const Value = styled('p')`
color: ${p => p.theme.subText};
font-size: 0.9em;
font-size: ${p => p.theme.fontSizeSmall};
font-variant-numeric: tabular-nums;
`;

Expand Down
64 changes: 42 additions & 22 deletions static/app/views/replays/detail/breadcrumbs/breadcrumbItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,13 @@ function BreadcrumbItem({
<BreadcrumbIcon type={crumb.type} />
</IconWrapper>
<CrumbDetails>
<Title>{title}</Title>
<TitleContainer>
<Title>{title}</Title>
<PlayerRelativeTime relativeTime={startTimestamp} timestamp={crumb.timestamp} />
</TitleContainer>

<Description title={description}>{description}</Description>
</CrumbDetails>
<PlayerRelativeTime relativeTime={startTimestamp} timestamp={crumb.timestamp} />
</CrumbItem>
);
}
Expand All @@ -71,19 +74,28 @@ const CrumbDetails = styled('div')`
display: flex;
flex-direction: column;
overflow: hidden;
line-height: 1.2;
padding: ${space(1)} 0;
`;

const TitleContainer = styled('div')`
display: flex;
justify-content: space-between;
gap: ${space(1)};
`;

const Title = styled('span')`
${p => p.theme.overflowEllipsis};
text-transform: capitalize;
font-weight: 600;
color: ${p => p.theme.gray400};
line-height: ${p => p.theme.text.lineHeightBody};
`;

const Description = styled('span')`
${p => p.theme.overflowEllipsis};
font-size: 0.7rem;
font-variant-numeric: tabular-nums;
line-height: ${p => p.theme.text.lineHeightBody};
color: ${p => p.theme.subText};
`;

type CrumbItemProps = {
Expand All @@ -93,32 +105,39 @@ type CrumbItemProps = {

const CrumbItem = styled(PanelItem)<CrumbItemProps>`
display: grid;
grid-template-columns: max-content max-content auto max-content;
align-items: center;
grid-template-columns: max-content auto;
align-items: flex-start;
gap: ${space(1)};
width: 100%;

font-size: ${p => p.theme.fontSizeMedium};
background: transparent;
padding: 0;
padding-right: ${space(1)};
padding: ${space(1)};
text-align: left;

border: none;
border-bottom: 1px solid ${p => p.theme.innerBorder};
${p => p.isHovered && `background: ${p.theme.surface400};`}

/* overrides PanelItem css */
&:last-child {
border-bottom: 1px solid ${p => p.theme.innerBorder};
}
position: relative;
${p => p.isSelected && `background-color: ${p.theme.purple100};`}
${p => p.isHovered && `background-color: ${p.theme.surface100};`}
border-radius: ${p => p.theme.borderRadius};

/* Selected state */
::before {
/* Draw a vertical line behind the breadcrumb icon. The line connects each row together, but is truncated for the first and last items */
&::after {
content: '';
width: 4px;
position: absolute;
left: 19.5px;
width: 1px;
background: ${p => p.theme.gray200};
height: 100%;
${p => p.isSelected && `background-color: ${p.theme.purple300};`}
}

&:first-of-type::after {
top: ${space(1)};
bottom: 0;
}

&:last-of-type::after {
top: 0;
height: ${space(1)};
}
`;

Expand All @@ -129,13 +148,14 @@ const IconWrapper = styled('div')<Required<Pick<SVGIconProps, 'color'>>>`
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
width: 24px;
height: 24px;
border-radius: 50%;
color: ${p => p.theme.white};
background: ${p => p.theme[p.color] ?? p.color};
box-shadow: ${p => p.theme.dropShadowLightest};
position: relative;
z-index: ${p => p.theme.zIndex.initial};
`;

const MemoizedBreadcrumbItem = memo(BreadcrumbItem);
Expand Down
13 changes: 8 additions & 5 deletions static/app/views/replays/detail/breadcrumbs/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function CrumbPlaceholder({number}: {number: number}) {
return (
<Fragment>
{[...Array(number)].map((_, i) => (
<PlaceholderMargin key={i} height="40px" />
<PlaceholderMargin key={i} height="53px" />
))}
</Fragment>
);
Expand Down Expand Up @@ -138,21 +138,24 @@ const Panel = styled(BasePanel)`

const PanelHeader = styled(BasePanelHeader)`
background-color: ${p => p.theme.background};
border-bottom: none;
border-bottom: 1px solid ${p => p.theme.innerBorder};
font-size: ${p => p.theme.fontSizeSmall};
color: ${p => p.theme.gray300};
color: ${p => p.theme.gray500};
text-transform: capitalize;
padding: ${space(1.5)} ${space(2)} ${space(0.5)};
padding: ${space(1)} ${space(1.5)} ${space(1)};
font-weight: 600;
`;

const PanelBody = styled(BasePanelBody)`
padding: ${space(0.5)};
overflow-y: auto;
max-height: calc(100% - ${TAB_HEADER_HEIGHT}px);
`;

const PlaceholderMargin = styled(Placeholder)`
margin: ${space(1)} ${space(1.5)};
margin: ${space(1)} 0;
width: auto;
border-radius: ${p => p.theme.borderRadius};
`;

export default Breadcrumbs;