Adjust visuals of tick display (and fine tune some other timeline elements)

osu.Game/Screens/Edit/BindableBeatDivisor.cs

@@ -145,18 +145,18 @@ namespace osu.Game.Screens.Edit
             {
                 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 @@ namespace osu.Game.Screens.Edit.Compose.Components
                     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;
@@ -29,14 +27,13 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
 
             InternalChildren = new Drawable[]
             {
-                new Box
+                new Circle
                 {
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,
                     RelativeSizeAxes = Axes.Y,
                     Width = bar_width,
-                    Blending = BlendingParameters.Additive,
+                    Colour = colours.Colour2,
-                    Colour = ColourInfo.GradientVertical(colours.Colour2.Opacity(0.6f), colours.Colour2.Opacity(0)),
                 },
                 new Triangle
                 {

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

@@ -14,7 +14,9 @@ using osu.Framework.Input.Events;
 using osu.Game.Beatmaps;
 using osu.Game.Configuration;
 using osu.Game.Graphics;
+using osu.Game.Overlays;
 using osu.Game.Rulesets.Edit;
+using osu.Game.Screens.Edit.Components.Timelines.Summary.Visualisations;
 using osuTK;
 using osuTK.Input;
 
@@ -24,7 +26,7 @@ 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 const float timeline_expanded_height = 80;
 
         private readonly Drawable userContent;
 
@@ -103,32 +105,28 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
         }
 
         [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
+            ticks = new TimelineTickDisplay();
-            {
-                Padding = new MarginPadding { Vertical = 2, },
-            };
 
             AddRange(new Drawable[]
             {
-                ticks = new TimelineTickDisplay(),
+                ticks,
                 controlPoints = new TimelineTimingChangeDisplay
                 {
-                    RelativeSizeAxes = Axes.X,
+                    RelativeSizeAxes = Axes.Both,
-                    Height = timeline_expanded_height - timeline_height,
+                    Anchor = Anchor.CentreLeft,
+                    Origin = Anchor.CentreLeft,
                 },
-                ticks,
                 mainContent = new Container
                 {
                     RelativeSizeAxes = Axes.X,
                     Height = timeline_height,
-                    Depth = float.MaxValue,
                     Children = new[]
                     {
                         waveform = new WaveformGraph
@@ -139,19 +137,19 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
                             MidColour = colours.BlueDark,
                             HighColour = colours.BlueDarker,
                         },
-                        ticks.CreateProxy(),
                         centreMarker.CreateProxy(),
-                        new Box
+                        ticks.CreateProxy(),
-                        {
-                            Name = "zero marker",
-                            RelativeSizeAxes = Axes.Y,
-                            Width = 2,
-                            Origin = Anchor.TopCentre,
-                            Colour = colours.YellowDarker,
-                        },
                         userContent,
                     }
                 },
+                new Box
+                {
+                    Name = "zero marker",
+                    RelativeSizeAxes = Axes.Y,
+                    Width = TimelineTickDisplay.TICK_WIDTH / 2,
+                    Origin = Anchor.TopCentre,
+                    Colour = colourProvider.Background1,
+                },
             });
 
             waveformOpacity = config.GetBindable<float>(OsuSetting.EditorWaveformOpacity);
@@ -195,7 +193,7 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
                 if (visible.NewValue || alwaysShowControlPoints)
                 {
                     this.ResizeHeightTo(timeline_expanded_height, 200, Easing.OutQuint);
-                    mainContent.MoveToY(15, 200, Easing.OutQuint);
+                    mainContent.MoveToY(0, 200, Easing.OutQuint);
 
                     // delay the fade in else masking looks weird.
                     controlPoints.Delay(180).FadeIn(400, Easing.OutQuint);

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

@@ -17,6 +17,8 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
 {
     public partial class TimelineTickDisplay : TimelinePart<PointVisualisation>
     {
+        public const float TICK_WIDTH = 3;
+
         // With current implementation every tick in the sub-tree should be visible, no need to check whether they are masked away.
         public override bool UpdateSubTreeMasking() => false;
 
@@ -138,20 +140,15 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
 
                         // even though "bar lines" take up the full vertical space, we render them in two pieces because it allows for less anchor/origin churn.
 
-                        Vector2 size = Vector2.One;
+                        var size = indexInBar == 0
-
+                            ? new Vector2(1.3f, 1)
-                        if (indexInBar != 0)
+                            : BindableBeatDivisor.GetSize(divisor);
-                            size = BindableBeatDivisor.GetSize(divisor);
 
                         var line = getNextUsableLine();
                         line.X = xPos;
 
-                        line.Anchor = Anchor.CentreLeft;
+                        line.Width = TICK_WIDTH * size.X;
-                        line.Origin = Anchor.Centre;
+                        line.Height = size.Y;
-
-                        line.Height = 0.6f + size.Y * 0.4f;
-                        line.Width = PointVisualisation.MAX_WIDTH * (0.6f + 0.4f * size.X);
-
                         line.Colour = colour;
                     }
 
@@ -174,8 +171,15 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
             Drawable getNextUsableLine()
             {
                 PointVisualisation point;
+
                 if (drawableIndex >= Count)
-                    Add(point = new PointVisualisation(0));
+                {
+                    Add(point = new PointVisualisation(0)
+                    {
+                        Anchor = Anchor.CentreLeft,
+                        Origin = Anchor.Centre,
+                    });
+                }
                 else
                     point = Children[drawableIndex];
 

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

@@ -12,7 +12,6 @@ using osu.Game.Beatmaps.ControlPoints;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Screens.Edit.Components.Timelines.Summary.Parts;
-using osu.Game.Screens.Edit.Components.Timelines.Summary.Visualisations;
 using osuTK.Graphics;
 
 namespace osu.Game.Screens.Edit.Compose.Components.Timeline
@@ -122,8 +121,6 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
             [BackgroundDependencyLoader]
             private void load(OsuColour colours)
             {
-                const float corner_radius = PointVisualisation.MAX_WIDTH / 2;
-
                 InternalChildren = new Drawable[]
                 {
                     new Container
@@ -131,7 +128,7 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
                         RelativeSizeAxes = Axes.Both,
                         Colour = Point.GetRepresentingColour(colours),
                         Masking = true,
-                        CornerRadius = corner_radius,
+                        CornerRadius = TimelineTickDisplay.TICK_WIDTH / 2,
                         Child = new Box
                         {
                             Colour = Color4.White,