From ee2609918690ef1dcfe5686b592a7c40e6c7b550 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Naz=C4=B1m=20Can=20Alt=C4=B1nova?= Date: Thu, 5 Jun 2025 14:39:18 +0200 Subject: [PATCH 1/3] Simplify the active track left border css and make it right clickable Previously it was doing a lot more `calc`s because it was happening in the parent div. This commit changes the box-shadow into an inset box-shadow so we don't have to change the width all the time. But we still need to change the width once to remove the left border for the local tracks. --- src/components/timeline/Track.css | 44 ++++++++++++++++--------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/src/components/timeline/Track.css b/src/components/timeline/Track.css index a5ad187a6d..77d9d70a5e 100644 --- a/src/components/timeline/Track.css +++ b/src/components/timeline/Track.css @@ -23,26 +23,27 @@ 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 @@ -64,6 +65,11 @@ 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; @@ -71,9 +77,7 @@ .timelineTrackLabel { display: flex; - - /* 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)); + width: 150px; box-sizing: border-box; flex-flow: row nowrap; align-items: center; @@ -87,10 +91,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; @@ -165,8 +166,9 @@ } .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); + /* We want the width to look like it's 150px, but need to substract the + * margin and the 1px border */ + width: 134px; } @media (forced-colors: active) { From a04ba870d3655c4b397b6f0ff37bfabce7ced1da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Naz=C4=B1m=20Can=20Alt=C4=B1nova?= Date: Thu, 5 Jun 2025 14:48:14 +0200 Subject: [PATCH 2/3] Remove the top border from the parent component and add it to the children instead Adding the border to the children, so we can right click on the left track label and that would still open the context menu. --- src/components/timeline/Track.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/timeline/Track.css b/src/components/timeline/Track.css index 77d9d70a5e..00a8fe539c 100644 --- a/src/components/timeline/Track.css +++ b/src/components/timeline/Track.css @@ -23,7 +23,6 @@ display: flex; flex-flow: row nowrap; - border-top: 1px solid var(--grey-30); background-color: #fff; } @@ -81,6 +80,7 @@ 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; } @@ -138,6 +138,7 @@ display: flex; flex: 1; flex-flow: column nowrap; + border-top: 1px solid var(--grey-30); } .timelineTrackLocalTracks { From b40d197a82a1df35be3362ca8eb426601891aa1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Naz=C4=B1m=20Can=20Alt=C4=B1nova?= Date: Thu, 12 Jun 2025 16:09:00 +0200 Subject: [PATCH 3/3] Use variables for width calculation --- src/components/timeline/Track.css | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/timeline/Track.css b/src/components/timeline/Track.css index 00a8fe539c..d1c2338525 100644 --- a/src/components/timeline/Track.css +++ b/src/components/timeline/Track.css @@ -12,7 +12,9 @@ } .timelineTrackLocal { - margin-left: 15px; + --local-track-margin: 15px; + + margin-left: var(--local-track-margin); } .timelineTrackRow { @@ -75,8 +77,10 @@ } .timelineTrackLabel { + --timeline-track-label-width: 150px; + display: flex; - width: 150px; + width: var(--timeline-track-label-width); box-sizing: border-box; flex-flow: row nowrap; align-items: center; @@ -167,9 +171,11 @@ } .timelineTrackLocalLabel { - /* We want the width to look like it's 150px, but need to substract the - * margin and the 1px border */ - width: 134px; + /* 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) {