Further timeline usability tweaks

osu.Game/Screens/Edit/BindableBeatDivisor.cs

@@ -145,18 +145,18 @@ public static Vector2 GetSize(int beatDivisor)
             {
                 case 1:
                 case 2:
-                    return new Vector2(0.6f, 0.9f);
+                    return new Vector2(1, 0.9f);
 
                 case 3:
                 case 4:
-                    return new Vector2(0.5f, 0.8f);
+                    return new Vector2(0.8f, 0.8f);
 
                 case 6:
                 case 8:
-                    return new Vector2(0.4f, 0.7f);
+                    return new Vector2(0.8f, 0.7f);
 
                 default:
-                    return new Vector2(0.3f, 0.6f);
+                    return new Vector2(0.8f, 0.6f);
             }
         }
 

osu.Game/Screens/Edit/Compose/Components/BeatDivisorControl.cs

@@ -526,7 +526,7 @@ public Tick(int divisor, bool alwaysDisplayed)
                     AlwaysDisplayed = alwaysDisplayed;
                     Divisor = divisor;
 
-                    Size = new Vector2(6f, 18) * BindableBeatDivisor.GetSize(divisor);
+                    Size = new Vector2(4, 18) * BindableBeatDivisor.GetSize(divisor);
                     Alpha = alwaysDisplayed ? 1 : 0;
 
                     InternalChild = new Box { RelativeSizeAxes = Axes.Both };

osu.Game/Screens/Edit/Compose/Components/Timeline/CentreMarker.cs

@@ -2,9 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using osu.Framework.Allocation;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Colour;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Overlays;
@@ -14,39 +12,44 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
 {
     public partial class CentreMarker : CompositeDrawable
     {
-        private const float triangle_width = 8;
-
-        private const float bar_width = 1.6f;
-
-        public CentreMarker()
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colours)
         {
+            const float triangle_width = 8;
+            const float bar_width = 2f;
+
             RelativeSizeAxes = Axes.Y;
-            Size = new Vector2(triangle_width, 1);
 
             Anchor = Anchor.TopCentre;
             Origin = Anchor.TopCentre;
-        }
 
-        [BackgroundDependencyLoader]
-        private void load(OverlayColourProvider colours)
-        {
+            Size = new Vector2(triangle_width, 1);
+
             InternalChildren = new Drawable[]
             {
-                new Box
+                new Circle
                 {
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,
                     RelativeSizeAxes = Axes.Y,
                     Width = bar_width,
-                    Blending = BlendingParameters.Additive,
-                    Colour = ColourInfo.GradientVertical(colours.Colour2.Opacity(0.6f), colours.Colour2.Opacity(0)),
+                    Colour = colours.Colour2,
                 },
                 new Triangle
                 {
                     Anchor = Anchor.TopCentre,
                     Origin = Anchor.BottomCentre,
                     Size = new Vector2(triangle_width, triangle_width * 0.8f),
                     Scale = new Vector2(1, -1),
+                    EdgeSmoothness = new Vector2(1, 0),
+                    Colour = colours.Colour2,
+                },
+                new Triangle
+                {
+                    Anchor = Anchor.BottomCentre,
+                    Origin = Anchor.BottomCentre,
+                    Size = new Vector2(triangle_width, triangle_width * 0.8f),
+                    Scale = new Vector2(1, 1),
                     Colour = colours.Colour2,
                 },
             };

osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs

@@ -14,6 +14,7 @@
 using osu.Game.Beatmaps;
 using osu.Game.Configuration;
 using osu.Game.Graphics;
+using osu.Game.Overlays;
 using osu.Game.Rulesets.Edit;
 using osuTK;
 using osuTK.Input;
@@ -24,7 +25,6 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
     public partial class Timeline : ZoomableScrollContainer, IPositionSnapProvider
     {
         private const float timeline_height = 80;
-        private const float timeline_expanded_height = 94;
 
         private readonly Drawable userContent;
 
@@ -78,9 +78,7 @@ public bool AlwaysShowControlPoints
 
         private TimelineTickDisplay ticks = null!;
 
-        private TimelineControlPointDisplay controlPoints = null!;
-
-        private Container mainContent = null!;
+        private TimelineTimingChangeDisplay controlPoints = null!;
 
         private Bindable<float> waveformOpacity = null!;
         private Bindable<bool> controlPointsVisible = null!;
@@ -103,31 +101,34 @@ public Timeline(Drawable userContent)
         }
 
         [BackgroundDependencyLoader]
-        private void load(IBindable<WorkingBeatmap> beatmap, OsuColour colours, OsuConfigManager config)
+        private void load(IBindable<WorkingBeatmap> beatmap, OsuColour colours, OverlayColourProvider colourProvider, OsuConfigManager config)
         {
             CentreMarker centreMarker;
 
             // We don't want the centre marker to scroll
             AddInternal(centreMarker = new CentreMarker());
 
-            ticks = new TimelineTickDisplay
-            {
-                Padding = new MarginPadding { Vertical = 2, },
-            };
-
             AddRange(new Drawable[]
             {
-                controlPoints = new TimelineControlPointDisplay
+                ticks = new TimelineTickDisplay(),
+                new Box
                 {
-                    RelativeSizeAxes = Axes.X,
-                    Height = timeline_expanded_height,
+                    Name = "zero marker",
+                    RelativeSizeAxes = Axes.Y,
+                    Width = TimelineTickDisplay.TICK_WIDTH / 2,
+                    Origin = Anchor.TopCentre,
+                    Colour = colourProvider.Background1,
                 },
-                ticks,
-                mainContent = new Container
+                controlPoints = new TimelineTimingChangeDisplay
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Anchor = Anchor.CentreLeft,
+                    Origin = Anchor.CentreLeft,
+                },
+                new Container
                 {
                     RelativeSizeAxes = Axes.X,
                     Height = timeline_height,
-                    Depth = float.MaxValue,
                     Children = new[]
                     {
                         waveform = new WaveformGraph
@@ -138,16 +139,8 @@ private void load(IBindable<WorkingBeatmap> beatmap, OsuColour colours, OsuConfi
                             MidColour = colours.BlueDark,
                             HighColour = colours.BlueDarker,
                         },
-                        ticks.CreateProxy(),
                         centreMarker.CreateProxy(),
-                        new Box
-                        {
-                            Name = "zero marker",
-                            RelativeSizeAxes = Axes.Y,
-                            Width = 2,
-                            Origin = Anchor.TopCentre,
-                            Colour = colours.YellowDarker,
-                        },
+                        ticks.CreateProxy(),
                         userContent,
                     }
                 },
@@ -192,21 +185,9 @@ protected override void LoadComplete()
             controlPointsVisible.BindValueChanged(visible =>
             {
                 if (visible.NewValue || alwaysShowControlPoints)
-                {
-                    this.ResizeHeightTo(timeline_expanded_height, 200, Easing.OutQuint);
-                    mainContent.MoveToY(15, 200, Easing.OutQuint);
-
-                    // delay the fade in else masking looks weird.
-                    controlPoints.Delay(180).FadeIn(400, Easing.OutQuint);
-                }
+                    controlPoints.FadeIn(400, Easing.OutQuint);
                 else
-                {
                     controlPoints.FadeOut(200, Easing.OutQuint);
-
-                    // likewise, delay the resize until the fade is complete.
-                    this.Delay(180).ResizeHeightTo(timeline_height, 200, Easing.OutQuint);
-                    mainContent.Delay(180).MoveToY(0, 200, Easing.OutQuint);
-                }
             }, true);
         }
 

osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineHitObjectBlueprint.cs

@@ -30,7 +30,7 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
 {
     public partial class TimelineHitObjectBlueprint : SelectionBlueprint<HitObject>
     {
-        private const float circle_size = 38;
+        private const float circle_size = 32;
 
         private Container? repeatsContainer;