Skip to content

Fix issues related to the track borders #5484

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
canova merged 3 commits into from
Jun 12, 2025
Merged

Fix issues related to the track borders #5484

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ee26099
Simplify the active track left border css and make it right clickable
canova Jun 5, 2025
a04ba87
Remove the top border from the parent component and add it to the chi…
canova Jun 5, 2025
b40d197
Use variables for width calculation
canova Jun 12, 2025
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
55 changes: 32 additions & 23 deletions src/components/timeline/Track.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@
}

.timelineTrackLocal {
margin-left: 15px;
--local-track-margin: 15px;

margin-left: var(--local-track-margin);
}

.timelineTrackRow {
Expand All @@ -23,26 +25,26 @@

display: flex;
flex-flow: row nowrap;

/* This padding is added to the button's padding as the perceived padding. For
* a global row, it will be replaced with a margin when it's selected. */
padding-left: var(--selected-left-border-width);
border-top: 1px solid var(--grey-30);
background-color: #fff;
}

.timelineTrackRow.selected {
/* We replace the padding by some margin. Indeed the box-shadow used to draw
* the blue selected left border is drawn outside of the border box, so the
* 3px margin makes this space available. */
position: relative;
padding-left: 0;
margin-left: var(--selected-left-border-width);
background-color: #edf6ff;
}

/* We use a box-shadow on the track row instead of using border, so
* that when we select adjacent tracks, we see just one line, without any
* border on top of it. */
box-shadow: calc(-1 * var(--selected-left-border-width)) 0 var(--blue-60);
/* Showing a blue border on the left side of the track row to indicate that
* it's selected */
.timelineTrackRow.selected::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: var(--selected-left-border-width);
background: var(--blue-60);
content: '';
pointer-events: none;
}

/* In the active tab view, we don't want any margin or padding, because
Expand All @@ -64,19 +66,25 @@
border-left-color: transparent;
}

.timelineTrackLocalRow.selected::before {
/* We have a left border in local tracks of 1px, moving it left to conceal it. */
left: -1px;
}

.timelineTrackHidden {
height: 0;
pointer-events: none;
}

.timelineTrackLabel {
display: flex;
--timeline-track-label-width: 150px;

/* We want the width to look like it's 150px, but need to substract the 3px padding/margin */
width: calc(150px - var(--selected-left-border-width));
display: flex;
width: var(--timeline-track-label-width);
box-sizing: border-box;
flex-flow: row nowrap;
align-items: center;
border-top: 1px solid var(--grey-30);
border-right: 1px solid var(--grey-30);
cursor: default;
}
Expand All @@ -87,10 +95,7 @@
/* The 8px are used by the box-shadow when the button receives focus */
width: calc(100% - 8px);
height: calc(100% - 8px);

/* We want the left padding to look like 10px, but need to remove 3px to
* account for the padding/margin on the row. */
padding: 0 0 0 calc(10px - var(--selected-left-border-width));
padding: 0 0 0 10px;
border: none;
background: none;
font: inherit;
Expand Down Expand Up @@ -137,6 +142,7 @@
display: flex;
flex: 1;
flex-flow: column nowrap;
border-top: 1px solid var(--grey-30);
}

.timelineTrackLocalTracks {
Expand Down Expand Up @@ -165,8 +171,11 @@
}

.timelineTrackLocalLabel {
/* We want the width to look like it's 150px, but need to substract the 3px padding/margin and the 1px border */
width: calc(135px - var(--selected-left-border-width) - 1px);
/* Calculate the width of the local track label by subtracting the margin and
* the 1px border from the total track label width. */
width: calc(
var(--timeline-track-label-width) - var(--local-track-margin) - 1px
);
}

@media (forced-colors: active) {
Expand Down