Merge pull request #12484 from peppy/timing-screen-ux

Update the design of the editor timing screen

osu.Game/Beatmaps/Timing/TimeSignatures.cs

@@ -1,11 +1,16 @@
 // Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
 // See the LICENCE file in the repository root for full licence text.
 
+using System.ComponentModel;
+
 namespace osu.Game.Beatmaps.Timing
 {
     public enum TimeSignatures
     {
+        [Description("4/4")]
         SimpleQuadruple = 4,
+
+        [Description("3/4")]
         SimpleTriple = 3
     }
 }

osu.Game/Screens/Edit/EditorTable.cs

@@ -9,6 +9,7 @@ using osu.Framework.Input.Events;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
+using osu.Game.Overlays;
 using osuTK.Graphics;
 
 namespace osu.Game.Screens.Edit
@@ -19,7 +20,7 @@ namespace osu.Game.Screens.Edit
 
         protected const float ROW_HEIGHT = 25;
 
-        protected const int TEXT_SIZE = 14;
+        public const int TEXT_SIZE = 14;
 
         protected readonly FillFlowContainer<RowBackground> BackgroundFlow;
 
@@ -93,10 +94,10 @@ namespace osu.Game.Screens.Edit
             private Color4 colourSelected;
 
             [BackgroundDependencyLoader]
-            private void load(OsuColour colours)
+            private void load(OverlayColourProvider colours)
             {
-                hoveredBackground.Colour = colourHover = colours.BlueDarker;
+                hoveredBackground.Colour = colourHover = colours.Background3;
-                colourSelected = colours.YellowDarker;
+                colourSelected = colours.Background1;
             }
 
             private bool selected;

osu.Game/Screens/Edit/RoundedContentEditorScreen.cs

@@ -0,0 +1,61 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Graphics;
+using osu.Game.Overlays;
+
+namespace osu.Game.Screens.Edit
+{
+    public class RoundedContentEditorScreen : EditorScreen
+    {
+        public const int HORIZONTAL_PADDING = 100;
+
+        [Resolved]
+        private OsuColour colours { get; set; }
+
+        [Cached]
+        protected readonly OverlayColourProvider ColourProvider;
+
+        private Container roundedContent;
+
+        protected override Container<Drawable> Content => roundedContent;
+
+        public RoundedContentEditorScreen(EditorScreenMode mode)
+            : base(mode)
+        {
+            ColourProvider = new OverlayColourProvider(OverlayColourScheme.Blue);
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            base.Content.Add(new Container
+            {
+                RelativeSizeAxes = Axes.Both,
+                Padding = new MarginPadding(50),
+                Child = new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Masking = true,
+                    CornerRadius = 10,
+                    Children = new Drawable[]
+                    {
+                        new Box
+                        {
+                            Colour = ColourProvider.Dark4,
+                            RelativeSizeAxes = Axes.Both,
+                        },
+                        roundedContent = new Container
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                        },
+                    }
+                }
+            });
+        }
+    }
+}

osu.Game/Screens/Edit/Setup/SetupScreen.cs

@@ -3,24 +3,12 @@
 
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
-using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
-using osu.Game.Overlays;
 
 namespace osu.Game.Screens.Edit.Setup
 {
-    public class SetupScreen : EditorScreen
+    public class SetupScreen : RoundedContentEditorScreen
     {
-        public const int HORIZONTAL_PADDING = 100;
-
-        [Resolved]
-        private OsuColour colours { get; set; }
-
-        [Cached]
-        protected readonly OverlayColourProvider ColourProvider;
-
         [Cached]
         private SectionsContainer<SetupSection> sections = new SectionsContainer<SetupSection>();
 
@@ -30,28 +18,13 @@ namespace osu.Game.Screens.Edit.Setup
         public SetupScreen()
             : base(EditorScreenMode.SongSetup)
         {
-            ColourProvider = new OverlayColourProvider(OverlayColourScheme.Blue);
         }
 
         [BackgroundDependencyLoader]
         private void load()
         {
-            Child = new Container
+            AddRange(new Drawable[]
             {
-                RelativeSizeAxes = Axes.Both,
-                Padding = new MarginPadding(50),
-                Child = new Container
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Masking = true,
-                    CornerRadius = 10,
-                    Children = new Drawable[]
-                    {
-                        new Box
-                        {
-                            Colour = ColourProvider.Dark4,
-                            RelativeSizeAxes = Axes.Both,
-                        },
                 sections = new SectionsContainer<SetupSection>
                 {
                     FixedHeader = header,
@@ -63,9 +36,7 @@ namespace osu.Game.Screens.Edit.Setup
                         new DifficultySection(),
                     }
                 },
-                    }
+            });
-                }
-            };
         }
     }
 }

osu.Game/Screens/Edit/Setup/SetupScreenHeader.cs

@@ -93,7 +93,7 @@ namespace osu.Game.Screens.Edit.Setup
 
             public SetupScreenTabControl()
             {
-                TabContainer.Margin = new MarginPadding { Horizontal = SetupScreen.HORIZONTAL_PADDING };
+                TabContainer.Margin = new MarginPadding { Horizontal = RoundedContentEditorScreen.HORIZONTAL_PADDING };
 
                 AddInternal(background = new Box
                 {

osu.Game/Screens/Edit/Setup/SetupSection.cs

@@ -33,7 +33,7 @@ namespace osu.Game.Screens.Edit.Setup
             Padding = new MarginPadding
             {
                 Vertical = 10,
-                Horizontal = SetupScreen.HORIZONTAL_PADDING
+                Horizontal = RoundedContentEditorScreen.HORIZONTAL_PADDING
             };
 
             InternalChild = new FillFlowContainer

osu.Game/Screens/Edit/Timing/ControlPointSettings.cs

@@ -6,15 +6,15 @@ using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
-using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
+using osu.Game.Overlays;
 
 namespace osu.Game.Screens.Edit.Timing
 {
     public class ControlPointSettings : CompositeDrawable
     {
         [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
+        private void load(OverlayColourProvider colours)
         {
             RelativeSizeAxes = Axes.Both;
 
@@ -22,7 +22,7 @@ namespace osu.Game.Screens.Edit.Timing
             {
                 new Box
                 {
-                    Colour = colours.Gray3,
+                    Colour = colours.Background4,
                     RelativeSizeAxes = Axes.Both,
                 },
                 new OsuScrollContainer

osu.Game/Screens/Edit/Timing/ControlPointTable.cs

@@ -12,8 +12,8 @@ using osu.Game.Beatmaps.ControlPoints;
 using osu.Game.Extensions;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
+using osu.Game.Screens.Edit.Timing.RowAttributes;
 using osuTK;
-using osuTK.Graphics;
 
 namespace osu.Game.Screens.Edit.Timing
 {
@@ -66,9 +66,7 @@ namespace osu.Game.Screens.Edit.Timing
         {
             var columns = new List<TableColumn>
             {
-                new TableColumn(string.Empty, Anchor.Centre, new Dimension(GridSizeMode.AutoSize)),
+                new TableColumn("Time", Anchor.CentreLeft, new Dimension(GridSizeMode.Absolute, 120)),
-                new TableColumn("Time", Anchor.Centre, new Dimension(GridSizeMode.AutoSize)),
-                new TableColumn(),
                 new TableColumn("Attributes", Anchor.CentreLeft),
             };
 
@@ -77,18 +75,11 @@ namespace osu.Game.Screens.Edit.Timing
 
         private Drawable[] createContent(int index, ControlPointGroup group) => new Drawable[]
         {
-            new OsuSpriteText
-            {
-                Text = $"#{index + 1}",
-                Font = OsuFont.GetFont(size: TEXT_SIZE, weight: FontWeight.Bold),
-                Margin = new MarginPadding(10)
-            },
             new OsuSpriteText
             {
                 Text = group.Time.ToEditorFormattedString(),
                 Font = OsuFont.GetFont(size: TEXT_SIZE, weight: FontWeight.Bold)
             },
-            null,
             new ControlGroupAttributes(group),
         };
 
@@ -128,30 +119,29 @@ namespace osu.Game.Screens.Edit.Timing
 
             private void createChildren()
             {
-                fill.ChildrenEnumerable = controlPoints.Select(createAttribute).Where(c => c != null);
+                fill.ChildrenEnumerable = controlPoints
+                                          .Select(createAttribute)
+                                          .Where(c => c != null)
+                                          // arbitrary ordering to make timing points first.
+                                          // probably want to explicitly define order in the future.
+                                          .OrderByDescending(c => c.GetType().Name);
             }
 
             private Drawable createAttribute(ControlPoint controlPoint)
             {
-                Color4 colour = controlPoint.GetRepresentingColour(colours);
-
                 switch (controlPoint)
                 {
                     case TimingControlPoint timing:
-                        return new RowAttribute("timing", () => $"{60000 / timing.BeatLength:n1}bpm {timing.TimeSignature}", colour);
+                        return new TimingRowAttribute(timing);
 
                     case DifficultyControlPoint difficulty:
-
+                        return new DifficultyRowAttribute(difficulty);
-                        return new RowAttribute("difficulty", () => $"{difficulty.SpeedMultiplier:n2}x", colour);
 
                     case EffectControlPoint effect:
-                        return new RowAttribute("effect", () => string.Join(" ",
+                        return new EffectRowAttribute(effect);
-                            effect.KiaiMode ? "Kiai" : string.Empty,
-                            effect.OmitFirstBarLine ? "NoBarLine" : string.Empty
-                        ).Trim(), colour);
 
                     case SampleControlPoint sample:
-                        return new RowAttribute("sample", () => $"{sample.SampleBank} {sample.SampleVolume}%", colour);
+                        return new SampleRowAttribute(sample);
                 }
 
                 return null;

osu.Game/Screens/Edit/Timing/RowAttribute.cs

@@ -1,33 +1,35 @@
 // Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
 // See the LICENCE file in the repository root for full licence text.
 
-using System;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Cursor;
 using osu.Framework.Graphics.Shapes;
+using osu.Game.Beatmaps.ControlPoints;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
-using osuTK.Graphics;
+using osu.Game.Overlays;
+using osuTK;
 
 namespace osu.Game.Screens.Edit.Timing
 {
-    public class RowAttribute : CompositeDrawable, IHasTooltip
+    public class RowAttribute : CompositeDrawable
     {
-        private readonly string header;
+        protected readonly ControlPoint Point;
-        private readonly Func<string> content;
-        private readonly Color4 colour;
 
-        public RowAttribute(string header, Func<string> content, Color4 colour)
+        private readonly string label;
+
+        protected FillFlowContainer Content { get; private set; }
+
+        public RowAttribute(ControlPoint point, string label)
         {
-            this.header = header;
+            Point = point;
-            this.content = content;
+
-            this.colour = colour;
+            this.label = label;
         }
 
         [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
+        private void load(OsuColour colours, OverlayColourProvider overlayColours)
         {
             AutoSizeAxes = Axes.X;
 
@@ -43,21 +45,45 @@ namespace osu.Game.Screens.Edit.Timing
             {
                 new Box
                 {
-                    Colour = colour,
+                    Colour = overlayColours.Background4,
+                    RelativeSizeAxes = Axes.Both,
+                },
+                Content = new FillFlowContainer
+                {
+                    RelativeSizeAxes = Axes.Y,
+                    AutoSizeAxes = Axes.X,
+                    Direction = FillDirection.Horizontal,
+                    Margin = new MarginPadding { Right = 5 },
+                    Spacing = new Vector2(5),
+                    Children = new Drawable[]
+                    {
+                        new Container
+                        {
+                            RelativeSizeAxes = Axes.Y,
+                            AutoSizeAxes = Axes.X,
+                            Anchor = Anchor.CentreLeft,
+                            Origin = Anchor.CentreLeft,
+                            Children = new Drawable[]
+                            {
+                                new Box
+                                {
+                                    Colour = Point.GetRepresentingColour(colours),
                                     RelativeSizeAxes = Axes.Both,
                                 },
                                 new OsuSpriteText
                                 {
-                    Padding = new MarginPadding(2),
+                                    Anchor = Anchor.CentreLeft,
-                    Anchor = Anchor.Centre,
+                                    Origin = Anchor.CentreLeft,
-                    Origin = Anchor.Centre,
+                                    Padding = new MarginPadding(3),
                                     Font = OsuFont.Default.With(weight: FontWeight.SemiBold, size: 12),
-                    Text = header,
+                                    Text = label,
-                    Colour = colours.Gray0
+                                    Colour = overlayColours.Background5,
                                 },
+                            },
+                        },
+                    },
+                }
             };
         }
-
-        public string TooltipText => content();
     }
 }

osu.Game/Screens/Edit/Timing/RowAttributes/AttributeBubbledWord.cs

@@ -0,0 +1,71 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Beatmaps.ControlPoints;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Overlays;
+
+namespace osu.Game.Screens.Edit.Timing.RowAttributes
+{
+    public class AttributeBubbledWord : CompositeDrawable
+    {
+        private readonly ControlPoint controlPoint;
+
+        private OsuSpriteText textDrawable;
+
+        private string text;
+
+        public string Text
+        {
+            get => text;
+            set
+            {
+                if (value == text)
+                    return;
+
+                text = value;
+                if (textDrawable != null)
+                    textDrawable.Text = text;
+            }
+        }
+
+        public AttributeBubbledWord(ControlPoint controlPoint)
+        {
+            this.controlPoint = controlPoint;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours, OverlayColourProvider overlayColours)
+        {
+            AutoSizeAxes = Axes.X;
+
+            Anchor = Anchor.CentreLeft;
+            Origin = Anchor.CentreLeft;
+
+            Height = 12;
+
+            InternalChildren = new Drawable[]
+            {
+                new Circle
+                {
+                    Colour = controlPoint.GetRepresentingColour(colours),
+                    RelativeSizeAxes = Axes.Both,
+                },
+                textDrawable = new OsuSpriteText
+                {
+                    Anchor = Anchor.CentreLeft,
+                    Origin = Anchor.CentreLeft,
+                    Padding = new MarginPadding(6),
+                    Font = OsuFont.Default.With(weight: FontWeight.SemiBold, size: 12),
+                    Text = text,
+                    Colour = overlayColours.Background5,
+                },
+            };
+        }
+    }
+}

osu.Game/Screens/Edit/Timing/RowAttributes/AttributeProgressBar.cs

@@ -0,0 +1,41 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Game.Beatmaps.ControlPoints;
+using osu.Game.Graphics;
+using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays;
+using osuTK;
+
+namespace osu.Game.Screens.Edit.Timing.RowAttributes
+{
+    public class AttributeProgressBar : ProgressBar
+    {
+        private readonly ControlPoint controlPoint;
+
+        public AttributeProgressBar(ControlPoint controlPoint)
+            : base(false)
+        {
+            this.controlPoint = controlPoint;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours, OverlayColourProvider overlayColours)
+        {
+            Anchor = Anchor.CentreLeft;
+            Origin = Anchor.CentreLeft;
+
+            Masking = true;
+
+            RelativeSizeAxes = Axes.None;
+
+            Size = new Vector2(80, 8);
+            CornerRadius = Height / 2;
+
+            BackgroundColour = overlayColours.Background6;
+            FillColour = controlPoint.GetRepresentingColour(colours);
+        }
+    }
+}

osu.Game/Screens/Edit/Timing/RowAttributes/DifficultyRowAttribute.cs

@@ -0,0 +1,48 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics;
+using osu.Game.Beatmaps.ControlPoints;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+
+namespace osu.Game.Screens.Edit.Timing.RowAttributes
+{
+    public class DifficultyRowAttribute : RowAttribute
+    {
+        private readonly BindableNumber<double> speedMultiplier;
+
+        private OsuSpriteText text;
+
+        public DifficultyRowAttribute(DifficultyControlPoint difficulty)
+            : base(difficulty, "difficulty")
+        {
+            speedMultiplier = difficulty.SpeedMultiplierBindable.GetBoundCopy();
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            Content.AddRange(new Drawable[]
+            {
+                text = new OsuSpriteText
+                {
+                    Anchor = Anchor.CentreLeft,
+                    Origin = Anchor.CentreLeft,
+                    Width = 40,
+                    Font = OsuFont.GetFont(size: EditorTable.TEXT_SIZE, weight: FontWeight.Regular),
+                },
+                new AttributeProgressBar(Point)
+                {
+                    Current = speedMultiplier,
+                }
+            });
+
+            speedMultiplier.BindValueChanged(_ => updateText(), true);
+        }
+
+        private void updateText() => text.Text = $"{speedMultiplier.Value:n2}x";
+    }
+}

osu.Game/Screens/Edit/Timing/RowAttributes/EffectRowAttribute.cs

@@ -0,0 +1,38 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics;
+using osu.Game.Beatmaps.ControlPoints;
+
+namespace osu.Game.Screens.Edit.Timing.RowAttributes
+{
+    public class EffectRowAttribute : RowAttribute
+    {
+        private readonly Bindable<bool> kiaiMode;
+        private readonly Bindable<bool> omitBarLine;
+        private AttributeBubbledWord kiaiModeBubble;
+        private AttributeBubbledWord omitBarLineBubble;
+
+        public EffectRowAttribute(EffectControlPoint effect)
+            : base(effect, "effect")
+        {
+            kiaiMode = effect.KiaiModeBindable.GetBoundCopy();
+            omitBarLine = effect.OmitFirstBarLineBindable.GetBoundCopy();
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            Content.AddRange(new Drawable[]
+            {
+                kiaiModeBubble = new AttributeBubbledWord(Point) { Text = "kiai" },
+                omitBarLineBubble = new AttributeBubbledWord(Point) { Text = "no barline" },
+            });
+
+            kiaiMode.BindValueChanged(enabled => kiaiModeBubble.FadeTo(enabled.NewValue ? 1 : 0), true);
+            omitBarLine.BindValueChanged(enabled => omitBarLineBubble.FadeTo(enabled.NewValue ? 1 : 0), true);
+        }
+    }
+}

osu.Game/Screens/Edit/Timing/RowAttributes/SampleRowAttribute.cs

@@ -0,0 +1,61 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics;
+using osu.Game.Beatmaps.ControlPoints;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+
+namespace osu.Game.Screens.Edit.Timing.RowAttributes
+{
+    public class SampleRowAttribute : RowAttribute
+    {
+        private AttributeBubbledWord sampleText;
+        private OsuSpriteText volumeText;
+
+        private readonly Bindable<string> sampleBank;
+        private readonly BindableNumber<int> volume;
+
+        public SampleRowAttribute(SampleControlPoint sample)
+            : base(sample, "sample")
+        {
+            sampleBank = sample.SampleBankBindable.GetBoundCopy();
+            volume = sample.SampleVolumeBindable.GetBoundCopy();
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            AttributeProgressBar progress;
+
+            Content.AddRange(new Drawable[]
+            {
+                volumeText = new OsuSpriteText
+                {
+                    Anchor = Anchor.CentreLeft,
+                    Origin = Anchor.CentreLeft,
+                    Width = 30,
+                    Font = OsuFont.GetFont(size: EditorTable.TEXT_SIZE, weight: FontWeight.Regular),
+                },
+                progress = new AttributeProgressBar(Point),
+                sampleText = new AttributeBubbledWord(Point),
+            });
+
+            volume.BindValueChanged(vol =>
+            {
+                progress.Current.Value = vol.NewValue / 100f;
+                updateText();
+            }, true);
+
+            sampleBank.BindValueChanged(_ => updateText(), true);
+        }
+
+        private void updateText()
+        {
+            volumeText.Text = $"{volume.Value}%";
+            sampleText.Text = $"{sampleBank.Value}";
+        }
+    }
+}

osu.Game/Screens/Edit/Timing/RowAttributes/TimingRowAttribute.cs

@@ -0,0 +1,45 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Extensions;
+using osu.Framework.Graphics;
+using osu.Game.Beatmaps.ControlPoints;
+using osu.Game.Beatmaps.Timing;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+
+namespace osu.Game.Screens.Edit.Timing.RowAttributes
+{
+    public class TimingRowAttribute : RowAttribute
+    {
+        private readonly BindableNumber<double> beatLength;
+        private readonly Bindable<TimeSignatures> timeSignature;
+        private OsuSpriteText text;
+
+        public TimingRowAttribute(TimingControlPoint timing)
+            : base(timing, "timing")
+        {
+            timeSignature = timing.TimeSignatureBindable.GetBoundCopy();
+            beatLength = timing.BeatLengthBindable.GetBoundCopy();
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            Content.Add(text = new OsuSpriteText
+            {
+                Anchor = Anchor.CentreLeft,
+                Origin = Anchor.CentreLeft,
+                Font = OsuFont.GetFont(size: EditorTable.TEXT_SIZE, weight: FontWeight.Regular),
+            });
+
+            timeSignature.BindValueChanged(_ => updateText());
+            beatLength.BindValueChanged(_ => updateText(), true);
+        }
+
+        private void updateText() =>
+            text.Text = $"{60000 / beatLength.Value:n1}bpm {timeSignature.Value.GetDescription()}";
+    }
+}

osu.Game/Screens/Edit/Timing/Section.cs

@@ -8,8 +8,9 @@ using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Beatmaps.ControlPoints;
-using osu.Game.Graphics;
 using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays;
+using osuTK;
 
 namespace osu.Game.Screens.Edit.Timing
 {
@@ -23,7 +24,7 @@ namespace osu.Game.Screens.Edit.Timing
 
         protected Bindable<T> ControlPoint { get; } = new Bindable<T>();
 
-        private const float header_height = 20;
+        private const float header_height = 50;
 
         [Resolved]
         protected EditorBeatmap Beatmap { get; private set; }
@@ -35,7 +36,7 @@ namespace osu.Game.Screens.Edit.Timing
         protected IEditorChangeHandler ChangeHandler { get; private set; }
 
         [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
+        private void load(OverlayColourProvider colours)
         {
             RelativeSizeAxes = Axes.X;
             AutoSizeDuration = 200;
@@ -46,19 +47,17 @@ namespace osu.Game.Screens.Edit.Timing
 
             InternalChildren = new Drawable[]
             {
-                new Box
-                {
-                    Colour = colours.Gray1,
-                    RelativeSizeAxes = Axes.Both,
-                },
                 new Container
                 {
                     RelativeSizeAxes = Axes.X,
                     Height = header_height,
+                    Padding = new MarginPadding { Horizontal = 10 },
                     Children = new Drawable[]
                     {
                         checkbox = new OsuCheckbox
                         {
+                            Anchor = Anchor.CentreLeft,
+                            Origin = Anchor.CentreLeft,
                             LabelText = typeof(T).Name.Replace(nameof(Beatmaps.ControlPoints.ControlPoint), string.Empty)
                         }
                     }
@@ -72,12 +71,13 @@ namespace osu.Game.Screens.Edit.Timing
                     {
                         new Box
                         {
-                            Colour = colours.Gray2,
+                            Colour = colours.Background3,
                             RelativeSizeAxes = Axes.Both,
                         },
                         Flow = new FillFlowContainer
                         {
-                            Padding = new MarginPadding(10),
+                            Padding = new MarginPadding(20),
+                            Spacing = new Vector2(20),
                             RelativeSizeAxes = Axes.X,
                             AutoSizeAxes = Axes.Y,
                             Direction = FillDirection.Vertical,

osu.Game/Screens/Edit/Timing/TimingScreen.cs

@@ -8,15 +8,14 @@ using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Beatmaps.ControlPoints;
-using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.UserInterface;
-using osu.Game.Screens.Edit.Compose.Components.Timeline;
+using osu.Game.Overlays;
 using osuTK;
 
 namespace osu.Game.Screens.Edit.Timing
 {
-    public class TimingScreen : EditorScreenWithTimeline
+    public class TimingScreen : RoundedContentEditorScreen
     {
         [Cached]
         private Bindable<ControlPointGroup> selectedGroup = new Bindable<ControlPointGroup>();
@@ -26,13 +25,16 @@ namespace osu.Game.Screens.Edit.Timing
         {
         }
 
-        protected override Drawable CreateMainContent() => new GridContainer
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            Add(new GridContainer
             {
                 RelativeSizeAxes = Axes.Both,
                 ColumnDimensions = new[]
                 {
                     new Dimension(),
-                new Dimension(GridSizeMode.Absolute, 200),
+                    new Dimension(GridSizeMode.Absolute, 350),
                 },
                 Content = new[]
                 {
@@ -42,12 +44,7 @@ namespace osu.Game.Screens.Edit.Timing
                         new ControlPointSettings(),
                     },
                 }
-        };
+            });
-
-        protected override void OnTimelineLoaded(TimelineArea timelineArea)
-        {
-            base.OnTimelineLoaded(timelineArea);
-            timelineArea.Timeline.Zoom = timelineArea.Timeline.MinZoom;
         }
 
         public class ControlPointList : CompositeDrawable
@@ -70,7 +67,7 @@ namespace osu.Game.Screens.Edit.Timing
             private IEditorChangeHandler changeHandler { get; set; }
 
             [BackgroundDependencyLoader]
-            private void load(OsuColour colours)
+            private void load(OverlayColourProvider colours)
             {
                 RelativeSizeAxes = Axes.Both;
 
@@ -78,7 +75,7 @@ namespace osu.Game.Screens.Edit.Timing
                 {
                     new Box
                     {
-                        Colour = colours.Gray0,
+                        Colour = colours.Background2,
                         RelativeSizeAxes = Axes.Both,
                     },
                     new OsuScrollContainer
@@ -106,9 +103,9 @@ namespace osu.Game.Screens.Edit.Timing
                             },
                             new OsuButton
                             {
-                                Text = "+",
+                                Text = "+ Add at current time",
                                 Action = addNew,
-                                Size = new Vector2(30, 30),
+                                Size = new Vector2(160, 30),
                                 Anchor = Anchor.BottomRight,
                                 Origin = Anchor.BottomRight,
                             },

osu.Game/Screens/Edit/Verify/VerifyScreen.cs

@@ -7,16 +7,16 @@ using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
-using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays;
 using osu.Game.Rulesets.Edit;
 using osu.Game.Rulesets.Edit.Checks.Components;
 using osuTK;
 
 namespace osu.Game.Screens.Edit.Verify
 {
-    public class VerifyScreen : EditorScreen
+    public class VerifyScreen : RoundedContentEditorScreen
     {
         [Cached]
         private Bindable<Issue> selectedIssue = new Bindable<Issue>();
@@ -32,7 +32,6 @@ namespace osu.Game.Screens.Edit.Verify
             Child = new Container
             {
                 RelativeSizeAxes = Axes.Both,
-                Padding = new MarginPadding(20),
                 Child = new GridContainer
                 {
                     RelativeSizeAxes = Axes.Both,
@@ -70,7 +69,7 @@ namespace osu.Game.Screens.Edit.Verify
             private BeatmapVerifier generalVerifier;
 
             [BackgroundDependencyLoader]
-            private void load(OsuColour colours)
+            private void load(OverlayColourProvider colours)
             {
                 generalVerifier = new BeatmapVerifier();
                 rulesetVerifier = Beatmap.BeatmapInfo.Ruleset?.CreateInstance()?.CreateBeatmapVerifier();
@@ -81,7 +80,7 @@ namespace osu.Game.Screens.Edit.Verify
                 {
                     new Box
                     {
-                        Colour = colours.Gray0,
+                        Colour = colours.Background2,
                         RelativeSizeAxes = Axes.Both,
                     },
                     new OsuScrollContainer