Timeline: minor visual improvements

newcat · Mar 22, 2024 · 22635b1 · 22635b1
1 parent 7a2553d
commit 22635b1
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/src/timeline/components/Timeline.vue b/src/timeline/components/Timeline.vue
@@ -13,6 +13,7 @@
         <div class="__content" :style="contentStyles">
             <position-marker></position-marker>
             <div class="__header-row" @click="onHeaderClick">
+                <div class="__spacer"></div>
                 <div class="__container">
                     <marker-label v-for="m in markers" :key="m.unit" :marker="m"></marker-label>
                 </div>
@@ -104,7 +105,7 @@ const markers = computed(() => {
         lastItemEnd.value + globalState.snapUnits
     );
 
-    for (let unit = 0; unit < maxUnit; unit += markerSpacing.value.space) {
+    for (let unit = markerSpacing.value.space; unit < maxUnit; unit += markerSpacing.value.space) {
         const x = unitToPixel(unit);
         const nthMarker = Math.floor(unit / markerSpacing.value.space);
         if (nthMarker % markerSpacing.value.majorMultiplier === 0) {
@@ -122,16 +123,16 @@ function unselectAllItems() {
     });
 }
 
-function updateLastNoteEnd() {
+function updateLastItemEnd() {
     const newLastItemEnd = timeline.items.reduce((p, i) => Math.max(p, i.end), 0);
     if (dragItem.value && newLastItemEnd < lastItemEnd.value) {
         // do nothing because shrinking the content while dragging results in strange behaviour
         return;
     }
     lastItemEnd.value = newLastItemEnd;
 }
-watch(dragItem, updateLastNoteEnd);
-watch(() => timeline.items.map((i) => i.end), updateLastNoteEnd);
+watch(dragItem, updateLastItemEnd);
+watch(() => timeline.items.map((i) => i.end), updateLastItemEnd);
 
 function mousedown(ev: MouseEvent) {
     const target = ev.target as HTMLElement | null;
@@ -295,9 +296,9 @@ function drop(track: Track, ev: DragEvent) {
 
 function onHeaderClick(ev: MouseEvent): void {
     let x = ev.offsetX;
-    if ((ev.target as HTMLElement).classList.contains("__header-row")) {
+    if ((ev.target as HTMLElement).classList.contains("__spacer")) {
         // clicked on the padding area on top of the track headers
-        x = 0;
+        x = el.value!.scrollLeft;
     }
 
     const tick = pixelToUnit(x);

diff --git a/src/timeline/styles/Timeline.scss b/src/timeline/styles/Timeline.scss
@@ -19,7 +19,8 @@
 
     .__content {
         position: relative;
-        background-image: linear-gradient(90deg, var(--surface-border) 1px, transparent 1px), linear-gradient(90deg, var(--surface-overlay) 1px, transparent 1px);
+        background-image: linear-gradient(90deg, var(--surface-border) 1px, transparent 1px),
+            linear-gradient(90deg, var(--surface-overlay) 1px, transparent 1px);
         background-position: ($headerWidth - 1px) -1px;
         background-repeat: repeat;
         min-width: 100%;
@@ -31,15 +32,27 @@
 
     .__header-row {
         height: 40px;
-        padding-left: $headerWidth;
         background-color: var(--surface-card);
         position: sticky;
         top: 0;
         z-index: 4;
 
+        & > .__spacer {
+            width: $headerWidth;
+            height: 100%;
+            position: sticky;
+            background-color: var(--surface-card);
+            left: 0;
+            z-index: 5;
+        }
+
         & > .__container {
-            position: relative;
+            position: absolute;
+            top: 0;
+            left: $headerWidth;
             height: 100%;
+            width: calc(100% - #{$headerWidth});
+            z-index: 4;
         }
     }