Added scroll interaction on the ruler & minor style improvement

web/src/app/timeline/components/style-model.ts

@@ -331,12 +331,9 @@ export function generateDefaultChartStyle(): TimelineChartStyle {
     timelineTintColorByHighlightType: {
       [TimelineHighlightType.None]:
         RendererConvertUtil.hexSRGBToHDRColor('#00000000'),
-      [TimelineHighlightType.Selected]:
-        RendererConvertUtil.hexSRGBToHDRColor('#40ba8d77'),
-      [TimelineHighlightType.Hovered]:
-        RendererConvertUtil.hexSRGBToHDRColor('#40ba8d33'),
-      [TimelineHighlightType.ChildrenOfSelected]:
-        RendererConvertUtil.hexSRGBToHDRColor('#40ba8d77'),
+      [TimelineHighlightType.Selected]: [0.8, 0.91, 0.81, 0.7],
+      [TimelineHighlightType.Hovered]: [0.8, 0.91, 0.81, 0.4],
+      [TimelineHighlightType.ChildrenOfSelected]: [0.95, 1, 0.95, 0.2],
     },
     revisionStylesByLayer: {
       [TimelineLayer.APIVersion]: dummyTimelineRevisionStyle,

web/src/app/timeline/components/timeline-corner-indicator.component.html

@@ -25,15 +25,19 @@
       <div class="mode move">Move</div>
     }
   </div>
-  <div
-    class="hint"
-    [style.visibility]="isCurrentScalingMode() ? 'hidden' : 'visible'"
-  >
+  <div class="hint">
     <mat-icon>lightbulb</mat-icon>
-    <p class="hint-message">
-      Hold <span class="shift-key">SHIFT</span> &
-      <span class="scroll"><mat-icon>swap_vert</mat-icon>SCROLL</span> to scale
-      time
-    </p>
+    @if (!isCurrentScalingMode()) {
+      <p class="hint-message">
+        Hold <span class="shift-key">SHIFT</span> &
+        <span class="scroll"><mat-icon>swap_vert</mat-icon>SCROLL</span> to
+        scale time
+      </p>
+    } @else {
+      <p class="hint-message">
+        <span class="scroll"><mat-icon>swap_vert</mat-icon>SCROLL</span> to move
+        time
+      </p>
+    }
   </div>
 </div>

web/src/app/timeline/components/timeline-index.component.scss

@@ -17,14 +17,15 @@
 @use "sass:map";
 @use "sass:color";
 @use "../../common.scss" as common;
-
+@use "@angular/material" as mat;
 @use "../../generated" as gen;
 
 :host {
   display: block;
 }
 
-$tint-base-color: #40ba8d;
+$tint-base-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 50);
+$tint-border-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 600);
 
 $kind-base-color: rgba(63, 81, 181, 1);
 $kind-style: (
@@ -78,6 +79,7 @@ $subresource-style: (
   color: map.get($style, "font-color");
   padding-left: map.get($style, "left-padding");
   font-weight: map.get($style, "font-weight");
+  border-left: 5px dashed transparent;
   .index {
     .sub-label {
       color: map.get($style, "sub-label-color");
@@ -93,7 +95,7 @@ $subresource-style: (
       color.adjust($tint-base-color, $lightness: -30%),
       60%
     );
-    border-left: 5px solid color.adjust($tint-base-color, $lightness: 10%);
+    border-left: 5px solid $tint-border-color;
     .main-name {
       font-weight: 800;
     }
@@ -104,6 +106,7 @@ $subresource-style: (
       $tint-base-color,
       60%
     );
+    border-left: 5px solid color.adjust($tint-border-color, $lightness: 30%);
     .main-name {
       font-weight: 800;
     }
@@ -152,7 +155,6 @@ $subresource-style: (
       padding: 1px 3px;
       border-radius: 3px;
       margin-right: 5px;
-      box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
       font-size: 12px;
     }
     .sub-label {

web/src/app/timeline/components/timeline-legend.component.html

@@ -16,7 +16,11 @@
 
 <div class="container">
   <mat-expansion-panel [(expanded)]="expanded">
-    <mat-expansion-panel-header>Legends</mat-expansion-panel-header>
+    <mat-expansion-panel-header
+      ><div class="header-content">
+        <mat-icon>help</mat-icon>Legend
+      </div></mat-expansion-panel-header
+    >
     @let t = timeline();
     @if (t === null) {
       <ng-container *ngTemplateOutlet="noTimelineSelected"></ng-container>

web/src/app/timeline/components/timeline-legend.component.scss

@@ -21,6 +21,29 @@ $text-color-primary: #333;
 $font-weight-semibold: 600;
 $font-weight-light: 300;
 
+@mixin dashed-border($dash-size, $gap-size, $border-width, $color) {
+  $bg-size: $dash-size + $gap-size;
+  background-image:
+    linear-gradient(to right, $color $dash-size, transparent $dash-size),
+    linear-gradient(to bottom, $color $dash-size, transparent $dash-size),
+    linear-gradient(to right, $color $dash-size, transparent $dash-size),
+    linear-gradient(to bottom, $color $dash-size, transparent $dash-size);
+
+  background-position:
+    top left,
+    top right,
+    bottom left,
+    top left;
+
+  background-size:
+    $bg-size $border-width,
+    $border-width $bg-size,
+    $bg-size $border-width,
+    $border-width $bg-size;
+
+  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
+}
+
 @mixin revision-style-box($revisionColor, $borderThickness) {
   box-sizing: border-box;
   mat-icon {
@@ -57,14 +80,20 @@ $font-weight-light: 300;
       from $revisionColor calc(r * 0.6) calc(g * 0.6) calc(b * 0.6)
     );
     background-color: color-mix(in srgb, $revisionColor, transparent 70%);
-    border: $borderThickness dashed $dark-color;
+    @include dashed-border(2px, 2px, $borderThickness, $dark-color);
   }
 }
 
 :host {
   display: inline-block;
 }
 
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
 .container {
   pointer-events: all;
   @include mat.button-toggle-overrides(

web/src/app/timeline/components/timeline-ruler.component.html

@@ -14,7 +14,12 @@
  limitations under the License.
 -->
 
-<div class="container" #container>
+<div
+  class="container"
+  #container
+  (mouseenter)="mouseEnter()"
+  (mouseleave)="mouseLeave()"
+>
   <canvas class="background-canvas" #backgroundCanvas></canvas>
   <div #overlay class="canvas-overlay">
     @for (label of dateLabels(); track label.offsetX) {

web/src/app/timeline/components/timeline-ruler.component.ts

@@ -23,7 +23,9 @@ import {
   ElementRef,
   inject,
   input,
+  model,
   NgZone,
+  output,
   viewChild,
 } from '@angular/core';
 import { TimelineRulerRenderer as TimelineRulerCanvasRenderer } from './canvas/timeline-ruler-renderer';
@@ -91,6 +93,16 @@ export class TimelineRulerComponent implements AfterViewInit {
    */
   pixelsPerMs = input<number>(1);
 
+  /**
+   * Emits when the scaling mode is changed.
+   */
+  scalingMode = model<boolean>();
+
+  /**
+   * Emits when the ruler is scrolled.
+   */
+  scrollOnRuler = output<WheelEvent>();
+
   /**
    * Computes the positions and text for date labels (e.g., "YYYY/MM/DD") based on the current
    * visible time range, ensuring that day boundaries are correctly labeled.
@@ -160,6 +172,21 @@ export class TimelineRulerComponent implements AfterViewInit {
     this.destroyRef.onDestroy(() => {
       this.resizeObserver?.disconnect();
     });
+
+    this.ngZone.runOutsideAngular(() => {
+      const onWheel = (event: WheelEvent) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        this.scrollOnRuler.emit(event);
+      };
+      this.container()!.nativeElement.addEventListener('wheel', onWheel, {
+        passive: false,
+      });
+      this.destroyRef.onDestroy(() => {
+        this.container()!.nativeElement.removeEventListener('wheel', onWheel);
+      });
+    });
   }
 
   /**
@@ -194,4 +221,12 @@ export class TimelineRulerComponent implements AfterViewInit {
     const day = ('' + date.getUTCDate()).padStart(2, '0');
     return `${year}/${month}/${day}`;
   }
+
+  mouseEnter() {
+    this.scalingMode.set(true);
+  }
+
+  mouseLeave() {
+    this.scalingMode.set(false);
+  }
 }